So erlauben Sie die SVG-Unterstützung in WordPress

Last updated 18. Oktober 2021

Inhalt

Möchten Sie SVG-Bilder auf Ihre WordPress-Website hochladen? WordPress erlaubt standardmäßig nicht das Hochladen von SVG-Dateien über den Medien-Uploader. In diesem Artikel zeigen wir, wie Sie das Hochladen von SVG-Bildern in WordPress zulassen.

SVG (Scalable Vector Graphics) definiert vektorbasierte Grafiken im XML-Format. Mit anderen Worten, SVG definiert Grafiken im XML-Format. Grafiken von SVG-Dateien verlieren KEINE Qualität, wenn sie gezoomt oder in der Größe geändert werden. Darüber hinaus ist die SVG-Dateigröße klein und daher heutzutage beliebt.

Wenn Sie in WordPress versuchen, ein SVG-Bild aus dem Medien-Uploader hochzuladen, erhalten Sie die Fehlermeldung "Dieser Dateityp ist aus Sicherheitsgründen leider nicht zulässig.".

Dies liegt daran, dass der SVG-MIME-Typ nicht zu den Standard-MIME-Typen hinzugefügt wird, die zum Hochladen in WordPress zugelassen sind. Um die Liste aller Standard-MIME-Typen zu erhalten, kann man die Methode verwenden get_allowed_mime_types(). Diese Funktion gibt das Array der MIME-Typen zurück.

Sehen wir uns jedoch an, wie Sie WordPress-Unterstützung für SVG-Dateien hinzufügen.

Hochladen der SVG-Datei zulassen

Um Unterstützung für SVG-Bilder hinzuzufügen, verwenden wir den Filter, upload_mimesder es ermöglicht, die Liste der akzeptablen Dateierweiterungen WordPress zu ändern. Die SVG-Dateiendung ist ‘image/svg+xml’. Sie müssen also den folgenden Code in Ihre Datei functions.php einfügen.

function add_svg_mime_types($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'add_svg_mime_types');

Durch die Verwendung des upload_mimesFilters können wir auch das spezifische Dateiformat zum Hochladen in WordPress einschränken. Nehmen wir an, wir möchten keine mp4-Dateien zulassen. In diesem Fall sollten wir den folgenden Code in die Datei functions.php einfügen.

function remove_mime_types($mimes) {
    unset($mimes['video/mp4']);
}
add_filter('upload_mimes', 'remove_mime_types');

Durch das Hinzufügen des obigen kleinen Codestücks ermöglichen Sie das Hochladen von SVG-Bildern in eine Medienbibliothek. Wenn Sie jedoch nach dem Hochladen von SVG auf die Auflistungsseite gehen, sehen Sie den Miniaturansichtsabdruck Ihrer SVG-Datei nicht.

Um das SVG-Thumbnail auf der Listing-Seite anzuzeigen, müssen wir eine CSS-Regel hinzufügen, die sich in das WordPress-Dashboard einklinken kann.

function admin_custom_css() {
    echo "<style>table.media .column-title .media-icon img[src='.svg']{
        width: 100%;
        height: auto;
    }</style>";
}
 
add_action( 'admin_head', 'admin_custom_css' );

Nachdem Sie den obigen Code in Ihre Datei functions.php eingefügt haben, sehen Sie das SVG-Miniaturbild.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net