究極の WPBakery ドラッグアンドドロップページビルダーガイド

WPBakery Page Builder (旧名 Visual Composer) は、WordPress 用の最も売れているページ構築プラグインの 1 つになりました。 2011 年 5 月のリリース以来、このプラグインは爆発的に 150,000 人以上の顧客 (テーマにバンドルされたコピーを受け取った数十万人のユーザーは含まれていません)、200 個以上のアドオンと拡張機能、そして世界中で数百件の肯定的なレビューを獲得しました。ウェブ。

プラグインの独自のコピーをまだ所有していない場合は、おそらく過去にプレミアム WordPress テーマにバンドルされているのを見たことがあるでしょう。あるいは、Web 上のどこかで古い Visual Composer ガイドを見つけたことがあるかもしれません (これはプラグインの元の名前でしたので、少し紛らわしいことは承知しています)。現在 WPBakery Page Builder という名前になっているオリジナルの Visual Composer が最初にリリースされて以来、多くの変化があったため、この強力なプラグインを構成するすべての素晴らしい機能について説明したいと思いました。

WPBakery ページビルダーの紹介

よく知らない方のために説明すると、WPBakery Page Builder は WordPress 用のドラッグアンドドロップページビルダープラグインです。この便利なプラグインは、カスタムの外観の WordPress 投稿やページを作成する際の難しい部分を取り除きます。コーディングの知識は必要ありません。プラグインをインストールするだけで、投稿やページの作成を始めることができます。また、ほとんどの無料テーマや多くのプレミアムテーマと互換性があり、さらに Contact Form 7、Slider Revolution などの人気のあるプラグインと完全に互換性があります (これについては後ほど説明します)。

WPBakery ページビルダーのインストール

独自のページを作成する前に、WPBakery Page Builder をダウンロードしてインストールする必要があります。プラグインのコピーを確保するには 2 つの方法があります。独自のコピーを購入するか、プラグインが含まれるプレミアムテーマを購入するかのいずれかです。どちらのルートを選択しても、プラグインはまったく同じように機能します。これら 2 つの方法の唯一の違いはインストール方法です。

オプション 1: 独自のコピーを購入して WordPress サイトで使用する

WPBakery Page Builder のコピーを入手する最初の方法は、プラグインを自分で購入することです。 CodeCanyon にアクセスし、WPBakery Page Builder のコピーをバスケットに追加して（追加のサポートを追加することをお勧めします。これにより、プラグイン作成者からのサポートが 1 年間自由に受けられるようになります）、購入を完了します。

次に、ダウンロードページに移動します。購入したばかりの WPBakery Page Builder プラグインの横にある緑色の [ダウンロード] ボタンをクリックし、[インストール可能な WordPress ファイルのみ] を選択します。

次に、WordPress ダッシュボードにログインし、[プラグイン] > [新規追加] に移動します。画面上部の [プラグインのアップロード] ボタンをクリックします。

CodeCanyon からダウンロードした WPBakery Page Builder zip ファイルを選択します。次に、クリックするだけでプラグインをインストールしてアクティブ化します。

プラグインを購入したため、アクティベーションプロセスを完了するにはライセンスコードも追加する必要があります。画面上部のリンクをクリックし、次に巨大な青いボタンをクリックして、WPBakery Page Builder のコピーをアクティブ化するだけです。

これにより、WPBakery が購入を確認できるポータルが開きます。大きな緑色の承認ボタンをクリックします。心配しないでください。WPBakery に許可を与えているのは、あなたのユーザー名/メールアドレスが実際に WPBakery Page Builder のコピーを購入したことを確認するためだけです。

プロンプトに従ってアクティベーションを完了し、WordPress ダッシュボードに戻ります。これで構築を開始する準備が整いました。

オプション 2: WPBakery Page Builder (旧 Visual Composer) が WordPress テーマにバンドルされている

WPBakery Page Builder または古い Visual Composer でテーマを購入した場合、インストール方法は異なります。また、作成者によっても異なる場合があります。 Total などの WPExplorer テーマを使用している場合にプラグインをインストールする方法を説明します（他のほとんどのプレミアムテーマとほぼ同じであるはずです）。

まず、WordPress テーマをダウンロードしてインストールする必要があります。 Themeforest からテーマを購入した場合、WPBakery Page Builder をダウンロードするのと同じプロセスです。 Themeforest アカウントにログインし、ダウンロードページに移動します。次に、テーマを見つけてダウンロードボタンをクリックし、インストール可能な WordPress ファイルのみを選択します。

