طور حياتك

كيفية إضافة SVG في WordPress (مع 2 حلول بسيطة)


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

ما هو SVG؟

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

كيف يعمل SVG؟

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

إذا كنت تأخذ ملف صورة png / jpeg وقمت بالتكبير ، ستلاحظ أن الصورة ستبدأ في التعتيم وتصبح بيكسل.

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

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

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

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

إذا قمت بتحميل صورة SVG في WordPress ، فستظهر لك رسالة الخطأ التالية:

عذرًا ، هذا النوع من الملفات غير مسموح به لأسباب أمنية.

 أمان SVG الخطأ في WordPress

مشكلات الأمان المتعلقة بـ SVG في WordPress

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

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

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

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

لمعرفة المزيد حول الأمان ، تحقق من دليل الحماية الكامل [1945901] للمبتدئين.

دعنا نلقي نظرة على كيفية استخدام ملفات SVG بأمان وسهولة في WordPress.

الأسلوب 1. تحميل ملفات SVG في WordPress باستخدام دعم SVG

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

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

عند التنشيط ، يجب عليك زيارة الإعدادات »صفحة دعم SVG لتكوين إعدادات المكون الإضافي.

 إعدادات دعم SVG

في صفحة الإعدادات ، تحتاج إلى تحديد المربع بجوار خيار "تقييد للمشرفين؟". سيسمح هذا فقط لمشرف موقع بتحميل ملفات SVG في WordPress.

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

لا تنس النقر على زر حفظ التغييرات لتخزين إعداداتك.

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

ستتمكن الآن من تحميل ملف SVG وتضمينه في WordPress.

 تم دمج ملف SVG في مشاركة WordPress

الأسلوب 2. تحميل ملفات SVG في WordPress باستخدام SVG الآمنة

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

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

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

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

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

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

إذا أعجبك هذا المقال ، فيرجى الاشتراك في YouTube Channel لمقاطع الفيديو التعليمية في WordPress. يمكنك أيضًا العثور على Twitter و Facebook .

https://platform.twitter.com/widgets.js .

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