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

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

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

パンくずリスト

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

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

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

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

また、Elementorでパンくずリストを作る方法を動画でご覧になりたい方はこちらからどうぞ!

Yoast SEOをインストール

Yoast SEOをインストール

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

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

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

Yoastでパンクズリストの設定
パンクズリストの設定

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

これで準備は完了です。

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

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

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

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

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


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

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

尚、TOFUラボ内のメンバーからのパンくずリストに関する質問に

という質問がありました。

※上記のリンクにアクセスすると、その解決方法がご覧いただけます。また、この他にもTOFUラボのメンバーによるQ&Aをまとめた『質問と回答』のページがありますので、サイト制作に迷った時の答えや、新しいヒントがもしかしたら見つかるかもしれません!

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通