كيفية إضافة ملفات صور SVG إلى WordPress

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

في هذا البرنامج التعليمي المفصل، سنشرح فوائد ملفات SVG، ولماذا يفضلها المصممون، ولماذا تُعدّ رائعة لتحسين محركات البحث (SEO) وأداء الصفحات. ستتعلم طرقًا متعددة وسهلة الاستخدام لتمكين تحميل ملفات SVG: من استخدام إضافات موثوقة إلى تعديلات بسيطة على الكود، بالإضافة إلى استراتيجيات ذكية للحفاظ على أمان موقعك.

سنستخدم WP Media Folder، وهو مكون إضافي قوي لإدارة الوسائط من JoomUnited. 

لماذا تُعد ملفات SVG رائعة للرسومات القابلة للتطوير

قابلية التوسع - ملفات SVG هي ملفات متجهة. هذا يعني أنه يمكنك تكبيرها أو تصغيرها دون فقدان الجودة للشعارات أو الأيقونات أو التصاميم المتجاوبة.

خفيفة الوزن وصديقة لمحركات البحث - ملفات SVG غالبًا ما تكون أصغر من الصور النقطية وهي عبارة عن XML مبنية على النص، بحيث يمكن لمحركات البحث قراءة العناصر الرئيسية مباشرةً (النص البديل والعناوين وما إلى ذلك).

التصميم والرسوم المتحركة - يمكنك تعديل صور SVG باستخدام CSS أو JavaScript. هل تريد تأثير تمرير الماوس أو رسوم متحركة؟ الأمر سهل.

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

حلول لإضافة SVGs في WordPress

يقوم WordPress بحظر SVG بشكل افتراضي بسبب المخاطر الأمنية (SVG هو XML، والذي يمكن أن يتضمن تعليمات برمجية ضارة)، ومع ذلك، هناك ثلاث طرق موثوقة لتمكين دعم SVG:

1. استخدم البرنامج الإضافي

أ) مقتطف WPCode + SVG

• قم بتثبيت البرنامج الإضافي WPCode المجاني.
• أضف مقتطف "السماح بتحميل ملفات SVG" من مكتبته وقم بتنشيطه.
• بشكل افتراضي، يمكن للمسؤولين فقط تحميل ملفات SVG.

ب) مكون إضافي لدعم SVG

• قم بتثبيت "دعم SVG" عبر المكونات الإضافية > إضافة جديد، ثم قم بتنشيطه.
• في الإعدادات، حدد "تقييد للمسؤول" و/أو "تمكين الوضع المتقدم" (العرض المضمن، تنسيق CSS).
• قم بتحميل ملف SVG الخاص بك عبر الوسائط > إضافة جديد أو قم بالسحب والإفلات.

ج) خيارات أخرى :

• SVG Safe بواسطة Darrell Doyle، أقدم ولكن لا يزال قيد الاستخدام.
• يقوم دعم SVG بتطهير التحميلات لمنع مخاطر XSS/XXE.
• HappyFiles/CatFolders تحميلات SVG مع التعقيم والمعاينات.

2. أضف مقتطف الكود إلى functions.php

يمكنك استخدام الكود التالي: 

دالة تمكين تحميل svg($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } إضافة عامل التصفية ('upload_mimes'، 'enable_svg_upload'); 

أين: ملف functions.php الخاص بالموضوع (استخدم دائمًا موضوعًا فرعيًا!).

العيوب: لا يوجد تعقيم افتراضيًا - وهو أمر محفوف بالمخاطر إلا إذا تم دمجه مع مُعقم. يقتصر التحميل على الإدارة (يمكنك تخصيص ذلك).

3. الاعتبارات الأمنية

 SVG = XML، والذي يمكن أن يحتوي على:

• هجمات XSS (JavaScript).
• هجمات XXE (مكالمات الكيان الخارجي).

أفضل الممارسات:

• استخدم المكونات الإضافية مثل SVG Support وSVG Safe وHappyFiles مع التعقيم المدمج.
• قم بالتطهير باستخدام الأدوات المتوفرة عبر الإنترنت (على سبيل المثال، اختبار تطهير SVG الخاص بـ Darryll Doyle) قبل التحميل.
• قم بتقييد عمليات تحميل SVG على المسؤولين أو المستخدمين الموثوق بهم فقط.

WP Media Folder وأهميته لصور SVG على WordPress

WP Media Folder هو مدير قوي لمكتبة الوسائط

- بنية المجلد/المجلد الفرعي

- مرشحات متقدمة، والفرز، والسحب والإفلات

 - إعادة التسمية، العلامة المائية، الاستبدال بالجملة، المعاينة، التنزيل

- متوافق مع العديد من الأدوات مثل Page Builders، وWooCommerce، وWPML.

على الرغم من أن WP Media Folder نفسه لا يسمح باستخدام ملفات SVG، إلا أنه سيسمح لنا بتنظيم وصيانة وإدارة أي نوع من الملفات بما في ذلك ملفات SVG.

اختتامًا: ارتقِ بموقعك باستخدام ملفات SVG WP Media Folder

توقف عن عناء التعامل مع مجلدات الوسائط الفوضوية وملفات الصور غير المُحسّنة. بدلاً من ذلك، أطلق العنان لإمكانات SVG الكاملة، فهي خفيفة الوزن وقابلة للبحث والتكيف، مع أدوات التنظيم البديهية من WP Media Folder. 

سواءً كنتَ منشئ محتوى أو مصممًا أو صاحب مشروع صغير، فهو يضع بين يديك تقنيات فعّالة دون الحاجة إلى أي برمجة. سيُحمّل موقعك أسرع، ويحتل مرتبة أعلى، وسيبدو رائعًا! ماذا تنتظر؟ انقر هنا واحصل على نسختك الخاصة.