本記事の情報は最新ではありません。以下のページの情報を参考にしてください。
今回はwp_enqueue_style()でCSSを読み込んでみます。また、続いてwp_enqueue_script()でJavaScriptを読み込んでみようと思います。
headタグ内に直接記述してはいけないの？
通常、静的HTMLにてウェブサイトを作成する際には、HTMLでマークアップしCSSでスタイリングして、JavaScriptで動きを出したりします。そして、CSSやJavaScriptのファイルを読み込むためにHTML内headタグ内やbodyの閉じタグ前などに記述します。
当然、同じようにWordPressテーマファイルに記述しても動作します（ハードコートと呼びます）。しかし、その方法はWordPressのテーマを作成する上では推奨されていません。なぜなのでしょうか。
まず理由としてあげられるのは、なんといってもメンテナンス性でしょう。テーマファイルに直接入力することは、実装自体は簡単なのですがメンテナンス性が悪くなります。ファイル名が変わったり、格納先ディレクトリが変わったりした場合に記述を変更しなくてはなりません。そして、記述が複数のファイルに及んだ場合には修正ミスにもつながりかねません。
では、どのように読み込ませたら良いのでしょうか？
functions.phpから読み込む
CSSやJavaScriptファイルを読み込む方法として推奨されているのは、functions.phpからwp_head()wp_footer()を経由して読み込むファイルを管理する方法です。
では実際に読み込んでみましょう。
wp_enqueue_style()でスタイルシートを読み込んでみる
まずはスクリプトを読み込むファンクションを作成します。今回はoleindesign_scripts()という名前で作って見ました。
そして、wp_enqueue_style()でスタイルシート（テーマフォルダ内のstyle.cssファイル）を読み込みます。こちらでは、oleindesign-styleというハンドル名をつけて、get_stylesheet_uri()でテーマフォルダ内にあるstyle.cssファイルのパスを指定することができます。
あとはadd_action()を使ってアクションフックを設定します。
wp_enqueue_script()でJavaScriptを読み込んでみる
先ほど上でCSSを読み込んだ同じ要領で、今度はJavaScriptを読み込んでみましょう。
今回のコードにはちょっと今までに見たことが無いものがif分の中に潜んでいますね。簡単に解説しておきますと、
- is_singular()
-
- is_single()
- is_page()
- is_attachment()
のいずれかが表示されている場合のみtrueを返します。要は個別の投稿を表示しているかどうかを知るためです
- comments_open()
- コメント機能がオンになっているかどうか
- get_option( ‘thread_comments’ ) )
- コメントがスレッド形式に設定してあるかどうか
という分岐条件が記述してあります。
そして、その条件が当てはまった場合のみ、wp_enqueue_script()にてcomment-replyを呼び出しています。こちらはコメント返信用のJavaScriptライブラリが呼び出されます。
このコードはコメント返信用JavaScriptをシングルポストページに追加し、コメント返信リンクが適切に動くようにします
このようにしてスタイルシートやスクリプトを読み込む方法が推奨されています。詳しくはリファレンスを参照するといろいろな使い方のサンプルが掲載されています。
また、WordPressを利用する上ではテーマとプラグインの共存が欠かせません。その上でも（プラグインを正常に機能させるためにも）この方法を採用するべきかともいます。ぜひ確認してみてください。
まとめ
これでひとまずfunctions.phpについては終了します。今後は徐々にコーディングを進めながらWordPress実装もしていくことになります。以後、お楽しみに！
