WordPressのhome_url()の正しい記述方法について考える

Web制作においてWordPressを使用する際に、ホーム（トップURL）を取得するために home_url() という関数が使われます。

しかし、この関数を使う際に、引数に /（スラッシュ）を入れるべきかどうか、また下層ページの場合はどのように記述するべきか、という疑問が生じることがあります。

今回は今後記述で迷わないために、スラッシュの扱いを考えていきたいと思います。

WordPressテーマ『SWELL』

17,600円（税込）

当ブログで使用中のSWELL。優れたデザインとプロ仕様の機能で、ブログが一段とパワーアップ。投資価値No.1のテーマです。

公式サイトへ購入はこちら

結論：引数にスラッシュを入れる

<?php echo esc_url( home_url('/') ); ?>        // 例: http://example.com/
<?php echo esc_url( home_url('/page1/') ); ?>   // 例: http://example.com/page1/

結果としてhome_url()の引数にはスラッシュを入れておいた方が無難という答えになりました。

以下で詳しく解説していきます。

前提としてesc_url() でエスケープする

home_url()はセキュリティの関係上esc_url()でエスケープ処理して出力します。

<?php echo esc_url( home_url() ); ?>

エスケープ処理をしておくことで、悪意のあるユーザーが不正な入力を行った場合でも、セキュリティ上のリスクを最小限に抑えることができます。

エスケープ処理を施すことで、URLに含まれる特殊文字や不正な文字列が適切に処理され、クロスサイトスクリプティング（XSS）攻撃やその他のセキュリティ上の脆弱性が防げます。

home_url()で出力してみる

トップページ

home_url()をechoすると、末尾にスラッシュが付かないURLが返され、第一引数にスラッシュを入れると末尾にスラッシュが付いたURLが返されます。

esc_url(home_url())    // 例: http://example.com
esc_url(home_url('/')) // 例: http://example.com/

トップページ以外（サブディレクトリ）

トップページ以外のhome_url()は、以下のような扱いになります。

esc_url(home_url('page1'))    // 例: http://example.com/page1
esc_url(home_url('/page1'))   // 例: http://example.com/page1

esc_url(home_url('page1/'))   // 例: http://example.com/page1/
esc_url(home_url('/page1/'))  // 例: http://example.com/page1/

先頭の「/」は付けても付けなくても同じURLになるよう、親切な設計になっています。

function home_url( $path = '', $scheme = null ) {
	return get_home_url( null, $path, $scheme );
}

function get_home_url( $blog_id = null, $path = '', $scheme = null ) {
	$orig_scheme = $scheme;

	if ( empty( $blog_id ) || ! is_multisite() ) {
		$url = get_option( 'home' );
	} else {
		switch_to_blog( $blog_id );
		$url = get_option( 'home' );
		restore_current_blog();
	}

	if ( ! in_array( $scheme, array( 'http', 'https', 'relative' ), true ) ) {
		if ( is_ssl() ) {
			$scheme = 'https';
		} else {
			$scheme = parse_url( $url, PHP_URL_SCHEME );
		}
	}

	$url = set_url_scheme( $url, $scheme );

	if ( $path && is_string( $path ) ) {
		$url .= '/' . ltrim( $path, '/' );
	}

	/**
	 * Filters the home URL.
	 *
	 * @since 3.0.0
	 *
	 * @param string      $url         The complete home URL including scheme and path.
	 * @param string      $path        Path relative to the home URL. Blank string if no path is specified.
	 * @param string|null $orig_scheme Scheme to give the home URL context. Accepts 'http', 'https',
	 *                                 'relative', 'rest', or null.
	 * @param int|null    $blog_id     Site ID, or null for the current site.
	 */
	return apply_filters( 'home_url', $url, $path, $orig_scheme, $blog_id );
}

別の記述方法として、phpの外にスラッグを書いても同じURLが返されますが、一般的には引数に記述する方がメジャーだと思うので、保守性を考慮して除外します。

// 例: http://example.com/page1/
<?php echo home_url(); ?>/page1/
<?php echo home_url('/'); ?>page1/

問題：URL末尾のスラッシュは必要か

URLの末尾に付く「/」は一般的に「トレイリングスラッシュ」と呼ばれますが、ここでは便宜上「スラッシュ」としておきます。

トップドメインはスラッシュを入れた方が無難

大抵のサーバーでは、スラッシュがないURL（http://example.com）は、スラッシュありの正規URL（http://example.com/）へ自動的にリダイレクトされるように設定されています。

しかし、一部では別ページとカウントされることもあったり、リダイレクト処理の遅延が出てくるため、最初からスラッシュは入れておいた方が無難と言えます。

サブディレクトリはスラッシュの有無でサーバーの処理が異なる

スラッシュがある場合は、ディレクトリ配下のデフォルトファイル（index.htmlなど）をリクエストし、スラッシュがない場合は、直接そのファイルをリクエストします。

下層ページを参照するならスラッシュはあった方が良い

WordPressでページを表示する際には、通常「index.php」がデフォルトファイルとして使用されますので、下層ページをリクエストするなら「page1/」とするのが正解です。

「page1」のようにスラッシュがない場合、該当のファイル（page1.php）が直接リクエストされますが、そのファイルが存在しない場合、スラッシュ付きのURLにリダイレクトされます。

こちらも結果としては同じですが、スラッシュありの方がリダイレクト処理がされることなく正当な記述と言えます。

ファイルはスラッシュで終わるべきではない

jpgやpdfなどのファイルを参照する場合に、末尾にスラッシュをつけるとファイルは読み込まれません。

ディレクトリと認識され、その配下には何もファイルが存在しないためです。

画像ファイルを参照できる

https://blog-mi.com/wp-content/uploads/2020/08/hhkb-hybrid-type-s_a.jpg

画像ファイルを参照できない

https://blog-mi.com/wp-content/uploads/2020/08/hhkb-hybrid-type-s_a.jpg/

末尾のスラッシュの有無は統一させる

トレイリングスラッシュの有無はSEOには影響せず「どちらでも問題ない」とされていますが、ユーザーの混乱や検索エンジンの誤認識を防ぐため有無を統一させることが重要です。

個人的には、リダイレクト処理による遅延やサーバーのリダイレクト設定に左右されないスラッシュありで統一させた方が良いと考えています。

Google for Developers

URL 末尾のスラッシュについて  |  Google 検索セントラル ブログ  |  Google for Developers

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

＼ ここから飛べます！ ／