WordPressのページビルダープラグインがすごいので使ってみた

Pocket

WordPressでコードを書かずにオリジナルサイトが作れるページビルダーを使ってみました。

Wordpressを使ったサイト制作では、テンプレートを使用するかゼロからコードを書いていく方法があります。どちらにしてもページのレイアウトを変更するにはコードを修正する必要があり、HTMLやPHPの知識がないとかなり大変なことに。

そんな時はこのページビルダープラグインを使うといいかも。ドラッグ&ドロップでコンテンツを配置していくだけで自由にサイト構築できてしまいます。

WordPressでコード書かずにサイトを作れるプラグイン

とはいえ最初からWordpressにそのような機能が搭載されているわけではなく、「Page Builder」というプラグインを使って機能を追加する必要があります。

Page Builder by SiteOriginをインストール

PageBuilderは他のプラグインと同様、プラグインの新規追加画面で「Page Builder」と検索すれば見つかります。

Page Builder by SiteOrigin
wordpress-pagebuilder-484-01

インストールが完了した後は有効化を忘れずに。PagebBuilder単体でもレイアウトの作成は可能なんですが、便利なウィジェットも用意されているのでそちらも合わせてインストールしておきます。

SiteOrigin Widgets Bundle
wordpress-pagebuilder-484-02

PageBuilderの簡単な使い方

PageBuilderはウィジェット画面からレイアウトを作成することができます。外観/ウィジェットをクリックして、ウィジェットページを開き、「Layout Builder」をウィジェットエリアに配置します。
wordpress-pagebuilder-484-03

設置したらエリアに「Open Builder」ボタンを押してレイアウト設定画面を開きます。レイアウト画面ではカラムレイアウトの作成やウィジェットの配置、設定をすることができます。
wordpress-pagebuilder-484-04

カラムレイアウトを作成するには、上にあるメニューの「Add Row」ボタンを押します。カラムの数やカラムごとの幅を設定可能。作れたら右下のボタンで完了。
wordpress-pagebuilder-484-05

さらに異なるレイアウトのカラムを設置したい場合は、もう一度AddRowを押すことでいくつでも積みかせねていくことができます。
wordpress-pagebuilder-484-06

レイアウトができたら次はウィジェットを配置。配置したいカラムを選んで「Add Widget」をクリック。
wordpress-pagebuilder-484-07

設置できるウィジェット一覧が表示されるので設置したいものを選択します。
wordpress-pagebuilder-484-08

配置したウィジェットは設定の変更や複製ができ、ドラッグすることで別のカラムに移動することもできます。
wordpress-pagebuilder-484-09

後はこの作業を繰り返してページを作っていけばOK。
wordpress-pagebuilder-484-10

PageBuilderを投稿画面で使う方法

PageBuilderはウィジェット画面だけでなく、投稿画面からも使用可能です。
wordpress-pagebuilder-484-11

PageBuilderをクリックするとメニューが出てくるので、後は先ほどと同じ要領でカラムの作成やウィジェットの配置を行います。
wordpress-pagebuilder-484-12

レイアウトができたら、投稿エリアの右上にある「Revert to Editor」をクリックして作業を完了させましょう。作業が完了したら通常の投稿と同じように、公開ボタンか更新ボタンを押して内容を保存すれば完了です。

PageBuilder向けテンプレート「PressBuilder」

ページビルダーは無料でダウンロードすることができるため、どのテーマでも使用できるのですが、少し注意が必要。テンプレートの構造上、1カラムのLPのようなページを作りたくてもサイドバーが必ず表示されるなど使いづらいことがあります。

PressBuilderなら、あらかじめページビルダーに最適化されたテンプレートが用意されているため、1カラムでも3カラムでも自由なレイアウトが可能。

数クリックで簡単にインストールできるレイアウトテンプレートも用意されているのでページビルダーをフル活用することができます。
pressbuilder-520-01