97.独自テーマの作成をしよう④ ～function.phpでの読み込み～
本日も独自テーマについて。
CSSを読み込む為の記述を確認していきます。
それではさっそくやっていきましょう。
functions.php
例によってファイル名は大事です。
間違えないように独自テーマのフォルダ直下にfunctions.phpを作成しましょう。
できたら、functions.phpの中にスタイルを読み込む為の関数を作ります。
function 任意の関数名{
wp_enqueue_style( $handle, $src, $deps, $ver, $media )
}
wp_enqueue_styleはWordPressの関数で生成したページに対して、
CSSの読み込みができるという代物です。
この関数に引数を渡して実行することで、生成されたページにCSSが読み込まれます。
別途引数について確認していきましょう。
$handle：wp_enqueue_styleのハンドル名。
$src：wp_enqueue_styleでのCSS読み込み先パスを指定する。
$deps：CSSファイルの読み込み順序を書くときに指定する。複数のwp_enqueue_styleを使う場合に配列を使って書く。
$ver：CSSのバージョンを指定する。
media：CSSが定義されているメディアを指定する。
なかなかボリュームありますね。
実際にwp_enuque_styleを使う
まずはコードから
wp_enqueue_style("test", get_template_directory_uri() . "/css/style.css", array(), filemtime(get_theme_file_path('css/style.css')), "all");
今回の引数はそれぞれ
$handle："test"
$src：get_template_directory_uri() . "/css/style.css"
$deps：array()
$ver：filemtime(get_theme_file_path('css/style.css'))
media："all"
です。
難しそうな$srcと$verについて詳しく見ていきましょう。
$srcは先日学習した中で出てきたテンプレートタグget_template_directory_uri() が使われています。
テーマのフォルダまでのパスを自動で取得してくれる
でしたね。
なので、srcには'"テーマフォルダのパス"/css/style.css'という引数が渡されるので、
素晴らしいことにフォルダパスに変更があっても成立するという便利仕様になっています。
テンプレートタグいいですね！
で、
$verについては
filemtime()でファイルに更新があった場合にキャッシュからではなく、再度読み込みさせるということができるそうです。
キャッシュについては
「キャッシュ」とは－意外と知らないIT用語の基本 | @niftyIT小ネタ帳
参考にどうぞ。
そして、filemtime(引数)の 引数 にはどのファイルを対象とするのかを記述します。
ここで新たなテンプレートタグ
get_theme_file_path()
の出番です。
「テーマの指定したファイルのパス」を取得するそうです。
なんて便利なんだ！
変更があっても書き直さなくていいのはスゴイ。
フォルダ/ファイル名でも指定できるようで、今回はcssフォルダ内のstyle.cssのパスを取得しています。
冒頭に戻って
function test{
wp_enqueue_style("test", get_template_directory_uri() . "/css/style.css", array(), filemtime(get_theme_file_path('css/style.css')), "all");
}
というコードを記述することで、
「testというハンドル名でcssフォルダ内のstyle.cssが生成されたページに適用され、更新があった場合はキャッシュを読まずに再参照する。」
この呪文が１行で済むと。
どんだけ便利なんですかテンプレートタグ。
凄まじいワードプレス。
今日のまとめ
- function.phpに読み込み用の関数を書く
- wp_enqueue_styleでCSSの読み込みが便利にできる
- get_theme_file_path()でテーマ内の指定したファイルのパスを取得できる
学ぶことが多いですが、面白いですね！
引き続き楽しみながらやっていきます。
では、また。
