ขนาดรูปสินค้าใน WooCommerce: สามขนาดที่มี และวิธีเปลี่ยนมันจริง ๆ

WooCommerce สร้างรูปสามขนาดสำหรับภาพสินค้าทุกรูปที่คุณอัพโหลด และมีแค่สองขนาดเท่านั้นที่แก้ได้ในหน้าแอดมินของ WordPress woocommerce_thumbnail คือรูปในกริดแคตตาล็อก woocommerce_single คือรูปใหญ่บนหน้าสินค้า และ woocommerce_gallery_thumbnail คือแถบภาพย่อเล็ก ๆ ที่อยู่ใต้รูปนั้น คุณเปลี่ยนค่าได้ที่ Appearance > Customize > WooCommerce > Product Images — และถ้าแผงนั้นแสดงดรอปดาวน์การครอปแต่ไม่มีช่องความกว้าง แปลว่าธีมของคุณล็อกความกว้างไว้ในโค้ดอย่างจงใจ

สามขนาดนั้น

ชื่อขนาด	ใช้แสดงที่ไหน	การครอป	แก้ได้ใน customizer ไหม
woocommerce_thumbnail	หน้าร้าน กริดหมวดหมู่ สินค้าที่เกี่ยวข้อง สินค้าแนะนำเพิ่ม	hard-crop เป็นสี่เหลี่ยมจัตุรัสโดยค่าเริ่มต้น	ความกว้างและอัตราส่วน
woocommerce_single	รูปหลักบนหน้าสินค้าเดี่ยว	ไม่ครอป — คงอัตราส่วนเดิมไว้	ความกว้างอย่างเดียว
woocommerce_gallery_thumbnail	แถบเล็ก ๆ ใต้รูปสินค้าหลัก	hard-crop เป็นสี่เหลี่ยมจัตุรัส	ไม่ได้

ทั้งสามขนาดนี้อยู่เพิ่มเติมจากขนาดมาตรฐานของ WordPress ภาพสินค้าเพียงรูปเดียวมักจะสร้าง thumbnail, medium, medium_large, large, สามขนาดของ WooCommerce และอาจมีขนาดพิเศษที่ธีมของคุณลงทะเบียนไว้ผ่าน add_image_size อีก นั่นคือไฟล์จำนวนมากต่อการอัพโหลดหนึ่งครั้ง และเป็นเหตุผลว่าทำไมการนำเข้าสินค้า 300 รายการถึงใช้เวลานานขนาดนั้น

ภาพย่อของแกลเลอรีคือตัวที่ทำคนแปลกใจ เพราะไม่มีตัวควบคุมในหน้าแอดมินเลยสักอย่าง บนการติดตั้งมาตรฐานมันเป็นสี่เหลี่ยมจัตุรัสเล็ก ๆ ซึ่งในอดีตคือ 100px และเป็นขนาดที่มีโอกาสดูไม่คมบนจอ retina มากที่สุด เพราะไฟล์จริงมันเล็กจริง ๆ

ค่าตั้งอยู่ตรงไหนกันแน่

Appearance > Customize > WooCommerce > Product Images ให้ตัวควบคุมคุณสามอย่าง:

• ความกว้างของรูปหลัก — ความกว้างของ woocommerce_single ความสูงคำนวณให้อัตโนมัติ อัตราส่วนเดิมจึงถูกรักษาไว้
• ความกว้างของภาพย่อ — ความกว้างของ woocommerce_thumbnail
• การครอปภาพย่อ — 1:1 (สี่เหลี่ยมจัตุรัส ค่าเริ่มต้น), Custom (พิมพ์อัตราส่วนเองอย่าง 4:3) หรือ Uncropped

สังเกตสิ่งที่หายไป ไม่มีช่องความสูงสำหรับภาพย่อของแคตตาล็อก เพราะความสูงถูกคำนวณจากอัตราส่วนการครอป และไม่มีอะไรสำหรับภาพย่อของแกลเลอรีเลยแม้แต่อย่างเดียว

ก่อนจะเปลี่ยนอะไร การได้เห็นว่าไฟล์หนึ่งไฟล์จะสร้างไฟล์ย่อยอะไรออกมาบ้างช่วยได้มาก — ลากภาพสินค้าจริงไปวางใน เครื่องมือดูขนาดรูปของ WordPress แล้วคุณจะได้รายการครบ รวมถึงคำตอบว่าไฟล์ต้นทางของคุณใหญ่พอจะเติมทุกขนาดโดยไม่ต้องขยายภาพขึ้นหรือไม่

