سایز تصویر محصول در ووکامرس: سه اندازه و روش واقعی تغییرشان

ووکامرس برای هر عکس محصولی که آپلود می‌کنید سه اندازه تصویر می‌سازد و فقط دو تای آن‌ها در پیشخوان وردپرس قابل ویرایش‌اند. woocommerce_thumbnail تصویر شبکه فهرست محصولات است، woocommerce_single تصویر بزرگ صفحه محصول است، و woocommerce_gallery_thumbnail نوار بندانگشتی‌های کوچک زیر آن. آن‌ها را از مسیر نمایش > سفارشی‌سازی > ووکامرس > تصاویر محصول تغییر می‌دهید — و اگر آن پنل یک منوی کشویی برش نشان می‌دهد اما کادر عرض ندارد، قالب شما عمداً عرض‌ها را در کد قفل کرده است.

سه اندازه

نام اندازه	کجا نمایش داده می‌شود	برش	قابل ویرایش در سفارشی‌ساز
woocommerce_thumbnail	صفحه فروشگاه، شبکه دسته‌ها، محصولات مرتبط، فروش مکمل	به‌طور پیش‌فرض برش سخت مربعی	عرض و نسبت
woocommerce_single	تصویر اصلی در صفحه تک‌محصول	بدون برش — نسبت تصویر اصلی حفظ می‌شود	فقط عرض
woocommerce_gallery_thumbnail	نوار کوچک زیر تصویر اصلی محصول	برش سخت مربعی	خیر

این‌ها روی اندازه‌های استاندارد وردپرس سوار می‌شوند. یک عکس محصول معمولاً thumbnail و medium و medium_large و large را می‌سازد، به‌علاوه سه اندازه ووکامرس و احتمالاً اندازه‌های اضافه‌ای که قالب شما با add_image_size ثبت کرده. این یعنی تعداد زیادی فایل به ازای هر آپلود، و دلیل اینکه ورود ۳۰۰ محصول این‌قدر طول می‌کشد.

بندانگشتی گالری همان است که مردم را غافلگیر می‌کند: هیچ کنترلی در پیشخوان ندارد. روی نصب پیش‌فرض یک مربع کوچک است، از قدیم ۱۰۰ پیکسل، و همان اندازه‌ای است که بیشترین احتمال دارد روی صفحه رتینا تار به نظر برسد، چون فایل فیزیکی‌اش واقعاً ریز است.

تنظیمات واقعاً کجا هستند

مسیر نمایش > سفارشی‌سازی > ووکامرس > تصاویر محصول سه کنترل به شما می‌دهد:

• عرض تصویر اصلی — عرض woocommerce_single. ارتفاع خودکار است، پس نسبت تصویر اصلی حفظ می‌شود.
• عرض بندانگشتی — عرض woocommerce_thumbnail.
• برش بندانگشتی — 1:1 (مربع، پیش‌فرض)، Custom (نسبتی مثل ۴:۳ را خودتان می‌نویسید)، یا Uncropped.

به چیزی که نیست دقت کنید: کادر ارتفاع برای بندانگشتی فهرست وجود ندارد، چون ارتفاع از نسبت برش به دست می‌آید. و برای بندانگشتی گالری اصلاً هیچ چیزی نیست.

قبل از تغییر هر چیزی، خوب است دقیقاً ببینید یک فایل چه نسخه‌های مشتقی تولید می‌کند — یک عکس محصول واقعی را در ابزار اندازه‌های تصویر وردپرس بیندازید و فهرست کامل را بگیرید، از جمله اینکه آیا منبع شما به‌اندازه کافی بزرگ هست که هر اندازه را بدون بزرگ‌نمایی پر کند.

چرا تصاویر فهرست محصولات شما اشتباه به نظر می‌رسند

بندانگشتی فهرست برش سخت مربعی می‌خورد. برش سخت یعنی ووکامرس یک مربع از مرکز عکس شما برمی‌دارد و بقیه را دور می‌ریزد — نه حاشیه سیاه اضافه می‌کند و نه تصویر را له می‌کند. یک عکس محصول ۲۰۰۰ در ۱۲۰۰ تبدیل به یک تکه ۱۲۰۰ در ۱۲۰۰ از وسط می‌شود و بعد کوچک می‌شود.

برای یک بطری که دقیقاً وسط کادر با حاشیه اطرافش عکاسی شده، این خوب است. برای این‌ها فاجعه است:

• محصولات بلند (اسکی، کابل، میله پرده) — فقط یک‌سوم وسط را می‌بینید و بس
• ترکیب‌بندی‌های خارج از مرکز — محصول به لبه کادر می‌رود و بریده می‌شود
• عکس‌هایی که سوژه کادر را لبه‌تا‌لبه پر می‌کند — بالا و پایین قطع می‌شود
• عکس‌های لایف‌استایل با محصول در یک گوشه

توصیه رایج این است که «برش را روی بدون برش بگذارید». این جواب می‌دهد، اما درباره هزینه‌اش صادق باشید: بدون برش یعنی هر بندانگشتی نسبت خودش را نگه می‌دارد، پس شبکه‌ای از عکس‌های با جهت‌های مختلف بصری ناهموار می‌شود و سطرها دیگر با هم تراز نمی‌مانند، مگر اینکه CSS قالب شما ارتفاع متغیر را مدیریت کند. بیشتر قالب‌ها مربع فرض می‌کنند.

