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

آپلود 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 در وردپرس

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

برچسب ها
سعید یاورنیا 118 نوشته 130 دیدگاه

توسعه دهنده PHP و Wordpress
توسعه وب سایت یکی از کارهایی است که تلاش می کنم تخصصم رو در اون بالا ببرم، یادگیری تکنولوژی های جدید یکی از چالش هایی است که به شدت به آن علاقمند هستم.

دیدگاه ‌ها

  • احمدرضا ۱۶ آبان ۱۳۹۹ - ۱۴:۳۶

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

    بسیار سپاس گذارم از جناب یاورنیا ی عزیز.

    • سعید یاورنیا ۱۶ آبان ۱۳۹۹ - ۱۵:۳۵

      درود بر شما احمدرضای عزیز، خیلی از کارها رو در وردپرس میشه بدون نصب افزونه جانبی انجام داد و واقعا نیازی نیست برای هر مسئله کوچکی پلاگین نصب کرد، خوشحالم که این آموزش برای شما مفید بوده.

دیدگاهتان را بنویسید.

نشانی ایمیل شما منتشر نخواهد شد، بخش‌های موردنیاز با * مشخص شده‌اند.