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

2018/06/08

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

011

「パンくずリスト」とは、ページ内の階層構造を示すためのナビゲーションのことです。

上記画像の赤枠部分のことですね。(※画像提供:三愛高原ホテル様

「パンくずリスト」を表示することによって、ユーザーが今どこの階層にいるのかが分かりやすくなって、サイト内で迷いにくくなります。

この「パンくずリスト」。

私はHTMLやCSSが書けないので、今まではコーディングスタッフに依頼して、「パンくずリスト」を設置してもらっていました。

でも、せっかくBeaverbuilderでデザイン〜構築まで出来るようになったから、どうせならコードを書かずとも設置できるようにしたい!

ということで、色々調べてコードを書かずにWordPressのプラグインを利用して設置できるようになりました。

今回は、この簡単設置方法をご紹介します!

必要なプラグイン

022

Yoact SEO

「Yoast SEO」は、SEO対策の設定を管理できるWordPressプラグインです。非常に高機能でありながら、基本機能は無料で利用できます。

弊社では、パンくずリストの有無に関わらず、サイトを構築する時には必ずといっていいほど入れているプラグインです。

「Yoast SEO」の機能について詳しくは今回書きませんが、無料なのにWordPressのSEO対策の設定をまとめて管理できる優れたプラグインの一つです。

インストール方法は、

WordPress管理画面 > プラグイン > 新規追加 >「Yoast SEO」で検索してインストールしてください。

 

Yoact SEOでパンくずリストを設定する

033

まず「Yoast SEO」の設定画面から、

①SearchAppearance → ②パンくずリスト をクリックして設定画面をひらいてください。

044

パンくずリストの設定から、パンくずリストを「有効」に。

ここで「パンくずリスト」に表示させる内容や文言をカスタマイズすることもできます。

055

好きな形にカスタマイズしたらページ下記の「変更を保存」をクリックして終了。

これだけでOK!!

あとは、PHPコードを貼り付けて・・・

・・・

・・・

PHP?・ω・

PHPが私には分かりません!!!!!

ということで、引き続き、Beaverbuilderで簡単設置方法をご紹介〜♪

PHPが分からなくても大丈夫なので、諦めずに!!

ショートコードを利用してBeaverbuilderに設置する方法

066

まず、パンくずリストを設置するページを開いた状態で、Beaverbuilderを起動します。

そこから、モジュール→HTMLを選択し、設置したい場所に表示。

077

そこに、パンくずリストのショートコード

wpseo_breadcrumb

を記入して保存。

 

088

すると、パンくずリストが追加されました〜!!!

簡単〜♪(゚∀゚)

099

また、保存する時に「名前を付けて保存」でモジュールごと保存しておくと、どのページでもすぐに使えるので便利です。

BEAVER THEMER を使ってもっと便利に

Beaverbuilderのpremium versionをお持ちの方に是非おすすめしたい「BEAVER THEMER」

これを使うと、各ページのヘッダー下部にパンくずリストを設置〜などといった設定が一発で出来ます。

各ページに一個一個パンくずリストを設定していくのも良いのですが、位置の変更とか生じた時に面倒なことになります。

「BEAVER THEMER」で設定しておくと、変更するときも設定を変えるだけなので簡単です。

有料にはなりますが、個人的には大好きなプラグインです。

Beaverbuilderを使って楽しくサイト構築♪

Beaverbuilderの使い方をアップしています。

How to Beaver

これってどうするの?と私がbeaverbuilderを使いだした時に読み込んだ

https://kb.wpbeaverbuilder.com/

こちらをbeaverbuilderTeamに了承いただいて、日本語化しています。

内容が多いので、少しずつ更新しています。

まだアップできていない内容が盛りだくさんですが、時々、こちらのブログにもbeaverbuilder関連記事を書いていきたいと思いますので、よろしくお願いします♪

 

この記事の参考サイト

  • Implement Yoast SEO breadcrumbs

    Yoast SEOパンくずリスト(breadcrumbs)設定方法

  • Add Yoast breadcrumbs to the Beaver Builder theme

    ビーバービルダーにYoast SEOパンくずリスト(breadcrumbs)を追加する方法

  • BEAVER THEMER

    ビーバーテーマーのサイト

この記事を書いた人

Ryoko Nakashima

デザイナー / 熊本県八代市出身 / 神戸医療福祉専門学校言語聴覚士科卒業

卒業後は、医療機関・福祉施設へのサービス業務を行う会社にて、企画営業として勤務。
2008年にAQMへ入社。 子どもの頃からものづくりが大好きで、デザインについてはAQM入社後に独学で学ぶ。
企画営業で培ってきた経験や知識をデザインに活かし、ページ全体にストーリーを持たせたデザインがお客様より高評価を頂いている。
現在はBeaverbuilderを用いたサイト制作を中心とし、Webアセンブラーとして活動中。