ホームページ制作京都ファンフェアファンファーレトップ > Web制作・Web関連 > WordPressサイトのヘッダーウィジェットを使ってヘッダーをカスタマイズする

WordPressサイトのヘッダーウィジェットを使ってヘッダーをカスタマイズする

WordPressをカスタマイズする場合の方法のひとつとして、WordPressサイトのヘッダーウィジェットを使ってヘッダーをカスタマイズする方法についてお伝えします。

WordPressテーマにウィジェット機能がある場合、WordPress管理画面の「外観」→「ウィジェット」から、各エリアのウィジェットを設定、編集することができます。

テーマ内にヘッダーエリアのウィジェットが設置されていない場合は、こうした方法でヘッダーを編集することはできません。ウィジェット機能を利用したカスタマイズを行うためには、WordPressテーマをカスタマイズしてウィジェットを設置することが必要になります。

WordPressサイトのヘッダー部分にウィジェット機能が設置されている場合、このウィジェットの編集によって、ヘッダーのデザイン設定などを行うことができます。

今回は、ヘッダーウィジェットを用いたWordPressカスタマイズについてお伝えしていきます。

WordPressサイトのヘッダーウィジェット

WordPressサイトを構成するテーマ（テンプレート）の中にヘッダーウィジェットに関する機能が組み込まれている場合、ウィジェットエリアの表示において、「ヘッダーウィジェットエリア」といった名称で設定可能な部分が存在しています。

このWordPressヘッダーウィジェットの有無は、テーマの仕様に依存していますが、WordPressテーマのheader.phpを編集してヘッダーにウィジェットエリア追加するカスタマイズも可能です。

WordPressテーマのheader.phpを編集してヘッダーをカスタマイズする

ただしWordPressテーマによっては、ヘッダーウィジェットエリアを追加しただけではうまく機能せず、下手に設定をすると全体的なレイアウト崩れの原因にもなるため、新規設置には注意が必要です。

ヘッダーウィジェット機能がある場合

もし使用WordPressテーマにフッターウィジェット機能がある場合やカスタマイズによってヘッダーウィジェットを新規設置した場合は、WordPress管理画面のウィジェット設定によって編集が可能です。

それではWordPressにヘッダーウィジェット機能がある場合の設定編集方法に移りましょう。

ウィジェットの設定画面で「ヘッダーウィジェットエリア」を設定する

WordPressのヘッダーをカスタマイズするために、WordPressウィジェットを設定・編集する場合には、WordPress管理画面にログインした後、「外観」→「ウィジェット」を選択します。

ヘッダーウィジェットエリアをクリックしてオープン

ウィジェットの設定画面にヘッダーやフッター、サイドバーに関する各エリアのウィジェット設定項目がありますので、今回はヘッダーウィジェットエリアをクリックして、オープンし、使用可能ウィジェットのリストの中から、ヘッダーで使用するウィジェットを選びドラッグしてヘッダーウィジェットエリアへとドロップします。

WordPressテーマによってはヘッダー専用のウィジェットが用意されている

WordPressカスタマイズやWordPressプラグインの追加によって、WordPressウィジェット機能を新設していない場合は、純正のウィジェットのみが選択可能ですが、WordPressテーマによっては、ヘッダーウィジェットに設置するのに適した専用のウィジェットが用意してある場合があります。

ヘッダーウィジェットの使用でレスポンシブが崩れることも

ヘッダーウィジェットを未使用の状態で、レスポンシブ未対応のWordPressテーマをレスポンシブ対応にカスタマイズした後に、改めてヘッダーウィジェットを使用すると、「ヘッダーウィジェットエリア」がレスポンシブ未対応のままになっており、急にWordPressサイトのレイアウトが崩れたり、モバイルフレンドリーサイトではなくなってしまう場合もありますので注意が必要です。