コード・実装

【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を記述
}

 

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】