ワードプレス(WordPress)のブログサイトにパンくずリストを表示してくれるプラグイン Breadcrumb を解説します。
- Breadcrumbの使い方と詳細な設定方法がわかります
Breadcrumbで実現できること
Breadcrumbプラグインを入れると実現できることは次の2つです。
ブログサイトにパンくずリストを表示できる
- 投稿ページ以外の固定ページやカテゴリーページにもパンくずリストを表示できる
パンくずリストはWordPressのテーマによっては最初から実装されているので不要ですが、例えばWordPressのテーマの「JIN」だとフッター(投稿記事下部)だけしかパンくずリストを表示してくれません。
そうした場合にBreadcrumbプラグインを使えば記事上部にもパンくずリストを表示させることが可能です。
さらに固定ページやカスタム投稿タイプにもパンくずリストを表示することができます。
Breadcrumbを有効化したあと、ウィジェットのブロックにショートコードを記述して利用します。
またはWordPressテーマのheader.phpの最終行にPHPコードを直接記述することもできます。
Breadcrumbのインストール方法
BreadcrumbプラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規追加」をクリックします
- 検索ボックスに”Breadcrumb”と入力すると下に検索結果が表示されます
- ”パンくずリスト(Breadcrumb)”の「今すぐインストール」ボタンをクリックします
※Breadcrumbは日本語に自動翻訳されて「パンくずリスト」と表示されます。
“パンくずリスト(Breadcrumb)”のインストール完了画面↑Breadcrumbのインストールが完了すると有効化ボタンが表示されるのでクリックします。
“Breadcrumb”を有効化すると表示される画面これでBreadcrumbのインストールと有効化は完了です。
Breadcrumbの設定と使い方
Breadcrumbの設定画面はダッシュボード(管理画面)にある「Breadcrumb」です。
WordPressのダッシュボード(管理画面)↑Breadcrumbの設定画面はWoredPressのダッシュボード(管理者画面)の「Breadcrumb」をクリックします。
Breadcrumbの設定
Breadcrumbの設定画面は下記の4つの項目があります。
- オプション (Options)
- ビルダー (Builder)
- スタイル (Style)
- カスタムスクリプト (Custom Scripts)
- ヘルプサポート (Help & Support)
- プロを購入する (Buy Pro)
設定項目数は多いですが利用しない設定が多いです。
オプション (Options)
Breadcrumbのオプション(Options)画面| 設定項目名 | 意味 |
|---|---|
| Breadcrumb front text(フロントテキスト) | パンくずリストの前にカスタムテキストを表示 |
| Breadcrumb separator text(セパレータテキスト) | 階層の区切り文字を指定 |
| Display last separator(最後の区切り文字を表示) | 最後の区切り文字を表示/非表示 |
| Breadcrumb link text limit by?(パンくずリストのテキスト制限) | リンク文字を単語または文字で制限 |
| Limit count(制限数) | テキスト制限値。数値のみを設定 |
| Ending character(エンディングキャラクター) | 終了文字を設定 |
| Display “Home” on breadcrumb?(パンくずリストにホームを表示しますか?) | ホームの表示/非表示 |
| Custom home text(カスタムホームテキスト) | ホームのテキストを設定できます |
| Current URL hash(現在のURLハッシュ) | 現在のURLを保持する場合は空のままにします |
| Hide WooCommerce breadcrumb(WooCommerceパンくずリストを非表示) | WooCommerceのデフォルトのパンくずリストを表示/非表示 |
ビルダー (Builder)
Breadcrumbのビルダー(Builder)画面各投稿タイプ毎のパンくずリストの階層化構造を設定できます。
下記の項目を設定可能です。
- 投稿
- 固定ページ
- メディア
- CTA
- カテゴリー
- タグ
- フォーマット
- アーカイブ
- その他
スタイル (Style)
Breadcrumbのスタイル(Style)画面パンくずリストの階層化構造のデザインを変更できます。
テキストサイズや文字色、背景色も変更可能です。
カスタムスクリプト (Custom Scripts)
Breadcrumbのスタイル(Style)画面パンくずリストをすCSSやJavaScriptコードを使ってカスタマイズすることができます。
ヘルプサポート (Help & Support)
Breadcrumbのヘルプサポート(Help & Support)画面WordPressのテーマファイルのヘッダーファイルに貼り付けるコードやウィジェットのブロックに貼り付けるショートコードが表示されています。
プロを購入する (Buy Pro)
Breadcrumbのプロを購入する(Buy Pro)画面有料版と無料版で使える機能の違いを確認することもできます。
ウィジェットにショートコードを設定する方法
Breadcrumbのショートコード[flexy_breadcrumb]をウィジェットに指定する方法を解説します。
ダッシュボード(管理画面)の外観 ⇒ ウィジェット ⇒ 記事上部 ⇒ブロックを追加 ⇒ ショートコード ⇒ [breadcrumb] を入力 ⇒ 更新ボタンを押して完了です。
ウィジェット画面- ダッシュボード(管理画面)の外観をクリックします
- ウィジェットをクリックします
- トップページ上部 or 記事上部をクリックします
- ショートコードを選択します
- [breadcrumb]を入力します
- 更新ボタンを押します
以上でウィジェットにBreadcrumbのショートコードを設定する方法は完了です。
パンくずリストを確認
投稿ページの上部に表示されているパンくずリストを確認します。
投稿ページ上部のパンくずリスト↑上のパンくずリストは下記の5か所を初期設定から変更しています。
- オプションのBreadcrumb separator textに » を入力
- オプションのBreadcrumb link text limit by?をNoneに設定
- オプションのDisplay “Home” on breadcrumb?をYesに設定
- オプションのCustom home textに トップページ を入力
- スタイルのBreadcrumb Themesは一番上を選択
写真はパンくずリストの部分だけ周りの色と違いますが、リンクの背景色を変更することで、他の色にすることができます。
パンくずリストに長いタイトル名は表示したくない場合はビルダー設定からHomeとPost categoryだけを指定することでPost titleを非表示にすることができます。
Breadcrumbのコードをheader.phpに挿入する方法
Breadcrumbはウィジェットを使う方法が簡単なのでおすすめですが、Wordpressテーマのheader.phpの最終行にコードを挿入することも可能です。
header.phpファイルは下記のディレクトリにあります。
ドメイン名/public_html/wp-content/themes/利用しているテーマ名/
WordPressテーマの header.php の最終行に次のPHPコードを挿入します。
<?php echo do_shortcode("[breadcrumb]"); ?>まとめ
Breadcrumbは非常に簡単にウィジェットを利用してパンくずリストを投稿記事の上部に表示することができるプラグインです。
ただ、デザインをカスタマイズするときはCSSをいじらないといけないのが難点です。
とはいえ、初期設定の状態でもウィジェット機能を使えば簡単にパンくずリストを設置できるので、知識がない場合でも使えるのが最大の長所ともいえます。
もっと多機能なパンくずリスト用プラグインのほうが良い場合は「Breadcrumb NavXT」がおすすめです。
「Flexy Breadcrumb」の詳細な情報と設定方法はこちらの記事を参考にしてください↓
Breadcrumb NavXT パンくずリスト表示プラグイン 設定方法と使い方
