2013
1
17

WordPressの固定ページ以外にカテゴリのナビゲーションを追加する

妙に、カテゴリ一覧への誘導が弱い気がしてきました。ヘッダーあたりに持ってきてかつ、そんなに強調しすぎないようにどうにかならないかなーと思って画像を使って実装してみました。


完成図

130117-1

素材に合わせてメモっぽくと思って作りました。

130117-2

ちなみに、こういう画像を使ってスプライト形式にしています!(表示用にちょっと縮小しています)

カテゴリが増えたので、現在は違う画像を使っています。

実装

カスタムメニューを使えばもっと楽々できるの…かな?実は私カスタムメニュー使ったことがなくて、手動実装みたいなものなんですけど…!

header.php

※リンク先URLは設定によって違うと思いますのでお確かめください!

まずは1,18行目の条件分けによって、固定ページ以外の場合のみ適用させます。固定ページにもナビがあっても良い方はここは要りません。

2~7行目で、単一記事とカテゴリ一覧ページのみ$add_classという変数に「 class="カテゴリスラッグ"」という文字列を入れてあげます。(頭に半角スペースも入ってます)

8~17行目が実際htmlに出力される部分です。9行目のulタグ直後に先程の$add_classを置くことで、

このように、カテゴリに属しているページのときだけulにクラスが追加され、それ以外のページはクラスなしのulタグを出力できます。あとはcssによって出力画像を調整します。

style.css

マウスオーバーで2段目(ボーダーなし)、カレント(カテゴリに属したページ)のときは3段目(赤線)が表示されるようになっています。

私の用意した画像は横114*5=570px、縦20*3=60pxでしたのでこのようなcssになっていますが、用意される画像のサイズによって調節してくださいね。

いかがでしたでしょうか?どなたかの参考になれば幸いです!

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2013/01/17


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top