HelloPress のメイン・サイドバーをカスタマイズする方法

Pocket

HelloPressとページビルダーを使ったメインエリア、サイドバーのカスタマイズをする方法を紹介します。

前回まではヘッダーとフッターを作成しました。ここではメインエリアとサイドバーのコンテンツを作成していきます。

HelloPressのメインエリアをカスタマイズ

HelloPressの初期設定

初期設定とページビルダーの使い方については以下のリンク先をご覧ください。

HelloPressのメインエリアのレイアウトを作成

レイアウトの作成方法はヘッダーレイアウトの作成方法ページビルダーの使い方をご覧ください。ここでは以下のようなレイアウトを作成しました(フロントページ用メインエリアに設置)。
HelloPressのメインエリアをカスタマイズする方法-01

メインエリアにコンテンツを配置

コンテンツの配置はこれまでやってきた、ヘッダー、フッターの配置と同じです。カラムを選択し、「Add Widget」ボタンを押してウィジェットエリアから配置したいウィジェットを選びます。

ここでは1カラムレイアウトの部分に、スライダーとサムネイルボックスを配置(サムネイルボックスの上には見出しウィジェットを配置)。
HelloPressのメインエリアをカスタマイズする方法-02

2カラムレイアウトの部分に、ヘッドラインリストとサムネイルリストを配置しました。どちらのウィジェットにも見出しウィジェットを追加で配置しています。
HelloPressのメインエリアをカスタマイズする方法-03

サイドバーにコンテンツを配置

続けてサイドバーエリアにもコンテンツを配置します。サイドバーはカラム分けなどを行わないため、1カラムのレイアウトを1つ作成します。
HelloPressのサイドバーをカスタマイズする方法-04

ここでは上から、検索フォーム、カテゴリー、メタ情報を配置してみました。
HelloPressのメインエリアをカスタマイズする方法-05

まとめ

ヘッダーからメイン、サイドバー、フッターの各コンテンツを作成してみました。最終的には以下のようなページが出来上がります(カテゴリータイトルは自動的に出力されるため、CSSで非表示にしています)。
hellopress-main-custom-492-06

今回作成したレイアウトパターンはほんの一例です。ウィジェットの配置や設定、レイアウトの設定など自由に作成できるため、HelloPressとページビルダーを使うことでオリジナルサイトを簡単に作ることが可能です。

ここまででトップページの作成は完了です。ページビルダープラグインではウィジェットエリアの他に投稿画面でもここまでと同じような方法でページを作成することが可能です。

オリジナルレイアウトの固定ページなどを作成する際に便利なので是非試してみてください。