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

Я уже добавил свои скрипты, но я хотел знать предпочтительный способ.
Я просто поместил <script> непосредственно в header.php моего шаблона.

Есть ли предпочтительный способ вставки внешних или пользовательских js-файлов?
Как связать файл js с одной страницей? (У меня есть главная страница)

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

Используйте wp_enqueue_script() в своей теме

Основной ответ заключается в использовании wp_enqueue_script() в wp_enqueue_scripts hook для front-end admin_enqueue_scripts для admin. Это может выглядеть примерно так (предполагается, что вы вызываете из файла 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, и для вашего скрипта вы получите третий параметр 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 ); } 

Более тонкий контроль

Если вам нужен более тонкий контроль, чем у Ожа, есть замечательная статья, озаглавленная « Как загрузить 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-ui-sortable'); wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),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__ ), array('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 <script> (function () { 'use strict'; if (!window.fetch) return; /** * Fetch Inject v1.6.8 * Copyright (c) 2017 Josh Habdas * @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=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}(); fetchInject( $jquery_dependent_script_paths_json , fetchInject([ "{$jquery_script_path}" ])); })(); </script> EOD; 

И затем вставьте их в голову, иногда вместе со стилями, такими как:

 function wc_inline_head() { global $inline_scripts; echo "{$inline_scripts}"; global $inline_styles; echo "{$inline_styles}"; } 

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

введите описание изображения здесь

Примечание. Для этого требуется использование API-интерфейса Fetch, который недоступен во всех браузерах.