下面由WordPress教程欄目給大家介紹讓W(xué)ordPress支持上傳SVG格式圖片并顯示在媒體庫(kù)中的方法，希望對(duì)需要的朋友有所幫助！

因SVG格式圖片特性，可能會(huì)被插入惡意代碼，網(wǎng)站容易被攻擊，所以出于安全考慮WordPress默認(rèn)不支持SVG格式圖片上傳，另外不像網(wǎng)上說(shuō)SVG格式圖片有那么高的應(yīng)用價(jià)值，除了一些網(wǎng)頁(yè)上的小圖標(biāo)可以使用SVG圖片外，正常的彩色圖片，如果使用SVG格式毫無(wú)優(yōu)勢(shì)可言。不過(guò)有時(shí)還確實(shí)需要這個(gè)SVG圖片比如我主題的LOGO圖片，如果使用PNG圖片在手機(jī)上不是很清晰，采用SVG格式則無(wú)此問(wèn)題。

如何讓W(xué)ordPress支持上傳SVG格式圖片？

可以將下代碼添加當(dāng)前主題函數(shù)模板functions.php中：

讓W(xué)ordPress支持上傳SVG，并只管理員有此權(quán)限

// 只允許管理員上傳SVG圖片 if (current_user_can( 'manage_options' )) { add_filter('upload_mimes', function ($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; }); }

媒體庫(kù)列表模式顯示SVG圖片

// 媒體庫(kù)列表模式顯示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>"; });

網(wǎng)上有很多以上類似的代碼，但都不支持媒體庫(kù)網(wǎng)格模式顯示SVG圖片，下面的代碼可以實(shí)現(xiàn)：

// 媒體庫(kù)網(wǎng)格模式顯示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);

另一個(gè)相對(duì)代碼較少的支持媒體庫(kù)網(wǎng)格模式顯示SVG圖片代碼，不過(guò)如果開(kāi)啟調(diào)試模式會(huì)有錯(cuò)誤提示，但不影響使用。

// 媒體庫(kù)網(wǎng)格模式顯示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);

至于加這個(gè)功能用于什么，那要看你用的主題是否有這個(gè)功能需要了，直接FTP上傳后獲取鏈接也一樣在網(wǎng)頁(yè)中使用。

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

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