ทำไมรูปในแคตตาล็อกของคุณถึงดูผิดเพี้ยน

ภาพย่อของแคตตาล็อกถูก hard-crop เป็นสี่เหลี่ยมจัตุรัส hard crop หมายความว่า WooCommerce ตัดสี่เหลี่ยมจัตุรัสจากกึ่งกลางรูปของคุณออกมาแล้วทิ้งส่วนที่เหลือ มันไม่ใส่แถบดำ และไม่บีบภาพ ภาพสินค้าขนาด 2000x1200 จะกลายเป็นชิ้นส่วน 1200x1200 ที่ตัดมาจากตรงกลาง แล้วค่อยย่อลง

แบบนั้นไม่มีปัญหาถ้าเป็นภาพขวดที่ถ่ายไว้ตรงกลางเป๊ะพร้อมเว้นขอบรอบด้าน แต่มันคือหายนะสำหรับ:

• สินค้าทรงยาว (สกี สายเคเบิล รางม่าน) — คุณจะเห็นแค่ช่วงกลางหนึ่งในสาม ไม่มีอย่างอื่นเลย
• องค์ประกอบภาพที่ไม่อยู่กึ่งกลาง — สินค้าเลื่อนไปติดขอบเฟรมแล้วโดนหั่น
• ภาพที่สินค้าเต็มเฟรมจากขอบถึงขอบ — ส่วนบนและส่วนล่างถูกตัดทิ้ง
• ภาพไลฟ์สไตล์ที่สินค้าอยู่มุมใดมุมหนึ่ง

คำแนะนำที่ได้ยินบ่อยคือ “เปลี่ยนการครอปเป็น Uncropped” มันได้ผลจริง แต่ต้องพูดถึงราคาที่ต้องจ่ายด้วย ไม่ครอปแปลว่าภาพย่อทุกใบคงอัตราส่วนของตัวเองไว้ กริดที่มีภาพแนวตั้งแนวนอนปนกันจึงดูรุงรัง และแถวต่าง ๆ จะไม่เรียงตรงกันอีกต่อไป เว้นแต่ CSS ของธีมจะรองรับความสูงที่ไม่เท่ากัน ซึ่งธีมส่วนใหญ่ตั้งสมมติฐานว่าเป็นสี่เหลี่ยมจัตุรัส

วิธีแก้ที่ดีกว่า ถ้าคุณทำได้ คือแก้ที่ต้นทาง กำหนดมาตรฐานให้ภาพสินค้าเป็นสี่เหลี่ยมจัตุรัส วางสินค้าไว้กึ่งกลาง และเว้นขอบเท่ากัน แล้วการ hard crop เป็นสี่เหลี่ยมจัตุรัสก็แทบไม่เปลี่ยนอะไร ทุกอย่างที่ตามมาก็คาดเดาได้ การเปลี่ยนค่าการครอปคือทางเลี่ยง ส่วนภาพต้นทางที่สม่ำเสมอคือทางแก้ตัวจริง

เมื่อธีมล็อกความกว้างไว้

ถ้าแผง Product Images ของคุณให้ปรับได้แค่การครอป แปลว่าธีมของคุณประกาศความกว้างตายตัวไว้ตอนลงทะเบียนรองรับ WooCommerce:

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

เมื่อธีมส่งค่าพวกนั้นมา WooCommerce จะถอดตัวควบคุมความกว้างออกจาก customizer แล้วเหลือไว้แค่อัตราส่วน นี่ไม่ใช่บั๊ก และไม่ใช่ธีมกลั่นแกล้งคุณ — CSS ของเลย์เอาต์สินค้าในธีมถูกสร้างขึ้นรอบความกว้างเป็นพิกเซลค่านั้นพอดี ถ้าปล่อยให้เปลี่ยนได้ กริดก็จะพัง

คุณเขียนทับมันได้จาก functions.php ของ child theme โดยใช้ฟิลเตอร์รายขนาด:

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 ได้ และนี่ยังเป็นวิธีเดียวที่จะเปลี่ยนภาพย่อของแกลเลอรี เพราะมันไม่มี UI ให้ปรับ

ต้นทุนจริง พูดกันตรง ๆ การเขียนทับความกว้างที่ถูกล็อกไว้แปลว่าไฟล์ที่ WooCommerce สร้างจะไม่ตรงกับที่ CSS ของธีมคาดหวังอีกต่อไป ส่วนใหญ่รูปก็แค่ถูกย่อในเบราว์เซอร์และดูดีอยู่ เพราะตอนนี้มันใหญ่กว่ากล่อง แต่บางครั้งธีมมีคอนเทนเนอร์ความสูงคงที่ คุณก็จะเจอแถบดำหรือภาพล้นกรอบ ทดสอบกับสินค้าตัวเดียวก่อนจะ regenerate อีก 2,000 รายการ

