كيفية تحميل ملفات SVG إلى موقع WordPress بأمان؟

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

ولكن إذا كان لها ميزة على تنسيقات الصور التقليدية الأخرى، فما الخطأ في استخدامها بدلاً من صور JPG أو PNG؟

حسنًا، السبب هو أن WordPress لا يدعم الاستخدام المباشر لملفات SVG بسبب مخاوف أمنية.

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

ما هو SVG؟

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

على سبيل المثال، عند تكبير صورة PNG أو JPEG، قد تلاحظ أن الصورة أصبحت منقسمة (ضبابية أو محببة). ولكن باستخدام SVG، تظل الصورة حادة وواضحة بغض النظر عن مدى تكبيرها أو تغيير حجمها.

كيف يعمل SVG؟

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

على سبيل المثال، إذا قمت برسم دائرة، فسيخبر ملف SVG المتصفح بشيء مثل:

• "ارسم دائرة هنا بهذا الحجم وهذا اللون."

نظرًا لأنه تنسيق متجه (يعتمد على الرياضيات والهندسة، وليس البكسل)، يمكن تغيير حجم الصورة إلى أي حجم دون فقدان جودتها.

الفوائد الرئيسية لـ SVG:

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

أمثلة لحالات الاستخدام:

• الشعارات والأيقونات التي يجب أن تبدو واضحة على جميع الأجهزة (من الهواتف المحمولة إلى الشاشات الكبيرة).
• الرسوم التوضيحية أو الرسومات البسيطة التي لا تحتاج إلى تفاصيل معقدة مثل الصور.

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

تحقق من الطرق أدناه:

كيفية إضافة صور SVG إلى موقع ووردبريس؟

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

الطريقة الأولى: إضافة ملفات SVG أو صور في WordPress باستخدام WPCode Plugin

الخطوة 1: تثبيت البرنامج المساعد WPCode

• ما هو كود WPC؟ WPCode هو مكون إضافي يساعدك على إضافة مقتطفات تعليمات برمجية مفيدة مختلفة إلى موقع WordPress الخاص بك دون الحاجة إلى كتابة التعليمات البرمجية بنفسك. يمكن لهذه المقتطفات أن تؤدي العديد من الوظائف التي قد تتطلب مكونات إضافية متعددة.
• للبدء، تحتاج إلى تثبيت وتفعيل البرنامج المساعد WPCode. إذا لم تكن متأكدًا من كيفية تثبيت مكون إضافي، فيمكنك اتباع الدليل الأساسي، ولكن عادةً ما يكون الأمر بسيطًا مثل الانتقال إلى قسم "المكونات الإضافية" في لوحة تحكم WordPress الخاصة بك، والبحث عن WPCode، والنقر فوق "تثبيت" ثم "تنشيط" ".

الخطوة 2: الوصول إلى مكتبة WPCode Snippets

• بمجرد تنشيط المكون الإضافي، انتقل إلى لوحة تحكم WordPress الخاصة بك، ثم انتقل إلى Code Snippets » Add Snippet .

• في شريط البحث، اكتب "svg" للعثور على المقتطف الذي يسمح بتحميل ملفات SVG.
• قم بالتمرير فوق الخيار الذي يقول "السماح بتحميل ملفات SVG" ، وانقر على "استخدام المقتطف" عندما تراه.

الخطوة 3: تفعيل مقتطف الكود

• بعد تحديد المقتطف، سيتم نقلك إلى صفحة "تعديل المقتطف" . لقد قام WPCode بتهيئة كل شيء لك بالفعل، لذا لا داعي للقلق بشأن تغيير أي شيء.
• كل ما عليك فعله هو تبديل زر التبديل إلى "نشط" ثم النقر فوق الزر "تحديث" لحفظ التغييرات.

الخطوة 4: تحميل ملفات SVG إلى موقع WordPress الخاص بك

• الآن بعد أن أصبح مقتطف الشفرة نشطًا، يمكنك تحميل ملفات SVG تمامًا مثل أي تنسيق صور آخر (مثل JPG أو PNG) دون الحصول على رسالة خطأ من WordPress.

• يمكنك الذهاب إلى مكتبة الوسائط الخاصة بك وتحميل ملف SVG، وسيعمل بسلاسة على موقعك.

الخطوة 5 (اختياري): السماح للمستخدمين الآخرين بتحميل ملفات SVG

