プラグインBreadcrumb NavXTのパンくずリストのスタイルを変えてみる

2018/03/07[公開] 2018/03/10[最終更新]

22b90bc24562b45a777af37201c24917_s

 このサイトのパンくずリストの見た目を変えてみました。以前(過去記事)からプラグインBreadcrumb NavXTを利用していましたが、今回はプラグインを再インストールして最初の設定からやり直した内容です。

 パンくずリストのプラグインを類似のどれかに変更しようかと何種類か試してみましたが、カテゴリーの階層が表示されなかったり、デバッグモードで通知が出まくったり、パンくず機能を使うために別な親プラグインをインストールしないといけなかったりで、結局もとの定番プラグインBreadcrumb NavXTに戻ってきました。

スポンサー リンク

プラグインBreadcrumb NavXT

 WordPressの公式プラグインディレクトリーからインストールできます。WordPress管理画面のプラグイン新規追加 から「Breadcrumb NavXT」で検索してインストールして有効化します。

WordPress.orgのプラグインページはコチラです。

方針

 今回の方針としては、カテゴリーだけをボタンのように並べて表示してみました。SEO的なことはあまり考えていません。

  • パンくずにホームを含めない
  • タイトルの上に出すので、パンくず末尾の記事タイトルは非表示
  • CSSで背景色をスタイル

設定

 WordPressの管理画面 ダッシュボード左側の設定Breadcrumb NavXT の設定画面を開きます。

 一般タブで「パンくずにホームページを含めない」のチェックを外しました。

 設定画面では以上の変更だけで、残りはデフォルト設定のままです。

bcn-3
「パンくずにホームページを含める」のチェックを外す

テーマに挿入

 パンくずリストを投稿ページで表示するためには、テーマファイル内の表示させたい場所に以下のコードを追加します。必ず<?php ~ ?> 内に納まるように入れます。

echo '<div class="breadcrumbs">';
if(function_exists('bcn_display'))
    {
        bcn_display();
    }
echo '</div><!-- .breadcrumbs -->';

 テーマTwentySeventeenの場合は、content.phpの33行目に入れると投稿タイトルの上にパンくずリストを表示させることができます。content.phpは、template-parts/postの階層そのままに子テーマに持ってきて編集して保存します。

追加CSS

 パンくずのスタイルと、投稿タイトルを非表示にするのは追加CSSで設定します。

 サイトにログインした状態で、ブラウザー上部カスタマイズ追加CSSに貼り付けてライブビューで確認してから、そのまま保存するか子テーマのstyle.cssに保存します。

.breadcrumbs {
    margin: 1.5em 0;
}

.breadcrumbs a {
    color: #ffffff;
    font-weight: bold;
    font-size: small;
    background-color : #e85d33;
    border-radius: 4px;
    padding: 4px 12px;
    margin: 0 5px;
}

.breadcrumbs a:hover {
    color: #000000;
    background-color : #e88f74;
}

.breadcrumbs span[typeof="ListItem"]:last-child span[property="name"] {
    display: none ;
}

 以上で、投稿ページのタイトル上にパンくずリストを表示できていれば設定は完了です。

(追記)当初「パンくずリストの区切り」を空欄にしていましたが、モバイル用ブラウザーでキャッシュが残っているとCSSが反映されてなかったので、CSSが反映されていなくてもおかしくないようにデフォルトの区切り「>」を入れる設定に変更しました。

スポンサー リンク

こちらの記事もどうぞ

コメントを残す

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