パンくずリストの追加&テーマの変更

先日、関連記事の表示を始めたところ早速効果があり、昨日の来訪者1人辺りのページ参照数が1.8まで上昇していました。
効果が出で楽しくなってきたので、パンくずリストも導入することにしました。

パンくずリストとは?(Wikipediaより引用)
パンくずリスト(breadcrumb list)は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。

WordPressにパンくずリストプラグインを導入

パンくずリストを表示させるためのプラグインとしてBreadcrumb NavXTを導入しました。

インストールは特につまずくこともなかったので割愛します。
解らなければ「Breadcrumb NavXT」で検索してください。
細かい設定はWordPressの管理画面の「設定 > Breadcrumb NavXT」より行うことができます。

なお、このプラグインをインストールしただけではパンくずリストは表示されず、テーマの編集でphpファイルと必要に応じてcssファイルを修正する必要があります。

パンくずリストが表示されるようphpファイルを修正

WordPressの管理画面の「外観 > テーマ編集」で、「header.php」を開き、ファイルの一番最後に下記のコードをカット&ペーストで追記します。

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

画面下部の「ファイルを更新」を押下すれば、反映されます。
自サイトを表示して、パンくずリストの表示を確認してください。

この時点で思い通りに表示されていれば、作業はここで完了です。
上手く表示されない場合は、スタイルシートの修正を行います。

パンくずリストの表示調整でcssファイルを修正

この工程は、使用しているテーマ等によって変わってきます。
参考までに本サイトでは、WordPressの管理画面の「外観 > テーマ編集」で、「style.css」を開き、ファイルの一番最後に下記のコードをカット&ペーストで追記しています。

div.breadcrumbs {
    padding:10px 0 0 10px;
}

と、最終的には上記の設定を行い、無事、パンくずリストを表示することができたのですが、作業途中にスタイルシートを壊してしまい画面表示が崩れてしまいました。
個別に復旧するのも面倒だったので、少々強引ですがテーマを変更することで復旧対応を行いました。

テーマは「Twenty Fourteen」から「Dynamic News Lite」に変更し、関連記事表示時に対応したアイキャッチ画像の非表示化と、リンクの文字色を赤⇒青に変更するカスタマイズを加えています。
元のテーマにも少し飽きてきたところだったので、まぁ良しとしておきます。

以上です。

サブコンテンツ

このページの先頭へ