web-dev-qa-db-ja.com

サイトにカスタムJavaScriptファイルを追加するための推奨される方法は何ですか？

私はすでに自分のスクリプトを追加しましたが、望ましい方法を知りたかったのです。
テンプレートの<script>に直接header.phpタグを追加しました。

外部またはカスタムのjsファイルを挿入するための好ましい方法はありますか？
jsファイルを単一のページにバインドする方法（ホームページを念頭に置いています）

theme-developmentjavascript
68
naugtur

テーマでwp_enqueue_script()を使用します

基本的な答えは、管理用のフロントエンドwp_enqueue_scriptsのadmin_enqueue_scriptsフックで wp_enqueue_script() を使用することです。次のようになります（テーマの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の両方を WordPressに含まれるデフォルトのスクリプトのリストおよびからソート可能なものに含めたいとしましょう。 ？ WordPressで事前定義されたhandles を使用して最初の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 );
}

スクリプトのバージョン管理

また、aboveプラグインにバージョン番号を付け、wp_enqueue_script()に4番目のパラメーターとして渡しました。バージョン番号は、スクリプトのURLのクエリ引数としてソースに出力され、バージョンが変更された場合、キャッシュされている可能性のあるファイルをブラウザに強制的に再ダウンロードさせます。

必要なページにのみスクリプトをロードする

Webパフォーマンスの最初のルールはMinimize HTTP Requests であるため、可能な限り、必要な場所にのみロードするようにスクリプトを制限する必要があります。たとえば、管理でスクリプトが必要な場合は、代わりに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つである場合、WordPressにそれを遅延させてフッターに配置するように指示するwp_enqueue_script()の5番目のパラメーターがあります（テーマが誤動作せず、確かに すべての良いWordPressテーマのようにwp_footerフックを呼び出します ）：

<?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調整を行う必要がなくなります。

wp_localize_script()を使用してPHPからJSに値を渡す

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

wp_print_scripts()を使用した本当にきめ細かい制御

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

エピロック

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

78
MikeSchinkel

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によるあなたのために。

11
t31os

スクリプトが動的に生成されるなどの理由で別のファイルに含めたくない小さなスクリプトの場合は、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);
0
cjbj

私は、wp_enqueue_scriptを使うよりは、良いパフォーマンスを達成することをお勧めします。ですから、HEREDOCをFetch APIと一緒に使用して、すべてを非同期に並行してロードします。

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

実行順序を制御しながら、一度にすべてをロードする、このような外観の滝になります。

enter image description here 

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

0
Josh Habdas