ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > WordPress > WordPressでスクリプトを読み込もう

WordPressでスクリプトを読み込もう

Web制作

2022/07/20

2023/05/08

WordPressでスクリプトを読み込もう
この記事では、WordPressでスクリプトを読み込む方法について解説します。
この記事で身につく内容
  • WordPressでスクリプトを読み込む方法

案件が取れなくて悩んでいるあなたへ

プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。

営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか?

  • またゼロからやり直さないといけないの?
  • 本当にフリーランスになれるの?

といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK!

\お申し込みは30秒で終わります。/

まずは無料で相談してみる

新しい一歩を、今踏み出してみませんか?

 

WordPressでのJavaScriptの読み込み方

WordPressでは、CSSファイルと同じように、JavaScriptの読み込みもfunctions.phpにて行います。

その際に必要なこととして、

  • wp_enqueue_script()を使って読み込む
  • defer属性を付与する
  • WordPress標準のjQueryを取り除く

などを行います。

それでは詳しく見ていきましょう。

基本的な読み込み方

WordPressでJavaScript読み込むためには次のようにwp_enqueue_script()という関数を使用します。

wp_enqueue_script(
  'main_script',
  get_template_directory_uri() . '/js/main.js',
  array(),
  '1.0'
);

この関数を使用すると、記述したスクリプトを読み込む順番に追加してくれます。現段階では「JavaScriptを読み込む時に使う関数」だと思ってください。

wp_enqueue_script()の引数をみていきます。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
パラメータ役割
$handle(必須)スクリプトのハンドルとして使われる名称。
$src(オプション)スクリプトのURL。絶対パスで記述する。
$deps(オプション)このスクリプトより前に読み込まれる必要があるスクリプト。依存関係がない場合は空の配列を指定。
$ver(オプション) スクリプトのバージョン番号を指定する文字列。
$in_footer(オプション) スクリプトは通常HTMLドキュメントの<head>に置かれるが、もしこのパラメータがtrueの場合</body>終了タグの前に配置される。

※WordPressCodexより一部引用

  • $handle →第一引数で、任意の名前をつけてあげる必要があります。
  • $src →第二引数で、読み込むJavaScriptの絶対パスを書きます。テーマまでのディレクトリを出力するget_template_directory_uri()を使います。
  • $deps →第三引数で、ここで指定したスクリプトよりも、前に読み込まれてほしいスクリプトを指定します。詳しくは後述します。
  • $ver →スクリプトのバージョンがあれば指定します。初めのうちはとりあえず「’1.0’」と入れておけば良いです。
  • $in_footer →基本的には、wp_head()の記述箇所で出力が行われているところを、wp_footer()( = </body>終了タグの前)の箇所にスクリプトの読み込みを出力させるオプション。

複数のJavaScriptを読み込む方法

複数のスクリプトの読み込みを行いたいときは、次の2種類のパターンがあります。

  • 読み込み順を気にしなくて良い場合
  • 読み込み順を決めなければいけない場合

 

読み込み順を気にしなくて良い場合

読み込み順を気にしなくて良い場合は、次のようにそのまま並べて記述します。

wp_enqueue_script(
  'sub_script',
  get_template_directory_uri() . '/js/sub.js',
  array(),
  '1.0'
);

wp_enqueue_script(
  'main_script',
  get_template_directory_uri() . '/js/main.js',
  array(),
  '1.0'
);

このように書くと、記述した「sub_script」「main_script」の二つのファイルが読み込まれます。

基本的には上から順に「sub_script」→「main_script」で呼び出されますが、書き方として厳密に決めているわけではありません。

そこで、読み込む順番を厳密に定めたいときは次の方法を使います。

 

読み込み順を決めなければいけない場合

JavaScriptで複数のファイルがある場合、プラグインやライブラリを使用する関係で読み込み順を決めたい場合があります。

そのためには

  • スクリプトの登録
  • 依存関係の指定

の二つを行う必要があります。

スクリプトの登録はwp_register_script()を使って、次のように行います。