• افتراضيًا، يمكن فقط للمسؤولين (المستخدمين ذوي المستوى الأعلى) على موقع WordPress الخاص بك تحميل ملفات SVG. إذا كنت تريد السماح لمستخدمين آخرين بتحميل ملفات SVG، فيمكنك تحرير المقتطف.
• كيفية القيام بذلك : تحتاج إلى حذف الأسطر 14-16 في مقتطف الشفرة. تقيد هذه السطور تحميلات SVG للمسؤولين فقط. أو يمكنك "التعليق" على التقييد عن طريق إضافة شرطتين مائلتين (//) في بداية الأسطر 11-13، مما سيجعل WordPress يتجاهل هذه الأسطر.

• بمجرد الانتهاء من ذلك، انقر فوق "تحديث" مرة أخرى لحفظ التغييرات.

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

الخطوة 1: تثبيت البرنامج المساعد لدعم SVG

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

الخطوة 2: تكوين إعدادات البرنامج المساعد

• بعد تنشيط المكون الإضافي، انتقل إلى لوحة تحكم WordPress الخاصة بك وانتقل إلى الإعدادات »دعم SVG .

• هنا، سترى بعض الخيارات لتكوين كيفية التعامل مع ملفات SVG.

الخطوة 3: تقييد تحميلات SVG على المسؤولين

• لجعل موقع الويب الخاص بك أكثر أمانًا، قد ترغب في تقييد تحميلات SVG حتى يتمكن المسؤولون فقط (المستخدمون ذوو المستوى الأعلى) من تحميل ملفات SVG. للقيام بذلك، ما عليك سوى تحديد المربع الموجود بجوار "هل تريد التقييد بالمسؤولين؟" خيار.
• سيؤدي هذا إلى منع المستخدمين الآخرين (مثل المحررين أو المؤلفين) من تحميل ملفات SVG.

الخطوة 4 (اختياري): تمكين الوضع المتقدم للحصول على ميزات إضافية

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

الخطوة 5: احفظ إعداداتك

• بمجرد قيامك بتهيئة الإعدادات حسب رغبتك، انقر فوق الزر "حفظ التغييرات" لتطبيقها.

الخطوة 6: تحميل ملفات SVG في منشور أو صفحة

• الآن بعد أن تم إعداد المكون الإضافي لدعم SVG، يمكنك تحميل ملفات SVG إلى منشوراتك أو صفحاتك تمامًا مثل أي ملف صورة آخر.
• للقيام بذلك، قم بإنشاء منشور جديد أو قم بتحرير منشور موجود. في محرر المشاركات، أضف كتلة صورة (تمامًا كما تفعل مع JPG أو PNG)، وقم بتحميل ملف SVG الخاص بك.

الطريقة الثالثة: تحميل صور أو ملفات SVG باستخدام Safe SVG Plugin

الخطوة 1: تثبيت البرنامج الإضافي Safe SVG

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

الخطوة 2: ابدأ في تحميل ملفات SVG

• خبر سار : بمجرد تفعيله، يعمل البرنامج الإضافي تلقائيًا! لا توجد إعدادات تحتاج إلى تكوينها.
• يمكنك البدء فورًا في تحميل ملفات SVG إلى مكتبة وسائط WordPress الخاصة بك، تمامًا كما تفعل مع أي تنسيق صورة آخر (مثل PNG أو JPG).

الخطوة 3: كن على علم بأذونات المستخدم

• افتراضيًا، يسمح الإصدار المجاني من Safe SVG لأي مستخدم يمكنه كتابة منشورات (مثل المؤلفين أو المحررين) بتحميل ملفات SVG. قد يكون هذا مصدر قلق إذا كنت تريد مزيدًا من التحكم في من يمكنه تحميل ملفات SVG، حيث يزيد ذلك من خطر التحميلات الضارة.

الخطوة 4 (اختياري): الترقية إلى الإصدار المميز

• إذا كنت تريد التحكم في من يمكنه تحميل ملفات SVG (على سبيل المثال، قصرها على المسؤولين فقط)، فستحتاج إلى شراء الإصدار المميز من البرنامج الإضافي Safe SVG. يتيح لك الإصدار المتميز إدارة من يمكنه تحميل ملفات SVG، مما يمنحك مزيدًا من التحكم في الأمان.

خاتمة

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

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

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

راهول

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