Hur man tillåter SVG-stöd i WordPress

Senaste uppdateringen okt 17, 2021

Innehåll

Vill du ladda upp SVG-bilder till din WordPress-webbplats? WordPress tillåter som standard inte att ladda upp SVG-filer via medieuppladdaren. I den här artikeln visar vi hur SVG-bilder kan laddas upp till WordPress.

SVG (Scalable Vector Graphics) definierar vektorbaserad grafik i XML-format. SVG definierar med andra ord grafik i XML-format. SVG-filer tappar INTE någon kvalitet om de zoomas eller ändras. Dessutom är SVG-filstorleken liten och därför är de populära idag.

När det gäller WordPress, om du försöker ladda upp SVG-bild från medieuppladdaren får du felet som "Tyvärr, den här filtypen är inte tillåten av säkerhetsskäl."

Detta beror på att SVG MIME-typen inte läggs till i standard MIME-typerna som får laddas upp till WordPress. För att få en lista över alla standard MIME-typer kan man använda metoden get_allowed_mime_types(). Denna funktion returnerar arrayen av MIME-typer.

Med det sagt, låt oss se hur man lägger till WordPress-stöd för SVG-fil.

Låt SVG-fil överföras

För att lägga till stöd för SVG-avbildningen använder vi filtret upload_mimessom gör det möjligt att ändra listan över godtagbara filtillägg WordPress. SVG-filtillägget är ‘image / svg + xml’. Så du måste placera under koden i din functions.php-fil.

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

Genom att använda upload_mimesfiltret kan vi också begränsa det specifika filformat som ska laddas upp i WordPress. Låt oss säga att vi inte vill tillåta mp4-filer. I så fall bör vi lägga till koden nedan i functions.php-filen.

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

Så genom att lägga till ovanstående lilla kod, tillåter du att ladda upp SVG-bilder i ett mediebibliotek. Efter att ha laddat upp SVG om du går till listningssidan ser du dock inte miniatyrbilden av din SVG-fil.

För att visa SVG-miniatyren på listningssidan måste vi lägga till en CSS-regel som kan anslutas till WordPress-instrumentpanelen.

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' );

Efter att ha lagt till ovanstående kod i din functions.php-fil ser du SVG-miniatyren.

relaterade artiklar

Inspelningskälla: artisansweb.net