Нацелиться на определенную страницу/шаблон в jQuery

Содержание

Вопрос или проблема
Подход 1
Подход 2
Ответ или решение
Подход 1: Использование классов тела
Пример кода
Подход 2: Условная загрузка скриптов в PHP
Пример кода
Объяснение и советы

Вопрос или проблема

У меня есть веб-сайт с фиксированной верхней панелью, которая отображает определенный логотип. Я использовал следующий скрипт на jQuery, чтобы отображать / скрывать логотип после прокрутки определенного количества пикселей:

<script>
jQuery(document).scroll(function() {
var y = jQuery(this).scrollTop();
if (y > 63) {
  jQuery('.top-bar-logo').fadeIn();
} else {
  jQuery('.top-bar-logo').css({
'display': 'none'
});
}
}); 
</script>

Вышеуказанный скрипт хорошо работает, но он применяется ко всем страницам сайта. Поэтому сейчас я хотел бы настроить этот скрипт для конкретной страницы / шаблона. Например, я хотел бы нацелиться на шаблон ‘archive’ в jQuery и написать для него индивидуальный скрипт. Как я могу это сделать?

Я новичок в разработке на WordPress, и любая помощь будет очень ценна. Спасибо.

Подход 1

Используйте класс body. все шаблоны будут иметь класс, представляющий их. Например: body.archive, body.single, body.home и т.д. У него также будут специфические классы для таксономий / типов постов для более детального контроля. Оберните вашу js функцию в что-то, что проверяет этот класс body. Следующее должно сработать:

jQuery

if ( $( 'body' ).first().hasClass( 'archive' ) ) {...}

Обычный JS

const body = document.querySelector('body');
if ( body.classList.contains('archive') ) {...}

Примечание: Классы body могут быть изменены по вашим нуждам через фильтр body_class, и функция body_class() должна быть на вашем элементе body.

Функция (убедитесь, что это на вашем элементе body):

body_class() | Функция | Ресурсы для разработчиков WordPress
https://developer.wordpress.org/reference/functions/body_class/

Фильтр (используйте это для манипуляции):

body_class | Хук | Ресурсы для разработчиков WordPress
https://developer.wordpress.org/reference/hooks/body_class/

Подход 2

Вы также можете нацелиться на этот шаблон в php и обернуть ваш wp_enqueue_script для этого файла (при условии, что это все, что есть в этом файле, и вам ничего больше не нужно) в условие для проверки, например: is_archive(), is_single(), is_home().

Если вы объединяете свои ресурсы, используйте первый подход.

Ответ или решение

Для решения задачи по целевому применению скрипта jQuery на определённой странице или шаблоне вашего сайта на WordPress, необходимо использовать проверку классов, добавляемых к тегу <body> или условия в PHP. Давайте подробно рассмотрим оба подхода и их реализацию.

Подход 1: Использование классов тела

Как вы уже упомянули, каждое представление страницы имеет свои уникальные классы, которые применяются к тегу <body>. Например, для архивной страницы это будет класс archive. Мы можем обернуть ваш скрипт jQuery в условие, которое будет проверять наличие этого класса.

Пример кода

jQuery(document).ready(function($) {
    if ($('body').hasClass('archive')) {
        $(document).scroll(function() {
            var y = $(this).scrollTop();
            if (y > 63) {
                $('.top-bar-logo').fadeIn();
            } else {
                $('.top-bar-logo').css('display', 'none');
            }
        });
    }
});

Подход 2: Условная загрузка скриптов в PHP

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

Пример кода

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

function custom_enqueue_scripts() {
    if (is_archive()) {
        wp_enqueue_script('custom-scroll-script', get_template_directory_uri() . '/js/custom-scroll.js', array('jquery'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

Здесь custom-scroll.js — это файл, в который вы поместите ваш JavaScript код.

Объяснение и советы

Идентификация шаблонов: Использование классов тел является простым и удобным способом. Однако, если ваши скрипты сложно оптимизировать под разные страницы, рекомендуется управлять их загрузкой через PHP.
Оптимизация производительности: Применение условий для загрузки скриптов в зависимости от типа страницы позволяет уменьшить размер загружаемых данных, что может положительно сказаться на скорости загрузки сайта.
Содержимое body_class(): Убедитесь, что функция body_class() включена в ваш код шаблона страницы, чтобы классы могли корректно отображаться у тега <body>.
Изменения по необходимости: Если вы хотите добавить дополнительные условия или изменить поведение логотипа на других страницах, просто внесите изменения в ваш jQuery код, изменяя условия проверки классов или переключая условия в PHP.

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