Breadcrumb NavXT:パンくずリストを実装してCSSで装飾してみる

Plug-in, Wordpress

Breadcrumb…いわゆる「パンくずリスト」。

ウェブページの先頭にある
breadcrumb01
こういうもの。
「今自分がサイト内のどの階層のページを見ているのか」
を表示しているリストのこと。

分類項目が多いサイトで迷子にならないため、ということと同時に、階層をたどることで似たようなコンテンツを探しやすいという利点もある。

プラグインを使わなくても実装することはできるんだけど…

でも、ちゃんとやろうと思うとfunction.phpにかなり大掛かりに手を加えなくちゃいけない。
ちょっと手間取りそうだったので、お手軽にプラグインで済ませてしまうことにした。

Breadcrumb NavXT

wordpressの管理画面のプラグイン→新規追加で”breadcrumb”というキーワードで検索をかけると多くのプラグインが引っ掛かる。物凄くシンプルなものからバリバリカスタマイズできるものまで多種多様。その中から今回は「ある程度」のカスタマイズが可能で設置が簡単そうだった”Breadcrumb NavXT“を選んだ。

インストールして有効化し、設定画面に入ると
breadcrumb02
いきなりこんなメッセージが出てきて閉口するんだが、ここで「すぐに移行する」をクリックすれば問題なく使えるようになる。

あとはパンくずリストを挿入したい場所に

を書き込めばOK。

項目をリスト形式で出力したい場合は”bnc_display()”ではなく”bnc_display_list()”と記述する。

li形式の方が後述するCSSでの装飾がしやすいので、今回はheader.phpのコンテンツ本体の手前にこのコードを挿入した。
iPhoneやAndroidのような表示画面の狭いモバイル端末だとパンくずリストが長くなった時にレイアウトがグチャグチャになるので”if (wp_is_mobile())”を入れてモバイル端末の時はパンくずリストが表示されないようにした。

CSSで飾り付け

これで「パンくずリストの実装」はできたわけだが、デフォルトだとテキストの羅列になってしまっていて、ちょっと寂しい。
そこでCSSを使ってこれを装飾してみることにした。

このサイトのサンプルがとってもいい感じでコードを拝借させていただき、これをちょこちょことアレンジして、以下を自分のCSSに追記した。
※但しこれは「最深で5階層まで」という条件付き。

“hsla()”っての、知らなかった。HSL+アルファ指定で色が選択できるというもの。
このサイトで効果が試せる。うん、面白い。

あと”nth-child()”ってのも知らなかった。ふむふむ。まだ使いこなせてる感じはしないけど、これなかなかオサレじゃありませんか。