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

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

כברירת מחדל, וורדפרס מייצרת שלושה גדלים של תמונות: Thumbnail, Medium ו-Large. אתם יכולים לרשום גדלים מותאמים אישית, להסיר כאלו שאינכם צריכים ולשלוט באילו גדלים נוצרים לפי סוג תוכן.

"WordPress uses add_image_size() to register additional image sizes. Themes and plugins can register custom sizes for specific use cases." – WordPress Developer Resources.

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

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

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

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

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

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

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

add_filter( 'intermediate_image_sizes', function( $sizes ) {
    unset( $sizes[ array_search( 'medium', $sizes ) ] );
    unset( $sizes[ array_search( 'large', $sizes ) ] );
    return $sizes;
} );

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

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

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

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

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

באמצעות קוד

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

the_post_thumbnail( 'large' );

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

echo get_the_post_thumbnail( $post_id, 'thumbnail' );

שלוש הפונקציות הנפוצות ביותר הן the_post_thumbnail(),‏ get_the_post_thumbnail() ו-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

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

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

באמצעות תוסף

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

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

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

add_filter( 'intermediate_image_sizes', function( $sizes ) {
    $post_id = isset( $_REQUEST['post_id'] ) ? intval( $_REQUEST['post_id'] ) : 0;
    $type    = $post_id ? get_post_type( $post_id ) : '';

    if ( 'page' === $type ) {
        $allowed = array( 'thumbnail', 'medium', 'hero-banner' );
        return array_intersect( $sizes, $allowed );
    }

    if ( 'portfolio' === $type ) {
        $allowed = array( 'card-thumbnail', 'square-medium' );
        return array_intersect( $sizes, $allowed );
    }

    return $sizes;
} );

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

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

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

באמצעות WP-CLI:

wp eval 'print_r( wp_get_registered_image_subsizes() );'

או הוסיפו באופן זמני לקובץ תבנית:

<?php
global $_wp_additional_image_sizes;
echo '<pre>';
print_r( $_wp_additional_image_sizes );
echo '</pre>';
?>

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

שאלות נפוצות

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

סיכום

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

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

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