Каков предпочтительный способ добавления пользовательских файлов javascript на сайт?
Я уже добавил свои скрипты, но хотел узнать, как это сделать.
Я просто поместил тег <script>
непосредственно в header.php
моего шаблона.
Есть ли предпочтительный способ вставки внешних или пользовательских js-файлов?
Как связать файл js с одной страницей? (У меня есть главная страница)
4 ответа
Используйте wp_enqueue_script ()
в своей теме
Основной ответ заключается в использовании wp_enqueue_script ()
в wp_enqueue_scripts
hook для front end admin_enqueue_scripts
для администратора. Это может выглядеть примерно так (предполагается, что вы вызываете из файла functions.php
вашей темы, обратите внимание, как я ссылаюсь на каталог стилей):
& л;? PHP
add_action ('wp_enqueue_scripts', 'mysite_enqueue');
функция 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 . и для вашего скрипта предоставляется третий параметр wp_enqueue_script ()
, который представляет собой массив дескрипторов скриптов, используемых каждым скриптом, например:
& л;? PHP
add_action ('wp_enqueue_scripts', 'mysite_enqueue');
функция 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__), массив ('jquery', 'jquery-ui-sortable'), MY_PLUGIN_VERSION);
}
Версии ваших скриптов
Также обратите внимание, что выше мы дали нашему плагину номер версии и передали его как 4-й параметр в wp_enqueue_script ()
. Номер версии выводится в качестве аргумента запроса в URL-адресе сценария и служит для принудительной перезагрузки браузера, возможно, кэшированного файла, если версия изменилась.
Загружать скрипты только на страницах, где это необходимо
1-е правило веб-эффективности говорит Свернуть запросы 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__), массив ('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__), массив ('jquery', 'jquery-ui-sortable'), MY_PLUGIN_VERSION, true);
}
Более тонкий контроль
Если вам нужен более тонкий контроль, чем Ож имеет отличную статью под названием Как загрузить 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. Если я пропустил что-то (что, вероятно, я), обязательно сообщите мне в комментариях, чтобы я мог добавить обновление для будущих путешественников.
Чтобы комплимент Mikes прекрасная иллюстрация использования enqueues, я просто хочу указать, что скрипты, включенные в качестве зависимостей, не нужно ставить в очередь ...
Я воспользуюсь примером под заголовком Сценарии в плагине в ответе Майка.
DEFINE ( 'MY_PLUGIN_VERSION', '2.0.1');
add_action ('wp_enqueue_scripts', 'my_plugin_enqueue_scripts');
function my_plugin_enqueue_scripts () {
wp_enqueue_script ( 'JQuery');
wp_enqueue_script ( 'JQuery-щ-сортируемый');
wp_enqueue_script ( 'мой-скрипт', plugins_url ( '/JS /My-script.js', __ FILE __), массив ( 'JQuery', 'JQuery-щ-сортировкой'), MY_PLUGIN_VERSION);
}
Это можно обрезать, чтобы читать ..
DEFINE ( 'MY_PLUGIN_VERSION', '2.0.1');
add_action ('wp_enqueue_scripts', 'my_plugin_enqueue_scripts');
function my_plugin_enqueue_scripts () {
wp_enqueue_script ('my-script', plugins_url ('/js/my-script.js', __FILE__), массив ('jquery', 'jquery-ui-sortable'), MY_PLUGIN_VERSION);
}
Когда вы устанавливаете зависимости, WordPress найдет и завернет их готовность к вашему сценарию, поэтому вам не нужно делать какие-либо независимые вызовы для этих скриптов.
Кроме того, некоторые из вас могут задаться вопросом, может ли установка нескольких зависимостей привести к тому, что скрипты будут отображаться в неправильном порядке, здесь я приведу пример
wp_enqueue_script ('first-script', 'example /path /example_script_1.js', array ('second-script', 'third-script'));
Если сценарий два зависит от скрипта три (т. е. сценарий три должен загружать первый), это не имеет значения, WordPress будет определять приоритеты очереди для этих скриптов и выводить их в правильном порядке, короче говоря, все это получает автоматически разработан для вас WordPress.
Для небольших фрагментов скриптов, которые вы не хотите включать в отдельный файл, например, потому что они генерируются динамически, WordPress 4.5 и далее предлагает wp_add_inline_script
. Эта функция в основном задерживает сценарий для другого скрипта.
Предположим, например, что вы разрабатываете тему и хотите, чтобы ваш клиент мог вставлять свои собственные сценарии (например, Google Analytics или AddThis) через страницу параметров. Затем вы можете использовать wp_add_inline_script
, чтобы запереть этот скрипт в ваш основной js-файл (скажем, mainjs
)):
$ custom_script = get_option ('my-script')
if (! empty ($ custom_script)) wp_add_inline_script ('mainjs', $ custom_script);
Мой предпочтительный способ - добиться хорошей производительности, поэтому вместо использования wp_enqueue_script
я использую HEREDOC с API-интерфейсом Fetch для параллельной загрузки асинхронно:
$ jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4';
$ jquery_dependent_script_paths = [
get_theme_file_uri ('/assets/js/global.js'),
get_theme_file_uri ('/assets/js/jquery.scrollTo.js'),
get_theme_file_uri ('/assets/js/skip-link-focus-fix.js'),
get_theme_file_uri ('/assets/js/navigation.js')
];
$ jquery_dependent_script_paths_json = json_encode ($ jquery_dependent_script_paths);
$ inline_scripts = <<EOD
& Lt; & сценарий GT;
(функция () {
«использовать строгий»;
if (! window.fetch) return;
/**
* Fetch Inject v1.6.8
* Copyright (c) 2017 Джош Хабдас
* @licence ISC
* /
var fetchInject = function () {"use strict"; const e = function (e, t, n, r, o, i, c) {i = t.createElement (n), c = t.getElementsByTagName (n) [ 0], i.type = r.blob.type, i.appendChild (t.createTextNode (r.text)), i.onload = о (г), с c.parentNode.insertBefore (я, с): т .head.appendChild (i)}, t = function (t, n) {if (! t ||! Array.isArray (t)) возвращает Promise.reject (новая ошибка («` input` должен быть массивом ») ), если (n & &! (n instanceof Promise)) возвращает Promise.reject (новая ошибка («обещание» должно быть обещанием)); const r = [], o = n? []. concat ( n): [], i = []; return t.forEach (e => o.push (window.fetch (e). then (e => {return [e.clone (). text (), e.blob ()]}), затем (e => {return Promise.all (e) .then (e => {r.push ({текст: e [0], blob: e [1]} )})}))), Promise.all (o) .then (() => {return r.forEach (t => {i.push ({then: n => {"text /css" ? === t.blob.type е (окно, документ, "стиль", т, п): е (окно, документ, "сценарий", т, п)}})}), Promise.all (я) })}; return t} ();
fetchInject (
$ jquery_dependent_script_paths_json
, fetchInject ([
"{$ Jquery_script_path}"
]));
}) ();
& Lt; /сценарий >
EOD;
И затем вставьте их в голову, иногда вместе со стилями, как это:
функция wc_inline_head () {
глобальные $ inline_scripts;
echo "{$ inline_scripts}";
глобальные $ inline_styles;
echo "{$ inline_styles}";
}
Результат в водопаде, который выглядит так, загружая все сразу, но контролируя порядок выполнения: