ワードプレス便利帳

WordPressの使い方を初心者から上級者までわかりやすく画像で解説

© ワードプレス便利帳 All rights reserved.

navi-change

20165/28

プラグインなしで、今いるページのナビをアクティブにする。

今いるページのナビだけデザインを変えたい。

こんにちは。
ホームページをつくり、ページが増えてきたらサイドバーにしろグローバルナビにしろナビゲーションを設置することになると思います。
そしてよく見かけるのが、今いるページだけナビのデザインを変えたい!というものです。

ttatoeba

現在いるページが、ホームページを閲覧しているユーザーにもわかりやすくとても新設な設計です。
しかし、WordPressやただphpやjavascriptdで共通のヘッダーを読み込ませているサイトにとっては少し手間がかかると思ってしまいます。HTMLファイルなどですべてのページヘッダーが書いてあると、そのページのナビゲーションだけクラス名をつければいいので簡単なのですが、いかんせん修正をするときに全ページ書き換える必要があるのであまり効率的ではありません…。私の場合は、WordPressでないにしろ、システムの導入予定がないにしろページ数が多いならHTMLではなくPHPファイルで構築したほうがいいと思います。(もちろん使うのはincludeの関数だけであとはHTML記述で大丈夫です)

WordPressで実装する

WordPressであれば独自の関数が使えますので、ナビゲーションを少し触るだけで簡単に実装できると思います。手順としては

  1. ナビゲーションを作る
  2. ナビのリンクに対してif文を設置
    このページのページIDが○○であれば「class=”active”」を追加
  3. .activeに対するCSSをかく



たとえば上記のような形です。ページIDは固定ページのURLを見れば簡単にわかりますのでそのちらを条件分岐にします。ページを差し替えることが多い場合は分岐条件をスラッグなどにしてもよいと思います。

ef3743a10310a9cc22ad978f3e32a8d3

PHPファイル・HTMLファイルで実装する

さてWordPressの関数が使えないだたのPHPファイルで記述の場合は、javascriptで記述します。

  1. ナビゲーションを作る
  2. javascriptでif文をかく
    現在のURLがAタグのhrefの値と一致するなら「class=”active”」を追加
  3. .activeに対するCSSをかく
$(document).ready(function() {
        $('nav ul li a').each(function() {
                var activeUrl = location.pathname.split("/")[1]; // 2階層目
                var $href = $(this).attr('href').split("/")[1]; // 2階層目
                if ($href == activeUrl ) {
                        $(this).addClass("active");
                }
        });
});

上記のHTML(PHP)のコードとjsを記述すると、該当ページのURLにいるときにAタグにクラス名activeが追加されます。

ただ、3階層目にいるときに2階層目のナビにも色を付けたい…。例えば、「会社概要の中のアクセスのページにいるときに、会社概要に色を付けたい」といった場合はまた別の条件分岐も追加になります。
実際に実装はできたのですが、試行錯誤でいろいろ試した結果に何故かできた…という状態で解説もままならないので解決したときにでも掲載しますね。(予定はない)

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

gsvgadvg

20172/17

カスタムフィールドでカレンダーを自作【プラグインいらず】

カスタムフィールドだけでカレンダーを自作 プラグイン不要というのはカレンダープラグインを使わずという意味であってカスタムフィールド系のプラ…

20161102200516

201611/2

ループの中に罫線を追加する方法

ループ出力の中に区切り線を追加する ブログや製品・商品情報として、1行ごとに罫線を追加したい、というデザインもあると思います。 しかしル…

20161017154512

201610/17

『WordPress importer』と『Search Regex』を使って画像ごと記事の引越しを行う

『WordPress importer』について WordPressからWordPressへ投稿記事の引越しに関して、WordPressは…

bsfvgs1s

201610/6

WordPressの記事・固定ページを親ごとに出力する。

投稿・カスタム投稿・固定ページのループ出力について WordPressではquery_postsやWP_Queryなどのループを使うとペー…

20160801185626

20168/1

WordPressのtitleタグのデザインを変更する

WordPressの見出しに工夫を加える WordPressは用意されたテーマを使うにしろ、独自テーマを使うにしろ、共通したページのレイア…

ページ上部へ戻る