Page Builder by SiteOrigin の基本的な使い方

どうも、KoMAです。

今日はプラグイン「page builder by siteorigin」を使ってトップページをカスタマイズする方法をご紹介します。

「page builder by siteorigin」を使えば、ページをブロック化し、まるでサイドバーにウィジェットを配置するような操作でカスタマイズが行えるのです。

page builder by siteoriginを使ってページを作る

直感的に使えるので、トップページを作り込みたいという人にピッタリのプラグインです。

「Page Builder by SiteOrigin」のインストールと初期設定については、↓↓ こちらをご覧ください。

あわせて読みたい記事
どうも、KoMAです。 今日はトップページをもっとおしゃれにカスタマイズしたい、そんなあなたにピッタリのプラグインをご紹介しようと思います...

トップページを自作してみよう

トップページのカスタマイズは、使っているテンプレート(テーマ)に依存する部分があります。

多くのテンプレートは、固定ページを使ってトップページを作り込むので、ここでは固定ページでトップページを作る方法をご紹介します。

ページビルダーのエディタの説明

では、まず固定ページを作ります。[固定ページ]-[新規追加] をクリックします。

タイトル欄にタイトルを入力します。なおテンプレートによってタイトルが使われないことがあります。その場合は、タイトルをトップページとしておくと分かりやすいです。

エディタ画面の右上にある [ページビルダー]タブをクリックします。

エディタの上部にあるツールエリアに [ウィジェットを追加] [列を追加] [Layouts] などが並んでいます。

[Layouts] を使えば、テンプレートから選んでカスタマイズすることができます。ここでは機能の説明をしたいので、[Layouts] ではなく [ウィジェットを追加] をクリックしてみてください。

このように多数のウィジェットが表示されます。青いアイコンのものが「SiteOrigin Widgets Bundle」プラグインで追加されたウィジェットです。もし表示されていなければ、「SiteOrigin Widgets Bundle」プラグインをインストールしてください。

なお、[プラグイン]-[SiteOrigin Widgets] にて、さらにウィジェットを追加することもできます。

列を作成する

では、固定ページの画面に戻りましょう。まず最初にやるのは、列を作ることです。なお1列のみであれば、列は作らなくてもいいです。

一応、列の作り方を説明するため、まずは列を作ってみましょう。

[列を追加] をクリックします。

すると列の作成画面になります。試しに3カラムの列を作ってみましょう。1を3に変更して [設定] をクリック。最後に [挿入] をクリックします。

これで3列の行を1つ作ることができました。同様に操作を行い、必要な行を追加していきます。

↑ こちらは、3列、1列、2列の行を作った例です。なお、右側にある上下の矢印アイコンをドラッグすると、順番を入れ替えることもできます。

ウィジェットを配置する

では、ウィジェットを追加してみましょう。ウィジェットを配置したいブロックをクリックして選択します。

ブロックをクリックすると、色が濃くなり選択状態になります。この状態で [ウィジェットを追加] をクリックし、追加したいウィジェットをクリックします。

配置できました。配置したウィジェットは、ドラッグして別のブロックへ移動させることができます。

配置したウィジェットにマウスカーソルを当てると、[編集]、[重複]、[削除] というメニューが表示されます。[重複] は日本語がおかしいのですが、コピーを作るという意味です。

以上が基本操作です。長くなったので、各ウィジェットの使い方は次の記事で説明することにしますね。

トップページを公開する

ここからの操作は、ページが完成してから行ってください。完成までは [下書きとして保存] しておきましょう。

トップページが完成したら、[公開] をクリックしてください。

次に [設定]-[表示] をクリックします。

[ホームページの表示] で、[固定ページ] を選択し、[ホームページ] は上記で作成した固定ページを選びます。

[変更を保存] をクリックすれば完了です。これでカスタマイズしたトップページが表示されているはずです。

※使っているテンプレート(テーマ)によっては、独自の設定があることがあります。

この記事について、分かりにくい点、ご質問があればコメント欄よりお寄せください。

 コメント/質問、お気軽にどうぞ。

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

増えてしまったリビジョンを一括で削除し、最適化できるプラグイン

トップページをおしゃれに自作カスタマイズしたいなら、このプラグイン

HTMLサイトマップを用意してみよう

HTMLサイトマップを生成できるキャッシュ機能付きプラグイン

ユーザー名を偽装する

ログイン ユーザー名をセキュリティ向上のため隠すには?

All In One WP Security

Securityプラグインを入れてセキュリティ対策(初心者向け)

XMLサイトマップを作成するプラグイン

WordPressでXMLサイトマップを作成するなら、このプラグイン