Flexy Breadcrumb パンくずリスト表示プラグイン設定方法と使い方

ワードプレス(WordPress)のブログサイトに簡単にパンくずリストを表示してくれるプラグイン Flexy Breadcrumb を解説します。

この記事を見ることで得られるメリット

Flexy Breadcrumbで実現できること

Flexy Breadcrumbプラグインを入れると実現できることは次の1つです。

パンくずリストはWordPressのテーマによっては最初から実装されているので不要ですが、例えばWordPressのテーマの「JIN」だとフッター(投稿記事下部)だけしかパンくずリストを表示してくれません。

こういった場合にFlexy Breadcrumbプラグインを使えば記事上部にもパンくずリストを簡単に表示させることができます。

Flexy Breadcrumbを有効化したあと、ウィジェットのブロックにショートコード[flexy_breadcrumb]を記述して利用します。

Flexy BreadcrumbプラグインをWordPressにインストールする方法を解説します。

WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面

“Flexy Breadcrumb”のインストール完了画面

↑Flexy Breadcrumbのインストールが完了すると有効化ボタンが表示されるのでクリックします。

“Flexy Breadcrumb”を有効化すると表示される画面

これでFlexy Breadcrumbのインストールと有効化は完了です。

Flexy Breadcrumbの設定画面はダッシュボード(管理画面)にある「Flexy Breadcrumb」です。

WordPressのダッシュボード(管理画面)

↑Flexy Breadcrumbの設定画面はWoredPressのダッシュボード(管理者画面)内の「Flexy Breadcrumb」をクリックします。

Flexy Breadcrumbの設定画面は下記の2つの項目があります。

Flexy Breadcrumbの一般設定 (General Settings)画面

Flexy Breadcrumbの一般設定
一般設定項目名	意味
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 タグ(ない場合は非表示)

Flexy Breadcrumbの文字のデザイン (Typography)画面

Flexy Breadcrumbの文字のデザイン
一般設定項目名	意味
Breadcrumb Text Color	パンくずリストの文字の色。初期設定は#27272a
Breadcrumb Link Color	リンクの色。初期設定は#337ab7
Breadcrumb Separator Color	仕切り文字の色。初期設定は#cccccc
Breadcrumb Background Color	背景色。初期設定は#edeff0/
Breadcrumb Font Size	パンくずリストの文字サイズ。初期設定は16