آپلود فایل SVG در وردپرس به دو روش

آخرین بروز رسانی در : 2023/12/11

وردپرس به کاربران خود این اجازه را می دهد تا انواع فایل های تصویری مختلف را بتوانند آپلود و بارگزاری کنند . فرمت هایی مثل JPG یا PNG و GIF از این قبل فایلهای تصویر می باشند . اما نمایش فرمت های دیگری مانند SVG به راحتی امکان پذیر نیست و باید از روش های مختلف برای این کار استفاده کرد .

خوشبختانه چند راه برای امکان افزودن فایل SVG در وب سایت وردپرسی شما امکان پذیر می باشد . در این مطلب ما در مورد اینکه فایل های SVG چیست و چرا ممکن است بخواهید از آن استفاده کنید توضیح داده ایم . همچنین به دو روش مختلف امکان آپلود فایل SVG در وردپرس را به شما شرح داده ایم . پس تا انتهای مطلب با ما همراه باشید .

SVG چیست؟

فایل های SVG یک نوعی از تصاویر وکتور یا همان بُرداری گفته می شود . فایلهای SVG به نسبت فرمت های دیگر مثل JPG یا PNG متفاوت ایجاد می شوند . به عنوان مثال یک عکس با فرمت JPG از هزاران پیکسل تشکیل شده اما یک تصویر با فرمت SVG اینگونه نمی باشد .

تصاویر وکتور یا همان SVG شبیه به مجموعه از دستورالعمل ها نوشته شده است ، آنها حاوی پیکسل نیستند در عوض آنها شامل مجموعه از داده های اسکیما ( schema-like ) هستند که یک تصویر دو بعدی را ایجاد می کنند . این بدین معنا می باشد که استفاده از تصاویر SVG می تواند دارای مزیت های منحصر به فردی همچون حجم کم و کیفیت بالا دارد .

نمونه از کدهای تشکیل دهنده یک تصویر SVG
نمونه از کدهای تشکیل دهنده یک تصویر SVG

چرا باید از تصاویر SVG استفاده کنیم ؟

تصاویر SVG دارای چندین امتیاز هستند . از آنجایی که آنها بسیار مقیاس پذیر می باشند می توانید اندازه مورد نیاز را بدون تاثیر در کیفیت تصویر آن دستکاری کنید . مطمئنن این موضوع را می دانید که اگر بخواهید تصاویر با فرمت JPG یا PNG یا تغییر اندازه دهید کیفیت تصاویر مطمئنن کاهش می یابد و بعضا قابل استفاده نمی باشد . اینجاست که فرمت SVG می تواند مفید واقع شود . نکته مهم در اینجاست که SVG برای نمایش تصاویر عکاسی شده مثل مناظر و تصاویر Stock مناسب نمی باشند بلکه برای لوگو ، نماد ها ، گرافیک های ساده دو بعدی در وب سایت مناسب می باشند .

علاوه بر این فایل های SVG حجم آنها بسیار کمتر از سایر تصاویر گرافیکی می باشد . این بدین معنا است که با مشکل گرافیک سنگین گرفتار نمی شود و نکته خوب این موضوع این است که فایل هایی با فرمت SVG درون Google هم ایندکس می شوند و این می تواند یک امتیاز خوب برای بهینه سازی سایت شما در موتورهای جستجو باشد .

نحوه آپلود فایل SVG در وردپرس

از آنجایی که تا این لحظه یعنی نسخه 6.1.1 وردپرس از فرمت SVG پشتیبانی نمی کند شما باید کمی برای این موضوع تلاش کنید . در این بخش ما قرار هست که به شما دو روش آپلود فایل SVG در وردپرس را توضیح دهیم . یکی از طریق پلاگین و دیگری از طریق فرایند کدنویسی .

یکی از معایب استفاده از فایلهای SVG و می توان گفت تنها دلیل که تا حالا قابلیت آپلود فایل SVG در وردپرس وجود نداشته مشکلات امنیتی آن می باشد چرا که SVG ترکیبی از یک فایل XML می باشد .

اگر با بحث افزودن امکانات خاص از طریق کدنویسی به در سایت وردپرسی مشکلی دارید حتما پیشنهاد می کنم که مقاله زیر را مطالعه کنید :

3 روش برای اضافه کردن کد آماده به وردپرس

روش اول – استفاده از پلاگین های آماده

