آموزش آپلود تصاویر SVG در وردپرس

SVG یا Scalable Vector Graphics فایل های گرافیکی مقیاس پذیری هستند که در فرمت و قالب XML ذخیره می شوند، اگر این فایل ها را تغییر اندازه یا بزرگنمایی کنید به هیچ عنوان کیفیت خود را از دست نخواهند داد، علاوه بر این SVG ها بسیار کم حجم بوده و همین مزایا باعث شده است که از محبوبیت بالایی برخوردار باشد.

اما وردپرس به صورت پیش فرض اجازه آپلود یا بارگذاری فایل هایی با پسوند SVG را در اختیارتان قرار نمی دهد و خطای تصویر زیر نشان داده خواهد شد.

خطای آپلود فایل svg در وردپرس

خطای فوق در کنار اهمیت به مسائل امنیتی به این دلیل است که فرمت SVG در لیست فرمت های از پیش تعریف شده(jpg ،png ،gif) رسانه(Media Uploader) وردپرس وجود ندارد، برای بدست آوردن این لیست پیش فرض می توانید از تابع ()get_allowed_mime_types استفاده کنید.

بارگذاری فایل SVG

برای تغییر رفتار وردپرس و پشتیبانی از فایل های SVG فیلتر upload_mimes را به صورت زیر در فایل functions.php قرار دهید.

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

 

اما upload_mimes کاربردهای دیگری هم دارد و می توانید محدودیت های موردنیاز خود را بر روی انواع فرمت ها پیاده سازی کنید، به عنوان مثال کد زیر مانع آپلود فایل های png و mp4 می شود.

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

 

هنوز یک کار دیگر باقی مانده است، رسانه وردپرس در مد “نمایش لیستی” تصویر کوچک شده یا بندانگشتی فایل SVG را نشان نمی دهد.

تصویر بند انگشتی svg در رسانه وردپرس

برای حل مشکل فوق کافی است نمونه کد زیر را به فایل functions.php اضافه کنید.

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

نتیجه نهایی در تصویر زیر نشان داده شده است.

فعال سازی svg در وردپرس

کار تمام است، امیدواریم این مطلب آموزشی برای شما مفید بوده باشد.

نظرات و سوالات کاربران

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *