get_stylesheet_directory_uri()を利用して、最小限の記述で絶対パスを自動化する方法【WordPress】
公開日：
最終更新日：
久しぶりのブログです。
つい最近個人事業主として稼働し始めたのですが、作業がない日は相変わらずアウトプットのクセがなくだらだらと時間を過ごしてしまうので、1週に必ず1記事という目標を立ててネタなど考えながら進める予定です。
ちなみにLaravelは結局ドキュメントをさらっと流し読みする程度でほとんど触れていないので、Laravel8＋livewireの実装なんかも試して行けたらなと考えています。
需要は少ないかもしれませんが、せっかくMovableTypeも直近まで触っていたので、構築ネタもそのうち書いて行けたらなと・・・。
とりあえず今回はWordPressネタです。
私はWordPressでサイトを作成する場合、基本的にテンプレートに当てはまるデザインでは作成したことがないので、最初は静的なコーディングから始めることが多いです。
まず静的コーディングである程度形を作って、固定ページや投稿ページなどのテンプレート作成に入っていきます。
その静的なコーディングの際に画像や外部ファイルのパスを設定すると思いますが、共通で使いまわしている画像などをテーマディレクトリに含めた状態でテンプレート作成を行うと、パスの置換をかけていかなければいけません。
これはWordPressの仕様によるもので、インストールディレクトリのindex｡phpから各ページのコンテンツを動的出力しているだけなので、実際には自作テーマまでのディレクトリパスを全て置換しなければいけないということですね。
ちなみにルート相対パスで設定しておけば、WordPressアドレスで設定しているディレクトリ直下においた場合はリンク切れが発生しませんが、私的には管理が分散するのであまりよくないなと思っています。
そこで、現在選択しているテーマのディレクトリパスを取得するget_stylesheet_directory_uriを利用したパスの処理について書きたいと思います。
また用途としては少ないかもしれませんが、固定ページや投稿ページでテーマファイル内にある独自のCSSやJSを使用したい場合のエディタ内やカスタムフィールドの置換処理も書いていきます。
ちなみに検証バージョンはWordPressの5系バージョンですが、4系のバージョンから利用しているので、相当古いバージョンでなければ動作は問題ないと思います。
get_stylesheet_directory_uriとは
そもそもこの関数はなんなのかというと、WordPressに標準で組みこまれている関数で、現在使用しているテーマのstyle.cssまでの完全なURL（ウェブアドレス）を返します。
テーマを自作する際によく使用する関数だと思います。
この関数の戻り値はstyle.cssまでの完全なURLでstyle.cssは含まない形式なので、画像やファビコンなど他のファイルを読み込む際にも利用できます。
ちなみに、この関数は戻り値としてURLが返されるだけなので、表示する際はechoやprintで表示してください。
WordPressには同じような名前の関数が多数あるので紛らわしいですが、get_stylesheet_directoryでは戻り値がサーバーからの絶対パス（dirname(__FILE__)と同じような挙動）となるので注意してください。
例えば、headに自作テーマのcssディレクトリにあるcommon.cssを読み込みたい時は、以下のように記述すると自作テーマまでのディレクトリパスが生成されます。
生成されるパスは末尾にスラッシュを含まないので注意してください。
<link rel="stylesheet" src="<?php echo get_stylesheet_directory_uri(); ?>/css/common.css">
本来はwp_enque_styleで読み込むのがお作法としては正しいですが、functions.phpに書くのは少し面倒な気がするので、この読み込みでも問題はないかなと思っています。
get_template_directory_uriとの違い
先ほどの文章で「WordPressには同じような名前の関数が多数あるので紛らわしい」と書きましたがget_template_directory_uriという関数もあり、戻り値も非常に似ていて、場合によってget_stylesheet_directory_uriと同じ戻り値になるので、違いがわかりづらいです。
get_stylesheet_directory_uriは「テーマまたは子テーマのスタイルシートディレクトリのURIを取得する」に対して、get_template_directory_uriは「有効化しているテンプレートディレクトリのURIを取得する」となっていて、パッと見た限りではどちらも同じように思いますが、テーマまたは子テーマというところがポイントです。
先で説明した、同じ戻り値になる場合というのは「直接親テーマを編集している」もしくは「自作テーマで親テーマしかない」場合です。
get_stylesheet_directory_uriは子テーマで使用した場合は子テーマのstyle.cssが格納されているディレクトリまでのURLを返しますが、get_template_directory_uriは子テーマで使用しても親テーマディレクトリのURLを返すという仕様です。
子テーマや親テーマなどの運用に関わらず、とりあえずテーマ内にあるファイルを読み込みたいという場合は、get_stylesheet_directory_uriを使い、親テーマの一部を利用してテンプレート作成をしたいという場合であればget_template_directory_uriを・・・というように使い分ければ良いですね。
固定ページでテーマ内のファイルを手っ取り早く参照する方法
内容的にはおまけのようなものですが、固定ページなどで使用するエディタ内では基本的にPHPの記述が使えないため、テーマ内のファイルを参照したい場合は、該当ファイルまでのURLを直接記述するような方法になると思います。
実際にはその方法でも問題はないと思いますが、直接記述してしまうと、もしディレクトリを変更したいとなった場合に全ページの記述を変更や見直しをすることになり、かなりめんどくさい作業だと思います。
そこで、functions｡phpにフックを書いてパスの出力を自動化してしまおうという感じです。
特に難しいことではなく、先ほど説明したget_stylesheet_directory_uriを使って決まった文字列を決まった形に文字列置換をするといった手法です。
WordPressにはadd_actionやadd_filterという関数があり、この関数を利用して、他の関数が実行される際にさらに関数をプラスして動作させることが可能になります。
これがWordPressで壁にぶつかる一つの要因（少なくとも私の場合はですが）であるフックというやり方です。
今回の処理でいくと、エディター内でPHPの関数を利用したいので、その部分を特定の文字列に置き換えてstr_replaceという関数で一気に置換します。
具体的なフックの処理は以下です。
function theme_directory_url($content){
$before_str = '{{theme}}';
$after_str = get_stylesheet_directory_uri();
$content = str_replace($before_str, $after_str, $content);
return $content;
}
add_filter('the_content', 'theme_directory_url');
特に解説するまでもないですが、$before_strの値がページ内容に含まれている場合に$after_strの内容に置き換え、the_contentに渡すと言う処理をしています。
今回の処理としてはフックを使わずとも、ショートコードを登録する関数であるadd_shortcodeでも対応できますが、the_contentにフックさせる方が任意の文字列を利用できるので直感的なのではないかと個人的に思っています。
まとめ
内容としては大体どのブログでも書かれているような内容となりましたが、結果だけ記述してあって、肝心の中身の部分はあまり解説されていなかったりという記事は割と多いので、どれがどう違うのかというところまで少し書いてみました。
実際にはcodexを読めば割と理解できる内容ではあるのですが、PHPの処理なのかそもそもWordPress特有の処理なのかわからない部分もあったりするので、過去の事例やトレンドを追い続けている人の知恵は、うまく活用して自分でカスタマイズできるように利用していけばより良いコードも生まれるのではないかなと思います。
ただ、WordPressは新旧入り混じった知識が多いので、記事が掲載・更新された際の年数やバージョン情報は気にしておいた方が良いと思います。
関連記事
