パンくずリストを作成(Breadcrumb NavXT)

パンくずリストを作成すると、サイト内での記事の位置づけ分かりやすくなり、関連する記事が探しなすくなります。パンくずリストを容易に作成するため「Breadcrumb NavXT」というプラグインを使用します。

はじめに

「Breadcrumb NavXT」というプラグインを使用して、パンくずリストを作成します。
・「Breadcrumb NavXT」をインストール
・「Breadcrumb NavXT」を初期設定
・テンプレートに「Breadcrumb NavXT」のコードを記述
・スタイルシート(style.css)で表示を調整

「Breadcrumb NavXT」をインストール

WordPressのプラグインの管理ページで、「Breadcrumb NavXT」プラグインを検索してインストールし、有効化します。
install_breadcrumnavxt_001

「Breadcrumb NavXT」を初期設定

「Throws SPAM Away」の初期設定画面を開きます。
setup_breadcrumnavxt_001

初回は、以下の画面が表示されます。
setup_breadcrumnavxt_002

ICT実験室では、「General」のタブで以下2か所変更してみました。
・セパレータを変更
・表示中のページのタイトル名をリンク表示

実際に設定変更していきます。

セパレータを「>」から好みの文字に変更します。
setup_breadcrumnavxt_003

見かけをそろえるぐらいの意味しかありませんが、表示しているページをリンクにします。
setup_breadcrumnavxt_004

「変更を保存」ボタンをクリックして、設定を反映します。
setup_breadcrumnavxt_005

テンプレートに「Breadcrumb NavXT」のコードを記述

テンプレート(header.php等)に「Breadcrumb NavXT」の以下のコードを記述します。

<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

<記述例>
ICT実験室では、パンくずリストの位置を調整するため、class名に「entry-meta」を追加してみました。また、トップページでは表示しないようにしています。

			<?php if ( !is_front_page() ) { ?>
				<div class="breadcrumbs entry-meta"  xmlns:v="http://rdf.data-vocabulary.org/#">
					<?php if(function_exists('bcn_display'))
					{
						 bcn_display();
					}?>
				</div>
			<?php } ?>

スタイルシート(style.css)で表示を調整

スタイルシート(style.css)で文字サイズの変更や、表示位置の調整を行います。

<記述例>

div.breadcrumbs {
    font-size: 12px;
    margin: 1px auto 15px;
    padding: 0;
}

おわりに

「Breadcrumb NavXT」を使用して、パンくずリストを作成しました。パンくずリストがあるとサイト内での移動が直感的にできるようになると感じました。

関連記事

  1. 日本語の取り扱いを改善(WP Multibyte Patch)
  2. ページにアイコンを表示(Font Awesome 4 Menus)
  3. ソースコードを整形して表示(SyntaxHighlighter Evolved)
  4. パンくずリストを作成(Breadcrumb NavXT)
  5. お問い合わせフォームを作成(Contact Form 7)
  6. サイトマップ(ページ索引)を作成(PS Auto Sitemap)

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)