מה צריך להיות הגודל של תמונה ראשית בוורדפרס?

המספר שרובם מחפשים הוא 1200 x 630 פיקסלים. זה היחס שבו פייסבוק, לינקדאין ו-X משתמשים לתצוגה מקדימה של קישורים (1.91:1), וזה מה שתמונת Open Graph אמורה להיות. אם אתה מגדיר תמונה ראשית בעיקר כדי שקישורים ששיתפת ייראו טוב, השתמש ב-1200 x 630 ותעצור שם.

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

למה התבנית דורסת את המספר

כשאתה מעלה תמונה, וורדפרס לא שומרת קובץ אחד. היא מריצה את wp_generate_attachment_metadata() ויוצרת גרסה נגזרת לכל גודל תמונה רשום: שלושת ברירות המחדל (thumbnail, medium, large), ה-medium_large של עורך הבלוקים (ברוחב 768px), ובנוסף כל גודל שהתבנית או תוסף רשמו עם add_image_size().

תבנית שרוצה כותרת ראשית רחבה ביחס 16:9 תעשה משהו כזה ב-functions.php:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

הארגומנט הרביעי, true, אומר חיתוך קשיח (hard crop). וורדפרס תחתוך את התמונה שלך לגודל מדויק של 1200 x 675, ותזרוק כל מה שלא נכנס לתיבת 16:9. אם הנושא שלך קרוב לחלק העליון או התחתון של הפריים, הוא נחתך. אם מוגדר false (או מושמט), התמונה מוקטנת באופן פרופורציונלי והמידות הסופיות יכולות להיות שונות ממה שביקשת.

אחר כך התבנית מחליטה איזה גודל למשוך:

the_post_thumbnail( 'hero-featured' );

השם שמועבר ל-the_post_thumbnail() הוא החיתוך שמוצג. אז הגודל האמיתי של התמונה הראשית באתר שלך מוגדר בשני מקומות שאתה לא כתבת: הקריאה ל-add_image_size() והקריאה ל-the_post_thumbnail() בתבנית. העלאת קובץ גדול יותר לא משנה אף אחד מהם.

יש עוד שכבה אחת. וורדפרס מגישה srcset, כך שבמסכים קטנים יותר הדפדפן עשוי לטעון את הגרסה הנגזרת medium או large במקום החיתוך המלא. המידות שאתה רואה ב-DevTools הן לרוב לא אלה שהעלית.

איך מתקנים את זה, לפי הסדר

1. גלה מה התבנית שלך באמת מבקשת. לפני שאתה מנחש, ראה כל גודל שוורדפרס מייצרת מהתמונה שלך ואיזה מהם הוא הכותרת הראשית החתוכה. גרור את התמונה שלך לכלי גדלי התמונות של וורדפרס — הוא מציג כל גרסה נגזרת שוורדפרס תיצור, במידות פיקסלים מדויקות, כך שתוכל להתאים את המקור שלך ליעד האמיתי במקום ל-1200x630 המיתולוגי.

2. העלה גדול מספיק כדי לכסות את החיתוך הגדול ביותר. אם הכותרת הראשית של התבנית היא 1200 x 675, העלה לפחות את זה, ורצוי פי 2 עבור מסכי רטינה (2400 x 1350). וורדפרס מקטינה בצורה נקייה; היא אף פעם לא מגדילה. מקור קטן מדי הוא הגורם הנפוץ ביותר לתמונה ראשית מטושטשת.

3. התאם את יחס הממדים לחיתוך של התבנית. אם התבנית חותכת חיתוך קשיח ל-16:9, תזין לה 16:9. הרכב את התמונה כך שהנושא במרכז, כדי שחיתוך קשיח לא יערוף לאף אחד את הראש.

4. אם הגודל הרשום שגוי, שנה אותו וצור מחדש. ערוך את ערכי add_image_size() בתבנית בת (child theme), ואז בנה מחדש את התמונות הממוזערות הקיימות — מידות חדשות חלות רק על העלאות עתידיות עד שתעשה זאת:

wp media regenerate --yes

אין WP-CLI? התוסף Regenerate Thumbnails עושה בדיוק את אותו הדבר מלוח הבקרה.

מה לא לעשות

אל תעלה סתם תמונה של 1200x630 ותניח שהיא מטופלת. אם הגודל הרשום של התבנית הוא 16:9, וורדפרס תחתוך חיתוך קשיח את התמונה שלך ביחס 1.91:1 ותאבד את החלק העליון והתחתון. מספר ה-Open Graph ומספר התצוגה הם שתי משימות שונות.

אל תבטל את גדלי התמונות של וורדפרס כדי “לשמור על המקור”. אנשים מוצאים עצות להגדיר את הגדלים הביניים ל-0 או לנתק את the_post_thumbnail. אז התבנית חוזרת להגיש את הקובץ בגודל מלא ומקטינה אותו בדפדפן — קובץ JPEG של 4000px שנשלח לטלפון. זה הורס לך את זמן הטעינה ואת ה-Core Web Vitals. הגרסאות הנגזרות קיימות מסיבה טובה.

אל תסמוך על “הגודל המומלץ” של תוסף על פני הגודל הרשום בפועל בתבנית שלך. תוספי SEO ממליצים על 1200x630 עבור תגית ה-OG, וזה נכון לתגית הזו. זה לא אומר כלום על מה שתבנית הפוסט הבודד שלך חותכת.

אל תדלג על wp media regenerate אחרי ששינית גדלים. עריכת add_image_size() לא עושה כלום לתמונות שכבר הועלו. זה השלב שאנשים שוכחים, ואז מסיקים שהקוד לא עבד.

עדיין תקוע?

אם התמונה עדיין שגויה אחרי שהתאמת מידות ויצרת מחדש, הבעיה בדרך כלל היא מצב החיתוך (true מול false) או srcset שמגיש גרסה נגזרת קטנה יותר ממה שאתה מצפה. גרור את הקובץ לכלי גדלי התמונות כדי לראות בדיוק אילו חיתוכים ההגדרה שלך מייצרת, ואז השווה את זה למה שהדפדפן טוען ב-DevTools. התאם בין השניים והניחושים ייגמרו.