Який бажаний спосіб додати користувальницькі файли javascript на сайт?

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

Чи є бажаний спосіб вставлення зовнішніх або користувацьких файлів js?
Як би я прив’язав js-файл до однієї сторінки? (Я маю на увазі домашню сторінку)

Використовуйте 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-адресі до скрипту і служить для примушення браузера повторно завантажувати, можливо, кешований файл, якщо версія була змінена.

Завантажуйте сценарії лише на потрібних сторінках

Перше правило Web Performance говорить Мінімізація 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. Якщо я щось пропустив (що, мабуть, маю), обов'язково повідомте мене в коментарях, щоб я міг додати оновлення для майбутніх мандрівників.

Щоб зробити комплімент Майку чудовою ілюстрацією використання запитань, я просто хочу зазначити, що сценарії, включені як залежності, не повинні зав'язуватися ...

Я буду використовувати приклад під Скриптами в заголовку плагіну у відповіді Майка.

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, який доступний не у всіх браузерах.