home_url() は、WordPressサイトのトップページURLを基準にしたURLを取得するテンプレートタグです。
固定ページや下層ページへのリンクを、安全かつ確実に生成するために使われます。
home_url()とは？
home_url() と site_url() は、「設定 ＞ 一般」にあるURL設定を元に値を取得していると考えてOKです。
WordPress管理画面
設定 ＞ 一般
ここにある2つです。
- WordPress アドレス（URL）
- サイトアドレス（URL）
home_url() が参照するもの
home_url() → サイトアドレス（URL）
つまり、
- 表示用のトップページURL
- フロント側のURL基準
を取得します。
site_url() が参照するもの
site_url() → WordPress アドレス（URL）
つまり、
- WordPress本体が置かれている場所
- wp-admin や wp-includes の基準URL
を取得します。
なぜ home_url() が必要なのか
静的HTMLでは、次のような書き方をよくします。
<a href="./about.html">About</a>しかし、WordPressではこの書き方は トラブルの元 になります。
静的HTMLの書き方が問題になる理由
相対パスは設置場所に依存する
<a href="./about.html">このリンクは「今いるファイルの場所」を基準に解釈されます。
WordPressでは、
・固定ページ
・投稿ページ
・カスタム投稿
・URL構造（/blog/ など）
によって、表示されるURL階層がバラバラ です。
そのため、
・リンク切れ
・意図しないURLへの遷移
が起きやすくなります。
home_url() を使った正しい書き方
WordPressでは、トップページURLを基準にリンクを作ります。
<a href="<?php echo esc_url( home_url( '/about' ) ); ?>">About</a>末尾にスラッシュが付く場合は
<a href="<?php echo esc_url( home_url( '/about/' ) ); ?>">About</a>固定ページの親子関係などがある場合は
<a href="<?php echo esc_url( home_url( '/briefing/flow/' ) ); ?>">これで生成されるURLは、
https://example.com/about
https://example.com/about/
https://example.com/briefing/flow/
になります。
この書き方のポイント
home_url( ‘/about’ )
・サイトのトップURL
・その後ろに /about を付与
という意味です。
WordPressをサブディレクトリに入れていても、
自動的に正しいURLになります。
esc_url() を使う理由
esc_url()は、
URLとして安全な文字列かをチェック・整形する関数です。
・XSS対策
・WordPressコーディング規約準拠
のため、今の実務では必須 と考えてOKです。
よくある間違い例
echo を忘れる
<a href="<?php home_url('/about'); ?>">これは 何も出力されません。
正しくは、
<a href="<?php echo home_url('/about'); ?>">または esc_url() を含めた形です。
昔よく使われていた書き方（現在は非推奨）
bloginfo(‘url’) を使う方法
<a href="<?php bloginfo('url'); ?>/about">昔はよく見かけましたが、現在は推奨されません。
理由は、
・エスケープされていない
・可読性が低い
・公式ドキュメントでも home_url() 推奨
という点です。
get_option(‘home’) を使う方法
<a href="<?php echo get_option('home'); ?>/about">これも動きますが、
・用途が分かりにくい
・意図がコードから伝わらない
ため、現在はほぼ使われません。
なぜ home_url() がベストなのか
home_url() は、
・意図が明確
・WordPress公式推奨
・URL構造変更に強い
・サブディレクトリ設置にも対応
という理由で、今の標準的な書き方です。
実務での使いどころ
固定ページリンク
<a href="<?php echo esc_url( home_url( '/contact' ) ); ?>">Contact</a>グローバルナビ
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">Home</a>初心者向け覚え方
・HTMLの ./about.html は使わない
・WordPressでは home_url()
・リンクには esc_url() をセット
これだけ覚えればOKです。
まとめ
home_url() は、
・トップページURLを基準にリンクを作る
・相対パスの事故を防ぐ
・現在のWordPress実務で必須
なテンプレートタグです。
昔の書き方を知っておくことも大切ですが、今は home_url() + esc_url() が正解 と覚えておきましょう。
コメント