つまり同じメニューをクリックしても『トップページ』と『トップページ以外』では別の動きをするということですね。
トップページとトップページ以外でヘッダーを分ければいいのですが、WordPressの場合はヘッダーは『header.php』など共通のパーツとするので、トップページと下層ページではなるべく同じコードにしたいところです（分けるときもありますが）
かなりマニアックな話のように見えますが、実務でも使う事があるので解説します。
効率よくWordPress制作したい人はこちら
トップページではページ内リンク、下層ページではトップページの特定の位置に遷移
今回のイメージはヘッダーメニューに『ABOUT』というメニューがあり、これはトップページ内にあるABOUTセクションに遷移するという想定です。
順番に解説していきます。
トップページ内でクリックした場合
トップページでこのメニューをクリック場合、ページ内リンクでスルスルっとABOUTセクションまで移動するイメージです。
ページ内リンクのスムーススクロールについては以下の記事を参照下さい。
【コピペOK！】jQueryを使ったスムーススクロールで移動するページ内リンクの作り方
この場合はメニューのaタグは以下になります。
<!-- トップページのヘッダーメニュー -->
<a href="#about">ABOUT</a>遷移先はこのようにidを付けます。
<!-- トップページ -->
<section id="about">
コンテンツ
</section>
トップページ以外でクリックした場合
他のページでクリックした場合は、トップページのABOUTセクションまで遷移します。
ここで重要なのが、ただトップページに移動するだけでなく、トップページのABOUTセクションの位置に遷移するという事です。
こちらのについては以下の記事を参照下さい。
【WordPressも解説】別ページの指定した場所に遷移するアンカーリンクの設定方法
この場合はメニューのaタグは以下になります。
<!-- トップページ以外のヘッダーメニュー -->
<a href="<?php echo esc_url( home_url( '/' ) ); ?>#about">ABOUT</a>遷移先については先ほどと同じです。
<!-- トップページ -->
<section id="about">
コンテンツ
</section>
条件分岐を使ってトップページと下層ページを分ける
それでは先ほどの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>ちょっと長いのですが、こちらが『トップページの場合』という意味になります（front-page.phpをトップページとしている場合）
<?php if ( is_front_page() ) : ?>そしてトップページの場合の内容が『#about』になります。
そしてこちらが『もしそうでない場合』という意味で、ここでは『トップページではない場合』となります。
<?php else: ?>そしてトップページではない場合の内容が<?php echo esc_url( home_url( '/' ) ); ?>/#aboutになります。
以上になります。
条件分岐を使えば無駄にテンプレートを増やさずに済むので、ぜひ活用してみて下さい。
関連記事【これだけは覚えておきたい】WordPress条件分岐タグまとめ
関連記事【WordPressも解説】別ページの指定した場所に遷移するアンカーリンクの設定方法
関連記事【WordPress】条件分岐で特定の固定ページのみclassやidを付ける方法
Brain総合ランキング1位獲得 ＆ 3日で500部突破 累計670部突破 クチコミ約370件 今だけ！5つの無料特典あり🎁 👇画像をクリックWordPress案件の単価と作業効率を上げる！
（平均スコア）
