Elementor Proでパンくずリストを作る方法

Elementor Proでパンくずリストを作る方法

Elementor(エレメンター) Proを使っていて、パンくずリストはどうやって追加するのか迷ったことはありませんか?
自分の運営するサロンでもそういった質問が最近出ました。

パンくずリスト

パンくずリストというのは、今現在いるページまで、ホームからどうやって辿っていくのかを表したものです。
この画像の例だと、今のページの上に『Divi』というカテゴリがあり、その上に『ホーム』があります。
簡単に今の自分の位置がわかるわけです。

申し遅れました。ナオミです。
海外で10年以上ウェブ開発の仕事をしています。

この記事ではElementor Proでパンくずリストをどうやってサイトに挿入するのか、説明していきます。

注意ですが、この記事はもうすでにElementor Proを持っている人に向けて書いています。
まだElementor Proを使ったことがない人はこちらからどうぞ。
>>Elementor Proの購入完全ガイド

Yoast SEOをインストール

Yoast SEOをインストール

YoastってSEOのプラグインじゃないの?と思うかもしれませんが、その通りです。
ところが、Yoastには隠れた『パンくずリスト』機能があるんです。
しかもElementor Proと上手く連動するんです。

ではまずはプラグインでYoastと検索し、Yoastをインストールします。

Yoastのパンくずリストを有効化

Yoast Seoのパンくずリストを有効化

この画像のように、ダッシュボードから『SEO→Search Appearance→パンくずリスト』にいきます。
『パンくずリストを有効にする』とありますのでこれをクリックし、有効化します。
この画面の下に設定を保存するボタンがありますので保存します。

これで準備は完了です。

Elemenetor ProのBreadcrumbsウィジェットを挿入

Elementor ProでBreadcrumbsウィジェットを探す

Elementor Proでパンくずリストを表示させたいページ、またはテーマビルダーのテンプレートを開きます。
そうして、ウィジェット検索で『bre』といれてみましょう。
すると画像のように『Breadcrumbs』が出てきます。
これをページに挿入します。

Elementor ProでBreadcrumbsウィジェットを挿入

このようにパンくずリストが表示されます。
テンプレートに入れる場合は、何も表示されないこともありますが、その場合はそのテンプレートを使ってるページを見てみましょう。


こんな簡単にパンくずリストをElementor Proで使うことができます。
しかもショートコードなどではなく、ちゃんとしたElementorのウィジェットです。
ぜひ試してみ下さい!

もし何か質問があれば、サロンの方で質問お願いします。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です