Робота з jquery в WordPress

за Ніколаєнко Максим · Опубліковано Січень 19, 2013 · Оновлено Серпень 8, 2018

Для початку розпишу завдання яке у мене було. Потім налаштування WordPress виводив версію бібліотеки jquery 1.4 через плагін безкоштовна версія якого не оновлювалася ще з 2009 року. Назва плагіна “TheFly“, впевнений що у платній версії було все гаразд, але мене жаба задавила б купувати його, коли я можу це зробити потрібний скрипт або на крайній випадок розібратися в тому, як працює плагін.

Взагалі пробрав мене інтерес і я почав копатися в коді. Покопавшись у вихідниках плагіна, помітив цікавий фрагмент коду приблизно наступного виду.

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://code.jquery.com/jquery-latest.min.js', false, 'latest');
    wp_enqueue_script( 'jquery' );

    wp_deregister_script( 'jquery-ui' );
    wp_register_script( 'jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js');
    wp_enqueue_script( 'jquery-ui' );

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', 'https://code.jquery.com/jquery-latest.min.js', false, 'latest');

wp_enqueue_script( 'jquery' );

wp_deregister_script( 'jquery-ui' );

wp_register_script( 'jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js');

wp_enqueue_script( 'jquery-ui' );

Начебто брати має останню версію, но не брало ). Код я переробив без плагіна і все працювало чудово, але конструкцію, яку знайшов у плагіні, почав розбирати і зараз дам невеликий опис того, що я знайшов.

Із кодексу WordPress дізнався що функція сценарій скасування реєстрації wp() потрібна для виключення скрипта javascript з регістру WordPress. Причому цією функцією можна прибирати не тільки бібліотеку JQUERY, але й будь-який інший зареєстрований скрипт, наприклад, коли в різних плагінах написаних не коректно з'являється конфлікт. У мене цей конфлікт часто виникає, коли бідкодери вирішують що треба включити разом із плагіном ще одну білотеку jquery. Для використання функції можна писати код такого вигляду:

<?php wp_deregister_script( $handle ); ?>

или

<?php wp_deregister_script('jquery'); ?>

<?php wp_deregister_script( $handle ); ?>

или

<?php wp_deregister_script('jquery'); ?>

Як можна бачити з прикладу змінна $handle – це назви сценарію, який має бути видалений. Сама функція не повертає жодних значень і розташована за адресою wp-includes/functions.wp-scripts.php.

Наступна функція з фрагмента коду це wp_register_script(). Тут особливо й розповідати нема чого, просто додаєте до параметра функції, той скрипт, яких хочете виводити у шапці шаблону WordPress. Функція має декілька параметрів.

<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>

1	<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Розглянемо параметри функції wp_register_script за звичкою:

$ручка – Назва сценарію. Має бути унікальним, оскільки він використовується як ідентифікатор для подальшого використання з wp_enqueue_script ().

За промовчанням значення параметра: Жодного

$SRC – URL-сценарій, який необхідно додати до вашого шаблону.

Приклад підключення скрипту: ” https://example.com/wp-includes/js/scriptaculous/scriptaculous.js “.

Ви ніколи не повинні жорстко вказувати URL-адресу в локальних скриптах. Найкраще використовуйте конструкцію get_template_directory_uri, для отримання шляху від теми WordPress.

За промовчанням значення параметра: Жодного

$відділ – масив зареєстрованих сценаріїв, він показує, що цей сценарій залежить від скриптів, які мають бути завантажені до завантаження цього сценарію. Функція поверне false, якщо не всі скрипти були зареєстровані раніше. Цей параметр є обов'язковим, тільки якщо вашому скрипту потрібне підвантаження інших бібліотек чи скриптів.

За промовчанням значення параметра: Масив ()

$ver – параметр не обов'язковий, якщо вам немає потрібно використовувати версію скрипту. Цей параметр використовується для того, щоб правильна версія надсилалася клієнту, незалежно від кешування. Для відключення можна залишити порожнім.

За промовчанням значення параметра: помилковий

$In_footer – зазвичай скрипти розміщені в <head> розділі. Якщо цей параметр дорівнює false, сценарій міститься у нижній частині <body> . Для роботи параметра в нижній частині шаблону вам потрібна функція wp_footer() на місці її і виводитиметься ваш скрипт. Зверніть увагу, що у вас у верхній частині сайту також має бути функція wp_head(), навіть якщо скрипт буде поміщений у підвал.

За промовчанням значення параметра: помилковий

Сама функція wp_register_script не повертає жодних значень.

Усі скрипти, які можна підключити і вони є в CMS WordPress, за умовчанням перераховані у кодексі, я їх перераховувати не буду. Читаємо тут.

Вихідники функції знаходяться за адресою: wp-includes/functions.wp-scripts.php

