【WordPress】グローバルメニューをカレント表示する方法【固定ページ｜投稿アーカイブページ｜カスタム投稿アーカイブページなど】

メニューにカレント表示

グローバルナビゲーションで、現在のページが属するメニュー項目が目立つように装飾することをカレント表示させるといいます（下図）。この記事では、メニューをカレント表示させるために、表示中のメニュー項目に特定のクラス属性（current）を付ける方法を紹介します。

固定ページ

「もし現在のページが固定ページなら、〇〇する」という構文が下記のとおりです。

<?php if( is_page() ) 
//ここに処理を書く 
; ?>

例えば、固定ページのslugがworksの場合には下記のようになります。

<?php if( is_page('works') ) 
//ここに処理を書く 
; ?>

例えば、固定ページのslugがworksの場合に「current」と出力したい場合には下記のとおり。

<?php if( is_page('works') ) echo 'current'; ?>

これを下記のようにグローバルナビゲーションやメニューのliタグまたはaタグのclassクラス属性の中に挿入すると、current表示の下準備が完了します。

class="class_a1<?php if( is_page('works') ) echo 'current'; ?>"

つまり、現在のページが固定ページかつslugがworksの場合に、Class属性に「current」が付与されます。そのcurrentクラスに対してCSSを書けばカレント表示が完了します。

投稿アーカイブまたは投稿ページ

カスタム投稿タイプの無いWEBサイトでは「is_archive()」や「is_single()」が使えますが、そうじゃない場合はコードが違ってきます。

この記事ではカスタム投稿タイプが存在する場合にも対応できるコードを紹介します。

現在のページが投稿アーカイブの場合

「もし、現在のページが投稿アーカイブ（記事一覧）なら、〇〇する」には下記のようになります。

<?php if( is_post_type_archive('post') ) 
//ここに処理を書く 
; ?>

is_post_type_archive()は、通常はカスタム投稿タイプのアーカイブに使うコードですが、引数にpostを使うと普通の投稿タイプに対応することができます。

これを下記のようにグローバルナビゲーションやメニューのクラス属性に挿入すれば、現ページが投稿アーカイブの場合に「current」クラスを付けることができます。

class="class_a1<?php if( is_post_type_archive('post') ) echo 'current'; ?>"

「current」クラスに対してCSSを書けば、メニューにカレント表示されます。

現在ページが投稿ページの場合

これに関連して「もし現在ページが投稿ページ（個別記事）の場合、〇〇する」の書き方は下記のようになります。

<?php if( is_singular('post') ) 
//ここに処理を書く 
; ?>

is_singular()は、通常はカスタム投稿タイプに使うコードですが、引数にpostを使うと普通の投稿タイプに対応することができます。

同様にメニュー項目のクラス属性に挿入して、「current」クラスを付与する場合は下記のとおりです。

class="class_a1<?php if( is_singular('post') ) echo 'current'; ?>"

カテゴリーアーカイブ

「もし、現在ページがカテゴリーアーカイブの場合、〇〇する」の書き方は下記のとおりです。

<?php if( is_category() ) 
//ここに処理を書く 
; ?>

この場合、引数は空欄とします。

<?php if( is_category() ) echo 'current'; ?>

現在のページが投稿アーカイブまたはカテゴリーアーカイブまたは投稿ページの場合

ほとんどの場合、投稿ページと投稿アーカイブ、カテゴリーアーカイブは同じメニュー項目の傘下に入ります。たとえば、メニュー項目「お知らせ」の下には「おしらせ一覧ページ」があり、そのさらに下に「個別おしらせ記事」が配置されます。ブログ記事も同様です。

という理由で、現在ページが投稿アーカイブまたはカテゴリーアーカイブまたは投稿ページの場合にカレント表示する方が自然です。

ではどうするか？というと理屈は下記のとおりです。

「もし、現在のページが投稿アーカイブまたはカテゴリーアーカイブまたは投稿ページなら、〇〇する」の書き方は下記のとおりです。

<?php if( is_post_type_archive('post') || is_singular('post') || is_category() ) 
//ここに処理を書く 
; ?>

同様に「current」クラスを付与する場合は下記のとおりです。

class="class_a1<?php if( is_post_type_archive('post') || is_singular('post') || is_category()) echo 'current'; ?>"

カスタム投稿またはカスタム投稿アーカイブ

カスタム投稿ページ

