كيفية إضافة ملفات صور SVG في ووردبريس

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

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

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

لماذا SVGs رائعة للرسومات القابلة للتطوير

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

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

التصميم & الرسوم المتحركة – يمكنك تعديل SVGs عبر CSS أو JavaScript. هل تريد تأثير تمرير أو حركة؟ سهل.

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

حلول لإضافة SVGs في ووردبريس

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

1. استخدم إضافة

 أ) WPCode + مقتطف SVG

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

 ب) إضافة دعم SVG

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

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

• SVG Safe بواسطة داريل دويل، قديم ولكنه لا يزال مستخدمًا.
• دعم SVG ينظف التحميلات لمنع مخاطر XSS/XXE .
• HappyFiles/CatFolders إضافة تحميلات SVG مع التطهير والمعاينات.

2. أضف مقتطف الشفرة إلى functions.php

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

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

أين: Theme's functions.php (دائمًا استخدم ثيمًا فرعيًا!).

السلبيات: لا توجد عملية تعقيم افتراضيًا—مخاطرة ما لم تُقترن ببرنامج تعقيم. والتحميل مقيد للمسؤول (يمكنك تخصيص ذلك).

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

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

• هجمات XSS (JavaScript).
• هجمات XXE (استدعاءات الكيانات الخارجية).

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

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

WP Media Folder ولماذا يهم لSVGs على WordPress

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

- هيكل المجلد/المجلد الفرعي

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

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

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

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

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

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

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