Как изменить JS и CSS в WordPress без использования плагинов

При разработке или кастомизации WordPress-сайта часто возникает необходимость подключить или изменить JavaScript и CSS файлы. Многие сразу обращаются к плагинам, но это не всегда оправдано: плагины могут замедлять сайт, создавать конфликты или просто быть избыточными для небольшой задачи. В этой статье мы подробно рассмотрим, как правильно и эффективно подключать, отключать и изменять JS и CSS в WordPress без использования плагинов.

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

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

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

Подключение и отключение CSS и JS стандартными функциями WordPress

Как правильно подключать скрипты и стили

Для подключения файлов JavaScript и CSS в WordPress используется функция wp_enqueue_script() и wp_enqueue_style(). Рекомендуется подключать их в хуке wp_enqueue_scripts, чтобы гарантировать правильный порядок загрузки и избежать дублирования.

function wpabout_enqueue_assets() {
    // Подключение CSS
    wp_enqueue_style('wpabout-style', get_stylesheet_directory_uri() . '/css/custom-style.css', array(), '1.0', 'all');
    
    // Подключение JS
    wp_enqueue_script('wpabout-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wpabout_enqueue_assets');

В этом примере мы подключаем CSS из папки темы css/custom-style.css и JS js/custom-script.js. Здесь важно указать зависимости и параметр загрузки в футере для скриптов.

Отключение ненужных скриптов и стилей

Иногда WordPress и плагины подключают лишние скрипты и стили, которые замедляют загрузку сайта. Их можно отключить с помощью функции wp_dequeue_script() и wp_dequeue_style(). Это также делается в хуке wp_enqueue_scripts с приоритетом выше 10.

function wpabout_dequeue_assets() {
    // Отключаем стандартный jQuery, если он не нужен
    wp_dequeue_script('jquery');
    
    // Отключаем стили плагина example-plugin
    wp_dequeue_style('example-plugin-style');
}
add_action('wp_enqueue_scripts', 'wpabout_dequeue_assets', 20);

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

Изменение и переопределение стилей и скриптов без редактирования исходных файлов

Переопределение CSS через дочернюю тему или кастомные стили

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

Пример подключения кастомного CSS в дочерней теме:

function wpabout_child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('wpabout-child-style', get_stylesheet_directory_uri() . '/custom.css', array('parent-style')); 
}
add_action('wp_enqueue_scripts', 'wpabout_child_enqueue_styles');

В файле custom.css можно описывать любые переопределения.

Изменение JavaScript с помощью wp_add_inline_script()

Если нужно добавить небольшой JS-код или изменить поведение существующего скрипта, можно использовать функцию wp_add_inline_script(). Это позволяет добавить JS после подключения основного файла.

function wpabout_add_inline_js() {
    wp_enqueue_script('wpabout-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true);
    
    $inline_js = 'jQuery(document).ready(function($) { console.log("Inline JS от wpabout"); });';
    wp_add_inline_script('wpabout-script', $inline_js);
}
add_action('wp_enqueue_scripts', 'wpabout_add_inline_js');

Таким образом можно быстро добавить кастомный JS без правки основного файла.

Работа с зависимостями и версиями скриптов и стилей

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

wp_enqueue_script('wpabout-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true);

Также стоит задавать версию файла, чтобы браузер не кэшировал старые версии при обновлении. Для этого можно использовать константу filemtime(), чтобы автоматически подставлять время последнего изменения файла:

$version = filemtime(get_template_directory() . '/js/custom-script.js');
wp_enqueue_script('wpabout-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), $version, true);

Это гарантирует, что при обновлении файла браузер загрузит свежую версию.

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

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

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

Итоги

Правильное подключение, отключение и изменение CSS и JS в WordPress — залог быстрой и стабильной работы сайта. Используя стандартные хуки wp_enqueue_scripts, функции wp_enqueue_script(), wp_enqueue_style() и их аналоги для удаления, вы получите гибкий и надежный механизм управления ресурсами.

Не забывайте про версии файлов и зависимости, а для мелких изменений используйте wp_add_inline_script(). Если нужны более удобные инструменты — обратите внимание на Clearfy.