Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

wordpress

wordpressで現在表示ページのメニューにcurrentクラスをつける方法

投稿日:

Pocket

うも、チャーさんです。

 

あなたはwordpressのメニューにcurrentという、

クラス名を現在表示してるページのメニューにだけ、

つける方法を探していませんか?

 

この記事では、現在表示してるページのメニューに

currentというクラスをふる方法を書いています。

 

 

なのであなたがこの記事を読めば、

表示されてるページのメニューだけ、

目立たせるデザインをcssでつける。

 

みたいなことができるようになります。

 

ということで、あなたがwordpressの現在表示

ページのメニューにcurrentをつけたければ、

このまま下にスクロールして読んでみてください。

 

スポンサードサーチ

wordpressのメニューにcurrentをつける方法

 

ということで結論からです。

wordpressでメニューにcurrentをつけるには、

ワードプレスの組み込み関数を使えばつけれます。

 

例えば、

<?php if(is_page(“sample”)){

$current =”current”;

}

<li class=”<?php echo $current; ?>”>サンプルページ</li>

 

 

のように書いておけば、

サンプルページという名前の固定ページを、

表示してる時に、

 

サンプルページという名前のメニューに、

currentをつけることができます。

 

 

で、あとはそのメニューが表示されてると

わかりやすいようにcssを使って色をつけたり、

下線を引いたりしておけば、

 

現在表示してるページと、メニューの中で

目立たせることができます。

 

 

カテゴリーページをメニューとして表示してる場合

 

で、上記はナビゲーションメニューに、

固定ページをメニューとして表示していた場合の話で、

他にカテゴリーページを表示する場合もあると思います。

 

その場合は、is_archive()と書けばいいですし、

 

<?php if(is_archive(“test”)){

$current =”current”;

}

<li class=”<?php echo $current; ?>”>テストカテゴリー</li>

 

 

トップページをメニューとしてる場合

 

もしトップページをメニューとして表示してる場合は、

is_home()を使えばいいでしょう。

 

<?php if(is_home()){

$current =”current”;

}

<li class=”<?php echo $current; ?>”>トップページ</li>

 

と書けば良いです。

 

 

is_page()、is_archive()とはなに?の補足

 

ちなみに「上記のis_pageとかis_archiveとはなに?」

と疑問に思った方のために、

ちょいと補足説明を入れておきますが、

 

上記のis_pageとかis_archiveというのは、

is_page()…固定ページが表示されてたら、

is_archive()…カテゴリーページが表示されてたら

 

と判別してくれるwordpressが用意してくれてる

関数です。

 

 

なのでこれとif文を組み合わせれば、

固定ページが表示されてる時のみ、

指定した処理をする、みたなのが可能で、

 

これを使えばあなたの思ったようにカスタマイズできる、

というものです。

 

そして今回のcurrentはそれを使って、

狙ったページの時だけcurrentというクラスを

表示させてるという仕組みですね。

 

 

どのファイルに書き込めばいいかについて

 

で補足はここで一旦終わりまして、

じゃあ実際どこに上記を書き込むかですが、

 

ナビゲーションメニューを表示させてるファイル

に対して、書き込みましょう。

 

例えばheader.phpとかで、

ナビゲーションメニューを表示させてるなら、

そこに一緒に書いておけばいいです。

 

 

するとcurrent表示ができるので、

あとは、あなたの好きなようにcssで、

デザインするだけです。

 

 

スポンサードサーチ

まとめ

 

ということでまとめに入ります。

 

wordpressのメニューにcurrentを表示させるには、

wordpressの組み込み関数を使いましょう。

 

そうすればcurrentをclassに表示し、

現在表示ページのメニューにデザインをつける、

というカスタマイズが可能になります。

 

 

ということで仕組みややり方がわかったと、

思いますので、早速あなた自身でもやってみましょう。

 

ということでまずはメニューが固定ページなのか、

カテゴリーページなのかそれを確認しましょう。

 

確認方法は、wordpressの管理画面の、

外観>メニューから入ればメニューの項目が表示されてるので、

そこをみたらわかります。

 

 

