カスタム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" );
}

それが基本です。

事前定義された複数の依存スクリプト

しかし、WordPressに含まれているデフォルトのスクリプト のリストからjQueryとjQuery UI Sortableの両方を含め、スクリプトをそれらに依存させたいとしましょう。簡単です。WordPressで定義されている定義済みのハンドルを使用して最初の2つのスクリプトを含めるだけwp_enqueue_script()で、スクリプトには、各スクリプトで使用されるスクリプトハンドルの配列である3番目のパラメーターを提供します。

<?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()関数を使用して、JavascriptファイルのURLを指定します。

<?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パフォーマンスの最初のルールでは、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 );
}

フッターにスクリプトを読み込む

スクリプトがフッターにロードする必要があるスクリプトの1つである場合、wp_enqueue_script()WordPressにそれを遅延させてフッターに配置するよう指示する5番目のパラメーターがあります（テーマが誤動作せず、実際にすべてのように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が「How To：Load JavaScript with Your WordPress Plugin」というタイトルのすばらしい記事を参照してください。

制御を獲得するためのスクリプトの無効化

Justin Tadlockには、次のような場合にスクリプトとスタイルを無効にする方法というタイトルの素晴らしい記事があります。

1. 複数のファイルを単一のファイルに結合します（ここでのJavaScriptによって走行距離は異なる場合があります）。
2. スクリプトまたはスタイルを使用しているページにのみファイルをロードします。
3. style.cssファイルで！importantを使用して単純なCSS調整を行う必要がなくなります。

PHPからJSに値を渡す wp_localize_script()

彼のブログVladimir Prelovacには、WordPressプラグインにJavaScriptコードを追加するためのベストプラクティスという素晴らしい記事wp_localize_script()があり、サーバーサイドPHPで変数の値を設定して後でクライアントサイドJavascriptで使用できるようにする方法について説明しています。

本当にきめ細かな制御 wp_print_scripts()

最後に、きめ細かな制御が必要な場合wp_print_scripts()は、Beer Planetで「投稿に必要な場合にのみ条件付きでCSSとJavaScriptを含める方法」という投稿で説明されているように調べることができます。

エピロック

これが、WordPressにJavascriptファイルを含めるベストプラクティスの説明です。何か（おそらく持っている）を見逃した場合は、将来の旅行者のために更新を追加できるように、コメントで必ず知らせてください。

エンキューを使用するマイクの素晴らしいイラストを補完するために、依存関係として含まれているスクリプトをエンキューする必要がないことを指摘したいだけです...

Mikeの答えの「プラグインのスクリプト」の下にある例を使用します。

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') );

スクリプト2がスクリプト3に依存している場合（つまり、スクリプト3を最初にロードする必要がある場合）、これは重要ではありません。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、Fetch APIでHEREDOCを使用して、すべてを非同期に並列にロードします。

$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}";
}

このように見えるウォーターフォールになり、実行順序を制御しながらすべてを一度にロードします。

注：これにはFetch APIの使用が必要です。これはすべてのブラウザーで使用できるわけではありません。