WordPress支持上传SVG图片并显示在媒体库中

WordPress教程
22年9月9日
编辑

Joker织梦开发者

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

如何让 WordPress 支持上传 SVG 格式图片？可以将下代码添加当前主题函数模板 functions.php 中，让 WordPress 支持上传 SVG，并只管理员有此权限

// 只允许管理员上传SVG图片
if (current_user_can( 'manage_options' )) {
add_filter('upload_mimes', function ($mimes) {
$mimes['svg'] =L 6 W ? # X 'image/svg+xml';
returi P ^ j -n $mimes;
});
}

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

// 媒M ` a H U k体库列表模式显示SVG图片
add_action('admin_head', function () {
echo "<style>table.medil ) n * Fa .column-title .media-ico: o N P 8 Sn img[src*='.svg']{width: 100%;height: auto;}.components-respB H yonsive-wrapper__content[src*='.svg'] {position: relative;}</style>";
});

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

// 媒体库网格模式显示SVG图片
function zm_display_svg_media($r7 8 {esponse, $attachment, $met! ~ _ % = W X ; Ja){
if($response['type'] === 'image' && $response['subtype'&z 9 M p#93; === 'svg+xml' && class_exists^ ^ ? F & ^ s0;'SimpleXMLElement')@ 7 M ^41;{
try {
$path = get_attacheF A d 3 9 o 5 +d_file($attachment->ID);
if&t 6 [ A @#40;@file_exists($path)&a u l T ? , )#41;{
$svg = new SimpleXMLEli ` g ` |ement(@file_get_contents($path));
$src = $responsev d H['url'];
$width = (= H 3 ) W j t Sint) $svg['width'];
$height = (int) $svg['height'];
$response['image'] = compact( 'src', 'width', 'height' );
$response['thumb'] = compact( 'src', 'width', 'height' );
$response['sizesS ? ( 8 [ r m']['full'] = array(
'height' => $height,
'width' => $width,
'url' => $src,
'orientation' => $height &g\ k n { w : V 6t; $width ? 'portrait' : 'landscape',
);
}
}
catch(ExceptionV : - f $e){&^ } !#t a c ~125;
}
rD | _eturnv c ~ 4 f Z ) / $response;
}^ d 4 T
add_filter('wp_prep4 E * b Y Uar7 \ 4e_attachmen} . J A Z K yt_for_js', 'zm_display_svg_media', 10, 3);

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

// 媒体库网格模式显示SVG图片
function zm_svg_metadata($data, $N k E + 6 9 zpost_id) {
$data = array(
'Q ` $ l X $ 0siM = 0 o Gzes' => array(
'large' => array(
'fi\ p & p 7 & tle' => pathinfo(4 ? Ewp_get_attachment_ua ] C U ? , ( s 4rl($post_id), PATHINFO_BASENAME)
)
)/ 4 O D j O l J :;
);
return $data;
}
add_filter&x - _ k ; m u \ K#40;'wp_get_atI Q 7 L R B Htachment_N ? Dmetadata', 'zm_svg_met$ s l n n Tadata', 10, 2);