Как использовать хуки для удаления CSS и JS в WordPress

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

Почему важно удалять ненужные CSS и JS в WordPress

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

Удаление ненужных ресурсов помогает:

• Повысить скорость загрузки сайта
• Снизить использование ресурсов сервера
• Улучшить SEO-показатели
• Избежать конфликтов скриптов

Для решения этой задачи в WordPress есть удобный механизм — хуки. В частности, хуки wp_enqueue_scripts и wp_print_scripts позволяют управлять подключением стилей и скриптов.

Как определить, какие CSS и JS можно удалить

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

• Откройте консоль разработчика (F12) и перейдите на вкладку Network
• Посмотрите, какие CSS и JS загружаются
• Определите, принадлежат ли эти файлы теме, плагинам или WordPress
• Понимайте, где и зачем они подключаются — на всех страницах или только на определённых

Также можно использовать плагины, например, Query Monitor, которые показывают список всех подключаемых скриптов и стилей.

Пример удаления CSS и JS с помощью хуков в WordPress

Предположим, нам нужно убрать подключение стиля example-style и скрипта example-script на всех страницах, кроме главной.

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

function wpexperts_remove_assets() {
    if ( !is_front_page() ) {
        wp_dequeue_style( 'example-style' );
        wp_deregister_style( 'example-style' );

        wp_dequeue_script( 'example-script' );
        wp_deregister_script( 'example-script' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpexperts_remove_assets', 100 );

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

Разница между wp_dequeue_ и wp_deregister_

Функция wp_dequeue_style/script отключает подключение файла на странице, а wp_deregister_style/script удаляет регистрацию ресурса из глобального списка WordPress. Обычно сначала делают dequeue, а потом deregister, чтобы полностью убрать ресурс.

Удаление CSS и JS только на конкретных страницах или в админке

Иногда нужно отключить скрипты только на определённых страницах или в админке. Пример ниже отключит скрипт example-admin-script только в панели администратора:

function wpexperts_remove_admin_script() {
    wp_dequeue_script( 'example-admin-script' );
    wp_deregister_script( 'example-admin-script' );
}
add_action( 'admin_enqueue_scripts', 'wpexperts_remove_admin_script', 100 );

Для фронтенда можно использовать условные теги WordPress, например, is_page(), is_single(), is_category(), чтобы точечно управлять загрузкой ресурсов.

Пример: отключение стилей Contact Form 7 на всех страницах, кроме страницы с формой

Плагин Contact Form 7 подключает свои стили и скрипты на всех страницах по умолчанию. Чтобы отключить их, кроме страницы с формой, используйте:

function wpexperts_cf7_conditional_assets() {
    if ( !is_page( 'contact' ) ) { // замените 'contact' на слаг вашей страницы
        wp_dequeue_style( 'contact-form-7' );
        wp_deregister_style( 'contact-form-7' );

        wp_dequeue_script( 'contact-form-7' );
        wp_deregister_script( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpexperts_cf7_conditional_assets', 99 );

Так вы экономите ресурсы сайта и не загружаете лишнее на страницах, где форма не используется.

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

Если вы не хотите писать код самостоятельно, можно воспользоваться плагинами со схожим функционалом:

• Asset CleanUp: позволяет отключать CSS и JS на отдельных страницах через удобный интерфейс;
• Perfmatters: платный плагин с расширенными возможностями контроля загрузки ресурсов;
• Plugin Organizer: даёт возможность гибко управлять активацией плагинов и их скриптов.

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

Советы и рекомендации по удалению CSS и JS

При работе с отключением ресурсов через хуки учитывайте следующие моменты:

• Тщательно тестируйте сайт после внесения изменений, чтобы не сломать функционал;
• Знайте, какие зависимости есть у скриптов — отключение одного может повлиять на другие;
• Используйте отладочные инструменты и профайлеры для оценки влияния изменений;
• Документируйте свои изменения, чтобы не потерять логику через время.

Заключение

Удаление ненужных стилей и скриптов — важная часть оптимизации WordPress сайтов. Использование хуков wp_enqueue_scripts и функций wp_dequeue_ и wp_deregister_ позволяет гибко управлять загрузкой ресурсов. Приведённые примеры помогут быстро внедрить эти методы в ваши проекты и повысить скорость и стабильность сайтов.