WordPressのテーマビルダープラグイン「Elementor」のファンブログ

【VoiceBox】無料版ユーザーからの質問「テーマビルダーって?」

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
thanks_thumbnail

ボイスボックスって?

テーマビルダー について説明する前に、今回この記事を書くきっかけについて少々宣伝ぽくなってしまいますが、お話しします。

当ブログにはVoiceBoxを設置しております。

おじさん
おじさん
要するに問い合わせフォームね・・・


あ、はい、問い合わせフォームです(笑)お陰様で、皆さまから応援メッセージや記事のリクエスト、ご質問など頂ける様になってきました!ありがとうございます。随時ご返信させて頂いておりますのでお待ち下さい・・・。

その中でも特に質問が多いのが、 Elementor の「 ページビルダー 」と「 テーマビルダー 」の違い(つまりは無料版と有料版の違い)でした。(多いといっても3通ですが・・・)そこで今回は、「 テーマビルダー って?」を中心にご紹介したいと思います。

無料版と有料版の違い(ウィジェットが〜とか、ポップアップが〜とかではありません)というよりも、「テーマビルダー」とは何か?についてご紹介したいと思います。

テーマをビルドするテーマビルダー

この記事をご覧になっている方は3つに分かれます。(1)Elementorを使った事が無い方(2)Elementor無料版を使っている方または、使った事がある方(3)ElementorProを使っている方です。まず、(1)の方向けに説明して参ります。

ページビルダーの仕組み

WordPressでテーマを使用した場合のイメージ(Elementor未使用)

wordpress_normal
単純に新規投稿で書いた記事(コンテンツ)は、テーマのデザインに合わせて表示されます。

次に、Elementor(無料版)を使用した場合のイメージ

wordpress_elementorfree

WordPressの投稿画面ではなく、Elementorの編集画面であらかじめ作成した記事用のテンプレートを読み込ませた上で、記事を書きます。実際の画面で上の流れを見てみましょう。まず、Elementorのtemplatesで、あらかじめ下の画像の様に投稿デザインを作っておきます。

elementor_edit

次に、WordPressの投稿から新規投稿を開き、WordPressの投稿画面で記事は書かずにElementorで編集で開きます。

new_post

Elementorで投稿編集画面を開いたらテンプレートを読み込ませます。

template_insert

読み込ませたら、早速記事を書いていきます。同じテンプレートを使う事で、テーマの様な機能として利用出来ます。

elementor_postedit

実際に公開した記事デザイン

post_preview

テーマビルダーの仕組み

では、有料版であるElementor Proはどうでしょうか。同じ様にイメージ図からご覧下さい。

Thematemplate

おじさん
おじさん
ぉぃぉぃ・・・なんか複雑すぎないか・・・


無料版はページ毎にテンプレートを読み込ませたり、ページ毎にデザインを作成し利用しましたが、有料版(Pro版)は「○○用デザイン」を作る事で、あとは自動的にコンテンツが反映されます。

んーなんとなく分かるったような、分かってないような・・・(ぼそっ)
おじさん
おじさん


では、当ブログを使って説明します。下の画像は今現在の当ブログの記事デザインです。もちろんですが、 Elementor Pro で作成されたデザインになります。

post_design

例えば、タイトルの下あたりに告知としてバナーを出したい!と思ったとします。その場合、テーマビルダーの投稿デザインを変更します。

postdesign_edit

赤い点線枠にバナーを入れる場合、画像ウィジェットを追加し、画像を反映させます。今回はテストなのでバナーじゃなくおじさんイラストを入れてみます。

おじさん
おじさん
おぃ、俺をそんなんに使うな!


postdesign_edit2

これで保存、反映するとどうなるか?もうわかりますよね?全ての投稿ページにこのおじさんイラストが表示されます。(※本当には保存する勇気がありませんでした)

おじさん
おじさん
当たり前だろ、意味がわからん。

もし、これを無料版でやろうとすると・・・最初の2〜3記事程度なら手作業で良いですが、数十記事になった時点では途方にくれます。

テーマビルダーの本当の凄さ

ページビルダーと呼ぶ理由、テーマビルダーと呼ぶ理由が少しはお分り頂けましたでしょうか?投稿にフォーカスして説明してきましたが、テーマビルダーの本当の凄さはここからと言っても過言ではありません。

細かな条件設定

「○○用デザイン」を作る事、そのコンテンツは自動的にそのデザインが反映されます。例えば、ブログサイトの「記事一覧ページ」(当ブログで言うトップページです)これも「記事一覧用デザイン」として作成する事で、自動的に記事が並んだページとなります。

おじさん
おじさん
ん?それはさっきも聞いたぞ?

慌てないで下さい!すごいのはここからです。例えば、記事のカテゴリが「日記」と「お知らせ」があるとします。日記はプライベートだから砕けた感じのデザインで、お知らせは重要なので、かっちりしたデザインにしたいと思ったとします。その場合、テーマビルダーには以下の設定が出来ます。

カテゴリー「日記」の記事一覧用デザイン

カテゴリー「お知らせ」の記事一覧用デザイン

この様に、カテゴリ単位でもデザイン反映条件を設定する事が出来ます。

displaycollections