Работа с jquery в WordPress
Для начала распишу задачу которая у меня была. После настройки WordPress выводил версию библиотеки jquery 1.4 из за плагина бесплатная версия которого не обновлялась еще c 2009 года. Название плагина «TheTheFly«, уверен что в платной версии было все в порядке, но меня жаба задавила бы покупать его, когда я могу это сделать нужный скрипт или на крайний случай разобраться в том как работает плагин.
Вообщем пробрал меня интерес и я начал копаться в коде. Покопавшись в исходниках плагина, заметил интересный фрагмент кода примерно следующего вида.
|
1 2 3 4 5 6 7 |
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 deregister script() нужна для исключения скрипта javascript из регистра WordPress. Причем этой функцией можно убирать не только JQUERY библиотеку, но и любой другой зарегистрированный скрипт, например когда в разных плагинах написанных не корректно появляется конфликт. У меня этот конфликт часто появляется, когда бедкодеры решают что надо включить вместе с плагином еще одну билиотеку jquery. Для использования функции можно писать код следующего вида:
|
1 2 3 4 5 |
<?php wp_deregister_script( $handle ); ?> или <?php wp_deregister_script('jquery'); ?> |
Как можно видеть из примера переменная $handle — это названия сценария, который должен быть удален. Сама функция не возвращает никаких значений и расположена она по адресу wp-includes/functions.wp-scripts.php.
Следующая функция из фрагмента кода это wp_register_script(). Тут особо и рассказывать нечего, просто добавляете в параметр функции, тот скрипт, которых хотите выводить в шапке шаблона WordPress. Функция имеет несколько параметров.
|
1 |
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?> |
Рассмотрим параметры функции wp_register_script по поряку:
$handle — Название сценария. Должно быть уникальным, поскольку он используется в качестве идентификатора для последующего использования с wp_enqueue_script ().
По умолчанию значение параметра: None
$SRC — URL скрипта, который необходимо добавить в ваш шаблон.
Пример подключения скрипта: » https://example.com/wp-includes/js/scriptaculous/scriptaculous.js «.
Вы никогда не должны жестко указывать URL-адрес в локальных скриптах. Лучше используйте конструкцию get_template_directory_uri, для получения пути от темы WordPress.
По умолчанию значение параметра: None
$deps — массив зарегистрированных сценариев, он показывает, что этот сценарий зависит от скриптов, которые должны быть загружены до загрузки этого сценария. Функция вернет false если не все скрипты были зарегистрированы ранее. Этот параметр обязательный, только если вашему скрипту нужна подгрузка других библиотек или скриптов.
По умолчанию значение параметра: Array ()
$ver — параметр не обязательный, если вам нет нужны использовать версию скрипта. Этот параметр используется для того, чтобы правильная версия отправлялась клиенту, независимо от кэширования. Для отключения можно оставить пустым.
По умолчанию значение параметра: False
$In_footer — обычно скрипты размещены в <head> разделе. Если этот параметр равен false, сценарий помещается в нижней части <body> . Для работы параметра в нижней части шаблона вам необходима функция wp_footer() на месте нее и будет выводиться ваш скрипт. Обратите внимание, что у вас в верхней части сайта также должна быть функция wp_head(), даже если скрипт будет помещен в подвал.
По умолчанию значение параметра: False
Сама функция wp_register_script не возвращает никаких значений.
Все скрипты, которые можно подключить и они есть в CMS WordPress, по умолчанию перечислены в кодексе, я их перечислять не буду. Читаем тут.
Исходники функции находятся по адресу: wp-includes/functions.wp-scripts.php
После регистрации скрипта пори помощи функции wp_register_script необходимо необходимо включить использование этого самого скрипта в шаблоне WordPress при помощи функции wp_enqueue_script.
Код функции при использовании выглядит следующим образом:
|
1 |
<?php wp_enqueue_script( $handle, $src, $deps, $ver ); ?> |
Также эта функция имеет вариации и будет указывать где именно должен включаться скрипт.
- wp_enqueue_scripts — для внешней части сайта;
- admin_enqueue_scripts — для панели управления;
- login_enqueue_scripts — для страницы входа.
$handle — уникальное название сценария скрипта. Выше я его описывал уже.
По умолчанию значение параметра: None
$src — параметр указывает путь к скрипту и нужен только в случаи, если WordPress еще не знает о том, где расположен скрипт. Если до вызова этой функции вы не регистрировали вой скрипт функцией wp_register_script.
По умолчанию значение параметра: None
$deps -как и описывалось в предыдущей функции, этот параметр будет содержать массив с идентификаторами скриптов которые должны быть подключены до вызова скрипта.
По умолчанию значение параметра: Array ()
В кодексе WordPress также советуют использовать плагин Use Google Libraries для того чтобы не было конфликтов с библиотеками при подключении сторонних плагинов.
Пример для подключения CDN-копии jquery библиотеки из google.
|
1 2 3 4 5 6 7 8 9 |
<?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 на странице):
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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:
|
1 2 3 4 5 6 7 8 9 10 |
<?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'); ?> |
Загружаем скрипты плагина только на его страницах
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?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() { /* Выводим страницу плагина */ } ?> |
Подробнее из кодекса можно прочесть тут. Там же снизу есть ссылки на английские статьи по подключению скриптов в WordPress. Удачи в разработке!
- Базовый курс по веб-дизайну;
- Верстка сайтов;
- Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
- Разработка сайтов на PHP.
