Sokongan SVG WordPress: Cara Mengaktifkan SVG di WordPress

Tutorial ini menerangkan cara menambah sokongan SVG ke WordPress dan mengoptimumkan paparannya dalam perpustakaan media. SVG menawarkan skalabiliti, responsif, dan saiz fail yang lebih kecil berbanding dengan imej raster, tetapi WordPress, kerana kebimbangan keselamatan mengenai suntikan JavaScript yang berpotensi, tidak menyokong mereka.

Mengapa WordPress tidak menyokong SVGS (secara lalai):

Isu teras adalah keselamatan. Tidak seperti imej raster, SVGs berasaskan vektor dan berpotensi mengandungi JavaScript yang berniat jahat, menimbulkan risiko jika dimuat naik oleh pengguna dengan tahap akses yang berbeza-beza.

Mengaktifkan SVG Uploads: Untuk menambah sokongan SVG, ubah suai penapis

menggunakan tema kanak -kanak

atau plugin tersuai: upload_mimes Kod ini menambah 'svg' dengan jenis mime ke jenis fail yang dibenarkan. functions.php

function add_svg_upload_support($file_types){
    $new_filetypes = array('svg' => 'image/svg+xml');
    return array_merge($file_types, $new_filetypes);
}
add_filter('upload_mimes', 'add_svg_upload_support');

Meningkatkan paparan SVG di perpustakaan media:

paparan lalai WordPress SVGs dalam paparan grid adalah suboptimal. Untuk memperbaiki ini, gunakan JavaScript dan Ajax dengan pemerhati mutasi untuk mengemas kini pratonton secara dinamik. Ini melibatkan mewujudkan fungsi Ajax tersuai untuk mengambil URL SVG dan menggantikan pemegang tempat lalai dengan imej SVG sebenar. Pelarasan CSS Admin juga diperlukan untuk memastikan paparan yang betul di bahagian yang berlainan dari Admin WordPress.

Tweak CSS Admin: Untuk mengelakkan SVG daripada runtuh kerana atribut ketinggian/lebar yang hilang, tambahkan CSS ini:

Ini memastikan paparan yang betul dalam pandangan grid dan lajur perpustakaan media, serta di bahagian depan.

table.media .column-title .media-icon img[src*='.svg'],
img[src*='.svg'] {
    width: 100%;
    height: auto;
}

Pendekatan komprehensif ini memastikan pengurusan dan paparan SVG yang lebih baik dalam WordPress, meningkatkan pengalaman pengguna. Ingatlah untuk mempertimbangkan implikasi keselamatan dan berpotensi menggunakan plugin yang membersihkan SVG yang dimuat naik untuk perlindungan tambahan.

Atas ialah kandungan terperinci Sokongan SVG WordPress: Cara Mengaktifkan SVG di WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!