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

2018年3月20日


HTMLタグの知識がおありの方なら、ワードプレスのテンプレートに画像や文字を追加することは決して難しいことではありませんが、サイト内のページへリンクを張るときに「http~」から始まる絶対パスを記述するのはお勧めできません。

「http~」を記述すべきでない理由

具体的には、次のような書き方をするべきではありません。

画像の場合
<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~をハードコーディング(直接記述すること)していると、あとで書き換えに苦労することになります。

ワードプレス関数を使うメリット1

WordPressには各種URLの文字列を自動的に取得してくれる関数が用意されています。
それらを利用した記述を行うのがメンテナンス性の高い作り方です。

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

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

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

テンプレートを修正しなくても、http(s)://~の部分から自動的に取得してくれるので、ワードプレスサイトの制作実務では必須の関数といえるでしょう。

ワードプレス関数を使うメリット2

常時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を取得するためのタグと出力例まとめ