【初心者向け】Breadcrumb NavXtを使用してパンくずリストを作る【WordPress化】

こばゆた

プラグインを使ってパンくずリストを作成します。

1.Breadcrumb NavXtの設置方法

パンくずリストの設置する意味や使い方は他の方々が素晴らしくまとめてくださっているのでここではサクッと作成方法をやっていこうと思います。

有効化した後はパンくずリストを表示したい場所に以下のコードを埋め込みます。

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

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

<?php get_template_part('breadcrumb'); ?> <!-- パラメータに作成したphpファイル名を入れる -->

コードを入れるとこれだけでリストができています(記事ページ、設定はデフォルトの場合)。

きなこ

とっても簡単だね！

チャッピー

しかし硬えゴリラってなに？

こばゆた

あとで文字を変える方法をやるからあえて変化がわかる様にしたんだよ

ちなみに以下が生成されるHTMLです。

<div class="breadcrumbs">
  <div class="breadcrumb_inner">
    <span><a href="/"></a></span> <!-- リンクがある場合 -->
    <span><a href="/"></a></span> <!-- リンクがある場合 -->
    <span></span> <!-- リンクがない場合 -->
  </div>
</div>

これを元にカスタマイズをしていきます。

2.パンくずリストの文字を任意にものにする

パンくずリストに表示される文字を変える場合は「設定」→「Breadcrumb NavXt」から変更をします。

2-1.homeへのリンク

初期だとhomeへのリンクにあたるところがブログタイトルになっているので修正します。

「一般」→真ん中のあたりにある「ホームページテンプレート」の”%htitle%”を任意のものに変えます。

ここでは”HOME“としました。

2-2.カテゴリーのリンク

カテゴリー名を任意のものに変えるには「タクソノミー」→「カテゴリーテンプレート」の”%htitle%”を変更します。

ここでは”カテゴリー“としました。

2-3.タグのリンク

タグも変える場合は「タクソノミー」→「タグテンプレート」の”%htitle%”を任意のものに変えます。

ここでは”タグ“としました。

ここまでの変更で以下の様になりました。

2-4.404ページのリンク

404ページの文字を変更したい場合は「その他」→「404タイトル」の枠の文言を任意のものに変えればOKです。

他にも「検索ページ」とかの文字も同じ要領で変えることができますので必要に応じて設定してください。　

3.まとめ

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