<?php
// ルートスラッグを取得（1回だけ実行）
global $post;
$root_slug = '';
if (is_page()) {
// 固定ページの場合
if ($post->post_parent === 0) {
// 親ページがない場合は、そのページのスラッグ
$root_slug = $post->post_name;
} else {
// 子ページの場合は、一番上の親ページのスラッグを取得
$post_parent = $post->post_parent;
do {
$post_data = get_post($post_parent);
$post_parent = $post_data->post_parent;
} while ($post_parent !== 0);
$root_slug = $post_data->post_name;
}
} elseif (is_singular()) {
// カスタム投稿タイプの個別ページの場合
$root_slug = get_post_type();
} elseif (is_post_type_archive()) {
// カスタム投稿タイプのアーカイブページの場合
$root_slug = get_queried_object()->name;
}
?>
<!-- l-nav START-->
<nav class="l-nav">
<ul class="l-nav__list">
<!-- TOP：フロントページの時だけアクティブ -->
<li class="l-nav__item<?php echo is_front_page() ? ' active' : '' ?>">
<a href="<?php echo home_url('/'); ?>">TOP</a>
</li>
<!-- Company：company固定ページとその子ページでアクティブ -->
<li class="l-nav__item<?php echo ($root_slug === 'company') ? ' active' : '' ?>">
<a href="<?php echo home_url('company'); ?>">Company</a>
</li>
<!-- Service：service固定ページ、子ページ、serviceカスタム投稿、worksカスタム投稿でアクティブ -->
<li class="l-nav__item<?php echo ($root_slug === 'service' || $root_slug === 'works') ? ' active' : '' ?>">
<a href="<?php echo home_url('service'); ?>">Service</a>
</li>
<!-- News：newsカスタム投稿の個別ページとアーカイブページでアクティブ -->
<li class="l-nav__item<?php echo ($root_slug === 'news') ? ' active' : '' ?>">
<a href="<?php echo home_url('news'); ?>">News</a>
</li>
<!-- Contact：contact固定ページでのみアクティブ -->
<li class="l-nav__item<?php echo is_page('contact') ? ' active' : '' ?>">
<a href="<?php echo home_url('contact'); ?>">Contact</a>
</li>
</ul>
</nav>
<!-- l-nav END-->
<!-- より詳細な条件が必要な場合の例 -->
<nav class="l-nav">
<ul class="l-nav__list">
<li class="l-nav__item<?php echo is_front_page() ? ' active' : '' ?>">
<a href="<?php echo home_url('/'); ?>">TOP</a>
</li>
<!-- Company -->
<li class="l-nav__item<?php echo ($root_slug === 'company') ? ' active' : '' ?>">
<a href="<?php echo home_url('company'); ?>">Company</a>
</li>
<!-- Service（複数のカスタム投稿タイプに対応） -->
<li class="l-nav__item<?php echo ($root_slug === 'service' || $root_slug === 'works' || $root_slug === 'portfolio') ? ' active' : '' ?>">
<a href="<?php echo home_url('service'); ?>">Service</a>
</li>
<!-- News -->
<li class="l-nav__item<?php echo ($root_slug === 'news') ? ' active' : '' ?>">
<a href="<?php echo home_url('news'); ?>">News</a>
</li>
<!-- Staff（固定ページとstaffカスタム投稿） -->
<li class="l-nav__item<?php echo ($root_slug === 'staff') ? ' active' : '' ?>">
<a href="<?php echo home_url('staff'); ?>">Staff</a>
</li>
<!-- Contact -->
<li class="l-nav__item<?php echo is_page('contact') ? ' active' : '' ?>">
<a href="<?php echo home_url('contact'); ?>">Contact</a>
</li>
</ul>
</nav>
?>
WordPress グローバルメニュー Active クラス 使い方ガイド
基本的な書き方
固定ページとその子ページでアクティブ
<?php echo ($root_slug === 'ページスラッグ') ? ' active' : '' ?>
複数のページでアクティブにしたい場合
<?php echo ($root_slug === 'service' || $root_slug === 'works') ? ' active' : '' ?>
特定の固定ページでのみアクティブにしたい場合
<?php echo is_page('contact') ? ' active' : '' ?>
フロントページでアクティブにしたい場合
<?php echo is_front_page() ? ' active' : '' ?>
アクティブになるページの例
Company メニュー → $current_slug === 'company'
-
/company/（会社紹介ページ） -
/company/about/（会社概要ページ） -
/company/history/（会社沿革ページ） -
/company/message/（代表挨拶ページ）
Service メニュー → $current_slug === 'service' || $current_slug === 'works'
-
/service/（サービスページ） -
/service/web-design/（サービス詳細ページ） -
/service/consulting/（コンサルティングページ） -
/service/web-development/（serviceカスタム投稿の個別ページ） -
/service/（serviceカスタム投稿のアーカイブページ） -
/works/project-a/（worksカスタム投稿の個別ページ） -
/works/（worksカスタム投稿のアーカイブページ）
News メニュー → $current_slug === 'news'
-
/news/（newsカスタム投稿のアーカイブページ） -
/news/company-update/（newsカスタム投稿の個別ページ）
Contact メニュー → is_page('contact')
-
/contact/（お問い合わせページのみ）
よくある質問
Q: 新しいメニューを追加したい場合は？
A: 以下をコピーして、'ページスラッグ'を変更してください：
<li class="l-nav__item<?php echo ($root_slug === 'ページスラッグ') ? ' active' : '' ?>">
<a href="<?php echo home_url('ページスラッグ'); ?>">メニュー名</a>
</li>
Q: カスタム投稿タイプを追加したい場合は？
A: || $root_slug === '新しいカスタム投稿タイプ名' を追加してください：
<?php echo ($root_slug === 'service' || $root_slug === '新しいカスタム投稿タイプ名') ? ' active' : '' ?>
Q: クラス名を変更したい場合は？
A: ' active' の部分を変更してください：
<?php echo ($root_slug === 'company') ? ' current' : '' ?>
実装例
<!-- l-nav START-->
<nav class="l-nav">
<ul class="l-nav__list">
<!-- TOP -->
<li class="l-nav__item<?php echo is_front_page() ? ' active' : '' ?>">
<a href="<?php echo home_url('/'); ?>">TOP</a>
</li>
<!-- Company -->
<li class="l-nav__item<?php echo ($root_slug === 'company') ? ' active' : '' ?>">
<a href="<?php echo home_url('company'); ?>">Company</a>
</li>
<!-- Service -->
<li class="l-nav__item<?php echo ($root_slug === 'service' || $root_slug === 'works') ? ' active' : '' ?>">
<a href="<?php echo home_url('service'); ?>">Service</a>
</li>
<!-- News -->
<li class="l-nav__item<?php echo ($root_slug === 'news') ? ' active' : '' ?>">
<a href="<?php echo home_url('news'); ?>">News</a>
</li>
<!-- Contact -->
<li class="l-nav__item<?php echo is_page('contact') ? ' active' : '' ?>">
<a href="<?php echo home_url('contact'); ?>">Contact</a>
</li>
</ul>
</nav>
<!-- l-nav END-->