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

Используйте 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, сортируемый из списка по умолчанию скрипты, включенные в 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-адресе скрипта и служит для того, чтобы заставить браузер повторно загрузить, возможно, кэшированный файл, если версия изменилась.

Загружайте скрипты только на страницы, где это необходимо

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__ ), 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, который содержит более подробную информацию.

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

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

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 Условно И Только Тогда, Когда Это Необходимо Для Сообщений.

Эпилок

Вот и все, что касается лучших практик включения файлов Javascript с WordPress. Если я что-то пропустил (что, вероятно, у меня есть), обязательно дайте мне знать в комментариях, чтобы я мог добавить обновление для будущих путешественников.