BLOG

「Breadcrumb NavXT」で簡単にパンくずを設置しよう

| WordPressプラグイン

パンくずリストは、見に来てくれた人がサイト内のどこにいるのかを視覚的にわかりやすくするために、現在のページまでを階層順にリストアップして表示するもので、上位コンテンツには、そのページへのリンクをはってたりもしますね。
ユーザビリティだけじゃなく、SEO対策の一環としても使います。

今回はそんないい事だらけのパンくずを簡単に設置できちゃうプラグイン「Breadcrumb NavXT」をご紹介します。
難しいことはほとんど無しです。

インストール

プラグインの新規追加から「Breadcrumb NavXT」で検索し、インストール&有効化をします。

設置 & 設定

テンプレートに設置してみよう

表示させたい場所に下記のコードを設置します。

<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
<?php if(function_exists('bcn_display')){
  bcn_display();
}?>
</div>

基本的にはこれで大丈夫です。
あとは、デザインに併せてCSSを調整するぐらいですね。

パンくずの区切り部分ですが、デフォルトでは &gt; になっているので、問題なければこれで終了です。
ふぁぁ、なんて簡単なんだろうか!

細かい設定をするにはこんな感じです

基本的にデフォルトで問題なければ、特に設定を変更する必要はございません。
でも、デザイン等で変更したい場合など、htmlとか変更したいときとかは、設定を触ってみてください。

パンくずの区切りや、最上位の部分の設定は一般のタブで設定します。
画像ではカスタムしちゃってるんですが、そのままだと、ホームページのところはブログ名が出力されるはず。

投稿タイプのタブでは、投稿、固定ページ、添付ファイルの設定です。
基本的には、ここは特に設定する部分はないかなぁって思います。

タクソノミーやその他のタブも見てもらったらまぁ、そのままわかるかな。
触るとしたら、その他にある404のタイトル部分かな。デフォルトでは404ってなってるので、お好きなのに変更してもらったらいいと思います。

最後に

パンくずはページによって、表示変わるので、手作業で表示なんてしてたら日が暮れる!
ブログなんかはそんなん出来ないし、もういろいろと面倒な作業をしないと表示出来なかったります。
それが、すごく簡単に表示が可能なのはいいとおもいますね。
パンくずを一度組んでみるのは、WordPressの構造を理解する上ではいいかもしれないですね。
でも、実際に仕事でする場合は、簡単で早いほうが良いですよね。
なので、こういう便利プラグインは活用するに越したことないですね。

参考サイト

RECENT POSTS

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

CATEGORY

POPULAR POSTS

PAGE TOP