هل ترغب في معرفة كيفية تحميل ملفات SVG إلى WordPress؟ وسوف نقدم لك في هذا البرنامج التعليمي الطرق لتحقيق ذلك.
يلتزم مديرو الويب ومصممي الويب باستخدام تنسيقات ملفات وسائط مختلفة في عملهم. يعد SVG أحد أكثر التنسيقات شيوعًا اليوم ، وهو تنسيق متجه مستند إلى XML. لسوء الحظ ، لا تدعم جميع المتصفحات والأنظمة الأساسية SVG ، لذا يجب تمكين دعم SVG يدويًا أولاً.
ستغطي هذه المقالة خطوات تحميل ملفات SVG إلى موقع WordPress على الويب باستخدام المكون الإضافي SVG Support. سنجيب أيضًا على بعض الأسئلة المتعلقة بقضايا الأمان المحيطة بتنسيق ملف الوسائط هذا ولماذا يستحق SVG استخدامه.
للبدء ، دعنا نتعرف على SVG وكيف يعمل.
ولكن قبل أن نبدأ ، إذا لم تقم بتثبيت WordPress مطلقًا ، فاكتشف ذلك كيفية تثبيت وورد بلوق الخطوات 7 et كيفية العثور عليها، وتثبيت وتفعيل موضوع ورد على بلوق
ثم عد إلى سبب وجودنا هنا.
ما هو SVG؟
Scalable Vector Graphics (SVG) هو تنسيق صورة رسوميات متجهية تستند إلى نص XML. على الرغم من أن تنسيقات الصور الشائعة مثل JPG و PNG تتكون من أطنان من المربعات الصغيرة تسمى وحدات البكسل ، إلا أن هذا التنسيق يعتمد على لغة ترميز XML لوصف سمات الصورة.
في كانون الثاني / يناير شنومكس، 42٪ من جميع المواقع على مستوى العالم استخدم SVG. زادت هذه النسبة منذ يناير 2021 ، عندما فقط 29,4٪ من المواقع لقد استخدمته. على غرار تنسيقات PNG و JPG ، تحظى SVG بشعبية كبيرة بين مواقع الويب عالية الحركة مثل Google و Wikipedia و YouTube.
شيء رائع آخر حول SVG هو أنه مدعوم على نطاق واسع من قبل جميع المتصفحات الرئيسية.
هنا هي قائمة المتصفحات التي تدعم تنسيق ملف SVG:
| ملاح | دعم جزئي | دعم كامل |
| بورد | - | الإصدار 12-18 ، 79-96 ، 97 |
| ثعلب النار | نسخة 2 | الإصدارات 3-94 ، 95 ، 96-97 |
| Firefox لنظام Android | - | نسخة 95 |
| الكروم | - | الإصدارات 4-96 ، 97 ، 98-100 |
| Chromium لنظام Android | - | نسخة 96 |
| سفاري | نسخة 3.1 | الإصدار 3.2-15.1 ، 15.2 ، TP |
| دار الأوبرا | - | الإصدارات 10-81 ، 82 |
| ميني أوبرا | - | جميع الإصدارات |
| أوبرا موبايل | - | الإصدار 12-12.1، 64 |
| Safari على iOS | - | الإصدار 3.2-15.1، 15.2 |
| متصفح أندرويد | الإصدار 3-4.3 | الإصدار 4.4-4.4.4، 96 |
| متصفح UC لنظام Android | - | نسخة 12.12 |
| سامسونج انترنت | - | الإصدار 4-14.0، 15.0 |
| متصفح QQ | - | نسخة 10.4 |
| بايدو المتصفح | - | نسخة 7.12 |
| متصفح KaiOS | - | نسخة 2.5 |
كيف يعمل SVG؟
تستخدم رسومات SVG لغة XML لإنتاج صور متجهة ثنائية الأبعاد. على عكس رسومات JPG وPNG، لا تحتوي الرسومات المتجهة على وحدات بكسل، بل يتم وصف سلوكها في ملفات نصية XML.
لهذا السبب ، يمكن البحث في SVGs وفهرستها وبرمجتها وتعديلها وضغطها مثل التعليمات البرمجية. نتيجة لذلك ، يمكن لأي شخص إنشاؤها باستخدام محرر نصوص أو برنامج رسومات متجه.
هل يدعم WordPress SVG؟
لا يوجد دعم افتراضي لملفات SVG في ووردبريس بسبب المخاطر الأمنية التي تشكلها - سنتناول المشكلات الأمنية المحيطة بملفات SVG بمزيد من التفصيل لاحقًا.
فيما يلي رسالة خطأ تظهر عند تحميل رسم SVG على موقع WordPress على الويب:
هناك المناقشة الحالية على جعل SVG جزءًا من وظائف WordPress الأساسية. حتى ذلك الحين ، علينا أن نكون مبدعين ونستخدم حلولًا أخرى لتحميل صور SVG على WordPress.
لماذا نستخدم WordPress SVG؟
على الرغم من مشكلات الأمان ، لا يزال العديد من المستخدمين يستخدمون تنسيق الصورة هذا نظرًا لأنه يتمتع بمزايا مختلفة. فيما يلي بعض فوائد استخدام ملفات SVG:
- قابلية التوسع: نظرًا لأن SVG هو تنسيق صورة متجه ، تحافظ ملفات SVG على نفس الجودة عبر جميع درجات دقة الشاشة. هذه الميزة موجودة أيضًا بعد تكبيرها ، وهذا هو سبب استخدام العديد من الأشخاص لتنسيق الصور القابل للتطوير للرموز والشعارات.
- حجم ملف أصغر تسهل ملفات SVG تحسين أداء مواقع الويب لأنها تشغل مساحة تخزين أقل على الويب ويتم تحميلها بشكل أسرع بكثير من الصور الأخرى.
- كبار المسئولين الاقتصاديين ودية يقوم جوجل بفهرسة ملفات SVG، مما يسمح بظهورها في بحث صور جوجل، وبالتالي تحسين جهود تحسين محركات البحث. أما مع أنواع الصور الأخرى، فيقتصر الأمر على تحسين سمات النص البديل (alt attributes).
- SVGs المستندة إلى التعليمات البرمجية قابلة للتحرير باستخدام محرر نصوص أو برنامج تحرير رسومات متجه. يمكنك تحسين ملفات SVG لمواقع الويب أو حتى إضافة رسوم متحركة لجعل الرسومات تفاعلية.
SVG على WordPress والأمان
نظرًا لأن SVG هو في الأساس ملف نصي بتنسيق XML ، فإنه يحتوي على ثغرات أمنية قابلة للاستغلال لا تؤثر على تنسيقات الصور الأخرى. لذلك ، يمكن للأشخاص اختراقها بسهولة باستخدام تعليمات برمجية ضارة لإطلاق هجمات البرمجة النصية عبر المواقع (XSS) وهجمات الكيان الخارجي XML (XXE) على نظامك.
لهذا السبب ، يجب أن تكون حذرًا عند التعامل مع ملفات SVG وإضافتها إلى WordPress.
لتقليل مخاطر الأمان ، تأكد من تعقيم ملفات SVG قبل تحميلها إلى مكتبة وسائط WordPress. تعمل هذه العملية على إزالة التعليمات البرمجية والأخطاء المشبوهة ، مما يجعل الصور آمنة لموقعك على الويب.
يمكنك تنظيف ملفات SVG التي تم تنزيلها باستخدام إضافة SVG - سنشرح الخطوات لاحقًا. ومع ذلك، نوصي بتطهيرها مرتين باستخدام اختبار المطهر SVG -
من الطرق الأخرى لتأمين موقعك على ووردبريس تقييد تحميل ملفات SVG للمستخدمين الموثوق بهم فقط. يجب أن يكون المستخدمون المختارون على دراية بالمشكلات الأمنية المتعلقة بصيغة SVG، مما سيثنيهم عن الحصول على ملفات SVG من مصادر مشبوهة.
كيفية تحميل ملفات SVG على ووردبريس بطريقتين آمنتين
من الناحية الفنية، هناك طريقتان لإضافة دعم SVG إلى ووردبريس: باستخدام إضافة ووردبريس أو تفعيله يدويًا. أيًا كان اختيارك، ننصح بشدة بحصر صلاحيات التحميل على المسؤولين والمستخدمين الموثوق بهم فقط للحد من عمليات التحميل الضارة.
استخدم مكون WordPress الإضافي
في هذا البرنامج التعليمي ، سوف نستخدم دعم SVGيستخدم هذا المكون الإضافي لووردبريس مكتبةً لتنقية ملفات SVG، تُفعّل تلقائيًا عند تحميل ملفات SVG إلى مكتبة الوسائط. كما أنه سهل الإعداد ومجاني الاستخدام.
فيما يلي خطوات تكوين دعم SVG:
- Iقم بتثبيت البرنامج المساعد وتنشيطه.
- الوصول إلى تعديلاة -> تقنية SVG من لوحة تحكم WordPress الخاصة بك.
- حدد المربع بجوار الخيار قصر على المسؤولين للحد من امتيازات التحميل. افعل نفس الشيء بالنسبة للخيار تنشيط الوضع المتقدم إذا كنت ترغب في الوصول إلى الميزات المتقدمة ، مثل عرض SVG المضمن وتصميم CSS.
- بعد حفظ التغييرات ، يمكنك البدء في تحميل ملفات SVG إلى مكتبة الوسائط بأمان.
أضف دعم WordPress SVG يدويًا
تتضمن هذه الطريقة تحرير الملف functions.php من موقع WordPress الخاص بك. لذلك ، نوصي بشدة باتباع هذه الخطوات إذا كنت معتادًا على PHP وتفهم تمامًا مشكلة أمان SVG.
تأكد من قم بعمل نسخة احتياطية من موقع WordPress الخاص بك قبل إجراء التغييرات لتجنب فقدان البيانات في حالة التهيئة الخاطئة.
ستشرح الخطوات التالية كيفية تفعيل SVG يدويًا في ووردبريس باستخدام عميل FTP مثل فايلزيلا.
- انتقل إلى دليل ملفات موقع الويب الخاص بك في مضيفك
- الوصول إلى بوبليك -> WP-يشمل. قم بالتمرير لأسفل حتى تقوم بذلك ابحث عن وظائف. php.
- انقر بزر الماوس الأيمن فوق هذا الملف وحدد عرض / تحرير لفتحه ولصق مقتطف الشفرة التالي فيه:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');- احفظ التغييرات وحاول تحميل ملف SVG جديد. إذا نجحت العملية ، يجب أن تقبل مكتبة الوسائط تحميل الملف.
تُسهم المزايا العديدة لملفات SVG في تزايد شعبيتها. للأسف، ملفات XML النصية عرضة لحقن الكود، وهو السبب الرئيسي لعدم دعم ووردبريس لـ SVG افتراضيًا.
مع ذلك، هناك طريقتان لقبول ملفات SVG لموقع WordPress الخاص بك: استخدام مكون إضافي لـ WordPress أو تحرير الملف functions.php. بالإضافة إلى تقييد امتيازات التحميل ، ستتمكن من تحميل ملفات SVG بشكل آمن إلى مكتبة وسائط موقع الويب.
الموارد الأخرى الموصى بها
ندعوك أيضًا إلى الرجوع إلى الموارد الموضحة أدناه للمضي قدمًا في قبضة والتحكم في موقع الويب والمدونة.
- كيفية إنشاء ملحق WordPress بسيط
- كيفية إنشاء إضافة بسيطة جوتنبرج بلوك وورد
- كيفية تعيين صفحتك الرئيسية في WordPress
- كيفية فهم لوحة تحكم WordPress
- كيفية إنشاء ملحق WordPress بسيط
خاتمة
هذا كل ما يتعلق بهذا الدليل حول كيفية تحميل ملفات SVG إلى ووردبريس. نأمل أن تكون هذه المقالة قد قدمت لكم لمحة عامة عن مزايا ومخاطر تحميل ملفات SVG إلى موقع ووردبريس. إذا كانت لديكم أي أسئلة أو اقتراحات، يُرجى إخبارنا بها في التعليقات. تعليقات.
ومع ذلك ، ستتمكن أيضًا من الرجوع إلى موقعنا RESSOURCES، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
في هذه الأثناء، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...