WordPressテンプレート HelloPress のヘッダーをカスタマイズする方法

Pocket

WordPress用レスポンシブテンプレート「HelloPress」のヘッダーをカスタマイズする方法を紹介します。

HelloPressではページビルダープラグインを使うことで、コーディングを一切行うことなく、管理画面上でヘッダーコンテンツのカスタマイズが可能です。Webサイトの中でも最も目立つ部分を、ドラッグ&ドロップなどの簡単な操作で自由にレイアウトできます。

方法は以下から。

HelloPressのヘッダーコンテンツをカスタマイズ

HelloPressの初期設定

ページビルダープラグインやページビルダー用ウィジェットプラグインをインストールしておきます。HelloPressの初期設定についてはドキュメントをご覧ください。
HelloPressドキュメント

また、ページビルダーの基本的な使い方についてもドキュメントに記載しているのでそちらをご覧ください。
ページビルダーの基本的な使い方

HelloPressでヘッダーのレイアウトを作成する

ヘッダーのコンテンツをカスタマイズするには、ヘッダー用ウィジェットエリアにページビルダーを入れます。
HelloPressのヘッダーをカスタマイズする方法-01

ウィジェットを設置できたら「OpenBuilder」ボタンを押して、ページビルダーのレイアウト設定画面を開きます。
HelloPressのヘッダーをカスタマイズする方法-02

ここではヘッダーエリアにロゴと検索フォーム、お問い合わせ先などのメニューを配置してみます。まずはレイアウト画面でレイアウトを作成します。2カラムにしたいので「Add Row」ボタンを押して2カラムのレイアウトを作成します。
HelloPressのヘッダーをカスタマイズする方法-03

カラムの幅は、カラムの間にマウスを置いてドラッグすることで変更可能です。ここでは右側を少し狭くしておきます。幅の調整ができたら、右下の「Insert」ボタンを押してレイアウト設定を完了します。
HelloPressのヘッダーをカスタマイズする方法-04

HelloPressのヘッダーにコンテンツを配置する

レイアウトができたのでウィジェットを配置していきます。ウィジェットを設置したいカラムをクリックして有効化し、「Add Widget」ボタンを押します。
HelloPressのヘッダーをカスタマイズする方法-05

ロゴを設置したいので、ロゴウィジェットを選択。
HelloPressのヘッダーをカスタマイズする方法-06

設置されたウィジェットの設定画面を開き、画像を使用を選択して保存します。ロゴ画像の設定方法については「HelloPressの初期設定方法」をご覧ください。
HelloPressのヘッダーをカスタマイズする方法-07

次に検索フォームを設置します。右側のカラムをクリックして有効化し、「Add Widget」ボタンを押します。ウィジェット一覧から検索フォームを選択。
HelloPressのヘッダーをカスタマイズする方法-08

フォームウィジェットは特に設定を変更する必要がないので、続けてメニューウィジェットを設置します。「Add Widget」ボタンでウィジェット一覧を開き、メニューリストウィジェットを選択します。
HelloPressのヘッダーをカスタマイズする方法-09

メニューリストウィジェットの設定画面で表示したいメニューを選択します(表示されるメニューは、外観/メニューで作成したものです)。見出しは付けないので、タイトルは空欄に、レイアウトはインラインリストを選択します。
HelloPressのヘッダーをカスタマイズする方法-10

ここまででウィジェットの設置と設定が完了しました。右下の「Done」ボタンを押して保存します。
HelloPressのヘッダーをカスタマイズする方法-11

ウィジェット画面に戻って、ここでも保存ボタンを押します。
HelloPressのヘッダーをカスタマイズする方法-12

ページをリロードし、先ほど設置したウィジェットが表示されることを確認してください。
HelloPressのヘッダーをカスタマイズする方法-13

まとめ

レイアウトが完成したら、コンテンツ間のスペースをCSSで調整したりしながらデザイン部分を完成させていきます。CSSのカスタマイズが簡単にできるプラグインもあるのでこちらも合わせてご覧ください。
CSSジェネレータ

ヘッダー部分のレイアウトはWebサイトのトップになるため重要になります。HelloPressとページビルダーを使うことで簡単に自由度の高いレイアウトを作ることができます。