גודל תמונות מוצר בווקומרס: שלושת הגדלים ואיך באמת משנים אותם

ווקומרס מייצרת שלושה גדלי תמונה לכל תצלום מוצר שאתה מעלה, ורק שניים מהם ניתנים לעריכה בממשק הניהול של וורדפרס. ‏woocommerce_thumbnail היא תמונת רשת הקטלוג, woocommerce_single היא התמונה הגדולה בעמוד המוצר, ו-woocommerce_gallery_thumbnail היא רצועת התמונות הממוזערות הקטנה מתחתיה. משנים אותם במראה > התאמה אישית > WooCommerce > תמונות מוצר — ואם הפאנל הזה מציג לך תפריט חיתוך אבל בלי תיבות רוחב, התבנית שלך נעלה את הרוחבים בקוד בכוונה.

שלושת הגדלים

שם הגודל	איפה זה מופיע	חיתוך	ניתן לעריכה בהתאמה אישית
woocommerce_thumbnail	עמוד החנות, רשתות קטגוריה, מוצרים קשורים, מכירה צולבת	חיתוך קשיח לריבוע כברירת מחדל	רוחב ויחס
woocommerce_single	התמונה הראשית בעמוד המוצר הבודד	ללא חיתוך — יחס הגובה-רוחב המקורי נשמר	רוחב בלבד
woocommerce_gallery_thumbnail	רצועה קטנה מתחת לתמונת המוצר הראשית	ריבוע בחיתוך קשיח	לא

אלה יושבים על גבי הגדלים הרגילים של וורדפרס. תצלום מוצר בודד ייצר בדרך כלל thumbnail,‏ medium,‏ medium_large,‏ large, את שלושת גדלי ווקומרס, ואולי תוספות שהתבנית שלך רשמה דרך add_image_size. זה הרבה קבצים לכל העלאה, ובגלל זה ייבוא של 300 מוצרים לוקח כל כך הרבה זמן.

התמונה הממוזערת של הגלריה היא זו שמפתיעה אנשים: אין לה שום פקד ניהול בכלל. בהתקנת ברירת מחדל היא ריבוע קטן, היסטורית 100 פיקסלים, והיא הגודל שהכי סביר שייראה מטושטש במסך רטינה כי הקובץ הפיזי באמת זעיר.

איפה ההגדרות באמת נמצאות

מראה > התאמה אישית > WooCommerce > תמונות מוצר נותן לך שלושה פקדים:

• רוחב התמונה הראשית — הרוחב של woocommerce_single. הגובה אוטומטי, כך שיחס הגובה-רוחב המקורי נשמר.
• רוחב התמונה הממוזערת — הרוחב של woocommerce_thumbnail.
• חיתוך התמונה הממוזערת — ‏1:1 (ריבוע, ברירת המחדל), Custom (אתה מקליד יחס כמו 4:3), או Uncropped.

שים לב למה שחסר: אין שדה גובה לתמונה הממוזערת של הקטלוג, כי הגובה נגזר מיחס החיתוך. ואין שום דבר לתמונה הממוזערת של הגלריה.

לפני שאתה משנה משהו, כדאי לראות בדיוק אילו גרסאות נגזרות קובץ מסוים ייצר — גרור תצלום מוצר אמיתי אל כלי גדלי התמונות של וורדפרס ותקבל את הרשימה המלאה, כולל האם המקור שלך גדול מספיק כדי למלא כל גודל בלי הגדלה.

למה תמונות הקטלוג שלך נראות שגויות

התמונה הממוזערת של הקטלוג עוברת חיתוך קשיח לריבוע. חיתוך קשיח אומר שווקומרס לוקחת ריבוע מהמרכז של התצלום שלך וזורקת את השאר — היא לא מוסיפה פסים שחורים והיא לא מועכת. תצלום מוצר של 2000x1200 הופך לפרוסה של 1200x1200 שנלקחה מהאמצע, ואז מוקטן.

זה בסדר עבור בקבוק שצולם בדיוק במרכז עם שוליים מסביבו. זו קטסטרופה עבור:

