איך לבטל lazy load של וורדפרס

מגרסה 5.5 של וורדפרס, lazy loading לתמונות מאופשר כברירת מחדל על ידי שימוש ב native lazy loading. זה אומר שוורדפרס יוסיף לכל img שמוגדר לו גובה ורוחב את הדבר הבא:

loading="lazy"

זה דבר טוב בגדול אבל מה אם תרצו לבטל את זה לתמונות מסוימות? או במקרים רבים אתם כבר משתמשים בתוסף שעושה lazy loading בצורה טובה יותר ואתם רוצים למנוע התנגשות. בשביל זה תוכלו להשתמש בקוד הבא לשם ביטול מוחלט של הוספת lazy של וורדפרס או לשם ביטול חלקי. את הקוד תצטרכו להוסיף לקובץ functions.php בתבנית הבת או בדרך אחרת שאתם מעדיפים.

ביטול מוחלט:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

ביטול חלקי – בדוגמה ביטול lazy לטאג img אשר הגיע דרך wp_get_attachment_image כלומר template image. ניתן לבצע גם לקונטקסים אחרים.

function disable_template_image_lazy_loading( $default, $tag_name, $context ) {
    if ( $tag_name === 'img' && $context === 'wp_get_attachment_image' ) {
        return false;
    }
    return $default;
}
add_filter(
    'wp_lazy_loading_enabled',
    'disable_template_image_lazy_loading',
    10,
    3
);

אלו סוגי הקונטסט הנתמכים:

the_content, the_excerpt, widget_text_content, get_avatar, wp_get_attachment_image.

ניתן גם לבצע ביטול lazy לתמונות מסוימות על ידי הקוד הבא. בדוגמה ביטול לתמונה בקונטקסט של פוסט עם ID מסוים ובגודל מסוים.

function skip_loading_lazy_image_42_large( $value, $image, $context ) {
    if ( $context === 'the_content') {
        $image_url = wp_get_attachment_image_url( <id>, <'size'> );
        if ( strpos( $image, ' src="' . $image_url . '"' )) {
            return false;
        }
    }
    return $value;
}
add_filter(
    'wp_img_tag_add_loading_attr',
    'skip_loading_lazy_specific_image',
    10,
    3
);

בתמונות שמודפסות דרך wp_get_attachment_image אפשר לשלוט אם להוסיף loading="lazy" על ידי פרמטר attr כך:

echo wp_get_attachment_image(
    <attachment_id>,
    <'size'>,
    false,
    array( 'loading' => false ),
);

למידע נוסף כנסו למאמר הזה.

*שימו לב – קטעי הקוד המוקפים ב <> כוונתם לסמן שכאן צריך להיכנס פרמטר בהתאם לצורך שלכם ולא שתעתיקו את זה כמו אצלי. למשל בדוגמה האחרונה איפה שכתוב <'size'> תצטרכו לרשום את גודל התמונה. זה יכול להיות למשל 'large' או 'thumbnail'.