Włącz Lazy Loading obrazów w WordPressie bez użycia wtyczek

Jak włączyć leniwe ładowanie obrazów w WordPressieWtyczka WordPress do leniwego ładowania obrazówNajlepszy sposób na leniwe ładowanie obrazów w WordPressieWłącz leniwe ładowanie obrazów w WordPressie bez wtyczkiLeniwe ładowanie obrazów w WordPressie nie działaJak włączyć leniwe ładowanie obrazów w WordPressieDarmowa wtyczka do leniwego ładowania obrazów w WordPressieRęczne leniwe ładowanie obrazów w WordPressieJak skonfigurować leniwe ładowanie obrazów w WordPressieSamouczek dotyczący leniwego ładowania obrazów w WordPressie

Objaśnienie

Lazy loading to sprytny sposób na przyspieszenie działania Twojej strony WordPress poprzez ładowanie obrazów tylko wtedy, gdy mają być wyświetlone. Oznacza to, że Twoi odwiedzający nie będą musieli czekać na załadowanie wszystkich obrazów jednocześnie, co może znacznie przyspieszyć działanie Twojej strony.

Oto jak ten kod pomaga to osiągnąć:

Dodawanie skryptu: Kod dodaje specjalny skrypt o nazwie lazysizes do Twojej strony. Ten skrypt odpowiada za obsługę lazy loadingu obrazów.
Obrazy w treści: Modyfikuje obrazy w Twoich postach lub stronach. Zmienia atrybut src obrazu na data-src i dodaje klasę lazyload. To informuje przeglądarkę, aby ładowała obraz tylko wtedy, gdy jest to potrzebne.
Miniatury postów: Ta sama technika lazy loadingu jest stosowana do obrazów wyróżniających (miniatur postów), aby zapewnić, że również ładują się tylko wtedy, gdy jest to konieczne.

Korzystając z tego kodu, nie potrzebujesz wtyczki do włączenia lazy loadingu, co może być świetnym sposobem na utrzymanie lekkiej wagi Twojej strony. Upewnij się tylko, że Twój serwer obsługuje klasę DOMDocument, ponieważ jest to kluczowe dla działania tego kodu.

Kod
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_lazy_load_script');

function wp_dudecom_enqueue_lazy_load_script() {
    // Enqueue the lazy load script
    wp_enqueue_script('wp-dudecom-lazy-load', 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js', array(), null, true);
}

add_filter('the_content', 'wp_dudecom_add_lazy_loading_to_images');

function wp_dudecom_add_lazy_loading_to_images($content) {
    // Use DOMDocument to parse the content and add lazy loading attributes
    if (!class_exists('DOMDocument')) {
        return $content;
    }

    libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    $images = $dom->getElementsByTagName('img');

    foreach ($images as $img) {
        $img->setAttribute('class', trim($img->getAttribute('class') . ' lazyload'));
        $img->setAttribute('data-src', $img->getAttribute('src'));
        $img->removeAttribute('src');
    }

    return $dom->saveHTML();
}

add_filter('post_thumbnail_html', 'wp_dudecom_add_lazy_loading_to_post_thumbnails', 10, 5);

function wp_dudecom_add_lazy_loading_to_post_thumbnails($html, $post_id, $post_thumbnail_id, $size, $attr) {
    // Add lazy loading to post thumbnails
    if (!class_exists('DOMDocument')) {
        return $html;
    }

    libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    $dom->loadHTML('<?xml encoding="utf-8" ?>' . $html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    $images = $dom->getElementsByTagName('img');

    foreach ($images as $img) {
        $img->setAttribute('class', trim($img->getAttribute('class') . ' lazyload'));
        $img->setAttribute('data-src', $img->getAttribute('src'));
        $img->removeAttribute('src');
    }

    return $dom->saveHTML();
}

Instrukcja

Lokalizacja pliku: Dodaj kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.

Wymagania wstępne:

Upewnij się, że twój serwer obsługuje klasę DOMDocument.

Kroki wdrożenia:

Uzyskaj dostęp do panelu administracyjnego WordPressa.
Przejdź do Wygląd > Edytor motywu, jeśli dodajesz kod do functions.php. Alternatywnie, przejdź do Wtyczki > Edytor, jeśli używasz pliku własnej wtyczki.
Znajdź i otwórz plik functions.php lub plik swojej własnej wtyczki.
Skopiuj i wklej podany kod do pliku.
Zapisz zmiany.
Wyczyść pamięć podręczną swojej witryny, jeśli masz aktywną wtyczkę do buforowania.
Odwiedź swoją witrynę, aby upewnić się, że obrazy ładują się poprawnie z włączonym leniwym ładowaniem.

Jeśli napotkasz jakiekolwiek problemy lub potrzebujesz dalszej pomocy w tej implementacji lub bardziej zaawansowanej funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.