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

https://wordpress.stackexchange.com/questions/556

16-10-2019
|

質問

すでにスクリプトを追加しましたが、推奨される方法を知りたかったのです。
私はちょうどを置きました <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 に含まれるデフォルトのスクリプトのリスト そして スクリプトをそれらに依存させたいですか?簡単です。次を使用して最初の 2 つのスクリプトを含めるだけです。事前に定義された ハンドル 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() 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 パフォーマンスの第 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 );
}

フッターにスクリプトをロードする

スクリプトがフッターにロードする必要があるスクリプトの 1 つである場合、次の 5 番目のパラメータがあります。 wp_enqueue_script() これは WordPress にそれを遅らせてフッターに配置するように指示します (テーマが不正に動作せず、実際に正しく動作していると仮定します) すべての優れた 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 );
}

よりきめ細かい制御

それよりも細かい制御が必要な場合オジというタイトルの素晴らしい記事があります方法：WordPress プラグインで Javascript をロードする詳しくはこちらをご覧ください。

スクリプトを無効にして制御を取得する

ジャスティン・タドロックというタイトルの素敵な記事がありますスクリプトとスタイルを無効にする方法次のことをしたい場合:

複数のファイルを 1 つのファイルに結合します (ここでの効果は JavaScript によって異なる場合があります)。
スクリプトまたはスタイルを使用しているページにのみファイルをロードします。
単純な CSS 調整を行うために、style.css ファイルで ! important を使用する必要はなくなります。

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

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

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

そして最後に、本当にきめ細かい制御が必要な場合は、次のことを検討できます。 wp_print_scripts() で議論されたようにビールプラネットというタイトルの投稿で投稿で必要な場合にのみ CSS と JavaScript を条件付きで含める方法.

エピローク

WordPress に Javascript ファイルを含めるベストプラクティスについては以上です。何か見逃した場合は (おそらく見逃していると思いますが)、コメントで知らせてください。今後の旅行者のために最新情報を追加できるようにします。

他のヒント

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

下の例を使用します プラグイン内のスクリプト マイクの答えに向かっています。

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はスクリプトの準備ができていることを見つけてEnqueuteするので、これらのスクリプトを独立した呼び出しを行う必要はありません。

さらに、複数の依存関係を設定するとスクリプトが間違った順序で出力される可能性があるかどうか疑問に思っている人もいるかもしれません。ここで例を挙げてみましょう

wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );

スクリプト2がスクリプト3に依存している場合（つまり、スクリプト3は最初にロードする必要があります）、これは問題ではありません、WordPressはそれらのスクリプトのEnqueueの優先順位を決定し、それらを正しい順序で出力します。 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}";
}

このように見える滝になり、すべてを一度にロードしますが、実行命令を制御します。

ノート： これには、すべてのブラウザーで使用できないフェッチAPIを使用する必要があります。

ライセンス： CC-BY-SA と帰属

所属していません wordpress.stackexchange