次に、WordPress インストールにログインし、外観 > テーマ > 新規追加をクリックします。次に、ページの上部にある [テーマをアップロード ] オプションをクリックします。インストール可能な WordPress ファイルを見つけるには、ダウンロードした zip ファイルを開く必要があります。これは、Total テーマには、プレミアムプラグイン、サンプルデータ、PSD ファイルなどの追加機能がバンドルされているためです。

ファイルを見つけたら、テーマをアップロード、インストール、アクティブ化できます。アクティベーション後、Total は WPBakery Page Builder などの推奨プラグインをインストールするよう求めます。

リンクをクリックするだけでプラグインのインストールを開始できます。一括操作のプルダウンから [インストール] を選択し、インストールするすべてのプラグインにチェックを入れて、[適用] をクリックします。

やるべきことはそれだけです！ Envato 経由で WPBakery Page Builder をアクティブにする必要はありません。独自のプラグインのコピーではなくテーマを購入したため、確認するためのライセンスコードがなく、プラグインのアップデートが行われるまではプラグインのアップデートにアクセスできません。テーマの作成者によって提供されます。

もちろん、更新をより早く受け取るために独自のコピーを購入したい場合は、確かにそうすることができますが、テーマで WPBakery Page Builder を使用する必要はありません。これで、プラグインの実際の使用に進むことができます。

WPBakery ページビルダーの使用を開始する

WPBakery Page Builder がインストールされたので、プラグインの設定を開始します。 WordPress ダッシュボードに Visual Composer オプションが表示されるはずです。それをクリックして設定ページを開きます。

[一般設定] タブには、小さな画面でのレスポンシブ要素のスタックを有効または無効にする簡単なオプションが含まれています (そのため、標準の 3 列の行を 3 つの単一列の行にすることができますが、モバイルでは 3 列の行を縮小することができます)。、Google フォントのサブセットを選択し、WPBakery Page Builder のガイド付きツアーを再度オンにするためのレストボタンを選択します。

Web サイトで複数のユーザーロールを使用している場合は、WPBakery Page Builder のロールマネージャーが必ず役に立ちます。この設定ページでは、役割に基づいて Visual WPBakery Page Builder のさまざまな機能へのユーザーアクセスを制限できます。この方法では、編集者をブログページのみに制限し、投稿者には何もアクセスできないようにしながら、管理者にすべての機能へのアクセスを許可できます。

これについてはインストール時に前述しましたが、プラグインの独自のコピーを購入した場合は、[製品ライセンス] タブでライセンスコードを確認できます。 WPBakery Page Builder のコピーがテーマにバンドルされている場合は、このセクションを無視してかまいません。

ページビルダーの要素

WPBakery Page Builder には、ページに追加したい多くの機能に対応する 34 以上の標準ページビルダー要素が付属しています (上のスクリーンショットにはすべてが表示されており、さらに後ほど説明する Contact Form 7 要素も含まれています)。要素の多くには、色、境界線、パディング、余白、カスタム CSS、アニメーションなどの追加オプションが含まれています。含まれるものの簡単な概要は次のとおりです。

行はページのページです。 row 要素を使用して列を作成し、他のすべてのページ要素を挿入します。
テキストブロック はその名の通り、テキストのブロックです。標準の WordPress WYSIWYG エディタを使用すると、このモジュールでテキストを追加したり書式設定したりできます。
アイコンには、FontAwesome、Open Iconic、Typicons、Entypo、Linecons、Mono Social のアイコンライブラリのフォントアイコンが含まれます。
区切り文字とテキスト付き区切り文字は、ページ上に作成したセクション間に改行（またはテキスト）を作成する方法です。
メッセージボックスは、メモ、アラート、その他のボックス内のメッセージを追加するのに最適です。
Facebook、Tweet、Google+、Pinterest はすべて、作成中のページをユーザーが共有できるように追加できるシンプルなソーシャル共有ボタンです。
よくある質問 は、ユーザーがページを読み進めるときに表示できる非表示のコンテンツを追加するために使用できる切り替えボタンです。
単一画像 は、サイズ変更、アニメーション、リンクなどのオプションが追加された単純な画像です。
タブ、ツアー、アコーディオンは、非表示または折りたたみ可能なコンテンツが含まれている点で FAQ に似ていますが、最初のセクションが開いています。
ページング可能コンテナは基本的なコンテンツスライダーです（ただし、各コンテナ「ページ」にはほぼすべてのページビルダー要素を挿入できます）。
カスタム見出しを使用すると、カスタムフォント、サイズ、色などを使用してセクションに独自の見出しを簡単に追加できます。
ボタンを使用すると、他のページや外部 Web サイトへのリンクを追加できます。
行動喚起は、ユーザーの注意を引き、説得力のあるコンテンツを追加できるボタンが追加されたコールアウトボックスです。
ウィジェット化されたサイドバーを使用すると、ページ上の任意の場所に独自のカスタムサイドバーを挿入できます。
ビデオプレーヤーを使用すると、WordPress でサポートされているさまざまなビデオ形式を簡単に挿入できます。
Google マップも簡単なオプションです。Google マップのコードを貼り付けるだけで、ページに地図を挿入できます。
進捗バー、円グラフ、円グラフ、折れ線グラフはすべて、データやスキルをグラフ化または表示する方法です。
空白スペースを使用すると、要素間に垂直方向の区切りを簡単に追加できます。
ポスト、メディア、ポストメーソンリー、およびメディアメーソンリーグリッドはすべて、ページに追加できるカスタムグリッドです (ポストまたはメディアタイプを組み合わせて一致させるオプションがあります)。

