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

先日、関連記事の表示を始めたところ早速効果があり、昨日の来訪者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」に変更し、関連記事表示時に対応したアイキャッチ画像の非表示化と、リンクの文字色を赤⇒青に変更するカスタマイズを加えています。
元のテーマにも少し飽きてきたところだったので、まぁ良しとしておきます。

以上です。

サブコンテンツ

公開中のAndroidアプリ(全て無料です)

ビジネス

おじさんのメモ帳 おじさんのメモ帳
シンプルなメモ帳
日報 日報
日報作成補助ツール
議事録 議事録
議事録作成補助ツール

学習(国語・算数)

漢字かな 漢字かな
漢字の読みの学習に
ひらがなプラス ひらがなプラス
かな・カナの学習に
暗算百問 暗算百問
毎日暗算で頭の体操
あんざん25 あんざん25
両手で計算してみよう

学習(理科・社会)

記号かな 地図記号
地図記号の学習に
魚かな 魚かな
海の生物の学習に
動物かな 動物かな
陸上の生物の学習に
野菜かな 野菜かな
植物な食物の学習に
元素記号 元素記号
元素記号の学習に

その他

こづかい帳 こづかい帳
計算力と金銭感覚を育もう
お絵かきプラス お絵かきプラス
メモや絵日記等に

このページの先頭へ