مانند بسیاری از افزونه های مختلف وردپرس ، در این مورد هم افزونه وجود دارد که شما با نصب و فعال سازی آن براحتی می توانید فایل SVG را درون وردپرس بارگزاری کنید . تنها کاری که باید انجام دهید در این روش ، این است که افزونه مناسب را انتخاب کرده و بخش تنظیمات آن را بروز رسانی کنید و در نهایت از آپلود فایل SVG در وردپرس لذت ببرید !

مرحله اول : افزونه را دانلود کنید : ابتدا شما باید یک افزونه SVG را دانلود و نصب کنید . پیشنهاد ما استفاده از افزونه SVG Support می باشد که به صورت رایگان در مخزن وردپرس قرار دارد .

پلاگین SVG Support برای آپلود فایل SVG در وردپرس
پلاگین SVG Support برای آپلود فایل SVG در وردپرس

هنگامی که افزونه را نصب و فعال کردید ، در بخش داشبورد ادمین وردپرس خود وارد منوی تنظیمات شده و گزینه SVG Support را کلیک می کنید . در این قسمت تنظیمات و دستور العمل هایی در مورد نحوه استفاده فایل های SVG برای سایت شما قرار داده شده است .

علاوه بر این می توانید تنظیمات مهم برای پیکره بندی انجام دهید که این شامل محدود کردن امتیازات مربوط به آپلود فایل SVG توسط مدیر یا اعضاء می باشد .

مرحله دوم : انجام تنظیمات امنیتی برای استفاده از این افزونه :

یکی از معایب اصلی عدم پشتیبانی فایل های SVG توسط وردپرس مشکل امنیتی این نوع فایل ها می باشد . چرا که یک فایل SVG ساخته شده از مجموعه دستورات XML می باشد در برابر حملات External Entity ممکن است آسیب پذیر باشد .

وقتی افزونه SVG را نصب و فعال کردید به بخش پیکره بندی یا تنظیمات آن وارد شده و در این قسمت می توانید دسترسی آپلود فایل SVG در وردپرس را فقط به مدیران محدود کنید . با این حال یک رویکرد حتی امن تر هم وجود دارد که شما می توانید فایل های SVG را قبل از بارگزاری در سایت خود توسط یک ادیتور متن مثل notepad یا notepad++ باز کرده و کدهای xml غیر ضروری آن را که ممکن است سایت شما را در معرض حملات باز نگه دارد حذف کنید .

روش دوم – استفاده از کدنویسی

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

نکته مهم : همیشه قبل از قرار دادن کدهای مختلف درون قالب یا افزونه خود از آن یک بک آپ به صورت فرمت zip تهیه کنید تا در صورت به وجود آمدن مشکل امکان بازگردانی آن فراهم باشید.

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

ما در این روش با اضافه کردن کدهای PHP درون فایل functions.php قالب خودمان این کار را انجام می دهیم .

مرحله 1: فایل Functions.php قالب خود را ویرایش کنید : برای شروع، باید فایل functions.php پوسته خود را ویرایش کنید . برای انجام این کار، می توانید در داشبورد ادمین خود به بخش نمایش > ویرایشگر پرونده پوسته بروید و فایل functions.php که با عنوان توابع پوسته مشخص است را انتخاب کنید ، حتی می توانید از طریق FTP و یا بخش File Manager هاست خود هم به این فایل دسترسی داشته باشید .

مرحله 2: یک قطعه کد اضافه کنید : در این مرحله باید یک قطعه کد زیر را به فایل functions.php خود اضافه کرده و بروی ذخیره کلیک کنید .

add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
  $filetype = wp_check_filetype( $filename, $mimes );
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
}, 10, 4 );
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

دقت کنید که کد بالا درون بلاک PHP باشد ( یعنی درون دستور <?php قرار گیرد ) . پس از آن، می توانید تصاویر SVG را در کتابخانه رسانه خود آپلود کنید. در آنجا، می‌توانید مانند سایر انواع فایل‌های تصویری، آنها را مشاهده کرده و با آنها تعامل داشته باشید.

نتیجه گیری کلی

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

امیدواریم که از این مقاله استفاده کرده باشید و در مورد مزایا و خطرات آپلود فایل SVG در وب سایت خود آگاه شده باشید . موفق باشید 🌸

5/5 - (1 امتیاز)
مهدی طیبی

مهدی طیبی مدیر وب سایت‌ آروا وردپرس ، کارشناس فناوری اطلاعات و متخصص در حوزه وردپرس ، توسعه دهنده و طراح سایت وردپرسی

نظرات کاربران

هفده + 4 =