このプラグインには、必要に応じて独自のサイドバーを作成するために使用できる 8 つのウィジェット要素も含まれています。これらは、サイドバーが通常のページの場所にないカスタムランディングページを作成する場合、またはウェブサイト全体が同じサイドバーを使用する 2 つのランディングページがない大規模なランディングページネットワークである場合に役立ちます。

WPBakery ページビルダー拡張機能

基本的な Visual Compose 要素は、最初に使用するのに最適ですが、最終的にはカスタムページレイアウトを作成するためにさらに多くの要素が必要になる場合があります。これは拡張機能を介して可能です。 WPBakery Page Builder 拡張機能には、いくつかの異なるソースがあります。

WPBakery Page Builder を拡張する最初の方法は、テーマを使用することです。良い例は、39 の追加ページビルダー要素を含む Total WordPress テーマです。これらは Total の機能を利用できるように、Total にのみ含まれているため、使用するにはテーマがインストールされ、アクティブになっている必要があります。合計には、カスタム投稿タイプ（紹介、スタッフ、ポートフォリオ）、カスタムギャラリー、シンプルなスライダー、ソーシャルなどの拡張機能が含まれます。これにより、必要なコンテンツを必要な場所に簡単に追加できるようになります。

テーマに拡張機能が含まれていない場合は、サードパーティの WPBakery Page Builder 拡張機能をインストールできます。これらは無料から 55 ドルまであり、CodeCanyon やウェブ上でさまざまな作成者から入手できます。価格表やソーシャルなどの追加機能を追加したい場合は、無料の Symple Shortcodes プラグインが最適です (結局、WPExplorer で作成しました)。さらに多くのオプションを追加したい場合は、Ultimate Add-on などのプレミアムプラグインが適している可能性があります。文字通り何百ものオプションがあります。互換性のあるアドオンの完全なリストは WPBakery でご覧いただけます。

ただし、WPBakery Page Builder を拡張する場合は、すべてのテーマ拡張機能とプラグイン拡張機能を同時に使用しないことをお勧めします。多ければ多いほど良いというわけではありません。特にこの場合はそうです。これにより、多くの重複オプションが作成されるだけでなく、サイトの速度が大幅に低下します（各ページビルダー要素に大量のコードが組み込まれます）。したがって、自分にとって最適な拡張機能を選択し、そのまま使い続けてください。

バックエンドとフロントエンドの編集

WPBakery Page Builder を使用すると、ページの構築および編集方法に制限がありません。この強力なプラグインを使用すると、モジュラーバックエンドまたはビジュアルフロントエンドから変更を加えることができます。

ビルダーバックエンドエディター

バックエンドエディタの使用を選択した場合、各要素はモジュール要素として表示され、所定の位置に挿入、ドラッグアンドドロップできるようになります。この方法は、ページの見た目を表すワイヤーフレームをすばやくレイアウトしたい場合に最適です。また、サーバーやインターネット接続が遅い場合は、フロントエンドよりも高速になる可能性があります。

バックエンドエディタは非常に使いやすいです。 バックエンドエディタの青いボタンをクリックするだけで、編集中のページまたは投稿のページビルダーが有効になります。