「もし現在のページがカスタム投稿ページなら、〇〇する」の書き方は下記のとおりです。

<?php if( is_singular($post_types) ) 
//ここに処理を書く 
; ?>

例えば、カスタム投稿ページのslugがnewsの場合には下記のようになります。

<?php if( is_singular('news') ) 
//ここに処理を書く 
; ?>

例えば、カスタム投稿ページのslugがnewsの場合に「current」と出力したい場合には下記のとおり。

<?php if( is_singular('news') ) echo 'current'; ?>

カスタム投稿アーカイブ

「もし現在のページがカスタム投稿アーカイブなら、〇〇する」の書き方は下記のとおりです。

<?php if( is_post_type_archive($post_types) ) 
//ここに処理を書く 
; ?>

例えば、カスタム投稿アーカイブのslugがnewsの場合には下記のようになります。

<?php if( is_post_type_archive('news') ) 
//ここに処理を書く 
; ?>

例えば、カスタム投稿アーカイブのslugがnewsの場合に「current」と出力したい場合には下記のとおり。

<?php if( is_post_type_archive('news') ) echo 'current'; ?>

カスタムタクソノミー

「もし現在のページがカスタムタクソノミーなら、〇〇する」の書き方は下記のとおりです。

<?php if( is_tax() ) 
//ここに処理を書く 
; ?>

例えば、カスタムタクソノミーのslugがnews-catの場合には下記のようになります。

<?php if( is_tax('news-cat') ) 
//ここに処理を書く 
; ?>

カスタムタクソノミーのスラッグはfunnctions.phpで設定しているはずです。以下に関連記事を載せておきます。

あわせて読みたい

【WordPress】カスタム投稿タイプにカテゴリーとタグを追加する方法【カスタムタクソノミー】 カスタム投稿タイプのカスタムタクソノミー（カテゴリーとタグ）はfunctions.phpに設定を記述しないと使うことができません。この記事ではWordPressのカスタム投稿タイ...

さらに「current」と出力したい場合には下記のとおり。

<?php if( is_tax('news-cat') ) echo 'current'; ?>

カスタム投稿タイプまとめ

投稿タイプの場合と同様に、この系統のメニュー項目の傘下には、カスタム投稿タイプのアーカイブ、タクソノミーアーカイブ、カスタム投稿タイプが含まれます。そのため、カレント表示させるためには投稿タイプと同様に下記のように論理演算子で条件付すればOKです。

下の例は、カスタム投稿タイプのスラッグがworks、カスタムタクソノミーのスラグがworks-catの場合です。

class="hoge <?php if( is_post_type_archive('works') || is_singular('works') || is_tax('works-cat')) echo 'current'; ?>"

CSSで装飾する｜カレント表示とマウスホバー

最後に上で解説したグローバルメニューのカレント表示と、さらにメニュー項目のマウスホバーに対して、下記の動画のような装飾を施してみます。

HTML（PHP含む）構造

HTML（PHP）は上の解説の通りですが、メニュー項目を一つだけ抜粋して載せておきます。

<li class="p-pc-nav-li"><a href="<?php echo esc_url(home_url('/')); ?>about" class="p-pc-nav-li-a <?php if( is_page('about') ) echo 'current'; ?>">私たちについて</a></li>

メニュー項目カレント表示およびホバー時のCSS

ではこのHTMLに対して記述するCSSはどうなるかというと、下記のとおりです。

注意事項：カレント表示とホバー表示につかうCSSセレクター（HTMLタグ）は別々のタグにして下さい。そうしないと表示がバグります。このケースでは、カレント表示はliタグ内の「aタグ」 、ホバー表示は「liタグ」のように分けました。

カレント表示のCSS

// ---------------------------------------------
// メニューのカレント表示
// ---------------------------------------------
.current{
  position: relative;
}
.current::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0px;/*線の上下位置*/
  display: inline-block;
  width: 50%;/*線の長さ*/
  height: 1px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: fw.$white;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

ホバー時のCSS

// ---------------------------------------------
// メニュー項目のホバーアクション
// ---------------------------------------------
.p-pc-nav-li{
  position: relative;
}
.p-pc-nav-li::after{
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: fw.$white;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scale(0, 1);
  transition: .3s;
}
@media (hover: hover) {
  .p-pc-nav-li:hover::after{
    transform: scale(1, 1);
  }
}