WordPressにページビルダー機能を無料で追加できるプラグイン、SiteOrigin PageBuilderを使ってサクッとWeb制作。今回はウィジェット編です。
前回はPageBuilderを使ってWebサイトのレイアウトを作ってみました。ここでは作成したレイアウトにウィジェットを配置してみます。
PageBuilderでウィジェットを使う方法
作成したレイアウトにウィジェットを配置
前回作成したレイアウトにウィジェットを配置してみましょう。
ウィジェットを配置するには「Add Widget」ボタンを押してウィジェット選択パネルを開きます。
ウィジェット選択パネルでは配置できるウィジェットが表示されます。この中から配置したウィジェットを選択してください。
ウィジェットは１つの枠（グリッド）に複数配置することができます。１つの枠に複数配置する場合は縦に並んで配置されます。
ウィジェットを横並びにするには、横並びのレイアウトを作成する必要があります。
例えばバナー画像を横並びに３列で表示したい場合は以下のようにレイアウトを作成し、各グリッドに画像ウィジェットを配置してください。
グリッドの中にPageBuilderを設置する
PageBuilderは作成したレイアウト（グリッド）の中にさらにPageBuilderを設置し、入れ子状にすることが可能です。
入れ子状態を作るには「Layout Builder」ウィジェットを設置すればOK。
設置したLayoutBuilder（子）でも同様にレイアウトを作成し、ウィジェットを配置することができます。
PageBuilderに設置したウィジェットの設定方法
配置したウィジェットをマウスオーバーするとメニューが表示され以下のような操作が可能です。
- Edit: ウィジェットの設定
- Duplicate: ウィジェットの複製（設定内容を保ったまま）
- Delete: 配置したウィジェットの削除
設定画面を開くには、表示されたメニューの中から「Edit」をクリックしてください。各ウィジェットに用意された設定項目を個別に設定することができます。設定が完了したら「Done」ボタンを押すことで設定内容が保存されます。
ウィジェットエリアにPageBuilderを配置
PageBuilderは投稿ページや固定ページだけでなく、ウィジェットエリアでも使用することができます。
ウィジェットエリアでPageBuilderを使用するには、外観 > ウィジェットでウィジェットページを開き、PageBuilderを設置したいエリアに「Layout Builder」を配置してください。
「Open Builder」を押してLayoutBuilderを開くと、投稿ページと同じレイアウト作成ページが表示されます。ここでは投稿ページと同じ方法でレイアウトの設定やウィジェットの設置が可能です。