wp_register_script(
  'jquery_script', // 登録する式別名
  'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', // 登録するJavaScriptのパス
  array(), // JavaScriptの依存関係
  '1.0' // バージョンの指定
);

wp_register_script()記述したスクリプトを登録することができます。

よく似ていますが、wp_enqueue_script()とは異なり、登録をするだけで、このままでは読み込まれる処理に含まれません。

読み込まれる処理に追加するには、それ専用のwp_enqueue_script()を使い、次のように依存関係の指定をします。

wp_register_script( //'jquery_script'を登録
  'jquery_script',
  'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js',
  array(),
  '1.0'
);

wp_enqueue_script(
  'main_script',
  get_template_directory_uri() . '/js/main.js',
  array('jquery_script'), // 'jquery_script'が読み込まれた後に'main_script'を読み込む
  '1.0'
);

wp_enqueue_script()の第三引数を用いて依存関係の指定を行い、「登録したスクリプトの後に読み込む」と書けば、読み込み順を厳密に管理することができます。

読み込みタイミングを決める

読み込みタイミングについては、スタイルの読み込みと同様に、add_action()を使用します。また、アクションフックも同様のwp_enqueue_scriptsを使います。

add_action()などについては次の記事を振り返ってみましょう。

WordPressでCSSを読み込もう | ZeroPlus Media

defer属性を付与する

ここまでスクリプトの呼び出しについて扱ってきましたが、メインとなるスクリプトの記述にはdefer属性の記述を、これまでやってきました。

JavaScriptを勉強する準備をしよう | ZeroPlus Media

wp_enqueue_script()のみの記述だと、defer属性をつけられないので、次にような記述を加えます。

add_filter('script_loader_tag', 'add_defer', 10, 2);
function add_defer($tag, $handle) {
  // 識別名がmain_script以外はそのまま返却
  if ($handle !== 'main_script') {
    return $tag;
  }

  // deferを追加して返却する
  return str_replace(' src=', ' defer src=', $tag);
}

defer属性はメインとなるスクリプトにつけられれば良いので、今回はmain_scriptに対してつけています。

こちらは、基本的に理解の優先度が低く、「この記述を使えばdefer属性がつけられる」ということだけ分かれば大丈夫です。

それでも詳しく知りたい方は、こちらの記事が参考になります。

WordPress標準のjQueryを取り除く

最後に、WordPress標準のjQueryを取り除く方法について解説していきます。

まず前提として、WordPressでは標準でjQueryを使うことができます。

ただし、次のような理由でWordPress標準のjQueryを削除する場合があります。

  • jQueryのバージョンをこちらで指定したい場合
  • 使用する時に、jsファイルで特殊な記述をする必要があるが、それを避けたい場合

その際には、次の記述を行うと、WordPress標準のjQueryの削除を行うことができる。

// デフォルトのjQueryを削除
wp_deregister_script('jquery');

もちろん、その場合は、スクリプトの読み込みの中でjQueryを記述する必要がある。

まとめ

本記事では、

  • スクリプトの読み込み
  • スクリプトの登録と、読み込み順の指定
  • defer属性の付与方法
  • jQueryを取り除く方法

を扱ってきました。

これらをまとめると、次のような記述になります。

// jsの読み込み
add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts() {
  // デフォルトのjQueryを削除
  wp_deregister_script('jquery');

  // jQueryを読み込む
  wp_register_script(
    'jquery_script',
    'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js',
    array(),
    '1.0'
  );

  // メインのスクリプトを読み込む
  wp_enqueue_script(
    'main_script',
    get_template_directory_uri() . '/js/main.js',
    array('jquery_script'),
    '1.0'
  );
}

/* main.js にdefer属性を付与 */
add_filter('script_loader_tag', 'add_defer', 10, 2);
function add_defer($tag, $handle) {
  // 識別名がmain_script以外はそのまま返却
  if ($handle !== 'main_script') {
    return $tag;
  }

  // deferを追加して返却する
  return str_replace(' src=', ' defer src=', $tag);
}

全て完璧に自分でかける必要はありませんが、大まかな流れと、これからの学習のヒントとして、本記事の内容を使ってもらえればOKです。

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから