如何让WordPress支持上传SVG格式图片并显示在媒体库中-WordTekan-php.cn

如何让WordPress支持上传SVG格式图片并显示在媒体库中

藏色散人

Lepaskan： 2020-12-09 13:53:05

ke hadapan

2560 orang telah melayarinya

下面由WordPress教程栏目给大家介绍让WordPress支持上传SVG格式图片并显示在媒体库中的方法，希望对需要的朋友有所帮助！

如何让WordPress支持上传SVG格式图片并显示在媒体库中

因SVG格式图片特性，可能会被插入恶意代码，网站容易被攻击，所以出于安全考虑WordPress默认不支持SVG格式图片上传，另外不像网上说SVG格式图片有那么高的应用价值，除了一些网页上的小图标可以使用SVG图片外，正常的彩色图片，如果使用SVG格式毫无优势可言。不过有时还确实需要这个SVG图片比如我主题的LOGO图片，如果使用PNG图片在手机上不是很清晰，采用SVG格式则无此问题。

如何让WordPress支持上传SVG格式图片？

可以将下代码添加当前主题函数模板functions.php中：

让WordPress支持上传SVG，并只管理员有此权限

// 只允许管理员上传SVG图片
if (current_user_can( &#39;manage_options&#39; )) {
add_filter(&#39;upload_mimes&#39;, function ($mimes) {
$mimes[&#39;svg&#39;] = &#39;image/svg+xml&#39;;
return $mimes;
});
}

Salin selepas log masuk

媒体库列表模式显示SVG图片

// 媒体库列表模式显示SVG图片
add_action(&#39;admin_head&#39;, function () {
echo "<style>table.media .column-title .media-icon img[src*=&#39;.svg&#39;]{width: 100%;height: auto;}.components-responsive-wrapper__content[src*=&#39;.svg&#39;] {position: relative;}</style>";
});

Salin selepas log masuk

网上有很多以上类似的代码，但都不支持媒体库网格模式显示SVG图片，下面的代码可以实现：

// 媒体库网格模式显示SVG图片
function zm_display_svg_media($response, $attachment, $meta){
if($response[&#39;type&#39;] === &#39;image&#39; && $response[&#39;subtype&#39;] === &#39;svg+xml&#39; && class_exists(&#39;SimpleXMLElement&#39;)){
try {
$path = get_attached_file($attachment->ID);
if(@file_exists($path)){
$svg                = new SimpleXMLElement(@file_get_contents($path));
$src                = $response[&#39;url&#39;];
$width              = (int) $svg[&#39;width&#39;];
$height             = (int) $svg[&#39;height&#39;];
$response[&#39;image&#39;]  = compact( &#39;src&#39;, &#39;width&#39;, &#39;height&#39; );
$response[&#39;thumb&#39;]  = compact( &#39;src&#39;, &#39;width&#39;, &#39;height&#39; );
 
$response[&#39;sizes&#39;][&#39;full&#39;] = array(
&#39;height&#39;        => $height,
&#39;width&#39;         => $width,
&#39;url&#39;           => $src,
&#39;orientation&#39;   => $height > $width ? &#39;portrait&#39; : &#39;landscape&#39;,
);
}
}
catch(Exception $e){}
}
return $response;
}
add_filter(&#39;wp_prepare_attachment_for_js&#39;, &#39;zm_display_svg_media&#39;, 10, 3);

Salin selepas log masuk

另一个相对代码较少的支持媒体库网格模式显示SVG图片代码，不过如果开启调试模式会有错误提示，但不影响使用。

// 媒体库网格模式显示SVG图片
function zm_svg_metadata($data, $post_id) {
$data = array(
&#39;sizes&#39; => array(
&#39;large&#39; => array(
&#39;file&#39; => pathinfo(wp_get_attachment_url($post_id), PATHINFO_BASENAME)
)
)
);
return $data;
}
add_filter(&#39;wp_get_attachment_metadata&#39;, &#39;zm_svg_metadata&#39;, 10, 2);

Salin selepas log masuk

至于加这个功能用于什么，那要看你用的主题是否有这个功能需要了，直接FTP上传后获取链接也一样在网页中使用。

嫌折腾代码麻烦，可以使用下面的相关插件：

SVG Support
Enable SVG
Safe SVG（据说该插件可以检测并去除SVG中的恶意代码，与250+110有的一拼）
WP SVG images
Easy SVG Support
Enable SVG Uploads
......

Salin selepas log masuk

Atas ialah kandungan terperinci 如何让WordPress支持上传SVG格式图片并显示在媒体库中. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!