تفعيل دعم SVG في WordPress

يتيح WordPress للمستخدمين تحميل عدد غير قليل من أنواع ملفات الصور المختلفة. من المحتمل أن تتعرف على المشتبه بهم المعتادين ، مثل PNG و JPG. يمكن أن يكون عرض أنواع الملفات الأخرى ، مثل الرسومات المتجهة ، أكثر صعوبة.

لحسن الحظ ، هناك عدة طرق لدمج ملفات المتجه في موقع الويب الخاص بك. بالرغم من أنها ليست ميزة أصلية ، يمكن استخدام ملفات Scalable Vector Graphics (SVG) لعرض صور ثنائية الأبعاد على مواقع WordPress. مع القليل من إعادة التكوين ، ستتمكن من تحسين بعض الشعارات والرسومات الأخرى باستخدام هذا النوع من الملفات.

ملاحظة: إذا كنت تستضيف WP Engine ، فنحن ندعم أصلاً ضغط GZIP على ملفات SVG.

في هذه المقالة ، سنتعرف على المزيد حول ملفات SVG ولماذا قد ترغب في استخدامها. ثم سنتعرف على طريقتين لتمكين استخدامها على موقع الويب الخاص بك. سنغطي أيضًا بعض الاحتياطات الأمنية المهمة التي قد ترغب في اتخاذها. هيا بنا نبدأ!

ما هو SVG؟

ملف SVG هو نوع من الصور المتجهة. تتكون ملفات المتجهات بشكل مختلف عن أنواع ملفات الصور الأكثر شيوعًا. على سبيل المثال ، يتكون JPG من آلاف البكسل. من ناحية أخرى ، مع ملف SVG ، ليس هذا هو الحال.

الصور المتجهة هي أشبه بمجموعة من التعليمات المكتوبة. لا تحتوي على وحدات بكسل تشكل صورة أكبر. بدلاً من ذلك ، فإنها تتضمن مجموعة من البيانات تشبه المخطط الذي ينشئ صورة ثنائية الأبعاد. هذا يعني أن هناك بعض الفوائد الفريدة لاستخدام ملفات SVG.

لماذا نستخدم SVG؟

تحتوي SVGs على عدد من الامتيازات. نظرًا لأنها قابلة للتطوير بدرجة كبيرة ، يمكنك معالجة الحجم حسب الحاجة دون التأثير على جودة الصورة. كما تعلم جيدًا ، إذا حاولت توسيع نطاق JPG في الحجم ، فإن الجودة تتدهور إلى مستوى غير قابل للاستخدام بسرعة كبيرة.

هذا هو المكان الذي يمكن أن تكون فيه SVGs مفيدة. على الرغم من أنها ليست مخصصة لعرض الصور التقليدية ، إلا أنها تعد خيارًا رائعًا لشعارات الأعمال والأيقونات والرسومات البسيطة الأخرى على موقع الويب الخاص بك.

بالإضافة إلى ذلك ، تميل ملفات SVG إلى أن تكون أصغر بكثير من أنواع الصور الأخرى. هذا يعني أن موقعك لن يتعثر بسبب الرسومات. علاوة على ذلك ، تتم فهرسة ملفات SVG بواسطة Google ، وهي موجودة منذ بعض الوقت. يمكن أن يكون هذا نعمة حقيقية لتحسين محرك البحث لموقعك (SEO).

كيفية تحميل ملف SVG إلى WordPress

نظرًا لأن WordPress لا يتضمن دعمًا لـ SVGs خارج الصندوق ، فسيتعين عليك العمل بجهد أكبر لتضمينها على موقع الويب الخاص بك. في الأقسام القليلة التالية ، سنتناول كيفية إضافة ملفات SVG إلى موقع الويب الخاص بك باستخدام مكون إضافي وعبر عملية يدوية.

الطريقة الأولى: استخدام البرنامج المساعد

كما هو الحال مع العديد من مهام WordPress ، يمكن أن تجعل المكونات الإضافية تمكين دعم SVG أمرًا بسيطًا. كل ما عليك فعله هو اختيار الأداة المناسبة وتهيئة بعض الإعدادات.

الخطوة 1: قم بتنزيل البرنامج المساعد

أولاً ، ستحتاج إلى تنزيل وتثبيت مكون إضافي لـ SVG. نوصي بدعم SVG:

بمجرد تثبيت المكون الإضافي وتنشيطه ، سيكون لديك خيار قائمة جديد في لوحة معلومات WordPress الخاصة بك ضمن الإعدادات> دعم SVG . هناك ، ستتلقى تعليمات حول كيفية تصميم ملفات SVG لموقعك على الويب:

بالإضافة إلى ذلك ، ستتمكن من تكوين بعض الإعدادات الإدارية المهمة. يتضمن ذلك تقييد امتيازات تحميل SVG للمسؤولين فقط:

بعد ذلك ، ستتمكن من تحميل ملفات SVG مباشرة إلى مكتبة الوسائط الخاصة بك. ومع ذلك ، هناك بعض العناصر المهمة الأخرى التي يجب الاهتمام بها أولاً.

الخطوة 2: تفعيل دعم GZip لملفات SVG على خادمك

