Як додати JavaScript лише до певної сторінки WordPress

Впровадження JavaScript на цільовій сторінці WordPress

WordPress — це проста у використанні платформа, яка спрощує керування веб-сайтом і налаштування. Однак деякі зміни можуть бути складними для впровадження, зокрема виконання JavaScript на певній сторінці. Можливо, сценарій, який ви додали до розділу «Head» свого веб-сайту, тепер присутній на кожній сторінці. Це типова складність для новачків.

Розуміння того, як умовно застосувати файл JavaScript, має вирішальне значення під час використання його для націлювання на конкретну сторінку. JavaScript може мати несподівані наслідки та знизити швидкість вашого веб-сайту, якщо він використовується повсюдно. Ось чому так важливо обмежити сценарій потрібною сторінкою.

У цій статті ми розповімо вам про процес зміни конфігурації WordPress, щоб JavaScript запускався лише на тих сторінках, які вам потрібні. Відповідь зрозуміла і не розробникам; цей посібник призначений для тих, хто тільки починає.

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

Розуміння ролі JavaScript на конкретних сторінках WordPress

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

Перший метод використовує умовні теги в functions.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() метод для завантаження сценарію в нижній колонтитул шляхом передачі правда як остаточний параметр. Роблячи це, ви можете переконатися, що сценарій завантажується перед останнім тегом body та рештою вмісту сторінки. Оскільки менш важливі сценарії затримуються, а більш важливим ресурсам надається пріоритет, ця техніка допомагає скоротити видимий час завантаження. Хоча новачкам ця оптимізація може здатися незначною, вона має великий вплив на швидкість і функціональність сайту WordPress.

Очищення кешу та контроль версій є ще двома важливими елементами. WordPress пропонує простий спосіб використання wp_enqueue_script() функція для додавання номера версії до сценаріїв. Ви можете переконатися, що користувачі не отримують застарілий JavaScript зі свого кешу, додавши аргумент версії. Це забезпечує постійне завантаження останньої версії сценарію, що надзвичайно корисно під час розробки або оновлення сценарію. Ця процедура зменшує ймовірність конфліктів сценаріїв і покращує функціональність веб-сайту.