كيفية استخدام SVG في WordPress

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

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

ما هو SVG؟

SVG (Scalable Vector Graphics) هو تنسيق صورة مستند إلى XML لعرض الرسومات على الويب وداخل التطبيقات. بشكل أساسي ، ملف SVG هو ببساطة مجموعة من تعليمات XML البرمجية التي تحدد الأشكال والألوان المختلفة المستخدمة في صورة SVG.

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

الأهم من ذلك ، أن W3C تتعرف على SVG كمعيار رائد في الصناعة. لذلك ، يعمل SVG بشكل لا تشوبه شائبة مع التقنيات الأخرى المستندة إلى الويب مثل DOM و HTML وما إلى ذلك.

ما سبب أهمية SVG؟

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

وغني عن القول ، أن ملفات SVG أكثر مرونة بكثير من التنسيقات التقليدية مثل PNG أو JPEG. ويعني التفاعل المباشر بين CSS و JavaScript أنه يمكنك تكييف صور SVG أثناء التنقل. هذا أمر بالغ الأهمية عندما تعمل على تصميم جديد أو غير ذلك.

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

باختصار ، توفر SVGs المرونة وتقليل حجم الصورة وأساسًا قويًا لتحسين أداء الصور على موقع WordPress الخاص بك.

كيف يتم إنشاء صور SVG؟

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

قد تبدو مجموعة بسيطة من المربعات كما يلي في تنسيق XML:

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

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

Affinity Designer هو برنامج تحرير متجه احترافي مشهور ، وكذلك برامج مثل Adobe Illustrator و Sketch و Figma و Inkscape.

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

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

هل يدعم WordPress SVG؟

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

كما ترى ، على عكس أنواع ملفات PNG / JPG / GIF - فإن SVG ليس صورة نقطية ولكنه ناقل. نتيجة لذلك ، يتعرض SVG لمخاطر استغلال JavaScript ، وقد اختار WordPress عدم السماح لـ SVG في WordPress افتراضيًا. إنه منطقي من جميع وجهات النظر.

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

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

كيفية تمكين صور SVG على موقع WordPress؟

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


//enable SVG file format for WordPress Uploads
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)؛

إرجاع $ file_types؛
}
add_action ('upload_mimes'، 'add_file_types_to_uploads') ؛

وخيارك الآخر - الأكثر أمانًا - هو استخدام المكونات الإضافية. فيما يلي ثلاثة من أبرز المكونات الإضافية لتمكين SVG في WordPress.

دعم SVG

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

باستخدام دعم SVG - يمكنك البدء في إضافة ملفات SVG إلى منشوراتك وصفحاتك باستخدام علامة الصورة التقليدية. على سبيل المثال ، يمكنك إضافة فئة CSS جديدة إلى صورك: "style-SVG" ، والتي ستجلب صورة SVG التي تم تحميلها وتعرض محتوياتها في عرض مضمّن.

الميزات الرئيسية لهذا البرنامج المساعد هي:

• تفعيل إدارة ملفات SVG داخل مكتبة وسائط WordPress.
• تحويل صور SVG التي تم تحميلها إلى تعليمات برمجية مضمنة.
• يدعم أداة Image Widget لإضافة علامات Alt و Caption إلى جميع صور SVG.
• صمم صور SVG الفردية باستخدام CSS المخصص.
• تنفيذ تأثيرات الرسوم المتحركة باستخدام CSS3 و JavaScript.
• صفحات الإعدادات التفصيلية داخل لوحة معلومات المكون الإضافي.
• فرض الوصول القائم على الإذن. على سبيل المثال ، قصر التحميل فقط على الحسابات التي تتمتع بامتيازات المسؤول.

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

للتكرار ، يمكن لأي شخص لديه امتيازات التحميل تحميل ملفات SVG جديدة ، ولكن نظرًا لأن ملفات SVG تستند إلى XML - فهي مفتوحة للاستغلال من خلال الحقن الضارة وغير ذلك.

SVG آمن

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

مع 50000 مستخدم نشط ، يمكنك الاعتماد على Safe SVG لتوفير سجل حافل من الأداء الآمن. تجدر الإشارة إلى أن هناك نسختين مختلفتين من هذا البرنامج المساعد ؛ مجاني ومدفوع.

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

