パンくずリストを無事に実装

カスタマイズ, WordPress 

パンくずリストをBreadcrumb NavXTプラグインを使い実装してみました。これで、記事や固定ページがどのカテゴリに属しているかがわかるようになりました。そして、Breadcrumb NavXTは、GoogleさんのSEO対策がなされているようで、一石二鳥ですね。ただ、実装までに険しい道のりがありました。実装方法を紹介しているサイトの方法をそのまま使用しても動作しない・・・・。

パンくずリストといえばこのプラグインらしい

Breadcrumb NavXTがもっとも有名との事で実装してみました。自分でパンくずリストのコードを書いてもできるようなのですが、めんどくさいし既に動作が確認されているものを使うのがよいだろうと勝手に思い判断しました。

インストールに関しては、プラグイン→新規追加→Breadcrumb NavXTで簡単に実装

 header.phpへコードを挿入(一般的な方法)

実際に表示させたい箇所(今回は、header.php)に以下のソースコードを入れ込みました。これにより、パンくずリストが実装されるようになります。


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

トップページにパンくずリストを表示させない

先ほどのソースコードをそのまま実装すると、トップページにもパンくずリストが実装されてしまいます。以下のように、header.phpに書き換えて挿入すると非表示になります。

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

こちらが実装後のパンくずリストです。
パンくずリスト実装

綺麗な幹事に実装されるようになります。何気にWEBアイコンも表示されていますが、後ほど解説をします。

参考にしたサイト

パンくずリストを表示する「Breadcrumb NavXT」
パンくずリストPlugin-Breadcrumb NavXTをTOPには表示させない方法

ただ、両方に紹介されているソースコードをそのまま使うと画面が真っ白になったり、反映されなかったりしました。そこで、2つのサイトを見比べてみて編集した箇所は、<?php if(is_front_page()): ?>の箇所です。(is_front_page)か(is_home)という記述をしており、本サイトでは、is_front_pageと記述すると動作しました。

WEBアイコンを実装[スタイルシート編集]

ほかの方のサイトを見ていると、WEBアイコンを実装している人がちらほら。格好いいなと思い、チャレンジしました。WEBアイコンといえば、DashiconsやFontAwesomeがあります。今回は、FontAwesomeのアイコンを使い実装してみました。FontAwesomeが問題なく実装されている前提で説明します。

本サイトでは、style.cssにパンくずリストのクラス追加しました。

パンくずリスト実装

ほかのWEBアイコンも有効になってれば、下記のソースコードのfont-familyを書き換えると表示されるはずです。

このソースコードでDashiconsFontAwesomeの動作は確認しました。指定するクラスは、ページのソースコードからどのクラスに対応されているか確認し反映しています。

.breadcrumbs {
    font-size: small; //パンくずリストの文字の大きさ
    margin-bottom: 5px;//配置の調整
}
 .breadcrumbs a.category:before,//カテゴリとタクソミーで有効
.breadcrumbs a.taxonomy:before {
    font-family: "FontAwesome";//WEBアイコンの種類
    content: "\f115"; //使いたいアイコンのCSSコード
}
.breadcrumbs a.home:before {//ホーム
    font-family: "FontAwesome";//WEBアイコンの種類
    content: "\f015";//使いたいアイコンのCSSコード
}

.breadcrumbs a.post-page:before {//固定ページ
    font-family: "FontAwesome";//WEBアイコンの種類
    content: "\f270";//使いたいアイコンのCSSコード
}
WEBアイコンがうまく表示されない場合

ここで、注意する点が1点。他のサイトを見てみるとアイコンの種類を選択し、コードに反映させる際
content: “f015”;
と記載されていますが、本サイトでは表示されませんでした。もし、表示されなかった場合下記のように入力しなおしてみてください。「\」を頭につけるだけです。
content: “\f015”;
と記載すると表示されました。
これに気づいたのは、DashiconsでのWEBアイコンのCSSコードをコピーしようとしたら「¥f015」と表記され、コピーをすると「\f015」と変換されました。
もしやと思い、「\」を追加したら無事に表示されましたという流れです。FontAwesomeでは、「¥」の表記がなかったので、コードだけを張りつけたのですが、表示されず「\」を追加したら無事に表示されました。

参考にしたサイト

プラグインBreadcrumb NavXTでDashicons付きパンくずリストを出す

う~ん、テンプレートや使用しているプラグインによって動作が違うのかなぁ。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


おすすめ記事

  • WordPressへWordPressへ wordpressになんとか慣れてきたけれど movableTypeからwordpressへ自分のサイトを1度移しましたが・・・・・wordpressを再インストールしました。 テ […]
  • WordPressでフォトギャラリーWordPressでフォトギャラリー 自分のサイトにPhotoGalleryを自分で構築しようとがんばっています。ただ、なかなか準備がすすまない。 今、やっているPhotoGalleryの準備までの流れをまとめてみました。ぜひ、参考にしてみてください。 […]
  • Wordpreeへの不正ログインの攻撃対策Wordpreeへの不正ログインの攻撃対策 先週の火曜日くらいから不正にログインしようとする方々がいらっしゃいました。 そんなわけで、ちょびっと対策したらようやくおさまりました。 まず、今回の対策も含めて、現在までのセキュリティ対策は、以下のとおりです。 […]
  • アイキャッチ画像を猫だらけにアイキャッチ画像を猫だらけに アイキャッチ画像を猫だらけにしてみました。 撮りためた野良猫を!! アイキャッチ画像に今まで撮りためている猫の写真にしてみました。多くのブログとかでは、カテゴリ名にあったアイキャッチ画像を採用していますが、本サイト […]
  • AdRotateで403エラー-ロリポップレンタルサーバー-AdRotateで403エラー-ロリポップレンタルサーバー- Wordpressの広告管理プラグインで有名なAdRotateの設定変更(広告を入替え)しようと思い作業していたら、403エラーが発生。これは、ロリポップサーバーに実装されているWAFが原因でした。 Adot […]
  • jetpackの影響?かと思った500エラー問題が無事解決jetpackの影響?かと思った500エラー問題が無事解決 いつから起きていた現象だったのかわからないのですが、外観>カスタマイズとウィジェットの編集画面を開こうとしたら「500エラー(内部エラー)」が起こり、どうにもできないことになっていました。 WEB運用をやっていて怖い […]