أهمية الصور المتجاوبة في WordPress Core

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

تتضمن الميزة الرئيسية توفر المكون الإضافي Respive Images داخل نواة WordPress. هذا يعني أنه يمكن للمستخدمين الآن الاستمتاع بوجود دعم للصور سريع الاستجابة والذي يأتي كميزة افتراضية في WordPress. دعنا نلقي نظرة فاحصة على كيفية عمل هذه الميزة بالفعل وكيف يمكن استخدامها بعناية لتسخير إمكانات موقع WordPress.

عمل الميزة

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

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

سيتعين على مطوري السمات التأكد من إتاحة سمة الأحجام الدقيقة في الصور عن طريق تحرير ملف function.php الخاص بالثيم. من المهم النظر في الأمر لأن سمات srcset والأحجام الموجودة في علامة الصورة هي ما يمثل بالفعل الصور المتجاوبة في WordPress. أصعب توقع هو سمة الأحجام على الرغم من أن WordPress يعمل بشكل جيد عندما يتعلق الأمر بتضمين جميع الأحجام المتاحة في سمة srcset . من واجب سمة الأحجام شرح المتصفح حول مدى اتساع الصورة في كل منفذ عرض متاح. ومع ذلك ، يمكن أن تختلف النتائج اعتمادًا على التصميم المتاح مع موضوع المستخدم ، مما يوفر القيمة الافتراضية المعقولة وهي "الأحجام =" (max width: {{image-width}}) 100 vw، {{image-width}} "

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

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

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

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

تم تقديم عدد من الخطافات الجديدة جنبًا إلى جنب مع الوظائف الجديدة التي يمكن استخدامها لتوفير مستوى من دعم الصورة سريع الاستجابة المصمم خصيصًا لمطابقة المظهر الخاص بك. يمكن تصفية الحد الأقصى لعرض الصورة الذي يجب تضمينه في سمة srcset بواسطة مطور السمة من خلال ربط max_srcset_image_width. يمكن تصفية سمات srcset للصورة من خلال ربطها بـ wp_calculate_image_srcset بينما يمكن تخصيص سمة الأحجام من قبل مطور السمة لتلائم نقاط توقف الصورة في نسقها عن طريق تصفية wp_calculate_image_sizes.

يمكن تصفية صور المحتوى باستخدام wp_calculate_image_sizes بينما يمكن تصفية الصور المصغرة / الصور المميزة باستخدام وظيفة wp_get_attachment_image_attributes. هناك حاجة إلى وظيفتين مختلفتين نظرًا لأن السمة تتغير للطريقة التي يتم بها عرض الصور المميزة في نقاط توقف مختلفة وتختلف تمامًا مقارنة بالطريقة التي يتم بها عرض صور المحتوى في نفس الظروف. وبالتالي يوفر WordPress 4.4 لمطوري السمات فرصة محسّنة لتصفية الصور بطرق مختلفة وبالتالي تكون محددة قدر الإمكان.

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