So stellen Sie sicher, dass WordPress das Hochladen von Bildern im SVG-Format und deren Anzeige in der Medienbibliothek unterstützt

Im folgenden Abschnitt der Kolumne „WordPress-Tutorial“ erfahren Sie, wie Sie WordPress aktivieren, um das Hochladen von Bildern im SVG-Format und deren Anzeige in der Medienbibliothek zu unterstützen.

Aufgrund der Eigenschaften von Bildern im SVG-Format kann schädlicher Code eingefügt werden und die Website wird aus Sicherheitsgründen nicht standardmäßig unterstützt Nicht so beliebt wie das Internet sagt, dass Bilder im SVG-Format weit verbreitet sind. Abgesehen von einigen kleinen Symbolen auf Webseiten, die SVG-Bilder verwenden können, bietet es überhaupt keinen Vorteil, wenn Sie das SVG-Format für normale Farbbilder verwenden. Manchmal benötigen Sie dieses SVG-Bild jedoch wirklich, z. B. das LOGO-Bild meines Themas. Wenn das PNG-Bild auf dem Mobiltelefon nicht sehr klar ist, tritt dieses Problem bei Verwendung des SVG-Formats nicht auf.

Wie kann WordPress das Hochladen von Bildern im SVG-Format unterstützen?

Sie können den folgenden Code zur aktuellen Theme-Funktionsvorlage „functions.php“ hinzufügen:

Lassen Sie WordPress das Hochladen von SVG unterstützen, und nur Administratoren haben diese Berechtigung

// 只允许管理员上传SVG图片
if (current_user_can( 'manage_options' )) {
add_filter('upload_mimes', function ($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
});
}

SVG-Bilder im Medienbibliothekslistenmodus anzeigen

// 媒体库列表模式显示SVG图片
add_action('admin_head', function () {
echo "<style>table.media .column-title .media-icon img[src*=&#39;.svg&#39;]{width: 100%;height: auto;}.components-responsive-wrapper__content[src*=&#39;.svg&#39;] {position: relative;}</style>";
});

Es gibt viele ähnliche diejenigen im Internet-Code, aber keiner von ihnen unterstützt die Anzeige von SVG-Bildern im Medienbibliotheks-Rastermodus. Der folgende Code kann implementiert werden:

// 媒体库网格模式显示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);

Ein anderer Code mit relativ weniger Code unterstützt die Anzeige von SVG-Bildern im Medienbibliotheks-Raster Modus, aber es treten Fehler auf, wenn der Debug-Modus aktiviert ist. Tipps haben jedoch keinen Einfluss auf die Verwendung.

// 媒体库网格模式显示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);

Der Zweck dieser Funktion hängt davon ab, ob das von Ihnen verwendete Theme über diese Funktion verfügt. Sie können sie auch auf der Webseite verwenden, um den Link abzurufen, nachdem Sie ihn direkt per FTP hochgeladen haben.

Wenn Sie Schwierigkeiten haben, mit dem Code herumzuspielen, können Sie die folgenden verwandten Plug-Ins verwenden:

SVG Support
Enable SVG
Safe SVG（据说该插件可以检测并去除SVG中的恶意代码，与250+110有的一拼）
WP SVG images
Easy SVG Support
Enable SVG Uploads
......

Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass WordPress das Hochladen von Bildern im SVG-Format und deren Anzeige in der Medienbibliothek unterstützt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!