はじめに

ウェブサイトを使っていれば必ず聞くコトバに「パス」というのがある。
はじめたてのルーキープログラマーの中には「パス？なんじゃらほい」という人も少なくないだろうが、遅かれ早かれこれは覚えることになる。

というのも。
画像をサイトに表示したいとか、aタグで別ページにリンクするボタンを作りたいとか、ある特定の外部CSSや外部Jsファイルを読み込みたい、そういうときには必ずこのパスを書く必要が出てくるからだ。

たとえば、ウェブサイトで画像を表示したいとき、普通はこうする。

tatoeba.html

<img src="https://example.com/img/banner.jpg" width="100%" height="auto" alt="バナー" />

こんな風に、画像のある階層への「パス」……住所を記述するはずだ。
これをWordpressでやろうとすると、こうなる。

tatoeba.html

<img src="https://example.com/wp-content/themes/twentynineteen/img/banner.jpg" width="100%" height="auto" alt="バナー" />

いや、長くね？

こんなもんいちいち書いてらんねーよ。筆者はそう思った。
だいいち、サイトを移管してドメイン(ここでは、https://example.comのこと)が別のやつになりましたーとか、テーマ名を変えることになりましたーみたいな事情ができて、結果的にhttps://google.com/wp-content/themes/daifuku/img/banner.jpgに書き換えなくちゃなりません、みたいなアクシデントが起こったらどうする。サイトにある画像のURLが一から全部書き直しだ。

そんなの嫌に決まってるので、ここは先人エンジニア達のありがたい知恵にすがることにしよう。

対策は大きく分けて３通り。
ひとつ、「相対パスを使う」。
ふたつ、「ルート相対パスを使う」。
みっつ、「Wordpressに用意された専用関数を使う」。

上ふたつはWordpressというよりもむしろ他の箇所で使うもののためここでは割愛するとして、
本記事では３つ目について解説する。

対策：専用関数を使う

ありがたいことに、Wordpressにはこのパスを自動で出力してくれる関数が存在する。
「関数」というと難しそうに聞こえるが、要は「このコードが書かれた位置が、まるまる特定の文字列に置き換わる呪文」だ。わからなければそう思ってくれていい。
大きく分けて2通りあるので、時と場合に応じて使い分けよう。

ページのＵＲＬを出力したい場合

home_url()を使うことになる。

home_url()は、そのサイトのドメインを出力する関数だ。
ドメインは……「はじめに」でも触れたので掘り下げた説明はしないが、まあ乱暴な言い方をすると、「トップページのＵＲＬ」のことだと思ってくれればいい。
手書きで書いていった上のパターンとは異なり、サイトのドメインが変更されるとこちらもそれに合わせて自動的に変更されるのがポイント。なので、サイトが移管するたびにいちいちドメインを書き換えたりしなくてすむわけだ。

実際の利用例では以下のようになる。
※https://example.com/aboutというページに移動したい場合

<a href="<?php echo home_url(); ?>/about/" >このサイトについて</a>

出力

<a href="https://example.com/about/" >このサイトについて</a>

余談だが、home_url()と同じ動作をするコードは他にもいくつかある。

<?php echo bloginfo('home'); ?>
<?php echo bloginfo('url'); ?>
<?php echo bloginfo('siteurl'); ?>

この３つだ。
ただ、この３種は現在非推奨、早い話が近いうちに使えなくなる関数なので、よほどのことがない限りはhome_url()を利用しよう。

ちなみに、<?php echo get_permalink(); ?>という似ているようで別な内容「パーマリンク」を出力するコードが存在するが、
これはドメインを含めた、ある特定のページのＵＲＬ全体を出力するものだ。
用途がまったくもって違うので、混同しないようにしよう。もちろん、この２つを同時に使うことはできないし使うこと機会もない。なぜかって？使ってみればわかる。

画像のアドレスを記述する場合／ファイルのアドレスを記述する場合

こちらの場合、get_template_directory_uri()を使うことになる。
利用例は以下の通り。

<img src="<?php echo get_template_directory_uri(); ?>/img/banner.jpg" width="100%" height="auto" alt="バナー" />

出力

<img src="https://example.com/wp-content/themes/twentynineteen/img/banner.jpg" width="100%" height="auto" alt="バナー" />

get_template_directory_uri()は、ドメインを含めたテーマまでのパスを出力する。

実はWordpressには画像やファイル(cssやjs、pdfファイルなど、サーバー上に置くもの全般)を呼び出すときはドメインの下にwp-content/themes/(テーマ名)/を付け足さなければならないという厄介な性質があり、その面倒くささを解消してくれるのがget_template_directory_uri()というわけだ。

こちらにもやはり非推奨コードがあり、それは以下の三つになる。

<?php echo bloginfo('template_directory'); ?>
<?php echo bloginfo('template_url'); ?>
<?php echo bloginfo('stylesheet_directory'); ?>

これらを見つけたらget_template_directory_uri()に置き換えてやろう。

余談：`get_template_directory_uri()`によく似たコード

`get_template_directory()`

こちらのサイトに詳しく載っている。

一言で説明すると、「get_template_directory()はドメイン部分がサーバー内のディレクトリパスになる。」。
見た方がはやいかも。まあ、間違えないように。

`get_stylesheet_directory_uri()`

ファイルパスを指定したいときはを使えばいいと言ったな……ありゃあ嘘だ。
……いや、ウソとまでは言わないけれど、使用できないケースがある。

じつはget_template_directory_uri()には子テーマにでは正常に動作しないという弱点があるのだ。
ここまでの文脈でお察しのとおり、get_stylesheet_directory_uri()はそのような、子テーマにテーマファイルを置いているときに使うのだ。
子テーマ？テーマファイル？？あぁ？？？という人は読み飛ばしてＯＫ。
そういう人はとりあえず、get_template_directory_uri()が不具合を起こしたらget_stylesheet_directory_uri()を試してみる、くらいの認識があれば大丈夫だ。

参考文献

https://wemo.tech/330
https://wemo.tech/322
https://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet