Как добавить настройку автозагрузки медиафайлов в WordPress

Автор: Татьяна Боброва | Опубликовано: 26.02.2026

В современных проектах на WordPress часто возникает задача оптимизировать загрузку медиафайлов, особенно если на сайте большое количество изображений и видео. Одним из эффективных способов ускорить загрузку страниц и снизить нагрузку на сервер является автозагрузка (lazy loading) медиафайлов. Однако стандартной настройки в WordPress для полного контроля автозагрузки может не хватать, и здесь пригодится возможность добавить собственную настройку в админке, чтобы управлять этим поведением.

Почему важна автозагрузка медиа: ключевые преимущества и проблемы без оптимизации

Автозагрузка (lazy load) — это техника, при которой изображения и видео загружаются только тогда, когда пользователь прокручивает страницу до их появления в области видимости. Это снижает время начальной загрузки страницы и уменьшает потребление трафика, особенно на мобильных устройствах.

Без автозагрузки браузер загружает все медиа сразу, что увеличивает время загрузки и может негативно повлиять на SEO и пользовательский опыт. В WordPress начиная с версии 5.5 встроена базовая поддержка lazy load для изображений через атрибут loading="lazy", но далеко не все ситуации покрываются, и для видео или iframe нужно дополнительное решение.

Как добавить настройку автозагрузки медиафайлов в админке WordPress

Для начала создадим в админке WordPress новую опцию, которая позволит включать или отключать автозагрузку медиафайлов. Это удобно, если вы хотите контролировать эту возможность без правки кода на сайте.

Регистрация настройки и добавление поля в меню «Настройки»

Добавим следующий код в файл functions.php вашей темы или в отдельный плагин:

<?php
// Регистрируем настройку
function wpsolution_register_lazyload_setting() {
    register_setting('wpsolution_media_options', 'wpsolution_lazyload_enabled');

    add_settings_section(
        'wpsolution_media_section',
        'Настройки автозагрузки медиафайлов',
        'wpsolution_media_section_cb',
        'media'
    );

    add_settings_field(
        'wpsolution_lazyload_enabled',
        'Включить автозагрузку (lazy load)',
        'wpsolution_lazyload_field_cb',
        'media',
        'wpsolution_media_section'
    );
}
add_action('admin_init', 'wpsolution_register_lazyload_setting');

// Колбек для описания секции
function wpsolution_media_section_cb() {
    echo '<p>Управление автозагрузкой изображений и видео на сайте.</p>';
}

// Колбек для поля настройки
function wpsolution_lazyload_field_cb() {
    $value = get_option('wpsolution_lazyload_enabled', '1');
    echo '<input type="checkbox" name="wpsolution_lazyload_enabled" value="1" ' . checked(1, $value, false) . ' /> Включено';
}

Этот код добавит чекбокс в стандартный раздел Медиа в админке WordPress, где можно будет включать или отключать lazy load.

Обработка включения и отключения автозагрузки для изображений и видео

Теперь нужно использовать эту опцию, чтобы контролировать добавление атрибута loading="lazy" к изображениям и видео. Для изображений достаточно фильтра wp_lazy_loading_enabled, а для видео можно добавить собственный JavaScript.

// Фильтр для изображений
function wpsolution_lazyload_filter($default, $image, $context) {
    $enabled = get_option('wpsolution_lazyload_enabled', '1');
    return $enabled === '1';
}
add_filter('wp_lazy_loading_enabled', 'wpsolution_lazyload_filter', 10, 3);

// Добавляем JS для автозагрузки видео и iframe, если включено
function wpsolution_lazyload_scripts() {
    $enabled = get_option('wpsolution_lazyload_enabled', '1');
    if ($enabled !== '1') {
        return;
    }

    wp_enqueue_script('wpsolution-lazyload', 'https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.3.1/lazyload.min.js', array(), '17.3.1', true);

    wp_add_inline_script('wpsolution-lazyload', "
        document.addEventListener('DOMContentLoaded', function() {
            var lazyLoadInstance = new LazyLoad({
                elements_selector: '.lazy',
                load_delay: 300,
            });
        });
    ");
}
add_action('wp_enqueue_scripts', 'wpsolution_lazyload_scripts');

Этот код подключит библиотеку vanilla-lazyload и инициализирует её для элементов с классом lazy. Чтобы видео и iframe подгружались лениво, нужно добавить класс lazy и использовать специальные атрибуты data-src вместо обычного src.

Пример использования автозагрузки для видео с кастомным шорткодом

Создадим простой шорткод, который выводит видео с поддержкой автозагрузки через класс и атрибуты, чтобы демонстрировать работу настройки.

function wpsolution_lazyload_video_shortcode($atts) {
    $atts = shortcode_atts(array(
        'src' => '',
        'poster' => '',
        'width' => '640',
        'height' => '360',
    ), $atts, 'lazyvideo');

    if (empty($atts['src'])) {
        return '<p>Ошибка: не указан адрес видео.</p>';
    }

    $enabled = get_option('wpsolution_lazyload_enabled', '1');

    if ($enabled === '1') {
        $video = '<video width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" controls poster="' . esc_attr($atts['poster']) . '">'
            . '<source data-src="' . esc_url($atts['src']) . '" type="video/mp4" class="lazy" />'
            . 'Ваш браузер не поддерживает видео тег.'</video>';
    } else {
        $video = '<video width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" controls poster="' . esc_attr($atts['poster']) . '">'
            . '<source src="' . esc_url($atts['src']) . '" type="video/mp4" />'
            . 'Ваш браузер не поддерживает видео тег.'</video>';
    }

    return $video;
}
add_shortcode('lazyvideo', 'wpsolution_lazyload_video_shortcode');

Используйте шорткод на странице так:

[lazyvideo src="https://example.com/video.mp4" poster="https://example.com/poster.jpg" width="800" height="450"]

Если автозагрузка включена, видео будет подгружаться лениво. Если нет — видео загружается сразу.

Итог

Добавление настройки автозагрузки медиафайлов в админку WordPress позволяет гибко управлять производительностью сайта без постоянного вмешательства в код. Это особенно полезно для сайтов с большим числом изображений и видео, где скорость загрузки критична для SEO и удобства пользователей.