Як дозволити підтримку SVG в WordPress

Останнє оновлення Жов 17, 2021

Зміст

Ви хочете завантажити зображення SVG на свій веб-сайт WordPress? WordPress за замовчуванням не дозволяє завантажувати файли SVG за допомогою засобу завантаження медіа. У цій статті ми показуємо, як дозволити завантажувати зображення SVG у WordPress.

SVG (масштабована векторна графіка) визначає векторну графіку у форматі XML. Іншими словами, SVG визначає графіку у форматі XML. Графіка файлів SVG НЕ втрачає жодної якості, якщо їх збільшити або змінити. Крім того, розмір файлу SVG невеликий, і тому вони популярні сьогодні.

Якщо мова йде про WordPress, якщо ви спробуєте завантажити зображення SVG із завантажувача мультимедіа, ви отримаєте повідомлення про помилку: "Вибачте, цей тип файлу не дозволяється з міркувань безпеки."

Це пов’язано з тим, що тип SVG MIME не додається до стандартних типів MIME, дозволених для завантаження у WordPress. Щоб отримати список усіх типів MIME за замовчуванням, можна скористатися методом get_allowed_mime_types(). Ця функція повертає масив типів MIME.

З огляду на це, давайте подивимось, як додати підтримку WordPress для файлу SVG.

Дозволити завантажувати файл SVG

Щоб додати підтримку зображення SVG, ми використовуємо фільтр, upload_mimesякий дозволяє змінити список допустимих розширень файлів WordPress. Розширення SVG-файлів – ‘image / svg + xml’. Отже, вам потрібно розмістити код нижче у вашому файлі functions.php.

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

За допомогою upload_mimesфільтра ми також можемо обмежити певний формат файлу для завантаження в WordPress. Скажімо, ми не хочемо дозволяти файли mp4. У цьому випадку ми повинні додати наведений нижче код у файл functions.php.

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

Отже, додавши вищезгаданий фрагмент коду, ви дозволите завантажувати зображення SVG у медіатеку. Однак після завантаження SVG, якщо ви перейдете на сторінку списку, ви не побачите відбитка вашого файлу SVG.

Щоб відобразити ескіз SVG на сторінці списку, нам потрібно додати правило CSS, яке може підключитися до інформаційної панелі WordPress.

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

Після додавання вищевказаного коду у файл functions.php ви побачите ескіз SVG.

Пов’язані статті

Джерело запису: artisansweb.net