次に、ターコイズ色のボタンをクリックして+ 要素を追加します。

ここから、必要なすべてのページ要素の挿入を開始できます。

フロントエンドエディター

フロントエンドエディタは基本的にリアルタイムのビジュアルエディタであるため、最終ページがどのように表示されるかをよりわかりやすく表示します。これにより、バックエンドエディタと同じページビルダー要素をすべて挿入できるようになり、モジュールの代わりに実際にそれらの要素を表示できるという利点も得られます。 300 ピクセルの画像が実際にどのくらいの大きさに見えるか、または #6e2f93 16 進値を持つ紫色のボタンが実際にポップするかどうかを確認できます。

フロントエンド編集を有効にするには、ページまたは投稿の 2 つのフロントエンドエディタオプションのいずれかをクリックします。

これにより、画面が更新され、バックエンドエディターと同じページ構築オプションを備えた投稿またはページのライブフロントエンドプレビューが表示されます。

クリックするだけで要素の追加を開始できます。ここでの主な違いは、要素を挿入するときに要素を確認できることと、上部バーのプレビューオプションを使用して、デスクトップ、ノートパソコン、タブレットでページがどのように表示されるかを把握できることです。電話も。

ページ要素の追加と編集

バックエンドエディターを使用する場合でも、フロントエンドエディターを使用する場合でも、さまざまなページビルダー要素をカスタマイズするための同じオプションがあります。オプションは要素によって異なりますが、要素を挿入した後に注意すべき重要な機能がいくつかあります。

行のオプション

ページに何を追加したい場合でも最初に行を挿入する必要があります。挿入したら、フロントエンド要素にカーソルを合わせると、青い行オプションが表示されます（バックエンドでは、これらは常に各行の上部に表示されます）。

最初の行アイコンをクリックすると、行をページ上の新しい位置にドラッグアンドドロップできます。
鉛筆アイコンをクリックすると、行設定のオプションが開きます。これらはテーマによって異なる場合があります。 Total テーマでは、ローカルスクロール ID、行ストレッチ (全幅行の場合)、全高行、最小高さ、モバイルでの可視性、コンテンツの中央揃え、高さの等しい列、アニメーション、タイポグラフィ、最大幅、列間隔のオプションが表示されます。、背景ビデオまたは視差、およびデザインオプション (余白、境界線、パディング、背景色/画像)。
列は、行内の列の数を定義します。最大 6 列のデフォルトオプションがありますが、必要に応じて独自のカスタム列レイアウトを定義することもできます。
プラスは、編集中の行の下に新しい行を追加します。
複製アイコンは、現在の行とそのすべての内容 (行に挿入したすべての要素) を複製します。これは、同じページ上で行レイアウトを複数回再利用する場合に最適です。
ゴミ箱とは、単に行全体とその内容を削除することです。

列のオプション

フロントエンドエディタで行にカーソルを置くと、黄色の列オプションも表示されます（バックエンドでは、各列の上に同じオプションとアイコンが表示されます）。

最初の列アイコンは行と同じです。これをクリックすると、行内の列をドラッグアンドドロップして並べ替えることができます。
鉛筆は一般的な列設定です。行と同様に、列のオプションは使用しているテーマによって異なる場合があります。 Total では、モバイルでの可視性、アニメーション、タイポグラフィ、最小高さ、デザインオプション (余白、境界線、パディング、背景)、応答性設定 (デバイスに基づくカスタムオフセット、幅、または非表示のオプション) のオプションが利用可能です。
列の場合、プラス アイコンを使用すると、要素が列の先頭、すでに挿入されている他の要素の上に追加されます。
繰り返しますが、ゴミ箱 アイコンは、列全体とその内容を削除します。列を削除した後、残りの列のサイズは維持されるため（3 つの列のうち 1 つを削除しても、残りの 2 つの列は 1/3 のサイズの列のままです）、削除後に列幅を編集することを忘れないでください。

ページ要素のオプション

行または列内でプラスアイコンを使用してページ要素を挿入します。上のスクリーンショットではメッセージボックスを追加しました。要素を挿入すると、設定が自動的に開きます。すでに追加した要素を編集するには、フロントエンドエディタまたはバックエンドエディタで要素にカーソルを合わせるだけで、次のオプションが表示されます。

鉛筆アイコンをクリックすると設定が開きます (これについては後述します)。
複製アイコンは、ページ要素をそのまま (設定などすべて) 複製します。
最後にゴミ箱はページビルダー要素のみを削除します。他のすべての要素はそのままにして、挿入した行または列から削除されます。

