WEBサイトを構築していく際、パンくずリストを使うケースが良くあります。
図の左上にあるものがパンくずリストです。
パンくずリストは、ウェブサイト上でのナビゲーションを改善するための視覚的な要素で、ページの階層構造を示します。
WordPressのサイト構築プラグイン、エレメンタープロでは、プラグイン「Yoast SEO」を併用することによりパンくずリストを簡単に作ることが可能です。
| ※この記事は、Elementor Proがインストール・有効化されている前提で進めていきます。 |
Yoast SEOをインストール
WordPress管理画面から、プラグインの新規追加で「Yoast SEO」と検索をしてインストール、有効化します。
新規追加の検索で出てこない場合には、コチラからダウンロードし、wp-content/pluginsにインストールすることでも可能です。
有効化が完了すると、図のような画面になります。「初期設定を開始！」を選択しても良いですが、あまり関係ないので、「スキップ」をしてしまっても大丈夫です。
ワードプレスの管理画面から「Yoast SEO＞設定＞高度な設定」を選択します。
「高度な設定」の中にある「パンくずリスト」を開きます。
パンくずリストの外観（見え方）は上部で調整が可能です。
お好みの設定にして「変更を保存」すると設定が反映されます。
その下では、
「投稿タイプのパンくずリスト」
「タクソノミーのパンくずリスト」
の調整が可能です。
一番下の方にある「テーマのパンくずリストを有効にする」がデフォルトで有効になっていますが、有効ではない場合は有効にし「変更を保存」して下さい。
Elementor Proでパンくずリストを入れてみる
Elementorのウィジェットから「Breadcrumbs」をページの入れたい箇所に入れてみましょう。
入れてみると先程パンくずリストの設定をした通りに表示されます。
※このページでは現在のページが表示されていませんが、プレビューすると見えたり、Elementor自体のバージョン等により少し誤差があります。
図はプレビューした状態になります。
特にページ要素を作っていないためあっさりしていますが、設定した通りに表示されることが分かります。
さいごに
パンくずリストの設定をコーディングして行う場合、single.phpやarchive.phpなどをはじめ個々の設定を手動でせざるを得ない場合がありましたが、Elementor ProとYoast SEOの組み合わせで、ものの数秒で実装してしまうことが可能です。
パンくずリストは、ユーザーがどこのページに居るのかが分かりやすくもなりますので、なるべく実装していきましょう。