Włącz Lazy Loading obrazów w WordPressie bez użycia wtyczek
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
srcobrazu nadata-srci 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.phplub 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.