ページ要素の一般オプション

新しい要素を挿入するか、要素の鉛筆アイコンをクリックすると、ページビルダー要素の設定が開きます。これらは (ほとんどの場合) 複数のタブに分割されており、利用可能なすべてのカスタマイズオプションを簡単に確認できます。 [設定] タブに加えて、右上隅に歯車アイコンがあり、選択した設定をプリセットとして保存し、後で再利用したり、この特定の要素を挿入するたびに自動的に使用されるデフォルト。

[全般] タブには、ページ要素の一般的なオプションが含まれています。これらは、挿入する要素によって異なります (ただし、どの場合でも、編集はドロップダウン、カラーピッカー、チェックボックス、またはテキストボックスを使用するのと同じくらい簡単です)。たとえば、上のスクリーンショットのメッセージボックスには、スタイル、形状、色、アイコン、テキスト、アニメーションのオプションが含まれています。ただし、代わりにボタンを挿入すると、テキスト、URL、スタイル、形状、色、サイズ、配置、アイコン、アニメーションのオプションが表示されます。

ページ要素のデザインオプション

デザインオプションタブは、ほぼすべてのページビルダー要素に表示される 2 番目の標準タブです。ここから、カスタムの背景 (色または画像)、境界線、パディング、マージンを要素に追加できます。コントロールを簡素化するオプションにより、CSS ボックスのオプションが減り、各オプション（マージン、境界線、パディング）に 1 つの汎用値を入力できるようになります。覚えておくべき注意点が 1 つあります。背景を適用すると、その背景は境界線内に含まれます。したがって、パディングを増やすと、要素の周囲に追加した表示される背景が増加しますが、マージンを増やすと、ページ要素の周囲の空のスペースが増加します（行/その後ろのページ）

もちろん、挿入するモジュールによっては、ページ要素にさらに多くのタブが含まれる場合があります。たとえば、ビルダーのポストグリッドには、データ設定とアイテムデザインのオプションタブが追加されています。また、Total Staff Grid などの拡張機能を介してカスタムページ要素を使用している場合は、さらに多くのオプションを組み込むことができます（クエリオプション、カスタム画像のトリミング、メタ、ソーシャルリンク、抜粋など）。 .) 拡張機能の作成者が何を含めたかに応じて異なります。

注: 要素の包括的なリストは、Total Builder Modules Guide で確認できます。ただし、各モジュールの動作を学ぶ最善の方法は、ビルダーを試してみることです。テストページを作成し、要素の挿入と編集を練習します。すぐにコツを掴んで、プロのようにページを作成できるようになります。

WPBakery ページビルダーの詳細オプション

より上級のユーザー向けには、WPBakery ページビルダー内にカスタムショートコードをページビルダーに追加したり、カスタムメディアグリッドを作成したりするために使用できるいくつかの追加オプションがあります。

1 つ目はショートコードマッパーです。このオプションは WPBakery Page Builder 設定内にあり、独自のカスタムショートコードをビルダーにマップするために使用できます。これは、デフォルトでは Visual Composer に含まれていないお気に入りのショートコード (価格表用のものなど) がある場合に最適です。

2 番目の高度なオプションは、付属のグリッドビルダーです。この機能を使用すると、コンテンツ用の独自のカスタムレイアウトを使用してカスタムグリッド（メディアグリッドや投稿グリッドと同様）を作成できます。たとえば、丸い画像を使用したカスタムのブログ投稿グリッド、太字のカスタムフォントで投稿者の名前、カスタムの抜粋の長さ、「続きを読む」ボタン、推奨製品にリンクする 2 番目のボタンを作成できます。分かりましたか?要素、色、余白、境界線などの豊富なオプションを使用して、任意のグリッドレイアウトを構築できます。

まとめ

WordPress と WPBakery Page Builder (旧 Visual Composer) を使用してできることはたくさんあります。ページビルダーの動作を確認したい場合は、ビルダーを使用して作成できるさまざまなスタイルやレイアウトを紹介する Total テーマのデモをご覧ください。

何かを見逃した場合はお問い合わせください。 WPBakery Page Builder (旧 Visual Composer) とその仕組みについて知りたいことがあれば、喜んでお知らせします。下にコメントを残してください。読んでくれてありがとう！

究極の WPBakery ドラッグ アンド ドロップ ページ ビルダー ガイド

WPBakery ページ ビルダーの紹介