全局配置图片类与属性以适配lazysizes插件的技术求助

Absolutely, you can set up lazysizes across your entire WordPress site without editing each image individually. Here's a step-by-step guide tailored to your needs:

1. Enqueue the Lazysizes Script (Better Than Editing footer.php Directly) #

Instead of manually adding the script tag to footer.php, use WordPress's built-in enqueue system to load it properly. This ensures it loads in the footer (like you wanted) and avoids breaking changes when your theme updates.

Add this code to your child theme's functions.php file (always use a child theme to preserve customizations):

function enqueue_lazysizes() {
    // Load lazysizes from CDN in the footer
    wp_enqueue_script('lazysizes', 'https://unpkg.com/lazysizes@4.0.1/lazysizes.js', array(), '4.0.1', true);
}
add_action('wp_enqueue_scripts', 'enqueue_lazysizes');

2. Modify All Images Automatically for Lazy Loading #

We’ll extend the code you found to not only add responsive classes but also adjust image attributes for lazysizes. This function will:

• Add the required lazyload class to all images
• Keep your existing img-responsive class (or append it if missing)
• Move the original src to data-src (required for lazysizes)
• Handle srcset attributes (common in WordPress responsive images)
• Set a tiny transparent placeholder as the temporary src to avoid broken image icons

Add this code right after the enqueue function in functions.php:

function add_lazyload_and_responsive_classes($content) {
    // Skip if content is empty or not a post
    if (empty($content)) return $content;

    $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
    $document = new DOMDocument();
    libxml_use_internal_errors(true); // Suppress HTML parsing warnings
    $document->loadHTML(utf8_decode($content));
    libxml_clear_errors();

    $imgs = $document->getElementsByTagName('img');
    
    foreach ($imgs as $img) {
        // Handle image classes: append lazyload and img-responsive
        $existing_classes = $img->getAttribute('class');
        $new_classes = array_filter(explode(' ', $existing_classes . ' img-responsive lazyload'));
        $img->setAttribute('class', implode(' ', $new_classes));

        // Move src to data-src and set placeholder
        $src = $img->getAttribute('src');
        if (!empty($src)) {
            $img->setAttribute('data-src', $src);
            // Tiny transparent GIF placeholder
            $img->setAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
        }

        // Move srcset to data-srcset if it exists
        $srcset = $img->getAttribute('srcset');
        if (!empty($srcset)) {
            $img->setAttribute('data-srcset', $srcset);
            $img->removeAttribute('srcset');
        }
    }

    $html = $document->saveHTML();
    return $html;
}
// Apply the filter to post content
add_filter('the_content', 'add_lazyload_and_responsive_classes');

3. Test It Out #

After adding both code snippets, clear your WordPress cache (if you use a caching plugin) and visit a post with images. Inspect an image element in your browser's developer tools—you should see:

• The lazyload and img-responsive classes
• data-src containing the original image URL
• A tiny base64 GIF as the src value

Lazysizes will automatically load images as they enter the viewport.

Notes #

• This affects images in your post content. If you need lazy loading for images in widgets or theme templates, you’ll need additional adjustments (just ask if you need help with that!).
• If you already use a caching plugin, make sure it doesn’t minify or modify the data-src attributes—most modern caching plugins play nice with lazysizes, but double-check if you run into issues.

内容的提问来源于stack exchange，提问作者camputer