かなりマニアックな話のように見えますが、実務でも使う事があるので記事にしておきます。
効率よくWordPress制作したい人はこちら
トップページではページ内リンク、下層ページではトップページの特定の位置に遷移
今回のイメージは、ヘッダーメニューに『ABOUT』というメニューがあり、これはトップページ内にあるABOUTセクションに遷移するという想定です。
トップページ内でクリックした場合
トップページでこのメニューをクリックしたらページ内リンクで、スルスルっとABOUTセクションまで移動するイメージです。
ページ内リンクについては以下の記事を参照下さい。
コピペでOK！スムーズスクロールでスルスルッと移動するページ内リンク（アンカーリンク）の方法
この場合はメニューのaタグは以下になります。
<a href="#about">ABOUT</a>
他のページでクリックした場合
他のページでクリックした場合は、トップページのABOUTセクションまで遷移します。
ここで重要なのが、ただトップページに移動するだけでなく、トップページのABOUTセクションの位置に遷移するという事です。
こちらのについては以下の記事を参照下さい。
【WordPressも解説】別ページの指定した箇所にリンクする方法
この場合はメニューのaタグは以下になります。
<a href="<?php echo esc_url( home_url( '/' ) ); ?>#about">ABOUT</a>
条件分岐を使う
それでは先ほどの2つのパターンを条件分岐を使って振り分けたいと思います。
まずはトップページの場合はaタグがこちらになるように
<a href="#about">ABOUT</a>そしてトップページ以外の場合はaタグがこちらになるように
<a href="<?php echo esc_url( home_url( '/' ) ); ?>#about">ABOUT</a>これを条件分岐を使うと以下になります。
<a href="
<?php if ( is_front_page() ) : ?>
#about
<?php else: ?>
<?php echo esc_url( home_url( '/' ) ); ?>#about
<?php endif;?>
">ABOUT</a>2行目の
<?php if ( is_front_page() ) : ?>これが「トップページの場合」になります（front-page.phpをトップページとしている場合）
そしてトップページの場合の内容が3行目の「#about」になります。
そして4行目の
<?php else: ?>これが「もしそうではない場合」という意味で、ここでは「トップページではない場合」となります。
そしてトップページではない場合の内容が5行目の<?php echo esc_url( home_url( '/' ) ); ?>/#aboutになります。
以上になります。
条件分岐を使えば無駄にテンプレートを増やさずに済むので、ぜひ活用してみて下さい。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約280件（平均スコア） 今だけ！5大特典あり🎁WordPress案件の単価と作業効率を上げる！
