Используйте wp_enqueue_script()
в своей теме
Основной ответ заключается в том, чтобы использовать wp_enqueue_script()
в качестве wp_enqueue_scripts
переднего конца admin_enqueue_scripts
для администратора. Это может выглядеть примерно так (предполагается, что вы звоните из functions.php
файла своей темы ; обратите внимание, как я ссылаюсь на каталог таблиц стилей):
<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );
function mysite_enqueue() {
$ss_url = get_stylesheet_directory_uri();
wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
}
Это основы.
Предопределенные и несколько зависимых скриптов
Но допустим, вы хотите включить jQuery и jQuery UI Sortable из списка скриптов по умолчанию, включенных в WordPress, и хотите, чтобы ваш скрипт зависел от них? Легко, просто включите первые два скрипта, используя предопределенные дескрипторы, определенные в WordPress, и для вашего скрипта предоставьте 3-й параметр, wp_enqueue_script()
который представляет собой массив дескрипторов скриптов, используемых каждым скриптом, например:
<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );
function mysite_enqueue() {
$ss_url = get_stylesheet_directory_uri();
wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}
Скрипты в плагине
Что если вы хотите сделать это в плагине? Используйте plugins_url()
функцию, чтобы указать URL вашего файла Javascript:
<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );
function my_plugin_enqueue() {
wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
}
Создание версий ваших скриптов
Также обратите внимание, что выше мы дали нашему плагину номер версии и передали его в качестве 4-го параметра wp_enqueue_script()
. Номер версии выводится в источнике в качестве аргумента запроса в URL-адресе сценария и служит для того, чтобы заставить браузер повторно загружать, возможно, кешированный файл в случае изменения версии.
Загружайте сценарии только на тех страницах, где это необходимо
Первое правило веб-производительности гласит: « Минимизировать HTTP-запросы», поэтому, по возможности, следует ограничивать загрузку сценариев только при необходимости. Например, если вам нужен только ваш скрипт в админке, ограничьте его страницами администратора, используя admin_enqueue_scripts
вместо этого ловушку:
<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );
function my_plugin_admin_enqueue() {
wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION );
}
Загрузите свои скрипты в нижний колонтитул
Если ваши скрипты являются одними из тех, которые должны быть загружены в нижний колонтитул, есть 5-й параметр, wp_enqueue_script()
который сообщает WordPress отложить его и поместить в нижний колонтитул (при условии, что ваша тема не ведет себя неправильно и что он действительно вызывает хук wp_footer, как и все хорошие темы WordPress должны )
<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );
function my_plugin_admin_enqueue() {
wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION, true );
}
Более точный контроль
Если вам нужен более точный контроль, чем у этого, у Ozh есть отличная статья под названием « Как: загрузить Javascript с вашим плагином WordPress», в которой более подробно.
Отключение скриптов для получения контроля
У Джастина Тэдлока есть хорошая статья под названием « Как отключить скрипты и стили, если вы хотите:
- Объедините несколько файлов в один файл (пробег может варьироваться в зависимости от JavaScript здесь).
- Загружайте файлы только на те страницы, на которых мы используем скрипт или стиль.
- Прекратите использовать! Важное в нашем файле style.css, чтобы сделать простые настройки CSS.
Передача значений из PHP в JS с wp_localize_script()
В своем блоге у Владимира Преловака есть отличная статья, озаглавленная « Лучшие практики по добавлению кода JavaScript в плагины WordPress», в которой он обсуждает использование, wp_localize_script()
чтобы позволить вам установить значение переменных в вашем PHP на стороне сервера, которое впоследствии будет использоваться в вашем Javascript на стороне клиента.
Действительно мелкозернистый контроль с wp_print_scripts()
И, наконец, если вам нужен действительно детальный контроль, вы можете посмотреть, wp_print_scripts()
как обсуждалось на Beer Planet в посте, озаглавленном « Как включить CSS и JavaScript условно и только тогда, когда это необходимо в сообщениях» .
Epiloque
Вот и все, что касается практики включения файлов Javascript в WordPress. Если я что-то пропустил (что, вероятно, есть), обязательно сообщите мне об этом в комментариях, чтобы я мог добавить обновление для будущих путешественников.