• מוצרים ארוכים (מגלשי סקי, כבלים, מוטות וילון) — אתה רואה את השליש האמצעי ותו לא
• קומפוזיציות לא ממורכזות — המוצר נודד לקצה הפריים ונחתך
• תצלומים שבהם הפריט ממלא את הפריים מקצה לקצה — החלק העליון והתחתון נחתכים
• צילומי אווירה עם המוצר בפינה

העצה הנפוצה היא “שנה את החיתוך לללא חיתוך”. זה עובד, אבל בוא נהיה כנים לגבי המחיר: ללא חיתוך אומר שכל תמונה ממוזערת שומרת על יחס הגובה-רוחב שלה, כך שרשת של תצלומים בכיווני צילום מעורבים נראית מרופטת, והשורות כבר לא מתיישרות אלא אם ה-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 של התבנית מצפה לו. בדרך כלל התמונה פשוט מוקטנת בדפדפן ונראית בסדר כי היא עכשיו גדולה מהתיבה. לפעמים לתבנית יש מכולה בגובה קבוע ואתה מקבל פסים שחורים או גלישה. בדוק על מוצר אחד לפני שאתה מייצר מחדש 2,000.

שינוי גדלים אומר יצירה מחדש

כל הגדרת גודל משפיעה רק על העלאות חדשות. מוצרים קיימים ממשיכים להגיש את הקבצים שנוצרו כשהם הועלו, כך ששום דבר גלוי לא משתנה עד שתבנה אותם מחדש.

ווקומרס מפעילה יצירה מחדש ברקע כשאתה שומר בהתאמה האישית. בקטלוג קטן זה מספיק. בקטלוג גדול זה תלוי ב-WP-Cron שיופעל באופן אמין, מה שבחנות עם תנועה נמוכה לעיתים קרובות לא קורה, ואתה נשאר עם ספרייה שנוצרה מחדש רק בחלקה. הרץ את זה בעצמך במקום:

wp media regenerate --yes

כדי לבנות מחדש רק תמונות מוצר:

wp media regenerate --yes --post_type=product

אם אתה רוצה להוריד את משימת הרקע מהדרך בזמן שאתה עושה את זה ידנית:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

שני דברים שיצירה מחדש לא תעשה. היא לא מוחקת את הקבצים הישנים — ספריית ההעלאות שלך שומרת כל גרסה נגזרת יתומה מההגדרות הקודמות, והיא תגדל. והיא לא יכולה ליצור גודל גדול מהמקור שלך, מפני שוורדפרס לא מגדילה תמונות. אם תגדיר את רוחב התמונה הראשית ל-1200 אבל תצלומי המוצר שלך ברוחב 800 פיקסלים, לא ייווצר שום קובץ של 1200; הדפדפן מקבל קובץ של 800 ומותח אותו, ול-srcset אין שום דבר טוב יותר להציע.

הגודל שכדאי באמת להעלות

כוון לתמונות מקור ריבועיות בערך בכפול מהרוחב הגדול ביותר שהגדרת — 1200x1200 לתמונה ראשית של 600 פיקסלים, 1600x1600 אם התבנית שלך משתמשת ב-800. זה מכסה מסכי רטינה בצפיפות כפולה ונותן לוורדפרס מספיק פיקסלים לבנות כל גרסה נגזרת בלי הגדלה. שמור על אותן מידות בכל המוצרים כדי שהרשת תישאר אחידה.

עדיין תקוע?

אם הגדלים מוגדרים נכון, ייצרת מחדש, ומוצר עדיין נראה שגוי, פתח את התמונה בלשונית חדשה וקרא את שם הקובץ. סיומת מידות שלא תואמת לשום גודל שהגדרת אומרת שמשהו אחר רשם אותו. אין סיומת בכלל — ווקומרס נפלה חזרה לקובץ בגודל המלא, ומה שכמעט תמיד אומר שהמקור היה קטן מדי עבור הגודל שביקשת. העבר את קובץ המקור הזה דרך כלי גדלי התמונות והשווה בין מה שוורדפרס אמורה לייצר לבין מה שהדפדפן באמת טען — כשאלה לא מסכימים, בדרך כלל תוסף אופטימיזציה או משנה גודל תמונות של CDN יושב באמצע.