كيفية جعل وورد الصور متجاوبه
WordPress هو منصة قوية حقا. جعل موضوع استجابة ودمجها من السهل جدا بمجرد معرفة أساسيات theming. من ناحية أخرى ، فإن الصور المتجاوبة ليست من الأشياء التي يتعامل معها ووردبرس خارج الصندوق. يمكنك أن تسير في طريق إنشاء كل حجم للصورة يدويًا ، ثم في محرر HTML يمكنك كتابة علامة الصورة ، وسمات srcset وكل صورة. لن يستغرق ذلك وقتًا فحسب ، بل قد يكون مشكلة بالنسبة إلى أي من المستخدمين الإداريين غير المتعلمين بلغة HTML.
لحسن الحظ هناك طريقة لجعل WordPress تفعل كل الرفع الثقيل. يمكن أن يولد كل أحجام الصور من تحميل صورة واحدة ، ثم ، عن طريق ملحق ، تطبيق وسمات الصورة وسمات srcset في أي مكان يختار المؤلف لإدراج صورة.
الخطوة 1: قم بتعديل functions.php لتوليد المزيد من أحجام الصور
في كل مرة تقوم فيها بتحميل صورة يحفظها WordPress بحجمها الأصلي. كما يقوم أيضًا بإنشاء 3 نسخ تم تغيير حجمها تلقائيًا بهذه الأحجام القياسية (قد يتغير الارتفاع أو العرض حسب نسبة الصورة):
- صورة مصغرة (150 × 150)
- متوسطة (300 × 300)
- كبير (1024 × 1024)
هذه هي ميزة قوية حقا لأنها يمكن تخصيصها لجعل أي حجم الصورة. هذا يعني أنك لست بحاجة إلى عمل نسخ متعددة من صورة بأحجام مختلفة. كل ما عليك هو تحميل صورة واحدة ، ويقوم WordPress بإنشاء النسخ التي تم تغيير حجمها.
يتم ذلك عن طريق تعديل ملف functions.php. لإضافة أحجام صور جديدة ، تحتاج إلى إضافة مكالمات إلى الوظيفة add_image_size . إليك مثال يضيف أربعة أحجام صور جديدة:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );تتضمن كل مكالمة إلى الدالة اسمًا (بحيث يمكن لـ WordPress تحديد الحجم) وعرضًا. ستكون الأحجام الجديدة 300 ، 600 ، 1200 و 2400 بكسل. من الممكن باستخدام الوظيفة add_image_size لجعل WordPress يقوم أيضًا بضبط الارتفاع أو اقتصاص الصورة ، ولكن المثال أعلاه سيحافظ على نسبة العرض إلى الارتفاع للصورة الأصلية. (يمكن العثور على المزيد عن الوظيفة add_image_size في WordPress Codex .)
يوضح المثال أعلاه فقط أربعة أحجام صور جديدة يتم إضافتها ، ولكن قد ترغب في إضافة المزيد أو أقل ... وسيعتمد هذا على تصميم السمة الخاصة بك. في أي وقت يتم فيه تحميل صورة إلى WordPress ، سيؤدي ذلك إلى إنشاء أحجام صور جديدة. الخطوة التالية هي تضمينها في HTML.
الخطوة الثانية: تثبيت المكوّن الإضافي RICG Responsive Images
لكي يقوم وورد بإخراج جميع أحجام الصور ، يحتاج البرنامج المساعد الجديد إلى تثبيت: RICG يستجيب الصور توصيل في. بمجرد تثبيته وتنشيطه ، سيتم تضمين جميع أحجام الصور في علامة الصورة عبر السمة srcset.
عادةً عند إضافة صورة إلى صفحة في WordPress ، يبدو إخراج HTML كما يلي:
هناك صورة واحدة في السمة src.
بمجرد تثبيت المكون الإضافي ، سيبدو HTML كما يلي:
تمت إضافة جميع أحجام الصور الجديدة عبر السمة srcset .
البرنامج المساعد يشمل أيضا Picturefill.js ، polyfill الصورة المتجاوب الذي يضيف الدعم لكل عنصر الصورة والخصائص المتجاوبة الجديدة لعنصر img. هذا ، جنبا إلى جنب مع سمات srcset التي يتم تضمينها الآن في علامة الصورة هو ما يجعل الصور الخاصة بك تستجيب.
الصور الخاصة بك الآن تستجيب
الآن ستكون الصور على موقعك الإلكتروني سريعة الاستجابة - سيختار المتصفح أنسب صورة لتنزيلها.
سيحصل المستخدمون على الأجهزة ذات الشاشات الأصغر على الصور الأصغر حجمًا. سيتم تحميل موقعك على الويب بشكل أسرع نظرًا لأنه سيتم تنزيل هذه الصور بشكل أسرع ، وستحتاج إلى عدد أقل من النطاق الترددي للمستخدمين. سيحصل المستخدمون على الأجهزة ذات الشاشات الأكبر على الصور الأكبر. لن تظهر على شكل بيكسل أو بجودة أقل.
هناك مشكلة واحدة فقط محتملة في هذه الطريقة: ستعمل فقط مع الصور التي تم تحميلها إلى WordPress بعد تثبيت البرنامج المساعد RICG Responsive Images. إذا كان موقع ويب جديد تمامًا تعمل عليه ، فهذا قد لا يمثل مشكلة ، ولكن إذا كان موقع ويب حاليًا يحتوي على محتوى حالي ، فلن يتم إنشاء أحجام الصور الجديدة التي أضفتها في functions.php. لحسن الحظ ، لا تحتاج إلى إعادة إضافة جميع الصور - هناك ملحق يمكنه المساعدة.
الخطوة 3: تثبيت المكون الإضافي لإعادة إنشاء أحجام الصور (اختياري)
ال تجديد الصور المصغرة سيخضع المكون الإضافي إلى جميع مرفقات الصور الحالية ويعيد إنشاء أحجام الصور الجديدة استنادًا إلى الأحجام الجديدة التي تم إنشاؤها في functions.php - فهي عبارة عن موفر زمني حقيقي ولا تتطلب سوى نقرة زر واحدة.
بمجرد التثبيت ، انتقل إلى أدوات -> Regen. بعد ذلك ، انقر على "إعادة إنشاء جميع الصور المصغرة" زر. سيظهر شريط الحالة وستظهر لك المعلومات حول عدد الصور التي تم تغيير حجمها.
الآن ، سيتم إخراج جميع الصور الموجودة في موقع الويب الخاص بك بشكل صحيح باستخدام علامة الصورة عبر السمة srcset .
تستخدم صورة مميزة صورة الجهاز و صورة الجهاز المحمول عبر Shutterstock.