どうも、スマコマのコマ太郎です。
今日はプラグイン「page builder by siteorigin」を使ってトップページをカスタマイズする方法をご紹介します。
「page builder by siteorigin」を使えば、ページをブロック化し、まるでサイドバーにウィジェットを配置するような操作でカスタマイズが行えるのです。
Page Builderの編集画面
直感的に使えるので、トップページを作り込みたいという人にピッタリのプラグインです。
「Page Builder by SiteOrigin」のインストールと初期設定については、↓↓ こちらをご覧ください。
もくじ
Page Builder by SiteOrigin を使ってトップページを自作してみよう
トップページのカスタマイズは、使っているテンプレート（テーマ）に依存する部分があります。
多くのテンプレートは、固定ページを使ってトップページを作り込むので、ここでは固定ページでトップページを作る方法をご紹介します。
ページビルダーのエディタの説明
では、まず固定ページを作ります。固定ページを作成するには、WordPress の管理画面にある [固定ページ]-[新規追加] をクリックします。
タイトル欄にタイトルを入力します。なおテンプレートによってタイトルが使われないことがあります。その場合は、タイトルをトップページとしておくと分かりやすいです。
ページビルダーに切り替える
エディタ画面の右上にある [ページビルダー]タブをクリックします。
ページビルダーのツールセット
エディタの上部にあるツールエリアに [ウィジェットを追加] [列を追加] [Layouts] などが並んでいます。
[Layouts] を使えば、テンプレートから選んでカスタマイズすることができます。ここでは機能の説明をしたいので、[Layouts] ではなく [ウィジェットを追加] をクリックしてみてください。
ウィジェットの追加
このように多数のウィジェットが表示されます。青いアイコンのものが「SiteOrigin Widgets Bundle」プラグインで追加されたウィジェットです。もし表示されていなければ、「SiteOrigin Widgets Bundle」プラグインをインストールしてください。
さらに追加できるSiteOriginウィジェット
なお、[プラグイン]-[SiteOrigin Widgets] にて、さらにウィジェットを追加することもできます。
列を作成する
では、固定ページの画面に戻りましょう。まず最初にやるのは、列を作ることです。なお１列のみであれば、列は作らなくてもいいです。
一応、列の作り方を説明するため、まずは列を作ってみましょう。
列を追加する
[列を追加] をクリックします。
すると列の作成画面になります。試しに３カラムの列を作ってみましょう。１を３に変更して [設定] をクリック。最後に [挿入] をクリックします。
列を追加した画面
これで３列の行を１つ作ることができました。同様に操作を行い、必要な行を追加していきます。
さらに列を追加した画面
↑ こちらは、３列、１列、２列の行を作った例です。なお、右側にある上下の矢印アイコンをドラッグすると、順番を入れ替えることもできます。
ウィジェットを配置する
では、ウィジェットを追加してみましょう。ウィジェットを配置したいブロックをクリックして選択します。
ウィジェットを配置する場所の選択
ブロックをクリックすると、色が濃くなり選択状態になります。この状態で [ウィジェットを追加] をクリックし、追加したいウィジェットをクリックします。
ウィジェットを追加した画面
配置できました。配置したウィジェットは、ドラッグして別のブロックへ移動させることができます。
配置したウィジェットにマウスカーソルを当てると、[編集]、[重複]、[削除] というメニューが表示されます。[重複] は日本語がおかしいのですが、コピーを作るという意味です。
以上が基本操作です。長くなったので、各ウィジェットの使い方は別の記事で説明することにしますね。
トップページを公開する
ここからの操作は、ページが完成してから行ってください。完成までは [下書きとして保存] しておきましょう。
トップページが完成したら、[公開] をクリックしてください。
WordPressのホームページ設定
次に WordPress の [設定]-[表示] をクリックします。
[ホームページの表示] で、[固定ページ] を選択し、[ホームページ] は上記で作成した固定ページを選びます。
[変更を保存] をクリックすれば完了です。これでカスタマイズしたトップページが表示されているはずです。
※使っているテンプレート（テーマ）によっては、独自の設定があることがあります。
この記事について、分かりにくい点、ご質問があればコメント欄よりお寄せください。
↓↓
