نحوه اضافه کردن SVG در وردپرس به صورت ایمن!
انواع فرمت فایل تصویری وجود دارند که می توانید از آن ها در پست های خود استفاده کنید. با این حال وردپرس از اکثر فرمت های محبوب عکس نظیر png، gif، jpeg و موارد دیگر پشتیبانی می کند. اما هنوز برخی از وکتورها نظیر SVG قابل استفاده در وردپرس نیستند. خیلی از کاربران وردپرس به خاطر مزایای وکتورها مایل به استفاده از آنها در سایت خود هستند.
به همین سبب ما در این مطلب به نحوه اضافه کردن SVG در وردپرس می پردازیم و راه های متنوعی را برای این کار در نظر گرفتیم. برای اینکه به طور عملی و امن از این قابلیت استفاده کنید، پاورسرور را همراهی نمایید.
مقدمه ای بر معرفی SVG
همانطور که از نام این فرمت تصویری می توان حدس زد، SVG بر پایه پیکسل نیست و وکتور به حساب می آید. اگر بخواهید یک عکس با فرمت معمول را با نرم افزارهای ویرایشگر متن مانند notepad باز کنید، یک سری عبارات و حروف شکسته به شما نمایش داده می شود. اما اگر یک وکتور با فرمت SVG را با ویرایشگر متن باز نمایید، احتمالا با کدهای بامعنایی مانند زیر روبرو می شوید:
<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre> <path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/> </svg>
در واقع کدهای بالا یک سری بردار را نشان می دهند که از Adobe پشتیبانی می شوند.
وکتورهای SVG منحصربفرد هستند، زیرا کیفیت خود را در هر اندازه ای حفظ می کنند؛ در اصطلاح یعنی مقیاس پذیرند و بدون توجه به ابعاد، در نمایش عالی به نظر می رسند. برخی موارد خاص شما را مجبور به استفاده از فرمت SVG می کند.
از نظر فنی شما سه راه برای ایجاد SVG دارید؛ اول اینکه کدنویسی کنید، دوم اینکه یک طرح SVG بکشید و سوم از سایر وکتورهای آماده بهره ببرید. با وجود تمام مزایا، دو اشکال عمده در استفاده از این نوع فرمت تصویری وجود دارد. آن ها برای طرح های پیچیده مناسب نیستند و حجم زیادی پیدا می کنند، همچنین از لحاظ امنیتی حفره هایی وجود دارد.
چرا اضافه کردن SVG در وردپرس پیامدهای امنیتی دارد؟
اگرچه ما فرمت SVG را به عوان پرونده تصویری می شناسیم اما اگر دقیقتر به به این مسئله نگاه کنیم با یک فایل یا سند روبرو هستیم. همانطور که در بالا اشاره کردیم، به راحتی می توان از طریق ویرایشگر متن یک فایل SVG را باز کرد و کدهای آن را تغییر داد. از لحاظ تئوری اگر شخصی فایلی را با کد مخرب بارگذاری کند، اجرای SVG می تواند سایت شما را در برابر حملات آسیب پذیر کند.
با اینکه نحوه اضافه کردن SVG در وردپرس چندان کار پیچیده ای نیست اما اینکه به چه صورت آن را انجام دهید، بر این مسئله اثرگذار است. ما سعی نمودیم تا راه های ایمن را در ادامه به شما معرفی کنیم.
دو راه ایمن برای اضافه کردن SVG در وردپرس
در این بخش ما یک روش دستی و یک افزونه مبتنی بر استفاده از SVG در وردپرس به صورت ایمن را آماده کرده ایم. بنابراین شما با توجه به نیاز خود قادر به انتخاب بهترین گزینه هستید.
بیایید شروع کنیم!?
1- به صورت دستی فایل SVG را به سایت خود اضافه کنید.
شما می توانید با چند خط کد، قابلیت اضافه کردن SVG در وردپرس را ایجاد نمایید. با این وجود، باید موارد ایمنی را نیز باید در نظر داشته باشید. رویکرد ایمن برای اجرای SVG شامل موارد زیر است:
- پشتیبانی از SVG را با تغییر پرونده php فعال کنید.
- نقش کاربران را در اضافه کردن SVG در وردپرس محدود نمایید.
- مطابق با اصول گفته شده، هر پرونده SVG را آپلود نمایید.
به طور کلی موارد اول و دوم شرایط بالا دشواری خاصی ندارد. از طریق فایل منیجر یا اف تی پی به فایل های سایت خود دسترسی پیدا کنید و به دنبال function.php بگردید. سپس آن را باز کرده و کد زیر را به آن اضافه کنید:
// Allow SVG
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' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );
برای اضافه کردن SVG در وردپرس پس از افزودن کد، تغییرات را در فایل function.php خود ذخیره کرده و آن را ببندید. این کار دو عملکرد را انجام می دهد؛ این امکان را فراهم می کند تا پرونده های SVG را در وردپرس بارگذاری کرده و آن ها در کتابخانه رسانه وردپرس به نمایش درآیند. اکنون باید محدودیت را برای کاربران خود در نظر بگیرید، در این شرایط باید به ویریشگران و نویسندگان خود اعتماد کنید، اما به کسانی که تازه عضو سایت شما می شوند نه! دو راه برای این کار وجود دارد:
1- نقش های کاربری شخصی سازی شده با دسترسی محدود بسازید
2-از پلاگین های محدود کننده کاربری WP Upload Restriction استفاده نمایید.
توجه نمایید که اشتباه در انجام تنظیمات فوق می تواند شما را با مشکلات جدی روبرو کند و سایت را در برابر حملات آسیب پذیر نماید.
2- استفاده از افزونه Safe SVG
حال می خواهیم نشان دهیم که کارهای بالا تا چه اندازه با کمک افزونه Safe SVG راحت انجام می شود. همچنین از صحت عملکرد این افزونه خیالتان راحت باشد، زیرا کلیه اقدامات امنیتی انجام می شود.
به طور خلاصه، این افزونه همه مواردی که ذکر کردیم را رعایت می کند. این اصول شامل:
- امکان بارگذاری فایل های SVG به وردپرس
- فایل های SVG در کتابخانه وردپرس قابل مشاهده است.
- تمام حفره های امنیتی پوشانده می شود و یک انتقال ایمن را تجربه می کنید.
استفاده از این افزونه آسان است و رویکرد راحتی برای اضافه کردن SVG به وردپرس دارید. اگر قصد استفاده از وکتورهای باکیفیت SVG را در سایت دارید، پیشنهاد می کنیم که روش های فوق را به کار ببندید.
امیدواریم که مطلب فوق توانسته باشد رضایت شما را به همراه داشته باشد. در پایان پیشنهاد می کنیم که از تمامی بخش های وبلاگ پاورسرور دیدن فرمایید تا راه های بیشتری برای توسعه سایت پیدا کنید.
