Beaverbuilderでパンくずリストを作る方法
「パンくずリスト」とは、ページ内の階層構造を示すためのナビゲーションのことです。
上記画像の赤枠部分のことですね。（※画像提供：三愛高原ホテル様）
「パンくずリスト」を表示することによって、ユーザーが今どこの階層にいるのかが分かりやすくなって、サイト内で迷いにくくなります。
この「パンくずリスト」。
私はHTMLやCSSが書けないので、今まではコーディングスタッフに依頼して、「パンくずリスト」を設置してもらっていました。
でも、せっかくBeaverbuilderでデザイン〜構築まで出来るようになったから、どうせならコードを書かずとも設置できるようにしたい！
ということで、色々調べてコードを書かずにWordPressのプラグインを利用して設置できるようになりました。
今回は、この簡単設置方法をご紹介します！
必要なプラグイン
Yoact SEO
「Yoast SEO」は、SEO対策の設定を管理できるWordPressプラグインです。非常に高機能でありながら、基本機能は無料で利用できます。
弊社では、パンくずリストの有無に関わらず、サイトを構築する時には必ずといっていいほど入れているプラグインです。
「Yoast SEO」の機能について詳しくは今回書きませんが、無料なのにWordPressのSEO対策の設定をまとめて管理できる優れたプラグインの一つです。
インストール方法は、
WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「Yoast SEO」で検索してインストールしてください。
Yoact SEOでパンくずリストを設定する
まず「Yoast SEO」の設定画面から、
①SearchAppearance → ②パンくずリスト をクリックして設定画面をひらいてください。
パンくずリストの設定から、パンくずリストを「有効」に。
ここで「パンくずリスト」に表示させる内容や文言をカスタマイズすることもできます。
好きな形にカスタマイズしたらページ下記の「変更を保存」をクリックして終了。
これだけでOK！！
あとは、PHPコードを貼り付けて・・・
・・・
・・・
PHP？・ω・
PHPが私には分かりません！！！！！
ということで、引き続き、Beaverbuilderで簡単設置方法をご紹介〜♪
PHPが分からなくても大丈夫なので、諦めずに！！
ショートコードを利用してBeaverbuilderに設置する方法
まず、パンくずリストを設置するページを開いた状態で、Beaverbuilderを起動します。
そこから、モジュール→HTMLを選択し、設置したい場所に表示。
そこに、パンくずリストのショートコード
wpseo_breadcrumb
を記入して保存。
すると、パンくずリストが追加されました〜！！！
簡単〜♪(ﾟ∀ﾟ)
また、保存する時に「名前を付けて保存」でモジュールごと保存しておくと、どのページでもすぐに使えるので便利です。
BEAVER THEMER を使ってもっと便利に
Beaverbuilderのpremium versionをお持ちの方に是非おすすめしたい「BEAVER THEMER」。
これを使うと、各ページのヘッダー下部にパンくずリストを設置〜などといった設定が一発で出来ます。
各ページに一個一個パンくずリストを設定していくのも良いのですが、位置の変更とか生じた時に面倒なことになります。
「BEAVER THEMER」で設定しておくと、変更するときも設定を変えるだけなので簡単です。
有料にはなりますが、個人的には大好きなプラグインです。
Beaverbuilderを使って楽しくサイト構築♪
Beaverbuilderの使い方をアップしています。
これってどうするの？と私がbeaverbuilderを使いだした時に読み込んだ
https://kb.wpbeaverbuilder.com/
こちらをbeaverbuilderTeamに了承いただいて、日本語化しています。
内容が多いので、少しずつ更新しています。
まだアップできていない内容が盛りだくさんですが、時々、こちらのブログにもbeaverbuilder関連記事を書いていきたいと思いますので、よろしくお願いします♪
