【WordPress / PHP】現在のページの該当メニューにCSSクラス付与

WordPressでPHPを使用し、現在のページの該当メニューにCSSクラス付与する方法を共有します。

【結論】WordPressに現在のページの該当メニューにCSSクラス付与する方法

function.phpに記述

/**
 * 現在のページのメニューにCSS付与
 */

function menu_current($page)
{
    $page_num= $page;
    $url_end = $_SERVER["REQUEST_URI"];
    $url_slug = str_replace('/', '', $url_end);

    if ($page =="home" && $url_slug=="") {
        echo 'current';
    } elseif ($page == $url_slug) {
        echo 'current';
    }
}

 

header.phpにmenu用phpを記述

<?php menu_current(‘【slug】’); ?>の【slug】の部分にリンク先のスラッグを入力してください。

<ul id="primary-menu" class="menu">
    <li class="<?php menu_current('home'); ?>">
        <a href="/">Home</a>
    </li>
    <li class="<?php menu_current('about'); ?>">
        <a href="/about/">About</a>
    </li>
    <li class="<?php menu_current('contact'); ?>">
        <a href="/contact/">Contact</a>
    </li>
</ul>

 

現在のページ用のCSSを追加

.menu li.current {
// currentのCSSを記述
}