WordPress初心者の強い味方!プラグイン「Page Builder」でらくらくサイト制作

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年2月3日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

WordPressは、Webの知識がなくてもあっという間にウェブサイトが作れてしまう優れたソフトです。
今お読みのこういった記事も、ワープロソフトを使っているかのように簡単に書くことができます。

でも、「ちょっとサイトのレイアウトを変えたいな…」と思うような場面では、HTMLやCSSやPHPの知識が必要になってくるので、初心者の方には敷居が高いかもしれません。

そんな時の強い味方が、私もさんざんお世話になっているプラグイン「Page Builder by SiteOrigin」です。
このプラグインを使えば、ドラッグ&ドロップの操作だけで、複雑なレイアウトも思うがままなんです!
→ Page Builder by SiteOrigin – WordPress Plugins
 

インストール

  1. プラグインの新規追加で「Page Builder by SiteOrigin」と検索し、今すぐインストール>有効化します。
    170203pagebuilder01
     
  2. そして、「SiteOrigin Widgets Bundle」というプラグインも、同じく検索してインストールしましょう。
    170203pagebuilder02
    これは同じ作者のプラグインで、Page Builderで使える便利なウィジェットを追加することができます。
     

基本的な使い方

列を追加

  1. ページ作成画面を開くと、今まで「ビジュアル」「テキスト」の2つだったところに新たに「ページビルダー」のタブが追加されているのでクリックします。
    170203pagebuilder03
     
  2. するとPage BuilderのEdit画面に変わります。「列を追加」をクリックしてみましょう。
    170203pagebuilder04
     
  3. ここでは列の数と比率が設定できます。「Set row layout」で列の数を決めます。
    比率は数字を直接入力するか、中央のカラムとカラムの間の部分をドラッグすることでも変更できます。
    170203pagebuilder05
    設定できたら「終了」をクリック。
     
  4. 2列のカラムができました。
    170203pagebuilder06
    こうして、色々な比率のカラムをどんどん追加していくことができます。
    170203pagebuilder07
     

ウィジェットを追加

カラムが追加できたら、今度はウィジェットを配置していきます。

  1. ウィジェットを置きたい場所の列をクリックして(少し色が濃くなってますね)、「ウィジェットを追加」をクリック。
    170203pagebuilder08
     
  2. すると!こんなに沢山のウィジェットが現れます(使っているテーマやプラグインによって増減します)。画像を貼り付けられる「SiteOrigin Image」をクリックしてみましょう。
    これは先程追加でインストールした「SiteOrigin Widgets Bundle」のウィジェットです。
    170203pagebuilder09
     
  3. 列にウィジェットが配置されました。
    170203pagebuilder10
     
  4. ウィジェットをクリックすると、編集画面になります。「Choose Media」で、メディアライブラリから画像を選択したら「終了」をクリックします。
    170203pagebuilder11
     
  5. 一度配置したウィジェットは、「重複(翻訳が変ですが…どっちかというと複製ですね)」を押すと中身もそのままでコピーすることが出来ます。
    170203pagebuilder12

    170203pagebuilder13
     
  6. 行と行の間隔も簡単に調整できます。
    右上のスパナのマークから「行の編集」をクリック。
    170203pagebuilder14

    行のマージンやパディングの設定ができます。モバイル用の設定も別でできるので、PCではバッチリだけどスマートフォンだと微妙…、なんてこともありません。
    170203pagebuilder15
     
  7. こんな風に、どんどんウィジェットを配置していくと…
    170203pagebuilder16

    コードを書くことなく、あっという間にWebページが出来上がりました。
    170203pagebuilder17
     

そして、さらにスゴいのは、パーツを並べていくだけで自動的にレスポンシブ対応になっているところ。
170203pagebuilder18
ちょっとこの画像では分かりづらいですが、見ている端末の大きさに合わせてコンテンツを最適化してくれています。
 

ちょっと便利な使い方

このように簡単にページを作れる「Page Builder」ですが、配置するウィジェットが増えてくるとメンテナンスもなかなか大変です。
そんな時に便利なウィジェットも用意されているんです。

これは、STUDIO SEROの「プロフィール」のページです。
170203pagebuilder19

このページもPage Builderで作っていて、ひとり分のプロフィールはこれだけのウィジェットで構成されています。
170203pagebuilder20

例えばこのページに、どんどん他の人のプロフィールを追加していく場合、1行ずつコピーしていくのは手間ですよね。
行単位でのコピーはできますが、行の複数選択はできません。

そんな時役に立つのが、「レイアウトビルダー」というウィジェットです。
このウィジェットはなんと、ウィジェットの中にウィジェットを配置することができます!

  1. ウィジェットの一覧から「レイアウトビルダー」を選びます。
    170203pagebuilder21
     
  2. 「編集」をクリックすると、その中で更にウィジェット・列を追加することができます。
    170203pagebuilder22

    170203pagebuilder23
     
  3. 必要なウィジェットを配置できたら、「終了」をクリック。
    170203pagebuilder24
     
  4. この中にさっき配置したパーツが全部入っているので、右上のスパナのマークから「行の複製」をクリック。
    170203pagebuilder25
     
  5. そうすると、中身もそっくりそのままのウィジェットがコピーされました!
    170203pagebuilder26
    あとは、内容を他の人のプロフィールに書き換えればOKです。
     

今回は基本的な使い方をご紹介しましたが、まだまだ出来ることはたくさんあります。
Wordpressは敷居が高いな、と思っている方も、ぜひ「Page Builder」で素敵なサイトを作ってみてください。