راه‌حل بهتر، اگر از پسش برمی‌آیید، در خود منبع است: روی عکس‌های محصول مربعی استاندارد شوید، با محصول در مرکز و حاشیه یکنواخت. آن‌وقت یک برش سخت مربعی عملاً هیچ کاری نمی‌کند و همه چیز پایین‌دست قابل پیش‌بینی می‌شود. تغییر تنظیم برش، دور زدن مشکل است؛ تصاویر منبع یکدست، راه‌حل واقعی‌اند.

وقتی قالب عرض‌ها را قفل می‌کند

اگر پنل تصاویر محصول شما فقط برش را ارائه می‌دهد، قالب شما هنگام ثبت پشتیبانی از ووکامرس عرض‌های ثابتی را اعلام کرده است:

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

وقتی قالبی این مقادیر را پاس می‌دهد، ووکامرس کنترل‌های عرض را از سفارشی‌ساز حذف می‌کند و فقط نسبت را نگه می‌دارد. این نه باگ است و نه خصومت قالب — 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 هم کار می‌کند. این تنها راه تغییر بندانگشتی گالری هم هست، چون هیچ رابط کاربری ندارد.

هزینه واقعی، رک و راست: بازنویسی یک عرض قفل‌شده یعنی فایلی که ووکامرس می‌سازد دیگر با انتظار CSS قالب نمی‌خواند. معمولاً تصویر فقط در مرورگر مقیاس می‌شود و خوب به نظر می‌رسد، چون حالا از کادرش بزرگ‌تر است. گاهی قالب یک ظرف با ارتفاع ثابت دارد و شما حاشیه سیاه یا سرریز می‌گیرید. قبل از بازسازی ۲٬۰۰۰ محصول، روی یک محصول تست کنید.

تغییر اندازه یعنی بازسازی

هر تنظیم اندازه فقط روی آپلودهای جدید اثر دارد. محصولات موجود همان فایل‌هایی را سرو می‌کنند که هنگام آپلودشان ساخته شده بود، پس تا وقتی بازسازی نکنید هیچ تغییر قابل‌مشاهده‌ای رخ نمی‌دهد.

ووکامرس هنگام ذخیره سفارشی‌ساز یک بازسازی پس‌زمینه راه می‌اندازد. روی یک فهرست کوچک همین کافی است. روی فهرست بزرگ به اجرای مطمئن WP-Cron وابسته است که در فروشگاه‌های کم‌ترافیک اغلب اتفاق نمی‌افتد، و آخرش یک کتابخانه نیمه‌بازسازی‌شده تحویل می‌گیرید. به‌جایش خودتان اجرایش کنید:

wp media regenerate --yes

برای بازسازی فقط تصاویر محصول:

wp media regenerate --yes --post_type=product

اگر می‌خواهید کار پس‌زمینه سر راهتان نباشد تا دستی انجامش دهید:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

دو کاری که بازسازی انجام نمی‌دهد. فایل‌های قدیمی را حذف نمی‌کند — پوشه آپلودها هر نسخه بی‌استفاده از تنظیمات قبلی را نگه می‌دارد و بزرگ‌تر می‌شود. و نمی‌تواند اندازه‌ای بزرگ‌تر از منبع شما بسازد، چون وردپرس بزرگ‌نمایی نمی‌کند. اگر عرض تصویر اصلی را روی ۱۲۰۰ بگذارید ولی عکس‌های محصولتان ۸۰۰ پیکسل عرض دارند، هیچ فایل ۱۲۰۰ پیکسلی ساخته نمی‌شود؛ مرورگر یک فایل ۸۰۰ پیکسلی می‌گیرد و کشش می‌دهد، و srcset هم چیز بهتری برای ارائه ندارد.

اندازه‌ای که واقعاً باید آپلود کنید

هدف را تصاویر منبع مربعی با حدود دو برابر بزرگ‌ترین عرض تنظیم‌شده‌تان بگذارید — ۱۲۰۰ در ۱۲۰۰ برای تصویر اصلی ۶۰۰ پیکسلی، و ۱۶۰۰ در ۱۶۰۰ اگر قالبتان از ۸۰۰ پیکسل استفاده می‌کند. این نمایشگرهای رتینا ۲x را پوشش می‌دهد و به وردپرس پیکسل کافی می‌دهد تا هر نسخه مشتق را بدون بزرگ‌نمایی بسازد. همه محصولات را با ابعاد یکسان نگه دارید تا شبکه یکدست بماند.

هنوز گیر کرده‌اید؟

اگر اندازه‌ها درست تنظیم شده‌اند، بازسازی کرده‌اید و باز هم یک محصول اشتباه به نظر می‌رسد، تصویر را در تب جدید باز کنید و نام فایل را بخوانید. پسوند ابعادی که با هیچ‌کدام از اندازه‌های تنظیم‌شده شما نمی‌خواند یعنی چیز دیگری آن را ثبت کرده. نبودن هیچ پسوندی یعنی ووکامرس به فایل اندازه کامل عقب‌نشینی کرده، که تقریباً همیشه یعنی منبع برای اندازه‌ای که خواسته‌اید خیلی کوچک بوده. آن فایل منبع را در ابزار اندازه‌های تصویر بیندازید و آنچه وردپرس باید بسازد را با آنچه مرورگر واقعاً بارگذاری کرده مقایسه کنید — وقتی این دو نخواندند، معمولاً یک افزونه بهینه‌ساز یا یک تغییردهنده اندازه تصویر در CDN بینشان نشسته است.