Каков предпочтительный способ добавления пользовательских файлов javascript на сайт?

Используйте 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 , который подробно описывает.

Отключение скриптов для усиления контроля

Джастин Тадлок имеет хорошую статью под названием Как отключить скрипты и стили в случае, если вы хотите:

1. Объедините несколько файлов в отдельные файлы (пробег может отличаться от JavaScript здесь).
2. Загрузите файлы только на страницах, которые мы используем в сценарии или стиле.
3. Прекратите использовать! важно в нашем файле 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}";
}

Результат в водопаде, который выглядит так, загружая все сразу, но контролируя порядок выполнения: