WordPressでjavascriptを読み込む2つの方法。あなたはどっち派？

こんには。hiroです。今回はWordPressでjavascriptを読み込む方法を紹介します。

さっそくですが、WordPressでjavascriptを読み込む方法として2種類あります。

1つ目は、ヘッダ－やフッターのテンプレートに直接記述してしまう方法。

2つ目は、functions.phpに関数を使ってテンプレートに出力する方法。

まずは1つ目のヘッダーやフッターに直接記述する方法から解説していきますね。

ヘッダーやフッターに直接記述する方法

ヘッダーに記述する方法としてはheader.phpに以下のコードを記述します。
(前提としてjavascriptのファイルはjsフォルダに配置しているとします。)

header.phpに書くコード

もし、子テーマを作り、子テーマフォルダ内にjsフォルダがある場合は、以下のコードになります。

子テーマのあるなしの違い。

子テーマがない場合は、テーマフォルダのURLを呼び出すために、get_template_directory_uri()関数を使います。

子テーマがあって、子テーマフォルダの中に配置されているjavascriptファイルを呼び出す時は、get_stylesheet_directory_uri()関数を使います。（※以下、子テーマがないものとして解説していきますね。）

ただ、気づいている人もいると思いますが、このコードの書き方だと全てのページにjavascriptファイルが読み込まれてしまいます。

他のページにもこの状態でjavascriptファイルを追加していくと、だんだんとページの読み込みが遅くなり、ページの表示速度が低下することで、SEO対策上もあまり好ましくはありませんね。

そこで、上記のコードにif文で条件分岐を加え、特定のページにだけ表示する仕様にします。

これで特定の投稿ページにだけjavascriptの読み込みコードを記述できます。

また、<?php if( is_single(‘ページ番号’) ):?>の部分については、
固定ページの場合は、<?php if( is_page (ページ番号) ):?>
トップページの場合は、<?php if( is_home() ):?>
フロントページの場合は、<?php if( is_front_page() ):?>
に変えて使うことで、それぞれにページにのみjavascriptファイルを読み込む事ができます。

それと、ヘッダーではなくフッターでjavascriptを読み込む場合は、フッターのテンプレートにヘッダーテンプレートに記載したコードを挿入するだけです。

さて、ここで1つ進んだ話をしたいのですが、実は上記のコードの書き方でも問題はありませんが、WordPress Codexでは、javascriptファイルを読み込む際はwp_enqueue_script()関数をfunctions.phpにコードを記述する方法を推奨しています。

時間のある人は一度、下記引用のリンクからWordPressCodexを覗いてみて下さい。

スクリプトのリンクは、wp_register_script() 関数ですでに登録済みのハンドル、またはこの関数に必要なパラメータを与えることで行えます。これは WordPress が生成するページに JavaScript をリンクする際に推奨されている方法です。

関数リファレンス/wp enqueue script – WordPress Codex 日本語版

次は、WordPress Codexで推奨されているwp_enqueue_script()関数を使ったjavascriptの読み込み方法を紹介します。

WordPress Codexで推奨されているwp_enqueue_script()関数を使ったjavascriptファイルの読み込み方法

WordPress Codexで推奨されているjavascriptファイルの読み込み方法は、wp_enqueue_script()関数を使う方法になります。

wp_enqueue_script関数を使ったjavascriptファイルの読み込みコード

wp_wp_enqueue_script関数を使う場合、引数は4つ。

ハンドル

ハンドルとは、読み込むjavascriptファイルに付けるIDになります。このID名は「依存関係」パラメータなどで使用します。ハンドルにはクウォート(‘)で囲んで好きな名前をつけますが、「？」は使えません。このパラメータは必須になります。

（「？」は一応使えるには使えますが、付けるとこの関数の挙動が変わってしまいます。動作が特殊で利用するケースもかなり限られるので、あまり意識しなくても良いと思います。）

例：slide-script、zoom-script等々。

ファイルのURL

ファイルのURLは、読み込むファイルのURLを指定します。

このパラメータには、外部のURLも含めることができるので、外部サイトのjavascriptもURLを指定することで読み込むことができます。

例：https://code.jquery.com/jquery-3.3.1.min.js　（jQqueryを読み込むURL）

依存関係

依存関係というと、少し難しく考えてしまいますが、これは読み込む優先順位のことです。（だったら優先順位と書けばいいのですが、一応正式には依存関係と言うそうです・・・）

優先順位は配列で指定します。array()ですね。

（優先順位がなにもない場合はarray()になります。）

例：array(script1,script2,script3)

バージョン

読み込むjavascriptファイルのバージョン番号を指定します。

バージョン番号って？と思う人もいるかも知れないですね。

自分の作ったscriptにわざわざバージョン番号を作る人ってあまりいないと思います。

バージョン番号がない場合「‘’」とシングルクォテーションを2つ記述するだけでOKです。つまり、空白にしておくということですね。一応念のため、記述例は載せておきます。ほとんど使う事はないと思いますが。

例：’1.0.0’

フッターで読み込み

フッターで読み込みは言葉の通り、フッターで読み込むかどうかを決めるものです。

フッターでjavascriptを読み込みたい場合は、「true」とします。

逆にフッターではなく、ヘッダーで読み込みたい場合は、「false」とします。

因みに、デフォルトではfalseになっているので省略するとヘッダーでの読み込みになります。

例：true

wp_wp_enqueue_script関数を使う場合のフックについて

functions.phpにwp_wp_enqueue_script関数を使ってjavascriptを記述する場合、wp_wp_enqueue_script()関数を使って作った関数を定義し、それをフックを使って実行する必要があります。

フックを使うというのは、読み込みのタイミングを登録するっていう事です。

そして、そのフックに使うのがadd_action()という関数です。

そのadd_action()関数とwp_enqueue_script()関数を使って書いたのが下のコードです。

functions.phpに書くコード

上記コードのパラメータ

ハンドル：script

ファイルのURL：テーマフォルダ/js/script.js

依存関係：array()

バージョン：空白（「’’」だけ）

フッターで読み込み：true

どちらを使ってjavascriptのコードを書くべきか？

ここまで紹介した通り、WordPressでjavascriptファイルを読み込む場合は、ヘッダーやフッターに直接記述する場合、functions.phpに記述する場合の2通りがありますが、個人的におすすめするのはやはりfunctions.phpに記述する方法です。

理由は、WordPressCodexで推奨されているのが一番大きいな理由になりますが、もう1つの理由としては、テンプレートの見通しをよくするためです。

コードの見通しをよくしておけば、エラーが発生した場合、その原因や対策もしやすくなります。

逆に、見通しが悪いと、何が原因でエラーが発生しているかも特定しにくくなるケースもでてきますし、エラーを特定しにくくなれば、それを解消するためにも時間がかかってしまいます。

というわけで、やはりWordPressでjavascriptを読み込む場合は、functions.phpにwp_enqueue_script()関数とadd_action()関数を使って読み込むのをおすすめします。

WordPressでjavascriptの読み込む２つの方法まとめ！

このページではWordPressでjavascriptを読み込むためには、ヘッダーやフッターのテンプレートに直接記述する方法とfunctions.phpで関数を使って読み込む2つの方法を紹介しました。

関数の扱いが苦手な方は、ヘッダーやフッターのテンプレートに直接記述するのもありですが、できればfunctions.phpに関数を使って記述することをおすすめします。

functions.phpに関数を使って記述すれば、WordPressの関数についての理解も深まりますからね。

では、今回はこのあたりで。