レスポンシブなパンくずナビを設置してみた

cocoonのパンくずナビって、デフォルトでは記事ページと固定ページにしか表示しない仕様なんだね。

パンくずナビって全ページに必要なのかと言われると、必ずしもそうではなさそうな気もするけど。

ただ、これについて調べていると、パンくずナビのカスタマイズ方法を探している人は多そうで。

ぼくもなんとなくだけど、トップページ以外は全ページにあった方がいいのかな～と思ったので、パンくずナビをカスタイズしてみました！

まずはデフォルトのパンくずナビを非表示に
パンくずリストはプラグインで表示
パンくずナビのデザイン変更
その他やったこと
あとがき

まずはデフォルトのパンくずナビを非表示に

記事ページと固定ページそれぞれで設定します。

やり方は、

「cocoon設定」→「投稿」→「パンくずリスト設定」

で行います。

「パンくずリスト設定」の場所はページの下の方。

ここで“表示しない”にチェックして保存すればOKです。

同様に、「cocoon設定」→「固定ページ」→「パンくずリスト設定」でもやります。

非表示位する理由は、記事ページと固定ページにしか設置できないので、全ページに表示できるプラグインを使いたいからです。

パンくずリストはプラグインで表示

プラグインを使う方法が汎用性あっていいかな～と思いました。

使ったのは公式ダウンロード数No.1（タブン）の「Breadcrumb NavXT」。

Breadcrumb NavXT

訪問者に対し現在地へのパスを表示する「パンくずリスト」ナビゲーションをサイトに追加します。

このプラグインはぼくが初めてWordPressを触った１０年くらい前もあった気がする。

インストール＆有効化したら、専用ウィジェットができているので、“コンテンツ上部”にでもセットします。

↓こんな感じ。

場所はヘッダーとメインコンテンツの間にしました。

最近フッターに表示させるのが流行ってそうだけど、個人的にはなかなか馴染めなくて。

大手サイトを見ていても普通にヘッダーとコンテンツの間に表示されてるよね？

まぁ、ウィジェットだし、何かあったら変えることにしよっと。

パンくずナビのデザイン変更

ウィジェットを設定したデフォルトのデザインは以下です。

スマホは以下。

味気ないのでアイコンを使って装飾することにします。

cocoonはデフォルトでfontawesomeが使えるようになっているので楽だね(*´ω｀*)

↓こんな感じにしました。

スマホは以下。

指で横にスーっとやるタイプに。

CSSは次の通り。

.breadcrumbs{
	font-size:.9em;
	padding:0 10px;
	white-space: nowrap;
	overflow-x: scroll;
	-ms-overflow-style: none;
}
.breadcrumbs::-webkit-scrollbar{
    display:none;
}
.breadcrumbs span{
	display:inline-block;
	padding:.5em 0;
}
.breadcrumbs a{
	color:#333;
	text-decoration:none;
}
.breadcrumbs .home:before,.breadcrumbs a:after{
	font-family: "FontAwesome";
	content: "\f015";
	padding:0 5px 0 0;
	opacity:.6;
}
.breadcrumbs a:after{
	content: "\f105";
	padding:0 5px;
	font-weight:bold;
}

cocoonと Breadcrumb NavXT を使う人いたらコピペでご自由にどうぞ。

PC・スマホ共通のCSSになっています。

動作サンプルはこのブログです。