WordPress как подключить определенные CSS и JS на определенных страницах и записях

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

Подключение через wp_enqueue_script() и wp_enqueue_style()

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

Пример кода:

function custom_enqueue_scripts() {
    // Проверка, что находимся на нужной странице
    if (is_page('about-us')) {
        // Подключаем CSS файл
        wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/about-us.css');
        
        // Подключаем JS файл
        wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/about-us.js', array(), null, true);
    }

    // Проверка, что это запись определенного типа
    if (is_single() && in_category('news')) {
        // Подключаем CSS для записи в категории "news"
        wp_enqueue_style('news-style', get_template_directory_uri() . '/css/news.css');
    }
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

Объяснение:

• Функция wp_enqueue_style() подключает CSS файл.
• Функция wp_enqueue_script() подключает JS файл.
• Условие is_page('about-us') проверяет, находится ли пользователь на странице с заданным слагом, в данном случае на странице «about-us».
• Условие is_single() проверяет, является ли текущая страница одиночной записью.
• Условие in_category('news') проверяет, принадлежит ли запись к категории «news».
• Флаг true в wp_enqueue_script() указывает на подключение скрипта внизу страницы (в футере).

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

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

Пример кода:

function custom_enqueue_scripts() {
    // Устанавливаем глобальную переменную, которая будет проверять условия
    global $post;
    
    // Подключение стилей и скриптов для страницы с конкретным ID
    if (is_page(42)) { // Если страница с ID 42
        wp_enqueue_style('page-42-style', get_template_directory_uri() . '/css/page-42.css');
        wp_enqueue_script('page-42-script', get_template_directory_uri() . '/js/page-42.js', array(), null, true);
    }

    // Проверка для записи с определённым slug
    if (is_single() && $post->post_name == 'my-post') {
        wp_enqueue_style('post-my-post-style', get_template_directory_uri() . '/css/my-post.css');
        wp_enqueue_script('post-my-post-script', get_template_directory_uri() . '/js/my-post.js', array(), null, true);
    }
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

Здесь используется условие для проверки ID страницы (is_page(42)) или слаг записи ($post->post_name == 'my-post').

Подключение через пользовательские поля (Custom Fields)

Если вы хотите подключать стили или скрипты на основе значений пользовательских полей, можно использовать функцию get_post_meta() для получения значений этих полей и условных операторов для подключения файлов.

Пример кода:

function custom_enqueue_scripts() {
    // Получаем значение пользовательского поля
    $custom_field_value = get_post_meta(get_the_ID(), 'custom_css_js', true);
    
    // Проверяем, есть ли значение и подключаем стили/скрипты
    if ($custom_field_value == 'yes') {
        wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom.css');
        wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom.js', array(), null, true);
    }
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

В данном примере, если значение пользовательского поля custom_css_js установлено как yes, то подключаются соответствующие стили и скрипты.

Использование плагинов для управления подключениями CSS и JS

Если вы не хотите работать напрямую с кодом, можно использовать плагины, такие как [mask_link href=»https://ru.wordpress.org/plugins/wp-asset-clean-up/» target=»_blank»]Asset CleanUp[/mask_link] или [mask_link href=»https://perfmatters.io/» target=»_blank»]Perfmatters[/mask_link] (платный), которые позволяют подключать и отключать CSS и JS файлы для конкретных страниц или записей через визуальный интерфейс.

Преимущества использования плагинов:

• Удобство в настройке (не нужно редактировать код вручную).
• Легкость в управлении подключениями для отдельных страниц и записей.
• Возможность отключать ненужные скрипты и стили на всех страницах сайта.

Заключение

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

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