WordPress設定

Flexy Breadcrumb パンくずリスト表示プラグイン 設定方法と使い方読み終わるまで 1

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

ワードプレス(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のダッシュボード(管理者画面)の新規プラグイン追加画面WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面
  1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
  2. 「新規追加」をクリックします
  3. 検索ボックスに”Flexy Breadcrumb”と入力すると下に検索結果が表示されます
  4. ”Flexy Breadcrumb”の「今すぐインストール」ボタンをクリックします
“Flexy Breadcrumb”のインストール完了画面“Flexy Breadcrumb”のインストール完了画面

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

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

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

Flexy Breadcrumbの設定と使い方

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

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

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

Flexy Breadcrumbの設定

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

  1. 一般設定 (General Settings)
  2. 文字のデザイン (Typography)

一般設定 (General Settings)

Flexy Breadcrumbの一般設定 (General Settings)画面Flexy Breadcrumbの一般設定 (General Settings)画面
Flexy Breadcrumbの一般設定
一般設定項目名意味
Home Text文字を変更可能。初期設定はHome
Home Text URLHome Textに指定した文字のリンク先のURL
Home IconHomeの前のアイコンを変更可能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)画面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

ウィジェットにショートコードを設定する方法

Flexy Breadcrumbのショートコード[flexy_breadcrumb]をウィジェットに指定する方法を解説します。

ダッシュボード(管理画面)の外観 ⇒ ウィジェット ⇒ トップページ上部 ⇒ブロックを追加 ⇒ ショートコード ⇒ [flexy_breadcrumb] を入力 ⇒ 更新ボタンを押して完了です。

ウィジェット画面ウィジェット画面
  1. ダッシュボード(管理画面)の外観をクリックします
  2. ウィジェットをクリックします
  3. トップページ上部 or 記事上部をクリックします
  4. ショートコードを選択します
  5. [flexy_breadcrumb]を入力します
  6. 更新ボタンを押します

以上でウィジェットにFlexy Breadcrumbのショートコードを設定する方法は完了です。

パンくずリストを確認

投稿ページの上部に表示されているパンくずリストを確認します。

投稿ページ上部のパンくずリスト投稿ページ上部のパンくずリスト

↑上のパンくずリストは下記の2か所を初期設定から変更しています。

  • 一般設定のSet Title Limit In Words/CharacterのWordsを4 ⇒ 6に変更
  • 文字のデザインのBreadcrumb Font Sizeを16 ⇒ 12に変更

写真はパンくずリストの部分だけ周りの色と違うので違和感がありますが、背景色を初期設定のグレーから周囲と同じ白色に変更すると、より周囲と馴染みます。

まとめ

Flexy Breadcrumbは非常に簡単にパンくずリストをウィジェットのショートコードで好きな位置に設置することができる便利なプラグインです。

最大の特徴はクリックだけで背景色や文字色を変更できたりと、とにかく設定が簡単なことです。

最も有名で人気のあるパンくずリストを表示する「Breadcrumb NavXT」プラグインよりも設定方法は簡単なので導入の敷居は低いです。

更新(アップデート)もされているのでセキュリティの面でも安心して利用することができるのでおすすめのプラグインです。