在WordPress中使用SVG的 2个有用的插件推荐

327 阅读3分钟

如果你打算在WordPress中使用SVG,有一些小的工作要做。出于公平的原因,WordPress不允许SVG开箱即用。SVG是一种标记语法,它有很多功能,包括加载其他资源和运行JavaScript的能力。所以,如果WordPress在默认情况下一概允许SVG,那么即使是角色相当有限的用户也可以上传SVG并造成问题,比如XSS漏洞。

但是,如果说这对你的网站来说不是一个问题,你只是使用SVG,天哪。首先,让我们明确一下我们所说的在WordPress中使用SVG的意思:通过媒体上传器上传SVG,并在文章内容中使用SVG图片和作为特色图片。

没有什么可以阻止你,比如说,在你的模板中使用SVG。意思是内联<svg> ,或者在你的模板中把SVG文件作为图像从你的CSS或其他什么地方链接起来。那是完全没问题的,你不需要做任何特别的事情就可以在WordPress中工作。

Example of Using SVG in WordPress. the media library is open and shows tile previews of different SVG files.

把事情交给你自己处理

阻止你在WordPress中使用SVG的原因是,媒体库上传器拒绝文件的MIME类型。要在WordPress中允许SVG,你真的只需要这个过滤器。这将在你的functions.php 或一个功能插件中。

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

但之后的问题是,SVG文件通常不会在它需要的各种地方正确显示,比如媒体库的图片预览、特色图片小部件,甚至可能是经典或块状编辑器。我有一段可以注入的CSS,以解决这个问题。但是--这也是我写这篇新文章的原因--这对我来说似乎已经不起作用了,这让我开始思考。

在WordPress中使用SVG的插件

我曾经想,嗯,为什么要这么麻烦,允许这样做的代码太少了,我还不如自己用函数来做。但是,WordPress,当然,有一种随时间变化的方式,而且由于支持SVG并不是WordPress开箱即用的东西,这实际上是一个插件处理的好主意。这样一来,SVG插件就可以随着WordPress的发展来处理一些怪癖,而且,理论上说,如果有足够多的人使用SVG插件,它就会得到维护。

所以,有了这个,这里有几个在WordPress中使用SVG的插件推荐。

SVG支持

这是我最近一直在使用的一个,它对我来说似乎很有效。

Screenshot of the SVG Support plugin for WordPress in the WordPress Plugin Directory.

我只是安装它,激活它,而不做其他事情。它确实有一个设置屏幕,但我不需要任何这些东西。我非常喜欢它询问你是否可以在前端加载额外的CSS(对我来说,不可以,所以我把它关掉了)--尽管更好的是,这个插件可以显示它要加载的内容,这样你就可以在你自己的CSS中添加它。

在WordPress中限制向管理员上传SVG的设置是很聪明的,尽管如果你想对SVG的安全更认真,你可以使用下一个插件...

安全SVG

这个插件已经很多年没有更新了,但是它为SVG的安全做了额外的工作,它在你上传SVG文件的时候对它们进行消毒,甚至在WordPress中添加SVG的时候对它们进行优化。

Screenshot of the Safe SVG plugin in the WordPress Plugin Directory.

在这个网站上,我们对作者等有相当严格的编辑控制,所以这个SVG插件的安全方面对我来说不是一个大问题。另外,我喜欢负责我自己的SVG优化,所以这个插件对我来说并不完美,尽管我可能会把它推荐给在网站所有者层面上缺乏技术专长的网站。


看起来也有Easy SVG Support,但它似乎没有Support SVG插件那么好,而且最近也没有更新,所以我不能推荐这个。

你在WordPress中使用SVG时,成功尝试过哪些插件?有什么建议要补充的吗?