إذا اخترت الإصدار الاحترافي ، فستحصل على ميزات إضافية مثل SVGO Optimization. ستعمل تقنية التحسين هذه على تقليل حجم ملف تحميلات SVG.

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

أضف دعم SVG الكامل

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

يضيف هذا المكون الإضافي بعض وظائف SVG إلى WordPress الخاص بك ويستخدم تقنية SVG التي تعتمد على فكرة من قبل Alexey Ten. يبدو أن هذه الطريقة لتضمين صور SVG في HTML هي الطريقة التي تتمتع بأفضل مزيج من الأداء والتوافق في الوقت الحالي.

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

ما هي بعض ملحقات SVG المفيدة الأخرى لبرنامج WordPress؟

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

أيقونات WP SVG

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

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

تمامًا كما في حالة المؤلفين ، يعد هذا المكون الإضافي استثنائيًا لجميع أنواع التطوير والمواقع المتعددة وعمل العميل. مع عدم وجود قيود ، لا داعي للقلق بشأن توافق السمات أو أي شيء من هذا القبيل.

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

قائمة SVG الاجتماعية

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

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

الرموز المتاحة حاليًا هي للمواقع والأنظمة الأساسية التالية: plus.google و WordPress و facebook و twitter و dribbble و Pinterest و Github و Tumblr و Youtube و Flickr و Vimeo و Instagram و LinkedIn و xing / feed و mailto.

شعار SVG وتأثيرات النص

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

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

إذن ، ما هي بعض الميزات الرئيسية؟

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

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

أين يمكنك العثور على رسومات SVG؟

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

فيما يلي بعض المواقع الرائعة التي توفر محتوى SVG مجانيًا:

• FontAwesome - Font Awesome هي مكتبة أيقونات الخطوط الأكثر روعة في العالم. استمر المشروع بقوة لعدد من السنوات ولديه دعم متعمق ليس فقط للمتصفحات ولكن أيضًا لأطر محددة وبرامج تصميم. تعد حزمة الخطوط الموجهة لإمكانية الوصول قاتلة تمامًا وسهلة الاستخدام! في الواقع ، أنا متأكد من أن هناك عشرات الإضافات في WordPress تقدم الدعم لـ Font Awesome!
• Vecteezy - يمكن القول إن Vecteezy هي أكبر منصة رسوميات متجهة على هذا الكوكب. مدفوعًا بالتصاميم المخصصة ومساهمات المجتمع والبيانات المستندة إلى الويب: لدى Vecteezy متجهات متاحة في أي نوع من الفئات أو الشكل أو النموذج. ومن السهل جدًا تنزيل الملفات أيضًا. كل ما عليك فعله هو الرجوع إلى صفحة المؤلف التي حصلت على الملف منها. هذا موقع أجد نفسي أستخدمه بشكل متكرر.
• خلفيات SVG - هل تواكب أحدث اتجاهات تصميم الويب؟ هناك العديد من المجالات الإبداعية التي يتم استكشاف التصاميم فيها الآن. وإحدى هذه المناطق هي خلفيات SVG. لقد رأيتهم أيضًا. الأنماط المتموجة والخطوط المنحنية وما إلى ذلك. استخدم هذا الموقع لإنشاء خلفيات SVG يمكن الوصول إليها بسهولة!
• SVG Grabber - يعد امتداد Chrome هذا بمثابة هبة من السماء للحصول على صور SVG من صفحات مواقع الويب المختلفة. ما عليك سوى النقر فوق الرمز ويمكن للملحق جلب كل ملف SVG على الصفحة. بالطبع ، يجب عليك اتباع قواعد حقوق النشر أينما كان ذلك ممكنًا ، ولكن بشكل عام يبدو هذا امتدادًا قويًا لاستخدامه بشكل متكرر.
• Vector Logo Zone - اعتمادًا على المكانة التي تعمل فيها ، قد تجد أنه من المفيد أن يكون لديك مجموعة من الشعارات القائمة على المتجهات من العلامات التجارية الرائدة في العالم. يمكنك أيضًا استخدام هذه الملفات عند إجراء إعلانات أو عروض ترويجية محددة. ويمكن لمعظم محرري الصور هذه الأيام تحويل ملفات SVG إلى ملفات PNG وبخلاف ذلك على أي حال.

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

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

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