כיצד לשלוט על גודל התמונות בוורדפרס (Image Sizes)

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

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

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

וורדפרס רושמת שישה גדלי תמונות כברירת מחדל. תוכלו להגדיר שלושה מהם תחת הגדרות > מדיה בממשק הניהול:

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

החל מוורדפרס 5.3, כל תמונה שרוחבה או גובהה עולים על 2560 פיקסלים מוקטנת כך שתיכנס ב-2560 x 2560. וורדפרס שומרת את העותק המוקטן עם הסיומת -scaled, ואת הקובץ המקורי היא משאירה כפי שהוא.

כך מתאר זאת צוות הליבה של וורדפרס: "The scaled-down image will be used as the largest available size." – Justin Ahinon, "Introducing handling of big images in WordPress 5.3", Make WordPress Core

תוכלו לשנות את הסף באמצעות הפילטר big_image_size_threshold, או להחזיר false בכדי לבטל את ההקטנה:

add_filter( 'big_image_size_threshold', function() {
    return 1920;
} );

הסרת גדלי תמונות ברירת מחדל

אם אינכם צריכים גדלים מסוימים, הסירו אותם באמצעות הפילטר intermediate_image_sizes. הוסיפו את הקוד הבא לקובץ functions.php:

add_filter( 'intermediate_image_sizes', function( $sizes ) {
    return array_diff( $sizes, array( 'medium', 'large' ) );
} );

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

שימוש בגדלי תמונות בתבנית

ישנן שתי דרכים להשתמש בגדלי תמונות:

דרך ממשק הניהול

כאשר אתם מכניסים תמונה לפוסט, תוכלו לבחור את הגודל מפאנל הגדרות התמונה. הגדלים המותאמים אישית שלכם יופיעו ברשימה הנפתחת אם תרשמו אותם בספריית המדיה (מוסבר בהמשך המדריך).

באמצעות קוד

בבניית תבניות, השתמשו בפונקציות תמונה של וורדפרס והעבירו את שם הגודל כפרמטר:

the_post_thumbnail( 'large' );

$image = wp_get_attachment_image_src( $attachment_id, 'my-custom-size' );

echo get_the_post_thumbnail( $post_id, 'thumbnail' );

echo wp_get_attachment_image( $attachment_id, 'card-thumbnail' );

the_post_thumbnail() ו-get_the_post_thumbnail() מציגות תמונה ראשית. wp_get_attachment_image() מציגה כל קובץ מדיה כתגית <img> עם srcset, ו-wp_get_attachment_image_src() מחזירה רק את הכתובת והמידות.

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

הוספת גדלי תמונות משלכם היא תהליך של שני שלבים. השלב השני הוא אופציונלי.

שלב 1: רישום הגודל עם add_image_size

הוסיפו את הקוד הבא לקובץ functions.php:

add_action( 'after_setup_theme', function() {
    add_image_size( 'card-thumbnail', 400, 300, true );
    add_image_size( 'hero-banner', 1200, 600, true );
    add_image_size( 'square-medium', 500, 500, true );
} );

הפונקציה add_image_size() מקבלת ארבעה פרמטרים:

• שם – slug ייחודי לגודל (לדוגמה, card-thumbnail)
• רוחב – הרוחב היעד בפיקסלים
• גובה – הגובה היעד בפיקסלים
• חיתוך – true חותך למידות המדויקות (למרכז כברירת מחדל), false משנה גודל באופן פרופורציונלי. ניתן גם להעביר מערך כמו array( 'left', 'top' ) כדי לשלוט במיקום החיתוך.

שלב 2: הוספת הגודל לתפריט ספריית המדיה

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

add_filter( 'image_size_names_choose', function( $sizes ) {
    $sizes['card-thumbnail'] = 'Card Thumbnail';
    $sizes['hero-banner']    = 'Hero Banner';
    return $sizes;
} );

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

ייצור מחדש של גדלי תמונות

לאחר שינוי הפרמטרים של add_image_size(), לתמונות קיימות עדיין יש את המידות הישנות. תצטרכו לייצר אותן מחדש.

באמצעות WP-CLI

השיטה המהירה ביותר. הריצו משורת הפקודה:

wp media regenerate --yes

כברירת מחדל הפקודה מוחקת את כל ה-thumbnails הקיימים ויוצרת מחדש את כל הגדלים הרשומים. בכדי ליצור רק את הגדלים שחסרים לתמונה, הוסיפו --only-missing:

wp media regenerate --only-missing --yes

כדי לייצר מחדש רק גודל תמונה ספציפי:

wp media regenerate --image_size=card-thumbnail --yes

באמצעות תוסף

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

צמצום גדלי תמונות לפי סוג תוכן

כאשר לאתר שלכם יש מספר סוגי תוכן מותאמים (Custom Post Types), לכל אחד גדלי תמונות משלו, אתם יכולים להגיע למצב של 20-30 תמונות לכל העלאה. תוכלו לצמצם זאת על ידי ייצור רק הגדלים שכל סוג תוכן באמת צריך:

add_filter( 'intermediate_image_sizes_advanced', function( $sizes, $image_meta, $attachment_id ) {
    $parent = wp_get_post_parent_id( $attachment_id );
    $type   = $parent ? get_post_type( $parent ) : '';

    $allowed_by_type = array(
        'page'      => array( 'thumbnail', 'medium', 'hero-banner' ),
        'portfolio' => array( 'card-thumbnail', 'square-medium' ),
    );

    if ( isset( $allowed_by_type[ $type ] ) ) {
        return array_intersect_key( $sizes, array_flip( $allowed_by_type[ $type ] ) );
    }

    return $sizes;
}, 10, 3 );

הפילטר בודק לאיזה פוסט הועלתה התמונה, ולכן הוא עובד גם בעורך הבלוקים וגם בחלון המדיה הקלאסי, והמגבלה נשמרת גם כשאתם מריצים wp media regenerate. קטעי קוד ישנים שקוראים את $_REQUEST['post_id'] לא עושים אף אחד מהשניים, מכיוון שעורך הבלוקים לא שולח את השדה הזה. תמונות שהועלו ישירות לספריית המדיה אינן משויכות לפוסט, ולכן הן עדיין יקבלו את כל הגדלים.

כיצד לראות גדלי תמונות רשומים

כדי לראות את כל גדלי התמונות שנרשמו על ידי התבנית והתוספים שלכם, תוכלו להשתמש ב-WP-CLI או בקטע קוד לדיבוג.

באמצעות WP-CLI:

wp media image-size

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

<?php
echo '<pre>';
print_r( wp_get_registered_image_subsizes() );
echo '</pre>';
?>

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

שאלות נפוצות

שאלות נפוצות על גדלי תמונות בוורדפרס:

סיכום

וורדפרס מייצרת מספר גדלי תמונות לכל העלאה כדי להגיש את הרזולוציה הנכונה בחלקים שונים של האתר. תוכלו להגדיר את ברירות המחדל תחת הגדרות > מדיה, לרשום גדלים מותאמים עם add_image_size(), ולהסיר גדלים שאינכם צריכים באמצעות הפילטר intermediate_image_sizes.

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

למידע נוסף על אופטימיזציה לתמונות, עיינו במדריך על אופטימיזציה לתמונות באתרי וורדפרס מבחינת SEO.