• 2022.05.26
  • 未分類
  • 飯島

Breadcrumb NavXTでパンくずリストを作ろう| WordPressテーマ作成

WEBサイトにパンくずリストを設置すれば、ユーザーはカテゴリーやタグごとの情報を見つけやすくなります。パンくずリストはプラグインを使えば簡単に設置できます。

今回はWordPressでパンくずリストを設置できるプラグイン「Breadcrumb NavXT」の使い方を解説します。

パンくずリストとは?

パンくずリストとは、下記の画像のように閲覧しているページの階層を表示してくれるものです。

閲覧しているページの前の階層には、リンクが付与されているので、遡って情報を探すことができます。例えば上記の画像だと他の「マンデリン」のカテゴリーの記事を見てみたい!となれば、リンクをクリックすればそのカテゴリーの記事一覧に移れます。

「Breadcrumb NavXT」でパンくずリストを作成する方法

では実際にWordPressでパンくずリストを作成してみましょう。今回はパンくずリストを作成できるプラグイン「Breadcrumb NavXT」の使い方を解説します。

①「プラグイン」の「新規追加」ページで「Breadcrumb NavXT」と検索する

②「今すぐインストール」を選択する

③「有効化」をタップする

④「Breadcrumb NavXT」の設定をする

Breadcrumb NavXTを有効化させると「設定」から「Breadcrumb NavXT」の項目が表示されます。ここをクリックするとBreadcrumb NavXTの設定画面に移ります。

設定画面の「パンくずの区切り」の箇所ではリストの区切りを設定できます。デフォルトでは「 > 」と設定されていますが、これは特殊文字で「>」を表します。

「 > 」の設定を反映したパンくずリストの区切りを確認してみると、次の画像のようになります。

また「ホームページ用テンプレート」の箇所にある「%title%」とはサイト名を表しています。

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current><span property="name">%title%</span></a><meta property="position" content="%position%"></span>

このまま利用するとパンくずリストでは、「サイト名 > マンデリン > コーヒー」というように表示されます。サイト名を「TOP」や「HOME」などに変更したい場合は、「<span property=”name”>%title%</span>」の「%title%」を「TOP」や「HOME」に書き換えましょう。

⑤「変更を保存」を選択する

設定が終わったら「変更を保存」をクリックしましょう。

⑥「bcn_display」関数を記述する

「Breadcrumb NavXT」でパンくずリストを表示させるには、下記のように「bcn_display」関数を記載する必要があります。ヘッダーの下など、自分がパンくずリストを表示させたい箇所に記載してみてください。

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

GIV株式会社は、埼玉県川越市にあるWEB(ホームページ)制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。

GIV / Design / Security / People
お問い合わせ
Contact