こんには。hiroです。今回はWordPressでjavascriptを読み込む方法を紹介します。
さっそくですが、WordPressでjavascriptを読み込む方法として2種類あります。
1つ目は、ヘッダ-やフッターのテンプレートに直接記述してしまう方法。
2つ目は、functions.phpに関数を使ってテンプレートに出力する方法。
まずは1つ目のヘッダーやフッターに直接記述する方法から解説していきますね。
ヘッダーやフッターに直接記述する方法
ヘッダーに記述する方法としてはheader.phpに以下のコードを記述します。
(前提としてjavascriptのファイルはjsフォルダに配置しているとします。)
header.phpに書くコード
1 2 |
//header.phpに直接記述 <script type='text/javascript' src='<?php echo get_template_directory_uri();?>/js/ファイル名.js'></script> |
もし、子テーマを作り、子テーマフォルダ内にjsフォルダがある場合は、以下のコードになります。
1 2 |
//header.phpに直接記述 子テーマの場合 <script type='text/javascript' src='<?php echo get_stylesheet_directory_uri(); ?>/js/ファイル名.js'></script> |
子テーマのあるなしの違い。
子テーマがない場合は、テーマフォルダのURLを呼び出すために、get_template_directory_uri()関数を使います。
子テーマがあって、子テーマフォルダの中に配置されているjavascriptファイルを呼び出す時は、get_stylesheet_directory_uri()関数を使います。(※以下、子テーマがないものとして解説していきますね。)
ただ、気づいている人もいると思いますが、このコードの書き方だと全てのページにjavascriptファイルが読み込まれてしまいます。
他のページにもこの状態でjavascriptファイルを追加していくと、だんだんとページの読み込みが遅くなり、ページの表示速度が低下することで、SEO対策上もあまり好ましくはありませんね。
そこで、上記のコードにif文で条件分岐を加え、特定のページにだけ表示する仕様にします。
1 2 3 4 |
//if文で条件分岐を加えて特定のページのみ表示 <?php if( is_single('ページ番号') ):?> <script type='text/javascript' src='<?php echo get_template_directory_uri();?>/js/ファイル名.js'></script> <?php endif; ?> |
これで特定の投稿ページにだけ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 をリンクする際に推奨されている方法です。
次は、WordPress Codexで推奨されているwp_enqueue_script()関数を使ったjavascriptの読み込み方法を紹介します。
WordPress Codexで推奨されているwp_enqueue_script()関数を使ったjavascriptファイルの読み込み方法
WordPress Codexで推奨されているjavascriptファイルの読み込み方法は、wp_enqueue_script()関数を使う方法になります。
wp_enqueue_script関数を使ったjavascriptファイルの読み込みコード
1 2 |
//<span>wp_enqueue_script()</span>関数 wp_enqueue_script('ハンドル','ファイルのURL',依存関係,'バージョン',フッターで読み込み); |
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に書くコード
1 2 3 4 5 |
//<span>wp_enqueue_script()関数を使って関数定義、そしてadd_action()関数で実行</span> function script () { wp_enqueue_script('script', get_template_directory_uri().'/js/script.js',array(),'',true); } add_action('wp_enqueue_scripts','script'); |
上記コードのパラメータ
ハンドル: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の読み込む2つの方法まとめ!
このページではWordPressでjavascriptを読み込むためには、ヘッダーやフッターのテンプレートに直接記述する方法とfunctions.phpで関数を使って読み込む2つの方法を紹介しました。
関数の扱いが苦手な方は、ヘッダーやフッターのテンプレートに直接記述するのもありですが、できればfunctions.phpに関数を使って記述することをおすすめします。
functions.phpに関数を使って記述すれば、WordPressの関数についての理解も深まりますからね。
では、今回はこのあたりで。