WordPressをJimdoみたいに変身させるプラグイン「Diviビルダー」がスゴい

2016年06月06日　16時24分更新

文●James George

ツイートする

レゴブロックのようにパーツを組み合わせてWebサイトを作れるのが「ページビルダー」。Jimdoなんかで、おなじみですね。「Diviビルダー」プラグインを使うと、WordPressがもっと手軽に使えるようになりますよ。

WordPressのユーザー、開発者として、私はフレームワークに夢中です。いろいろなフレームワークやプラグインを試すのが大好きで、深く掘り下げれば掘り下げるほどWordPressでできることが分かってきて、いつもワクワクさせられます。

WordPressの弱点の1つは、ページビルダーです。WordPressのドラッグ＆ドロップ式のページビルダーの質はまちまちで、使っているうちにページのテーマを壊したり、またはテーマにスタイルが上書きされてしまったり、たいていの場合、何らかの問題が起こります。WordPressのテーマページビルダーには、どこか限界があるように思えます。

私がいつも好んで使うテーマ「Divi」（前回SitePointで書いたDiviについての記事はこちら）には、専用のページビルダーが用意されています。（開発元の）エレガントテーマは、ページビルダーのプラグインを別に作った方がいい考えていたようですが、うれしいことに、ページビルダーのプラングインが先日公開されました。

メリット

プロジェクトを早く回せるよう、いくつかのテーマをライブラリにストックしてありますが、あらかじめ作り込まれたWordPressのテーマは微調整が効かないのが難点です。調整してカスタマイズしようすると、丸一日かかることもあります。できるからと言って、やりたいわけではありません。特に低予算だったり納期が短かったりするプロジェクトでは、もっと効率的でカスタマイズしやすいシステムを導入する必要があります。

どのテーマとも相性がいい

どのテーマにも新しいページビルダープラグインをインストールできます。つまり、テーマが決まれば、その後のカスタマイズは簡単にできるということ。特に、特定の動作をするテーマにはもってこいで、今までのように、テーマをハックしていじり倒さずに済みます。

ショートコードテーマの回避

モジュールページビルダーを使えることで、ショートコードに大きく依存したテーマのカスタマイズも容易になります。個人的な好みにもよりますが、ショートコードに依存したコンテンツの構造は好きではありません。コーディングで段落を毎回ラップさせたかったら、HTMLを使ってサイトを作るとよいでしょう。ビルダーだと、コンテンツを含めたモジュールを追加して、各ページを作っていきます。また、各モジュール自体のカスタマイズ調整もできます。

アップデートのしやすさ

既存のテーマを修正して、カスタマイズした内容が今後のアップデートでももきちんと適用されるのかを心配するよりも、ページビルダーを使ってサイトのページレイアウトを作成してしまえばよいのです。これはすばららしい選択肢で、たとえばテーマをアップデートした場合、テーマとコンテンツは別々になっているので、ページビルダーで作ったコンテンツはそのままでテーマのみアップデートできるからです。

ただ、これは諸刃の剣でもあります。テーマを追加するとき、たいていは子テーマを使うからです。ベースとなっているテーマをアップデートした場合、子テーマはカスタマイズした内容が失われないように守ってくれますが、Diviビルダーはプラグインです。「子プラグイン」なんてものは作れません。ベースコードなど、プラグイン自体をカスタマイズしてしまった場合、Diviビルダープラグインをアップデートした際に上書きされてしまう可能性があります。

Diviビルダーの対応方法はというと

Diviビルダーは、プラグイン内の指定エリアにコードとCSSを書くことで、アップデートの際に起こる問題を回避できます。各モジュールは、個別にクラスとCSSを追加できるセクションがあり、とても柔軟にカスタマイズができます。このほか、アップデートの際、テーマやプラグインのオプションをアップデートしたときと同様、各モジュールに適用されているCSSが引き継がれるのもメリットです。

レイアウト

想像できる限りどんなレイアウトでも作れます。コンセプトはシンプル。すべては積み重ねられる行でできています。各行は、さまざまなサイズの列と幅の組み合わせで作られ、行を積み重ねることで、無限のレイアウトが可能となります。

機能

Diviビルダーのプラグインには、パワフルで多くの機能が詰まったサイトを作れるように、46個のモジュールが詰め込まれています。すべてモジュール内で見つけられて、レイアウトモジュールに落とし込めるようになっています。

つまり、欲しい機能が好きなところに組み込まれた、欲しいままのサイトが作成できます。ランディングページ、サービスページ、美しすぎるケーススタディー、商品閲覧ページなど、どのようなページでも作れると考えてください。Diviビルダープラグインで使えるモジュール一覧はこちらです。

Accordion：アコーディオンのように伸縮可能な領域を作成して、たくさんの情報をコンパクトなスペースにまとめます。
Audio Player：MP3などのオーディオファイルをアップロードして、ページに埋め込めます。
Bar Counter：アニメーション化されたバーグラフのセットで、あらかじめ設定した値を示します。統計データなど、パーセンテージ表示などに役立ちます。
Blog：ページのどこにでもブログセクションを設けられるすばらしい機能です。コンテンツごとに違うカテゴリーを設けた場合など、特定のページで特定の投稿を表示するなどの高いカスタマイズ性があります。
Blurb：プラグイン内に画像やアイコンを置くセクションを作成できます。視覚的に訴え、多くのサイトで使われている一般的な機能です。
Button：CTAボタン、他のページやダウンロードリンクなどを作成できます。色、マウスオーバー時の状態、ストローク、ひいてはアイコンと、細かい部分まで編集できます。
Call To Action：Buttonモジュールと併せて、サイト訪問者が行動を起こしやすいように、背景に色をつけたり強調メッセージを表示したりできます。
Circle Counter：Bar Counterと同じ機能ですが、円形でデータを表示します。
Code：ページ内でカスタムコーディングが必要な場合、他のコンテンツとケンカせずにページ内のどこにでもコードが埋め込めます。
Comments：コメント欄が必要な場合、コメント欄が素敵な体験になるように、スタイルのカスタマイズができます。

Contact Form：ページ内のどこにでもカスタマイズされた連絡フォームを設置できます。
Countdown Timer：サイトにカウントダウンタイマーをつけたい場合に使います。カウントダウンの日数を設定できるので、大型イベントなどに使えます。また、ウェビナーやコンファレンスなどの登録ページなどにも便利です。
Divider：エレメント間に、空けるスペースを指定した区切り線を入れられます。
Email Optin：MailchimpやAweberなどのEメールマーケティングサービスに接続します。
Filterable Portfolio：デザイナーなら、ポートフォリオセクションを作って、経歴を見せつけられます。ソート機能もあるので、カテゴリー別に閲覧できます。
Gallery：画像が切り替わる、イメージギャラリーを作れます。画像をクリックするとライトボックスでの表示もできます。
Image：最大幅やフェードなどの切り替えエフェクト、他サイトへのリンクなどの追加を含め、ページに画像を配置できます。
Login：カスタマイズされたデザインで、メンバーがログインできます。