WordPress教程
WordPress支持上传SVG图片并显示在媒体库中
PetitQ
收藏
因 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'] = 'image/svg+xml';
return $mimes;
});
}
媒体库列表模式显示 SVG 图片
// 媒体库列表模式显示SVG图片add_action('admin_head', function () {
echo "<style>table.media .column-title .media-icon img[src*='.svg']{width: 100%;height: auto;}.components-responsive-wrapper__content[src*='.svg'] {position: relative;}</style>";
});
网上有很多以上类似的代码，但都不支持媒体库网格模式显示 SVG 图片，下面的代码可以实现：
// 媒体库网格模式显示SVG图片function zm_display_svg_media($response, $attachment, $meta){
if($response['type'] === 'image' && $response['subtype'] === 'svg+xml' && class_exists('SimpleXMLElement')){
try {$path = get_attached_file($attachment->ID);
if(@file_exists($path)){
$svg = new SimpleXMLElement(@file_get_contents($path));
$src = $response['url'];
$width = (int) $svg['width'];
$height = (int) $svg['height'];
$response['image'] = compact( 'src', 'width', 'height' );
$response['thumb'] = compact( 'src', 'width', 'height' );
$response['sizes']['full'] = array(
'height' => $height,
'width' => $width,
'url' => $src,
'orientation' => $height > $width ? 'portrait' : 'landscape',
);
}}catch(Exception $e){}
}return $response;
}add_filter('wp_prepare_attachment_for_js', 'zm_display_svg_media', 10, 3);
另一个相对代码较少的支持媒体库网格模式显示 SVG 图片代码，不过如果开启调试模式会有错误提示，但不影响使用。
// 媒体库网格模式显示SVG图片function zm_svg_metadata($data, $post_id) {
$data = array(
'sizes' => array(
'large' => array(
'file' => pathinfo(wp_get_attachment_url($post_id), PATHINFO_BASENAME)
)));
return $data;
}add_filter('wp_get_attachment_metadata', 'zm_svg_metadata', 10, 2);
至于加这个功能用于什么，那要看你用的主题是否有这个功能需要了，直接 FTP 上传后获取链接也一样在网页中使用。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
