ワードプレス(WordPress)のブログサイトに簡単にパンくずリストを表示してくれるプラグイン Flexy Breadcrumb を解説します。
- Flexy Breadcrumbの使い方と詳細な設定方法がわかります
Flexy Breadcrumbで実現できること
Flexy Breadcrumbプラグインを入れると実現できることは次の1つです。
ブログサイトに簡単にパンくずリストを表示できる
パンくずリストはWordPressのテーマによっては最初から実装されているので不要ですが、例えばWordPressのテーマの「JIN」だとフッター(投稿記事下部)だけしかパンくずリストを表示してくれません。
こういった場合にFlexy Breadcrumbプラグインを使えば記事上部にもパンくずリストを簡単に表示させることができます。
Flexy Breadcrumbを有効化したあと、ウィジェットのブロックにショートコード[flexy_breadcrumb]を記述して利用します。
Flexy Breadcrumbのインストール方法
Flexy BreadcrumbプラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規追加」をクリックします
- 検索ボックスに”Flexy Breadcrumb”と入力すると下に検索結果が表示されます
- ”Flexy Breadcrumb”の「今すぐインストール」ボタンをクリックします
“Flexy Breadcrumb”のインストール完了画面↑Flexy Breadcrumbのインストールが完了すると有効化ボタンが表示されるのでクリックします。
“Flexy Breadcrumb”を有効化すると表示される画面これでFlexy Breadcrumbのインストールと有効化は完了です。
Flexy Breadcrumbの設定と使い方
Flexy Breadcrumbの設定画面はダッシュボード(管理画面)にある「Flexy Breadcrumb」です。
WordPressのダッシュボード(管理画面)↑Flexy Breadcrumbの設定画面はWoredPressのダッシュボード(管理者画面)内の「Flexy Breadcrumb」をクリックします。
Flexy Breadcrumbの設定
Flexy Breadcrumbの設定画面は下記の2つの項目があります。
- 一般設定 (General Settings)
- 文字のデザイン (Typography)
一般設定 (General Settings)
Flexy Breadcrumbの一般設定 (General Settings)画面| 一般設定項目名 | 意味 |
|---|---|
| Home Text | 文字を変更可能。初期設定はHome |
| Home Text URL | Home Textに指定した文字のリンク先のURL |
| Home Icon | Homeの前のアイコンを変更可能Font Asesomeを利用)。初期設定はfa-home |
| Breadcrumb Separator | 仕切り文字を変更可能。初期設定は/ |
| Set Title Limit In Words/Character | 文字数表示を単語数or文字数で制限可能。初期設定は4単語 |
| Ending Character | 文字数または単語数制限で表示しきれなかった場合に表示する文字を指定 |
| Post Types Hierarchy | 表示する階層を選択。カテゴリー or 日付(投稿日) or タグ(ない場合は非表示) |
文字のデザイン (Typography)
Flexy Breadcrumbの文字のデザイン (Typography)画面| 一般設定項目名 | 意味 |
|---|---|
| Breadcrumb Text Color | パンくずリストの文字の色。初期設定は#27272a |
| Breadcrumb Link Color | リンクの色。初期設定は#337ab7 |
| Breadcrumb Separator Color | 仕切り文字の色。初期設定は#cccccc |
| Breadcrumb Background Color | 背景色。初期設定は#edeff0/ |
| Breadcrumb Font Size | パンくずリストの文字サイズ。初期設定は16 |
ウィジェットにショートコードを設定する方法
Flexy Breadcrumbのショートコード[flexy_breadcrumb]をウィジェットに指定する方法を解説します。
ダッシュボード(管理画面)の外観 ⇒ ウィジェット ⇒ トップページ上部 ⇒ブロックを追加 ⇒ ショートコード ⇒ [flexy_breadcrumb] を入力 ⇒ 更新ボタンを押して完了です。
ウィジェット画面- ダッシュボード(管理画面)の外観をクリックします
- ウィジェットをクリックします
- トップページ上部 or 記事上部をクリックします
- ショートコードを選択します
- [flexy_breadcrumb]を入力します
- 更新ボタンを押します
以上でウィジェットにFlexy Breadcrumbのショートコードを設定する方法は完了です。
パンくずリストを確認
投稿ページの上部に表示されているパンくずリストを確認します。
投稿ページ上部のパンくずリスト↑上のパンくずリストは下記の2か所を初期設定から変更しています。
- 一般設定のSet Title Limit In Words/CharacterのWordsを4 ⇒ 6に変更
- 文字のデザインのBreadcrumb Font Sizeを16 ⇒ 12に変更
写真はパンくずリストの部分だけ周りの色と違うので違和感がありますが、背景色を初期設定のグレーから周囲と同じ白色に変更すると、より周囲と馴染みます。
まとめ
Flexy Breadcrumbは非常に簡単にパンくずリストをウィジェットのショートコードで好きな位置に設置することができる便利なプラグインです。
最大の特徴はクリックだけで背景色や文字色を変更できたりと、とにかく設定が簡単なことです。
最も有名で人気のあるパンくずリストを表示する「Breadcrumb NavXT」プラグインよりも設定方法は簡単なので導入の敷居は低いです。
更新(アップデート)もされているのでセキュリティの面でも安心して利用することができるのでおすすめのプラグインです。
