WordPressサイトにパンくずリストを「Breadcrumb NavXT」

Breadcrumb NavXT

サイトの直帰率を減らそうキャンペーン第2段w
リニューアルの際にパンくずリストが設定されていないことに今更気づきました。。。

という訳でプラグインの「Breadcrumb NavXT」を導入することになったので、導入方法をご紹介。

 

「Breadcrumb NavXT」インストール方法

1、管理画面「プラグイン」メニュー→「新規追加」→「Breadcrumb NavXT」を検索→「Breadcrumb NavXT」をインストール・有効化

2、インストール後、「設定」メニューに「Breadcrumb NavXT」が追加されているので、プラグイン設定ページへ移動

3、下記のようなメッセージがでるので、「すぐに移行する。」をクリック。

「Breadcrumb NavXT」設定

4、管理画面の設定は3までで終了ですが、パンくずを表示させたい箇所のテンプレートに下記を追加します。

<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

管理画面の「外観」メニューから「テーマ編集」を選択して、該当のテンプレートを修正します。

このプラグインの場合は、

■loop-single.php(投稿ページのテンプレート)
■loop-page.php(固定ページのテンプレート)
■category.php(カテゴリー一覧のテンプレート)
■loop.php(archiveのテンプレート)

といったファイルたちですかね。

これで、各ページに実装完了です。こんな感じに表示されます。

表示例

 

CSSで表示調整

プラグインを実装すると、

<div class="breadcrumbs"></div>

ではきだされます。

という事で、cssで調整します。

文字が大きいので小さくするのと、上下に余白を作りたいので、

.breadcrumbs {
	font-size:0.9rem;
	margin:10px 0 ;
}

修正後はこんな感じです↓CSS修正後

 

管理画面プラグインページでの設定

Breadcrumb NavXTのプラグインページに入ると、下のような画面です。

Breadcrumb NavXT設定

基本的には、そのままでも問題ないとは思いますが、ひとつ気になる箇所が。

トップページの表記が、タイトルを抜粋しているので長いんです。設定を確認すると、ホームページ用テンプレートという項目が、

<a title="%title%へ行く" href="%link%"class="%type%">%htitle%</a>

となっています。「%htitle%」の部分で設定してあるタイトルを読み込んでいるので、これを「ホーム」と変更します。

<a title="%title%へ行く" href="%link%" class="%type%">ホーム</a>

これで設定は全て完了。完成系はこちらです↓

設定完了

 

最後に、プラグインをインストールした際に、

Breadcrumb NavXT was just updated from a pre-5.0 version, please go to your plugins page and activate "Breadcrumb NavXT". Also, deactivate "Breadcrumb NavXT 5.0 Migration Compatibility Layer" to make this message disappear.

のようなメッセージが表示されると思います。

これは、「Breadcrumb NavXT」をインストールすると、一緒に「Breadcrumb NavXT 5.0 Migration Compatibility Layer DO NOT ACTIVATE」というプラグインも自動でインストールされます。このインストールを停止すればメッセージも消えます。

Follow me!

WordPressサイトにパンくずリストを「Breadcrumb NavXT」” に対して1件のコメントがあります。

記事に対するコメントはこちへお願いします。