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

svg چیست ؟

SVG مخفف Scalable Vector Graphics یک فایل گرافیکی برداری است که به جای پیکسل از زبان XML استفاده میکند.

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

که برای طراحی سایت یک مزیت بزرگ محسوب میشود زیرا جایی که حتی یک بیت روی سرعت سایت تاثیر دارد وجود چنین تصاویری کمک به سزایی میکند.

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

svg در وردپرس

همانطور که می دانید در سیستم مدیریت محتوای وردپرس صرفاً مجاز به آپلود پسوندهای معروف و شناخته شده هستید و باقی موارد با محدودیت همراه است. به همین دلیل در این نوشتار به نحوه آپلود تصاویر SVG می پردازیم زیرا بسیاری از کاربران مایلند بدانند چگونه می توان در سیستم وردپرس اقدام به بارگذاری کردن تصاویر SVG نمود بدون اینکه وردپرس ایرادی گرفته و یا سایت دچار مشکل شود، چرا که بسیاری از کاربران نمی خواهند فایل های svg را به فایل های zip یا rar فشرده کرده و مایلند مستقیماً اقدام به آپلود کردن تصاویر SVG نمایند. اگر دقت کنید این نوع پسوند تصویری را در سایر سایت های فروشگاهی خواهید دید و می توانید ظاهر محصولات را با دقت و جزییات بیشتری مشاهده نمایید و این سوال پیش می آید که چگونه با زوم کردن بر روی تصویر کیفیت کاهش نمی یابد.

مسائل امنیتی svg در وردپرس

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

اضافه کردن svg به وردپرس

    1- اضافه کردن svg به وردپرس با روش کدنویسی

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

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

کد آپلود فایل SVG

کافیست تا کد زیر را داخل فایل functions.php قرار دهید.

ابتدا وارد پوشه public_html شوید. سپس پوشه wp_includes را باز کنید. حال فایل 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');
add_filter( 'upload_mimes', 'wp_allow_svg_mime_type' );

نمونه کد دیگری که میتوانید بجای کد بالا استفاده کنید بصورت زیر است :

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

   2- اضافه کردن svg به وردپرس با پلاگین

تعداد زیادی پلاگین برای اضافه کردن svg به وردپرس وجود دارد که توضیح تمامی آنها در یک مقاله امکان پذیر نیست.

در این مقاله تنها به توضیح معروفترین آنها میپردازیم.

اضافه کردن svg به وردپرس افزونه SVG Support

این افزونه یعنی SVG Support به طور  کامل جهت اضافه نمودن تصاویر SVG در وردپرس می تواند برای شما راهگشا باشد. ضمن اینکه این قابلیت را به شما خواهد داد تا SVG درون خطی را در مطالب سایت و سایر قسمت های  وردپرس نمایش دهید. در اولین قدم، باید از قسمت افزونه ها در مخزن وردپرس افزونه SVG Support را جستجو کرده نصب و فعال نمایید. پس از فعال سازی افزونه ، در قسمت تنظمیات پیشخوان وردپرس گزینه SVG Support را مشاهده خواهید کرد. در قسمت تنظیمات، کادر کنار ‘Restrict to Administrators’ را فعال نمایید تا فقط مدیریت سایت امکان آپلود را در اختیار داشته باشد و با این کار کاربران عادی امکان بارگذاری را نخواهند داشت. اقدام بعدی که باید انجام دهید این است که حالت پیشرفته فعال شود. اگر قصد دارید از خاصیت های پیشرفته مانند انیمیشن های CSS و … بهره ببرید این حالت را فعال نمایید.

یادتان باشد که Save Change را پس از اعمال تغییرات بزنید تا بر روی سایت اعمال شود پس از انجام مراحل فوق بدون مشکل می توانید اقدام به آپلود تصاویر svg نمایید.

استفاده از افزونه Safe SVG

این افزونه پس از نصب در حالت معمولی گزینه ای برای تغییرات و تنظیم کردن ندارد.

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

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

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

در ابتدا باید پلاگین Safe SVG را توسط مخزن وردپرس نصب و فعال نمایید.

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

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