مقاسات صور المنتجات في WooCommerce: المقاسات الثلاثة وكيف تغيّرها فعلًا

يولّد WooCommerce ثلاثة مقاسات لكل صورة منتج ترفعها، واثنان منها فقط قابلان للتعديل من لوحة تحكم WordPress. المقاس woocommerce_thumbnail هو صورة شبكة المتجر، وwoocommerce_single هي الصورة الكبيرة في صفحة المنتج، وwoocommerce_gallery_thumbnail هو شريط القصص المصغّرة الصغير تحتها. تغيّرها من المظهر ← تخصيص ← WooCommerce ← صور المنتجات — وإن أظهرت لك تلك اللوحة قائمة قصّ بلا خانات عرض، فقالبك ثبّت العروض في الشيفرة عن قصد.

المقاسات الثلاثة

اسم المقاس	أين يظهر	القصّ	قابل للتعديل في المخصص
woocommerce_thumbnail	صفحة المتجر، شبكات التصنيفات، المنتجات ذات الصلة، المبيعات المتقاطعة	قصّ صارم إلى مربع افتراضيًا	العرض والنسبة
woocommerce_single	الصورة الرئيسية في صفحة المنتج المفردة	بلا قصّ — تُحفظ نسبة الأبعاد الأصلية	العرض فقط
woocommerce_gallery_thumbnail	الشريط الصغير تحت صورة المنتج الرئيسية	مربع مقصوص قصًّا صارمًا	لا

هذه تُضاف فوق مقاسات WordPress القياسية. فصورة منتج واحدة تنتج عادةً thumbnail وmedium وmedium_large وlarge، ومقاسات WooCommerce الثلاثة، وربما إضافات سجّلها قالبك عبر add_image_size. هذا عدد كبير من الملفات لكل رفعة، وهو سبب طول وقت استيراد 300 منتج.

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

أين تسكن الإعدادات فعلًا

المظهر ← تخصيص ← WooCommerce ← صور المنتجات يمنحك ثلاثة ضوابط:

• عرض الصورة الرئيسية — عرض woocommerce_single. الارتفاع تلقائي، فتُحفظ نسبة الأبعاد الأصلية.
• عرض القصة المصغّرة — عرض woocommerce_thumbnail.
• قصّ القصة المصغّرة — 1:1 (مربع، وهو الافتراضي)، أو Custom (تكتب نسبة مثل 4:3)، أو Uncropped.

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

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

لماذا تبدو صور متجرك خاطئة

القصة المصغّرة في المتجر تُقصّ قصًّا صارمًا إلى مربع. والقصّ الصارم يعني أن WooCommerce يأخذ مربعًا من وسط صورتك ويرمي الباقي — لا يضيف أشرطة سوداء ولا يضغط الصورة. فلقطة منتج بمقاس 2000x1200 تصبح شريحة 1200x1200 مأخوذة من الوسط، ثم تُصغَّر.

هذا مقبول لزجاجة مصوّرة في المنتصف تمامًا مع هامش حولها. وهو كارثة في:

• المنتجات الطويلة (الزلاجات، الكابلات، قضبان الستائر) — ترى الثلث الأوسط ولا شيء غيره
• التكوينات خارج المركز — ينزاح المنتج إلى حافة الإطار فيُقتطع
• الصور التي يملأ فيها الشيء الإطار من حافة إلى حافة — يُقصّ أعلاها وأسفلها
• اللقطات الحياتية التي يقع فيها المنتج في زاوية

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

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

حين يقفل القالب العروض

إذا كانت لوحة صور المنتجات لديك تعرض القصّ وحده، فقالبك صرّح بعروض ثابتة حين سجّل دعم WooCommerce:

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

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

يمكنك تجاوزها من ملف functions.php في قالب فرعي باستخدام فلتر كل مقاس:

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

والنمط نفسه يعمل مع woocommerce_get_image_size_thumbnail. وهذه أيضًا الطريقة الوحيدة لتغيير قصة المعرض المصغّرة، إذ لا واجهة لها.

التكلفة الحقيقية، بوضوح: تجاوز عرض مقفل يعني أن الملف الذي يولّده WooCommerce لم يعد يطابق ما تتوقعه أنماط CSS في القالب. غالبًا تتحجّم الصورة في المتصفح وتبدو جيدة لأنها صارت أكبر من الصندوق. وأحيانًا يكون في القالب حاوية بارتفاع ثابت فتحصل على أشرطة أو فيض. اختبر على منتج واحد قبل أن تعيد توليد 2,000.

تغيير المقاسات يعني إعادة التوليد

كل إعداد مقاس يؤثر في الملفات المرفوعة الجديدة فقط. والمنتجات الموجودة تستمر في تقديم الملفات التي وُلِّدت وقت رفعها، فلا يتغير شيء مرئي حتى تعيد بناءها.

يبدأ WooCommerce إعادة توليد في الخلفية عند حفظ المخصص. وعلى كتالوج صغير يكفي ذلك. أما على كتالوج كبير فيعتمد على انطلاق WP-Cron بموثوقية، وهو ما لا يحدث غالبًا على متجر قليل الزيارات، فتنتهي بمكتبة نصف مُعاد توليدها. شغّلها بنفسك بدلًا من ذلك:

wp media regenerate --yes

ولإعادة بناء صور المنتجات وحدها:

wp media regenerate --yes --post_type=product

وإن أردت إبعاد مهمة الخلفية عن طريقك بينما تعمل يدويًا:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

أمران لن تفعلهما إعادة التوليد. لا تحذف الملفات القديمة — فمجلد الرفع يحتفظ بكل نسخة مشتقة يتيمة من الإعدادات السابقة، وسيكبر. ولا تستطيع إنشاء مقاس أكبر من مصدرك، لأن WordPress لا يكبّر الصور. فإن ضبطت عرض الصورة الرئيسية على 1200 بينما صور منتجاتك بعرض 800 بكسل، فلن يُنشأ ملف بعرض 1200؛ يحصل المتصفح على ملف 800 بكسل ويمطّه، ولا يجد srcset ما هو أفضل ليقدّمه.

المقاس الذي ينبغي رفعه فعلًا

استهدف صورًا مصدرية مربعة بضعف أكبر عرض ضبطته تقريبًا — 1200x1200 لصورة رئيسية بعرض 600 بكسل، و1600x1600 إن كان قالبك يستخدم 800 بكسل. هذا يغطي شاشات ريتينا مضاعفة الكثافة ويمنح WordPress بكسلات كافية لبناء كل نسخة مشتقة دون تكبير. وحافظ على أبعاد موحّدة لكل المنتجات لتبقى الشبكة منتظمة.

ما زلت عالقًا؟

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