讓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( '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上傳后獲取鏈接也一樣在網頁中使用。

嫌折騰代碼麻煩，可以使用下面的相關插件：

SVG Support
Enable SVG
Safe SVG（據說該插件可以檢測并去除SVG中的惡意代碼，與250+110有的一拼）
WP SVG images
Easy SVG Support
Enable SVG Uploads
......

關于讓WordPress支持上傳SVG格式圖片并顯示在媒體庫中的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。