เปลี่ยนขนาดแล้วต้อง regenerate

ค่าตั้งขนาดทุกตัวมีผลกับการอัพโหลดใหม่เท่านั้น สินค้าที่มีอยู่แล้วยังเสิร์ฟไฟล์ที่ถูกสร้างตอนอัพโหลดครั้งนั้น จึงไม่มีอะไรเปลี่ยนให้เห็นจนกว่าคุณจะสร้างใหม่

WooCommerce จะเริ่มงาน regenerate เบื้องหลังเมื่อคุณบันทึกใน customizer บนแคตตาล็อกเล็ก ๆ แค่นั้นก็พอ แต่บนแคตตาล็อกใหญ่ มันขึ้นอยู่กับว่า WP-Cron ทำงานสม่ำเสมอหรือไม่ ซึ่งบนร้านที่คนเข้าน้อยก็มักจะไม่ คุณเลยได้คลังรูปที่ regenerate ไปได้ครึ่งเดียว สั่งเองดีกว่า:

wp media regenerate --yes

ถ้าต้องการสร้างใหม่เฉพาะรูปสินค้า:

wp media regenerate --yes --post_type=product

ถ้าอยากปิดงานเบื้องหลังไว้ก่อนระหว่างที่ทำเอง:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

มีสองอย่างที่การ regenerate ทำไม่ได้ อย่างแรกคือมันไม่ลบไฟล์เก่า โฟลเดอร์ uploads ของคุณจะเก็บไฟล์ย่อยที่ไม่มีใครใช้จากค่าตั้งชุดก่อนไว้ทั้งหมด และมันจะโตขึ้นเรื่อย ๆ อย่างที่สองคือมันสร้างขนาดที่ใหญ่กว่าไฟล์ต้นทางไม่ได้ เพราะ WordPress ไม่ขยายภาพขึ้น ถ้าคุณตั้งความกว้างรูปหลักไว้ 1200 แต่ภาพสินค้าของคุณกว้าง 800px จะไม่มีไฟล์ขนาด 1200px ถูกสร้างขึ้น เบราว์เซอร์จะได้ไฟล์ 800px มายืดแทน และ srcset ก็ไม่มีอะไรดีกว่านั้นให้เลือก

ขนาดที่ควรอัพโหลดจริง ๆ

ตั้งเป้าที่ภาพต้นทางสี่เหลี่ยมจัตุรัสขนาดราวสองเท่าของความกว้างที่ตั้งไว้ใหญ่ที่สุด — 1200x1200 สำหรับรูปหลัก 600px หรือ 1600x1600 ถ้าธีมของคุณใช้ 800px นั่นครอบคลุมจอ retina 2x และให้พิกเซลกับ WordPress มากพอที่จะสร้างไฟล์ย่อยทุกตัวโดยไม่ต้องขยายภาพขึ้น ให้ทุกสินค้าใช้ขนาดเดียวกัน กริดจะได้เรียบเสมอกัน

ยังติดอยู่ใช่ไหม

ถ้าตั้งค่าขนาดถูกต้องแล้ว regenerate แล้ว แต่สินค้าตัวหนึ่งยังดูผิดอยู่ ให้เปิดรูปในแท็บใหม่แล้วอ่านชื่อไฟล์ คำต่อท้ายที่บอกขนาดแต่ไม่ตรงกับขนาดใดที่คุณตั้งไว้ แปลว่ามีอย่างอื่นลงทะเบียนมันไว้ ส่วนการที่ไม่มีคำต่อท้ายเลยแปลว่า WooCommerce ถอยไปใช้ไฟล์ขนาด full ซึ่งเกือบทุกครั้งหมายถึงไฟล์ต้นทางเล็กเกินไปสำหรับขนาดที่คุณขอ ลองส่งไฟล์ต้นทางนั้นเข้า เครื่องมือดูขนาดรูป แล้วเทียบสิ่งที่ WordPress ควรจะสร้างกับสิ่งที่เบราว์เซอร์โหลดมาจริง เมื่อสองอย่างนี้ไม่ตรงกัน ตัวการมักเป็นปลั๊กอินปรับแต่งรูปหรือตัวย่อรูปของ CDN ที่คั่นอยู่ตรงกลาง