直感操作でレスポンシブページ作成。WPプラグイン「ページビルダー(Page Builder)」

WordPress の問題点 − レイアウトのカスタマイズ性

WordPressを使い出した頃、あるいは使い慣れてきた頃、テーマやプラグインをはじめ「WordPress」そのものが持つ多くの可能性や簡便さに驚き、褒め称え満足することはあっても、不満は少ないかもしれません。

しかし、いつの間にか慣れてしまうと、もっと●●だったらいいのに、もっと●●したいのに、、なんらか不満が出てくるものです。

Webデザイナー、コーダーの方には朝飯前のことですら、Web系の知識がないことにはWordPressのカスタマイズは難しいのが実際のところです。

もちろん機能面に関してはプラグインを活用することでかなり補うことができます。ただしそれはあくまで機能面でのお話。「デザイン・レイアウト」についてはなかなか思うとおりになりません。

こういうレイアウトにしたい、こういうデザインを取り入れたい、、そこはどうしても「テーマ」に依存してしまう部分です。

そう、WordPressはその名のとおり「Word 感覚」でWebサイト・ブログを作ることができるのですが、こと「レイアウト」という面においてはなかなか思うとおりにいかないのです。

Word、いえ、パワーポイント（キーノート）をいじる時のような切り絵みたいな感覚で、WordPressサイトのレイアウトをカスタマイズしたい！という問題、悩みを抱えている人は少なくありません。

でも結局、コードやらタグやらhtmlやらのことを知らなければ・・・なのです。

プラグイン「ページビルダー」ならそんな悩みも解決？

そこで本日ご紹介するのがWordPressプラグイン「 Page Builder By SiteOrigin（ページビルダー）」です。

Page Builder（ページビルダー）は、「ドラッグ＆ドロップ操作」で視覚的かつ直感的にレスポンシブページを作るための無料プラグインです。

あたかもWordPressのサイドバーやフッターなどのウィジェットエリアを編集するのと同じ要領でページも編集することができます。

ホームページ作成ソフト「ホームページ・ビルダー（※）」をずっとずっとシンプルにしたようなものと思っていただくとわかりやすいかもしれません。

※ Webの知識がない方にも簡単にもホームページを作成できるようにするためのソフト（10年以上前、はじめてWebサイトを作った時にお世話になりました）

今回はそんなページビルダーの魅力や特徴、使い方をご紹介したいと思います。

目次

1. ページビルダーの概要、特徴
2. ページビルダーの導入方法、使い方、注意点
3. その他のレスポンシブページ作成事例
4. まとめ

ページビルダーの概要、特徴

まずは実例をご覧いただくのが一番早いでしょう。

ページビルダーをWordPressにインストールすると、新規ページを作るおなじみの画面に「Page Builder」というタブと操作メニューが加わります。

たとえば「サイドバーなし・１カラムのプレーンな全幅ページ」に

操作メニューを使ってレイアウトを決め、コンテンツを入れます。（ 詳しい使い方は後ほど 、作業工程の動画もありますよ）

あっという間にカスタムページができ上がります。（アクセスマップページを想定して作ってみました）

デモページはコチラから

しかも全自動でレスポンシブページになっています！

ドラッグ＆ドロップだけでレイアウトを作り（カスタムレイアウト）、ウィジェットパーツを使ってわずか数ステップでカスタムページを作ることができるのです。

■ ページビルダー特徴

• コーディング不要！ドラッグ＆ドロップ操作でレイアウトを自由にカスタマイズ
• ３ステップででき上がったページはなんとレスポンシブ仕様
• 大部分のWordPressテーマで使用可
• 通常のウィジェットパーツに加え、独自のウィジェットパーツが付属

ページビルダーの導入方法、使い方、注意点

それでは実際にどのように使うのかご紹介しましょう。まずはプラグインのインストールからです。

■ ページビルダーをインストール、有効化

1. 「WordPress ダッシュボード > 外観 > プラグイン > 新規追加」
2. 「Page Builder」と検索
3. 「いますぐインストール」をクリック
4. 「有効化」をクリック

