（WordPress教程）纯代码实现SVG图片上传并显示在媒体库中

2023-09-01 0 950

前言：

汇站首页轮播图片就是 SVG 格式，整站相对来说也用了 SVG 格式好几张，但是由于 SVG 格式图片的特性，可能会被插入恶意代码，从而导致网站容易受到攻击。因此，为了保证安全性，WordPress 默认不支持上传 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);