で固定ページをメニューとして表示してるなら、

is_page()を

カテゴリーページならis_archive()を使ってみましょう。

 

で例えば固定ページのslug(パーマリンクの一番端の部分)

をsampleとかにしてるなら、is_page(‘sample’)とすれば、

その固定ページが表示されてるとき、というカスタマイズができます。

 

ので、スラッグ名を()内に入れましょう。

であとは、classにechoするだけです。

 

 

ということでwordpressでメニューに、

currentを表示する方法でした。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-wordpress

スポンサードサーチ

関連記事

no image

wordpressのメニューをカスタマイズする方法「コピペ可能」

どうも、チャーさんです。   あなたはwordpressのメニューを カスタマイズしたいと思ってませんか?   この記事ではメニューをカスタマイズし 画像を表示させる方法、またメニ …

no image

wordpressで右クリックを禁止する方法「簡単です」

どうも、チャーさんです。   あなたはブログ上での、 右クリックを禁止したいと 思っていませんか?   せっかく書いた記事をコピペされたくない、 そう思っていませんか? &nbsp …

no image

ファビコンをワードプレスに設定する方法「手順つき」

  どうも、チャーさんです。   あなたはファビコンをワードプレスに、 設定し表示させたいですか?   この記事では、ファビコンをワードプレスに、 設定させる方法を紹介し …

no image

wordpressのショートコードの作成方法と使い方

どうも、チャーさんです。 あなたはショートコード(wordpressの)ってなんだ? と思ってませんか?   この記事では、wordpressの ショートコードとは何か、そして ショートコー …

no image

wordpressの固定ページにのみif文を使って処理を行う方法

どうも、チャーさんです。 あなたはwordpressで固定ページにのみ、 if文を使って処理をする方法を探してますか?   この記事では、wordpressの固定ページにのみ、 if文を使っ …

no image

wordpressの画像のurlを取得する方法

どうも、チャーさんです。 あなたはwordpressの画像のurlを取得する方法を、 探していますか?   この記事では、wordpressの画像のurlを取得し、 表示する方法を書いていま …

no image

wordpressのエディターを前のに戻す方法

どうも、チャーさんです。   あなたは、ワードプレスをインストールしたら、 投稿のエディター画面が今まで使ってたのと 違うやつになっていて、困っていませんか?   この記事では、そ …

no image

wordpressのメニューに関する情報をまとめました

どうも、チャーさんです。   この記事ではwordpressのメニューに関する情報 例えばメニュー追加方法や、階層化、カスタマイズなど、 必要な情報を網羅してまとめてみました。   …

no image

wordpressをphpでカスタマイズするための記事「各ページごとにやり方説明」

どうも、チャーさんです。   この記事では、wordpressをphpでカスタマイズ する際に、編集したいページに対応するファイルを 説明しています。   (例 固定ページを編集し …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

wordpressで一覧へ戻るを記事に表示させる方法

どうも、チャーさんです。   あなたはwordpressで記事に 一覧へ戻るを表示させたいが、 urlを直接かく方法以外を探していませんか?   この記事では、phpとwordpr …

no image

wordpressの記事ページをカスタマイズする方法

どうも、チャーさんです。   あなたはwordpressの記事ページ、 (投稿で書いて公開したら出てくるページ) をカスタマイズしたいと思ってますか?   この記事では、wordp …

no image

wordpressのメニューを階層にしたいなら読んでください。

どうも、チャーさんです。   この記事ではwordpressのメニューを、 階層化する方法、   また、階層化できない場合の対策 (サイトに階層メニューが表示されない) を書いてい …

no image

ワードプレスの管理バーを非表示にする手順

どうも、チャーさんです。   あなたは、ワードプレスの管理バーを、 非表示にする方法を探していませんか?   ワードプレスの上の黒いバー(管理バー)が、 重なって困る。。と思ってい …

no image

ドロップダウンメニューが動かない問題を解決した方法「wordpress」

  どうも、チャーさんです。   あなたはwordpressのドロップダウンメニューが、 動かないと悩んでいませんか?   この記事では、ドロップダウンメニューが、 ある …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。