اضافه کردن SVG به وردپرس با افزونه SVG Support و بدون افزونه
وردپرس به صورت پیش فرض و بدون تنظیمات خاصی از چند قالب تصویر شامل jpg، jpeg، png و gif پشتیبانی می کند. اما امکان استفاده از SVG که یکی از انعطاف پذیرترین انواع تصویر است را نمی دهد. خوشبختانه اضافه کردن SVG در وردپرس کاملاً ساده است. در این مقاله نشان می دهیم که چگونه با استفاده از افزونه SVG Support و همینطور بدون افزونه این کار را انجام دهید.
SVG چیست و چه مزیتی دارد؟
SVG یا Scalable Vector Graphics (نمودارهای برداری مقیاس پذیر) یک فرمت فایل است که با استفاده از زبان نشانه گذاری XML ، گرافیک برداری را تعریف می کند. مزیت اصلی SVG این است که به شما امکان می دهد تصاویر را بدون کاهش کیفیت یا پیکسل سازی بزرگ کنید.
اگر یک فایل تصویری png / jpeg را بزرگ نمایی کنید، متوجه می شوید که تصویر شروع به تار و پیکسلی شدن می کند.
گرافیک برداری از پیکسل استفاده نمی کند بلکه از یک نقشه دو بعدی استفاده می نماید که گرافیکی که مشاهده می کنید را تعریف می کند. بنابراین تصویر با بزرگنمایی، پیکسل پیکسل نمی شود.
SVG ها نسبت به انواع فرمت های رایج تصویر مانند PNG و JPG دارای مزیت های بیشتری هستند. به عنوان مثال:
- فضای کمتری اشغال می کنند. SVG ها به جای پیکسل از بردار تشکیل شده اند. بنابراین تصاویر شما وزن کمتری دارند که به بارگیری سریعتر سایت کمک می کند.
- می توانید آنها را به راحتی مقیاس بندی کنید. همانطور که می دانید محدودیت هایی برای مقیاس پذیری تصاویر معمولی وجود دارد اما این محدودیت ها در مورد SVG صدق نمی کند زیرا می توان بردارها را بزرگ یا کوچک کرد بدون اینکه کیفیت آنها از بین برود یا در اندازه فایل تغییری به وجود بیاید.
- شما می توانید SVG ها را با CSS متحرک کنید. بردارها را می توان با استفاده از CSS متحرک کرد که می تواند افکت های منحصر به فردی ایجاد کند.
فایل های SVG اگرچه جالب به نظر می رسند اما کمی ناامن هستند. به همین دلیل است که وردپرس به طور پیش فرض از بارگذاری فایل SVG پشتیبانی نمی کند.
از طرف دیگر هرچه تصویر پیچیده تر باشد، تکرار آن با استفاده از بردارها دشوارتر خواهد بود. به عبارت دیگر، SVG ها برای گرافیک های ساده مانند لوگو ها و آیکون ها گزینه خوبی هستند اما برای عکس ها به خوبی کار نمی کنند. از گرافیک برداری به طور معمول برای آیکون ها، فونت آیکون ها، آرم وب سایت و تصاویر برند استفاده می شود.
قبل از اینکه به آموزش نحوه اضافه کردن فایل های SVG در وردپرس با افزونه SVG Support و بدون افزونه بپردازیم، به بررسی مشکل امنیتی SVG می پردازیم.
مشکلات امنیتی SVG
فایل های SVG حاوی کدی به زبان نشانه گذاری XML هستند که مشابه HTML است. مرورگر یا نرم افزار ویرایش SVG برای نمایش خروجی روی صفحه، زبان نشانه گذاری XML را تحلیل می کند.
اما این عمل وب سایت شما را در معرض آسیب پذیری های احتمالی XML قرار می دهد و می تواند برای دستیابی غیرمجاز به داده های کاربر، حملات بورت فورث یا حملات cross-site scripting مورد استفاده قرار گیرد.
بنابراین باید فایل های SVG را برای بهبود امنیت آنها سالم سازی کرد. افزونه های SVG وردپرس نمی توانند از بارگذاری یا تزریق کدهای مخرب کاملا جلوگیری کنند. بهترین راه حل این است که فقط از فایل های SVG که توسط منابع معتبر ایجاد شده اند استفاده کنید و آپلودهای SVG را فقط به کاربران معتمد مانند مدیر سایت محدود کنید.
اضافه کردن SVG در وردپرس با افزونه SVG Support و بدون افزونه
همانطور که قبلاً اشاره شد، وردپرس به صورت پیش فرض از SVG پشتیبانی نمی کند. با این وجود می توانید این ویژگی را به صورت دستی فعال کنید یا برای انجام آن از افزونه استفاده کنید. در این مقاله هر دو روش را توضیح خواهیم داد.
آموزش افزونه SVG Support برای اضافه کردن SVG به وردپرس
اگر به دنبال سریعترین راه برای اضافه کردن SVG به وردپرس هستید ، افزونه SVG Support بهترین گزینه ممکن است. این افزونه فرمت تصویر SVG را فعال کرده و پشتیبانی از آن را به کتابخانه رسانه شما اضافه می کند.
ابتدا افزونه را از پایین صفحه دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید. اگر منو افزونه را ندیدید یا اطلاعات جزئی تری لازم دارید، به راهنمای گام به گام ما در مورد آموزش نصب افزونه وردپرس مراجعه کنید.
بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه در پیشخوان وردپرس به مسیر تنظیمات » SVG Support بروید.
در این صفحه دستورالعمل هایی در مورد نحوه استایل دهی فایل های SVG برای وب سایت خود دریافت می کنید.
همچنین می توانید برخی تنظیمات مدیریتی مهم را پیکربندی کنید.
Restrict to Administrators?: با فعال کردن این گزینه تنها مدیر سایت قادر به آپلود تصویر SVG در کتابخانه رسانه وردپرس خواهد بود. توصیه می شود به دلایل امنیتی آپلود فایل های SVG را فقط به مدیران سایت محدود کنید.
Enable Advanced Mode?: با فعال کردن این گزینه می توانید حالت پیشرفته افزونه SVG Support را فعال کنید که به شما امکان می دهد SVG های خود را با CSS هدف قرار دهید. اگر نمی خواهید SVG های خود را متحرک کنید، می توانید از این گزینه صرف نظر کنید.
پس از آن می توانید فایل های SVG را مستقیماً در کتابخانه رسانه سایت وردپرس خود آپلود کنید و وردپرس پیام خطایی نشان نمی دهد.
یک راه حل بهتر برای امن تر نگه داشتن فایل های SVG، پاک سازی آنها قبل از آپلود کردن شان است. این کار باعث می شود کد XML غیر ضروری که ممکن است سایت شما را آسیب پذیر حذف شود.
افزونه SVG Support شامل پاک سازی خودکار نیست اما افزونه Safe SVG این قابلیت را دارد.
اضافه کردن SVG در وردپرس بدون استفاده از افزونه
اگر نمی خواهید از افزونه برای اضافه کردن فایل های SVG به سایت وردپرس خود استفاده کنید می توانید به صورت دستی این کار را انجام دهید.
ابتدا باید به فایل functions.php وب سایت خود دسترسی پیدا کنید. برای دسترسی به این فایل می توانید در پیشخوان وردپرس به مسیر نمایش » ویرایشگر پوسته بروید و فایل functions.php خود را انتخاب و ویرایش کنید.
همچنین می توانید دسترسی به وردپرس از طریق FTP ایجاد کنید. سپس وارد فولدر root سایت وردپرس خود که معمولاً public_html است، شوید و فولدر wp-includes را باز کنید. پس از آن فایل functions.php را پیدا کرده و به حالت ویرایش باز کنید.
هنگامی که به فایل functions.php سایت وردپرس خود به هر طریقی دسترسی پیدا کردید، به انتهای کد اسکرول کرده و کد اسنیپت زیر را در آن قرار دهید.
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');
بهتر است قبل از انجام هر کار مهم در وب سایت خود ، یک قالب فرزند ایجاد کنید. با این کار سایت زنده شما در حین اعمال تغییرات از آسیب در امان خواهد ماند. همچنین می توانید از افزونه هایی مانند افزونه My Custom Functions برای ویرایش فایل functions.php استفاده کنید.
به این ترتیب وردپرس به شما اجازه آپلود فایل های SVG را می دهد.
امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.
دانلود افزونه
دیدگاه ها