Как добавить JavaScript только на определенную страницу WordPress

Реализация JavaScript на целевой странице WordPress

WordPress — это простая в использовании платформа, которая упрощает управление и настройку веб-сайта. Однако реализовать некоторые изменения может быть сложно, включая выполнение JavaScript на конкретной странице. Вполне возможно, что скрипт, который вы добавили в раздел «Заголовок» вашего сайта, теперь присутствует на каждой странице. Это типичная сложность для новичков.

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

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

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

Понимание роли JavaScript на конкретных страницах WordPress

Способ размещения скрипта непосредственно в разделе «Заголовок» может привести к тому, что он будет загружаться на каждой странице, когда вам нужно запустить JavaScript файл на конкретной странице WordPress. С точки зрения пользовательского опыта и производительности это не идеально. Предыдущие параметры обеспечивают более эффективный способ обработки сценариев, ограничивая сценарий только указанной страницей. Например, мы можем использовать WordPress is_page() метод, позволяющий определить, просматривает ли пользователь определенную страницу, на основе ее идентификатора или фрагмента. Это основной метод, используемый для обеспечения загрузки файла JavaScript только при необходимости.

Первый метод использует условные теги в функции.php файл вместе с wp_enqueue_script(). В этом методе используется базовая функция WordPress, которая добавляет скрипты таким образом, чтобы обеспечить правильное управление зависимостями, и загружает скрипт в соответствующую область страницы. Через wp_enqueue_scripts перехват действий, функция JavaScript будет добавлена ​​только тогда, когда WordPress обработает страницу, которая удовлетворяет is_page() требование. Помимо эффективности, это останавливает бессмысленное выполнение скриптов на малозначимых сайтах.

Использование шорткодов является частью второй стратегии. Шорткоды WordPress упрощают добавление динамического материала на страницу или публикацию. add_shortcode() можно использовать для создания собственного короткого кода, который позволит вам условно вставлять скрипт в область контента по мере необходимости. Это дает вам больше возможностей, если вы хотите использовать скрипт в определенных разделах, а не на всей странице веб-сайта или публикации. Кроме того, это более доступный вариант для людей, которым неудобно вносить прямые изменения в файлы PHP.

Другой метод идеально подходит для динамической загрузки скриптов на страницах, URL-адрес которых имеют определенные параметры, поскольку он использует jQuery для поиска определенных шаблонов в URL-адресах. window.location.href и $.getScript() используются в этом подходе, чтобы определить, включена ли определенная строка в URL-адрес, и соответствующим образом загрузить файл JavaScript. Этот подход хорошо работает в таких ситуациях, как сайты электронной коммерции или целевые страницы с уникальными кодами отслеживания, где структура URL-адресов требует использования сценария. Все эти методы являются модульными, допускают многократное использование и гарантируют, что сценарии загружаются только при необходимости, что повышает удобство использования и производительность.

// functions.php - Adding JavaScript to a specific WordPress page
function load_custom_js_on_specific_page() {
    // Check if we are on a specific page by page ID
    if (is_page(42)) { // Replace 42 with the specific page ID
        // Enqueue the external JavaScript file
        wp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);
    }
}
// Hook the function to wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');

// functions.php - Using shortcodes to add JavaScript to a specific page
function add_js_via_shortcode() {
    // Return the script tag to be added via shortcode
    return '<script src="https://example.com/code.js" type="text/javascript"></script>';
}
// Register the shortcode [custom_js]
add_shortcode('custom_js', 'add_js_via_shortcode');
// Now, use [custom_js] in the page editor where the script should run

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Check if the URL contains a specific query string or slug
    if (window.location.href.indexOf('specific-page-slug') > -1) {
        // Dynamically load the JavaScript file
        $.getScript('https://example.com/code.js');
    }
});
</script>

// Inside page-specific template file (e.g., page-custom.php)
<?php get_header(); ?>
<!-- Page Content -->
<script src="https://example.com/code.js" type="text/javascript"></script>
<?php get_footer(); ?>

Оптимизация загрузки JavaScript на страницах WordPress

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

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

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