ワードプレスのテンプレートにhttp~を記述してはいけない理由

ワードプレスでURLを取得する関数を活用しよう

HTMLタグの知識がおありの方なら、ワードプレスのテンプレートに画像や文字を追加することは決して難しいことではありません。

しかし、次のような書き方をするべきではありません。

画像の場合
<img src="http://ドメイン/wp-content/uploads/2018/03/●●●.jpg" alt="xxx">
リンクの場合
<a href="http://ドメイン/◆◆◆">リンク文字列</a>

HTMLの文法としては正しいのですが、このような書き方をすると、サイトを常時SSL化するときに手間がかかります。

常時SSL化とは、http~でアクセスしても自動的にhttps~のアドレスに転送され、
ブラウザのアドレスバーに安全性を示す鍵マークが表示されるようにすることです。

常時SSL化したサイトは、ページのHTMLの中に含まれるhttp~ではじまるURLのうち、
そのURLが指し示すドメインが常時SSL化されているならばhttps~に書き換えないと鍵マークが付きません。
特に、サイト内のページへ内部リンクを張っている箇所は漏れなく書き換えが必要になります。

たとえば

<a href="https://ドメイン/◆◆◆">リンク文字列</a>

のように変更しなければなりません。

もし、テンプレートにhttp~をハードコーディング(直接記述すること)していると、
あとで書き換えに苦労することになります。

WordPressには各種URLの文字列を自動的に取得してくれる関数があるので、
それを利用した記述にあらためましょう。

<a href="<?php echo home_url(); ?>/◆◆◆">リンク文字列</a>

home_urlは、ワードプレスのトップページのURLを返す関数です。
上記のように記述すると、公開ページのHTMLは次のように展開されます。

<a href="https://ドメイン/◆◆◆">リンク文字列</a>

わざわざテンプレートを修正しなくても、http(s)://~の部分から自動的に
取得してくれる便利な関数です。

ワードプレスサイトの制作実務では必須の関数です。

home_urlを使うもう一つのメリット

常時SSL化を行う場合以外にも、home_urlを使うメリットがあります。
仮のドメインでサイトを構築して、構築が終わった時点で正式なドメインにコピーしたい場合です。

もし、テンプレートに直接http~を記述していると、

<a href="http(s)://仮のドメイン/◆◆◆">リンク文字列</a>

<a href="http(s)://正式なドメイン/◆◆◆">リンク文字列</a>

に直さなければなりません。

home_urlで記述しておけば、自動的にHTMLの出力結果が正式なドメインに変わるので、
仮のドメインでは

<a href="http(s)://仮のドメイン/◆◆◆">リンク文字列</a>

正式なドメインでは自動的に

<a href="http(s)://正式なドメイン/◆◆◆">リンク文字列</a>

となります。

参考記事:WordPressでpathやURLを取得するためのタグと出力例まとめ