ستعتمد طريقة التعامل مع هذه الخطوة على مضيف الويب وإعداد الخادم. على سبيل المثال ، هنا في WP Engine ، تم تمكين GZip بالفعل لقائمة محددة من أنواع الملفات. مع ما يقال ، "image / svg + xml" ليست واحدة منها.

ستضمن إضافة هذا النوع إلى قائمة موقع الويب الخاص بك تحسين ملفات SVG بشكل مناسب وسريع. ستحتاج إلى تضمين نوع الملف هذا في ملف htaccess الخاص بك ، حتى يعمل كل شيء بسلاسة.

الخطوة 3: تأكد من أن البرنامج المساعد يقوم بتأمين الملفات بشكل صحيح

أحد الجوانب السلبية لاستخدام ملفات SVG ، والسبب الأساسي لعدم دمج هذا النوع من الملفات في نواة WordPress ، يرجع إلى مشكلات الأمان. نظرًا لأن ملفات SVG تستند إلى XML ، فهي عرضة لهجمات الكيانات الخارجية ، من بين مخاطر أخرى.

عند تكوين مكون SVG الإضافي ، يوصى بقصر وصول تحميل SVG إلى المسؤولين فقط. ومع ذلك ، هناك طريقة أكثر أمانًا تتمثل في "تعقيم" ملفات SVG قبل تحميلها. يؤدي هذا إلى القضاء على أي من رموز XML غير الضرورية التي قد تترك موقعك عرضة للهجمات.

لا يتضمن المكون الإضافي دعم SVG التعقيم التلقائي ، ولكن هناك مكونات إضافية أخرى. SVG الآمن هو واحد منهم:

بدلاً من ذلك ، يمكنك أيضًا تثبيت المطهر الخاص بك واستخدامه بشكل مستقل. قدم منشئ Safe SVG كود التعقيم الخاص بالمكوِّن الإضافي على GitHub ليستخدمه أي شخص.

يعد وجود المطهر الخاص بك في مكانه خيارًا جيدًا أيضًا إذا كنت تخطط لاستخدام الطريقة التالية لتمكين SVGs على موقع WordPress الخاص بك.

الطريقة الثانية: تمكين عمليات تحميل ملف SVG يدويًا

إذا كنت تفضل جعل يديك متسخين لاستخدام مكون إضافي ، فيمكنك يدويًا تمكين موقع WordPress الخاص بك لقبول ملفات SVG. بعد ذلك ، سوف نلقي نظرة على كيفية عمل هذه العملية.

الخطوة 1: قم بتحرير ملف Functions.php الخاص بموقعك

للبدء ، ستحتاج إلى تعديل ملف jobs.php الخاص بموقعك على الويب. للقيام بذلك ، يمكنك الانتقال إلى Appearance> Edit Themes في لوحة المعلومات الخاصة بك ، وتحديد ملف jobs.php :

بدلاً من ذلك ، يمكنك الوصول إلى ملفات موقعك باستخدام تطبيق بروتوكول نقل الملفات (FTP) مثل FileZilla.

في كلتا الحالتين ، من الأفضل إنشاء سمة فرعية أو التبديل إلى بيئة تطوير قبل القيام بأي عمل كبير على موقع الويب الخاص بك. سيؤدي ذلك إلى حماية موقعك المباشر من الأذى أثناء إجراء التغييرات.

الخطوة 2: أضف مقتطف الشفرة

بعد ذلك ، ستحتاج إلى إضافة مقتطف الشفرة التالي إلى ملف jobs.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 إلى مكتبة الوسائط الخاصة بك. هناك ، يمكنك عرضها والتفاعل معها تمامًا كما هو الحال مع أنواع ملفات الصور الأخرى.

الخطوة 3: الوصول الآمن والحد من أذونات تحميل SVG

كما ذكرنا سابقًا ، فإن تمكين ملفات SVG ينطوي على مخاطر معينة. للحفاظ على موقعك آمنًا ، يمكنك تعيين أذونات التحميل لـ SVGs عن طريق إنشاء أدوار مستخدم مخصصة. يمكنك استخدام مكون إضافي مثل User Role Editor أو WPFront User Role Editor لإنجاز ذلك.

تمكنك هذه المكونات الإضافية من تخصيص مستويات الوصول والأذونات لأدوار المستخدم الحالية. بمعنى آخر ، سوف يسمحون لك بتعيين المستخدمين الذين سيكون لديهم الإذن بتحميل صور SVG. سيساعدك هذا في مراقبة أمان هذه الملفات.

ابق آمنًا مع WP Engine

أصلاً ، لا يتيح WordPress استخدام ملفات SVG. هذا أمر مؤسف ، لأن هذه الملفات تميل إلى أن تكون الخيار الأفضل لعرض الشعارات والرسومات الأخرى. الخبر السار هو أنه بمساعدة بعض موارد المطورين المفضلة لدينا ، ستتمكن من تمكين وتأمين استخدام ملفات SVG على موقعك.

بالإضافة إلى ذلك ، ضع في اعتبارك أنه في خطط استضافة WordPress الخاصة بنا ، ستحصل على إمكانية الوصول إلى الدعم الاحترافي وحلول أمان مواقع الويب المطورة جيدًا. قم بتأمين موقعك معنا اليوم!