「投稿 > 新規追加」画面、もしくは「固定ページ > 新規追加」画面に「Page Buider」という記事編集用のメニュータブと、操作メニューが表示されていればOKです。

■ ページビルダーの使い方

使い方については、さきほどご覧いただいたページ（下図）を例にとってご説明していきます。

実際の作業工程を録画してみましたので、先にぜひご覧ください。

※ でき上がったデモページはコチラから
※ デモに使っているのは WordPress 純正テーマ「Twenty Twelve」です
※ WordPress にGoogle Map を埋め込む方法

では、改めて確認していきましょう。

１）新規ページを追加、ページテンプレートを選択

ページビルダーは投稿ページであれ固定ページであれ使うことができますが、今回は固定ページの全幅ページ用テンプレートを使って作成します。

ダッシュボード > 固定ページ > 新規追加

２）ページのレイアウトを作る

「|||（Add Row）」というメニューから行を追加します。ここでは２カラムにしたいので、カラム数には「２」を入力し「Add（追加）」ボタンをクリック。

最初からあったウィジェットエリアの下に新しく２カラムのウィジェットエリアが追加されました。カラムの間の境界線を動かして横幅比率を変更します。

３）ウィジェット・パーツを挿入、編集する

レイアウトができ上がったら、次はウィジェット・パーツを挿入します。

画像を挿入するために「Image（PB）」というパーツを選択。

メディアライブラリから画像URLをコピーしておきます。

ウィジェット・パーツの編集ボタン（Edit）を押して、画像URLとリンク先URLを入力し「Done（完了）」ボタンを押します。

同様に、他のウィジェット・エリアにもウィジェット・パーツを挿入します。ここではテキストウィジェットを挿入しています。

ウィジェット・パーツの編集ボタン（Edit）を押して、内容を入力します。

２つ目のテキストウィジェットにも入力。

３つ目のウィジェットにはGoogleマップの埋め込みコードを挿入します。

参考）サイドバーを自在に簡単カスタマイズ。WPプラグイン「WooSidebars」

以上で完了！「公開」ボタンをクリックしてカスタムページのでき上がりです。

その他、行ごと削除したり、行の入れ替え、ウィジェット・パーツを複製することもできます（動画の最後のほうで紹介しております）

６カラムにすることだって簡単です。

■ ページビルダー使用上の注意

一点ご注意いただきたいのが、このページビルダーを使ってページを作成すると、他の「ビジュアルエディタ」「テキストエディタ」で作成、編集したコンテンツは無効化されるというか、自動で削除されます。。。お気を付け下さい。

その他のレスポンシブページ作成事例

さきほど作ったのは「アクセスマップ」ページを想定していますが、ビジネス系サイトのトップページを想定してカスタムページを作ってみました。

デモページはこちらから

構造的に見てみるとこうなっています。

ページビルダーでの編集画面はこうです。

さきほどのアクセスマップのページよりは複雑になっていますが、それでも大して時間をかけずにこのようなカスタムページが出来るのです。

他のプラグインと掛け合わせることで、さらに表現力に幅が出ますね。ちなみにスライドショー作成には以下のプラグインを使いました。

WordPressで簡単にスライダーを設置するプラグイン「Soliloquy」

「Soliloquy（ソリロクイ）」でスライドショーを作って、そのショートコードをテキストウィジェットに挿入しています。

まとめ

当初、あっさりとご紹介しようと思っていたのですが、いつの間にか超長文になってしまいました。

というのも日本語で解説されているサイトがほとんどなく、また、英語サイトでもほとんどなかったので、わたし自身も使い方のコツをつかむのに多少時間がかかったので、いつの間にか強く入れこんでしまったのかもしれません（笑）

一旦ページビルダーに慣れると、かなり自由にWebサイト、ページを作ることができます。これは使ってみないとわからないかもしれません。

htmlやcssなんかの知識があれば言う事がないでしょう。しかし、そのような知識がなくとも十分に活用できるのが、このプラグインの魅力です。他のプラグインと組合わせて、ぜひWordPressを楽しんでいただければと思います。

• Tweet
•