Після реєстрації скрипту час допомоги функції необхідний сценарій wp_register_script необхідно включити використання цього самого скрипта в шаблон WordPress за допомогою функцій wp_enqueue_script.

Код функції при використанні виглядає так:

<?php wp_enqueue_script( $handle, $src, $deps, $ver ); ?>

1	<?php wp_enqueue_script( $handle, $src, $deps, $ver ); ?>

Також ця функція має варіації і буде вказувати, де саме повинен включатися скрипт..

wp_enqueue_scripts – для зовнішньої частини сайту;
admin_enqueue_scripts – для панелі керування;
login_enqueue_scripts – для сторінки входу.

$ручка – унікальна назва сценарію скрипту. Вище я його описував уже.

За промовчанням значення параметра: Жодного

$src – параметр вказує шлях до скрипту і потрібен лише у випадку, якщо WordPress ще не знає про те, де розташований скрипт. Якщо до виклику цієї функції ви не реєстрували вій скрипт функцією wp_register_script.

За промовчанням значення параметра: Жодного

$відділ -як і описувалося у попередній функції, цей параметр міститиме масив з ідентифікаторами скриптів, які повинні бути підключені до виклику скрипту.

За промовчанням значення параметра: Масив ()

У кодексі WordPress також радять використовувати плагін Використовуйте бібліотеки Google щоб не було конфліктів з бібліотеками при підключенні сторонніх плагінів.

Приклад для підключення CDN-копії бібліотеки jquery з google.

<?php
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    
 
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

<?php

function my_scripts_method() {

wp_deregister_script( 'jquery' );

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');

wp_enqueue_script( 'jquery' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Використовуючи фільтр wp_enqueue_scripts (замість фільтра init, на який посилаються деякі статті на сторонніх сайтах), ми уникаємо реєстрації альтернативної версії jQuery на сторінках панелі керування, що знижує ризик порушення роботи редактора записів під час оновлення.

приклад

Додамо та завантажимо новий скрипт, який залежить від scriptaculous (це також викликає завантаження scriptaculous на сторінці):

<?php
function my_scripts_method() {
	wp_enqueue_script(
		'newscript',
		plugins_url( '/js/newscript.js', __FILE__ ),
		array( 'scriptaculous' )
	);
}    
 
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

<?php

function my_scripts_method() {

wp_enqueue_script(

'newscript',

plugins_url( '/js/newscript.js', __FILE__ ),

array( 'scriptaculous' )

);

}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Завантажуємо у темі оформлення скрипт, залежить від скрипту в WordPress

Часто потрібно, щоб перед JavaScript-файлами, що поставляються з темою оформлення, був завантажений інший JavaScript-файл. WordPress надає API, що дозволяє при реєстрації скрипта вказати його залежність. Наприклад, тема з наведеним нижче кодом вимагає, щоб перед скриптом custom_script.js була завантажена бібліотека jQuery:

<?php
function my_scripts_method() {
	wp_enqueue_script(
		'custom-script',
		get_template_directory_uri() . '/js/custom_script.js',
		array('jquery')
	);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

<?php

function my_scripts_method() {

wp_enqueue_script(

'custom-script',

get_template_directory_uri() . '/js/custom_script.js',

array('jquery')

);

}

add_action('wp_enqueue_scripts', 'my_scripts_method');

Завантажуємо скрипти плагіна лише на його сторінках

<?php
    add_action( 'admin_init', 'my_plugin_admin_init' );
    add_action( 'admin_menu', 'my_plugin_admin_menu' );
    
    function my_plugin_admin_init() {
        /* Регистрируем наш скрипт. */
        wp_register_script( 'my-plugin-script', plugins_url('/script.js', __FILE__) );
    }
    
    function my_plugin_admin_menu() {
        /* Регистрируем страницу нашего плагина */
        $page = add_submenu_page( 'edit.php', // Родительская страница меню
                                  __( 'Мой плагин', 'myPlugin' ), // Название пункта меню
                                  __( 'Мой плагин', 'myPlugin' ), // Заголовок страницы
                                  'manage_options', // Возможность, определяющая уровень доступа к пункту
                                  'my_plugin-options', // Ярлык (часть адреса) страницы плагина
                                  'my_plugin_manage_menu' // Функция, которая выводит страницу
                               );
   
        /* Используем зарегистрированную страницу для загрузки скрипта */
        add_action( 'admin_print_scripts-' . $page, 'my_plugin_admin_scripts' );
    }
    
    function my_plugin_admin_scripts() {
        /*
         * Эта функция будет вызвана только на странице плагина, подключаем наш скрипт
         */
        wp_enqueue_script( 'my-plugin-script' );
    }
    
    function my_plugin_manage_menu() {
        /* Выводим страницу плагина */
    }
?>