إضافة ملفات SVG إلى موقع ووردبريس الخاص بك تجعل صورك تبدو حادة وواضحة.

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

هذا لأن ملفات SVG قد تشكل مخاطر أمنية. لكن لا تقلق، فهناك طرق آمنة لاستخدامها.

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

ما هو SVG؟

SVG، أو الرسومات المتجهة القابلة للتطوير، هو تنسيق ملفات يعرف الرسومات المتجهة باستخدام لغة ترميز XML. ميزته الرئيسية هي أنه يسمح بتكبير الصور دون فقدان الجودة أو تشويهها.

كيف يعمل SVG؟

الرسومات المتجهة القابلة للتطوير (SVG) هي تقنية لعرض رسومات ثنائية الأبعاد باستخدام XML. وهي تختلف عن تنسيقات الصور الشائعة مثل PNG وGIF وJPG.

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

الرسومات المتجهة، لا تستخدم البكسل.

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

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

تستخدم الرسومات المتجهة عادة للأيقونات وخطوط الأيقونات وشعارات مواقع الويب وصور العلامات التجارية. قد ترغب في إضافة ملفات SVG إلى ووردبريس لشعار شركتك أو أيقوناتك أو رسوماتك الأخرى.

ومع ذلك، قد تكون ملفات SVG غير آمنة بعض الشيء. لهذا السبب، لا يدعم ووردبريس رفع ملفات SVG افتراضيًا.

إذا حملت صورة SVG في ووردبريس، فسترى رسالة الخطأ التالية: ‘عذرًا، غير مسموح لك رفع هذا النوع من الملفات’.

المشاكل الأمنية المتعلقة بـ SVG في ووردبريس

تحتوي ملفات SVG على كود بلغة ترميز XML، وهي مشابهة للغة HTML. يقوم متصفحك أو برنامج تحرير SVG بتحليل لغة ترميز XML لعرض النتائج على الشاشة.

ومع ذلك، يعرض هذا موقعك الإلكتروني لثغرات XML محتملة. يمكن استخدامها للوصول غير المصرح به إلى بيانات المستخدم أو إثارة هجمات القوة الغاشمة أو cross-site scripting attacks..

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

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

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

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

الطريقة 1: السماح بملفات SVG في ووردبريس باستخدام WPCode (موصى به)

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

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

للبدء، ستحتاج إلى تثبيت وتفعيل إضافة WPCode المجانية. للحصول على تعليمات مفصلة، ​يرجى الاطلاع على دليلنا خطوة بخطوة حول كيفية تثبيت إضافة ووردبريس.

بعد التفعيل، انتقل إلى Code Snippets » Add Snippet in your WordPress في لوحة إدارة ووردبريس. ما عليك سوى البحث عن “svg” وتحريك مؤشر الماوس فوق ‘Allow SVG Files Upload’.

قم بالمضي قدمًا وانقر فوق ‘Use snippet’ عندما يظهر.

بعد ذلك، ستنتقل إلى صفحة ‘Edit Snippet’، حيث يكون WPCode قد هيأ جميع الإعدادات اللازمة لتشغيل الكود.

كل ما عليك فعله هو النقر على مفتاح ‘Active’ ثم الضغط على زر ‘Update’.

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

يمكنك بعد ذلك التعامل معها كأي صورة أخرى على موقع ووردبريس الخاص بك.

افتراضيًا، يسمح مقتطف WPCode فقط للمستخدمين الذين لديهم دور ‘المسؤول’ بإضافة صور SVG إلى ووردبريس.

يمكنك أيضًا منح الإذن لجميع أدوار المستخدمين الأخرى بحذف الأسطر من ١٤ إلى ١٦ من مقتطف الكود. بعد ذلك، يمكنك ‘التعليق عليها’ بإضافة شرطتين مائلتين، ‘//’، في بداية الأسطر من ١١ إلى ١٣، مما يحولها إلى لون بني فاتح.

لن ينفذ WPCode أي جزء من المقتطف يراه كتعليق وليس كود. يمكنك مشاهدة هذا المثال في الصورة أدناه.

على أي حال، بعد إزالة الكود، يمكن لجميع المستخدمين رفع ملفات SVG إلى موقعك. فقط تأكد من النقر على ‘Update’ لحفظ أي تغييرات.

الطريقة 2: تحميل ملفات SVG في ووردبريس باستخدام SVG Support

تستخدم هذه الطريقة الثانية إضافة SVG Support. تتيح لك هذه الإضافة عرض صور SVG داخل منشورات وصفحات ووردبريس والتحكم في من يمكنه رفعها.

أولًا، عليك تثبيت وتفعيل إضافة SVG Support. لمزيد من التفاصيل، يمكنك الاطلاع على دليلنا المفصل حول كيفية تثبيت إضافة ووردبريس.

عند التنشيط، ستحتاج إلى التوجه إلى الإعدادات » SVG Support لتكوين إعدادات الإضافة.

في صفحة الإعدادات، حدد المربع بجوار خيار ‘Restrict to Administrators?’. سيسمح هذا فقط لمدير الموقع برفع ملفات SVG في ووردبريس.

الخطوة التالية هي تفعيل Advanced Mode. ما عليك سوى تحديد هذا الخيار إذا كنت ترغب في استخدام ميزات متقدمة مثل رسوميات CSS المتحركة وعرض SVG المضمن.

لا تنس النقر على زر ‘Save Changes’ لحفظ إعداداتك.

يمكنك الأن إنشاء منشور جديد أو تعديل منشور موجود. في محرر المنشورات، ستتمكن من رفع ملف SVG الخاص بك كما تفعل مع أي ملف صورة آخر.

ما عليك سوى إضافة كتلة صورة إلى المحرر ثم رفع ملف SVG.

الطريقة 3. رفع ملفات SVG في ووردبريس باستخدام Safe SVG

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

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

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

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

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