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

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

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

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

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

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

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

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

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

حلول لإضافة 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'); 

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

Drawbacks: No sanitization by default—risky unless paired with a sanitizer. And upload limited to Admin (you can customize that).

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

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

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

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

• استخدم المكونات الإضافية مثل SVG Support، SVG Safe، HappyFiles مع تعقيم مدمج.
• تعقيم عبر الأدوات عبر الإنترنت (مثل اختبار تعقيم SVG لـ Darryll Doyle) قبل التحميل.
• تقييد تحميلات 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. 

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