wordpressでテーマを作成する時、一旦ローカルでコーディングしたデータをいざwordpressのテーマにしたら画像やcssが読み込まれない…という事象が起きたことがある人もいるのではないでしょうか。
例えばGoogleで「wordpress テーマ作成」というキーワードで調べて出てきた記事にはcssのパスを修正しましょう！と書いてあることがあるかと思います。
wordpressでは関数を使ってパスを取得します
wordpressのテーマでcssや画像、javascriptなどサブリソースのパスを取得する時にはwordpressの用意してくれている関数を使います。絶対パスで全て手書きしている方もいるかもしれませんが恐らくかなり少数でしょう。
wordpressの用意してくれた関数を使うメリット
関数でパスを取得していると、サイトやテーマになんらかの変更を加えた時に、パスを都度修正する必要が無くなります。例えばドメインを変更した時に絶対パスでテーマまでのパスを書いている箇所は全て書き直しになります。テーマのディレクトリ名が変更になった時も同じです。
その他では書き間違いも防ぐことができます。パスに限らずwordpressの用意してくれている関数を使うメリットは多いので、wordpressのテーマを作る時はwordpressの関数を使いましょう。
wordpressの関数が多くてどれを使えばいいのか忘れる
実は今から書いていく4つの方法の他にもテーマへのパスを取得する方法があります。この他の方法もwordpressが用意してくれている関数なのですが、使えるけど現在では非推奨になっているものもあり、同じような用途のものが複数あり正直どれ使うんだよってなるんですよね。
具体的に書くとbloginfo関数は非推奨になっているものがあるので私は使いません。
wordpressでテーマへのパスを取得する4つ方法
上述した通りwordpressでテーマのパスを取得する時はwordpressの用意してくれている関数を使います。4つの方法は4つの関数のことです。下記の4種類の関数を状況によって使い分けます。4つ覚えるだけですので簡単です。
- get_theme_file_uri
- get_parent_theme_file_uri
- get_tmplate_directory_uri
- get_stylesheet_directory_uri
状況は下記で判断します。
- wordpressのバージョン
- 親テーマなのか子テーマなのか
すべて関数名の最後にuriとついているように4つの関数は下記のようなuriを返してくれます。hogeがテーマディレクトリ名です。
https://canonono.com/wp-content/themes/hoge
wordpressのバージョンによって関数を使い分ける
状況の1つとしてwordpressのバージョンがあります。wordpressのバージョンによって使える関数と使えない関数があります。
get_theme_file_uriとget_parent_theme_file_uriはwordpressのバージョンが4.7.0以降でしか使えません。一方get_template_directory_uriとget_stylesheet_directory_uriはwordpressのバージョンが1.5以降であれば使えます。
今では4.7.0も使う状況は多くないかもしれませんが、4.7.0以降であればget_theme_file_uriとget_parent_theme_file_uriを使い、それより前のバージョンではget_template_directory_uriとget_stylesheet_directory_uriを使います。
取得したいのは親テーマのパスか子テーマのパスかで関数を使い分ける
もう一つ取得したいパスは親テーマのパスなのか子テーマのパスなのかという状況があります。wordpressテーマカスタマイズで子テーマを作成する方も多いのではないでしょうか。
上述した状況は子テーマから親テーマのパスを取得したい時と、子テーマから子テーマのパスを取得したときの2つに分かれます。
例えばcssは親テーマないのcssを読み込みたいけど画像は子テーマから読み込むよという時に関数を使い分けます。
子テーマから親テーマのパスを取得する場合はget_parent_theme_file_uriかget_template_directory_uriを使います。子テーマから子テーマのパスを取得する時はget_theme_file_uriかget_stylesheet_directory_uriを使います。
一方親テーマでは4つのどれを使っても親テーマ（自身）のパスが取得できます。
wordpressのテーマのパスを取得する関数の具体的な使い方
ここまで関数の紹介と、状況に応じた使い分け方を書いてきました。ここからは具体的な関数の使い方を書いていきます。といっても使い方はいたって簡単です。
例としてhogeテーマディレクトリ内のcssディレクトリに配置されているpiyo.cssのパスを取得してみようと思います。
echo get_theme_file_uri('css/piyo.css');
echo get_parent_theme_file_uri('css/piyo.css');
echo get_template_directory_uri() . '/css/piyo.css';
echo get_stylesheet_directory_uri() .'/css/piyo.css';
親テーマである場合上記は全て同じuriを表示します。get_theme_file_uriとget_parent_theme_file_uriは引数としてテーマパス以降のパスを渡すことができます。一方get_template_directory_uriとget_stylesheet_directory_uri()はテーマパスのuriを返すのみなのでテーマパス以降のパスは文字列を連結する必要があります。
get_theme_file_uriとget_parent_theme_file_uriの引数を省略するとテーマへのパスが取得できます。
実はラップしているだけ
実はget_theme_file_uriとget_parent_theme_file_uriの内部ではget_template_directory_uri、get_stylesheet_directory_uriを使っています。get_theme_file_uriとget_parent_theme_file_uriはget_template_directory_uri、get_stylesheet_directory_uriをより使いやすくした関数なのです。個人的にも引数でパスを渡せるようになったのは文字列連結する手間が減り、より何をしているかがわかりやすくなったので嬉しいです。
wordpressのテーマパスの取得は4つの関数を覚えておけばよい
wordpressでテーマのパスを取得する方法でした。wordpressテーマの作成やカスタマイズではどこかしらのパスを取得するというのは避けて通れないと思いますので、この4つを覚えるだけでかなり活用できるのではないでしょうか。
wordpressはバージョン5が目前なのでほぼget_theme_file_uriとget_parent_theme_file_uriを使えば間違い無いですね。
