العمل مع الصور المتجاوبة في ووردبريس

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

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

كيف يعمل كل شيء

من الواضح ، ما لم تكن قد قمت بذلك بالفعل ، فإن خطوتك الأولى هي التحديث إلى WordPress 4.4. بمجرد الانتهاء من التحديث ، إذا قمت بعرض الكود المصدري لموقعك ، فستلاحظ أن الصور الموجودة على موقعك تحتوي الآن على سمتين جديدتين: sizes و srcset . تتم تصفية هذه السمات ، مما يعني أن جميع أحجام الصور المتاحة موجودة ، لكن الأبعاد تظل متسقة مع الصورة الأصلية. لن تسمح السمة srcset بالاقتصاص المخصص في الحالات التي تختلف فيها نسبة العرض إلى الارتفاع عن النسخة الأصلية من الصورة. هذا لضمان عدم المساس بجودة الصورة عند عرضها على شاشة المستخدم.

الدخول تحت الغطاء وإجراء التغييرات

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

نظرًا لأنها ميزة في الخلفية ، لا تأتي الصور سريعة الاستجابة مع واجهة مستخدم - إنها تحدث فقط. بصفتك مطورًا ، يمكنك تعديل ملف functions.php في كل سمة من سماتك للتأكد من أن صورك قد تم منحها سمة sizes دقيقة. تذكر: عندما تريد الإشارة إلى الصور المتجاوبة ، فهذا يعني سمات علامة الصورة sizes و srcset .

السمات الافتراضية

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

يعمل إعداد هذه السمة كخاصية افتراضية بطريقتين. الأول هو أنه يفرض تطبيق سمة sizes على كل صورة. هذا مفيد بالنظر إلى أنه الآن مطلب إلزامي. والثاني هو أنه لا يسمح للمتصفحات باستخدام مصدر صورة أكبر من الحجم الأصلي للصورة. يمكن لشفرة CSS المستخدمة لتعديل حجم الصورة اعتمادًا على عرض شاشة العرض (مثل استعلامات الوسائط) أن تجعل هذا الإعداد الافتراضي أقل فائدة.

ربطات التصفية لمطوري السمات

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

تحذير

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

تصفية الصور

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

تتيح الوظائف الجديدة التي تأتي مع هذا الإصدار الآن إمكانية تطبيق سمات sizes و srcset على جميع الصور التي أضفتها باستخدام برنامج تحميل وسائط WordPress. كما يسمح لك بإضافة السمات إلى الصور في مشاركاتك. ألق نظرة على wp_get_attachment_image_sizes . يؤدي هذا إلى إرجاع سمة sizes التي يمكنك التقاطها وتغييرها عبر مرشح في ملف functions.php لموضوعك. وبالمثل ، فإن wp_get_attachment_image_srcset يفعل نفس الشيء ، فقط لسمة srcset .

صور مستجيبة وموضوعك المخصص

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

Wp_calculate_image_sizes - خطاف يمكن لمطوري القوالب استخدامه لضبط سمة sizes للعمل مع نقاط الفصل الموجودة في السمة الخاصة بهم.

Max_srcset_image_width - خطاف يمكن لمطور السمات استخدامه للتصفية وفقًا لأقصى عرض للصور الموجودة في سمة srcset .

W_calculate_image_srcset - خطاف يمنح المطورين القدرة على التصفية وفقًا لسمات srcset .

تعلم المزيد عن دعم الصور المتجاوبة

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

فوائد التحديث

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

بصفتك المطور ، سيتعين عليك ضبط سمة sizes في كل ملف من ملفات functions.php لجميع السمات الخاصة بك. ومع ذلك ، بمجرد بذل هذا الجهد الأولي ، تصبح الأمور أسهل بكثير. بعد معالجة منحنى التعلم ، ستجد أن العمل بهذه الوظيفة الجديدة يأتي بشكل طبيعي.

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