WordPressサイトのカスタムヘッダーを表示したいですか？
多くのWordPressテーマには、各ページの上部に位置するヘッダーがビルトインされています。重要なリンク、ソーシャルアイコン、サイト内検索、その他第一印象を良くするための要素を追加するためにカスタマイズする必要があるかもしれません。
この投稿では、WordPressのヘッダーをカスタマイズする方法と、サイト全体または特定のページ用にフルカスタムのヘッダーを作成する方法を紹介します。
WordPressのヘッダーとは？
ウェブサイトのヘッダーは、WordPressサイトの各ページの最上部で、おそらく訪問者が最初に目にする部分です。
サイトのロゴやタイトル、ナビゲーションメニューなど、ユーザーに最初に見てもらいたい重要な要素が表示されることが多い。
例えば、これは毎月何百万人もの読者が見ているWPBeginnerのヘッダーエリアです。
サイトのヘッダーをカスタマイザーすることで、ユニークなデザインを与えることができ、訪問者にとってより便利なものにすることができます。人気ページへのリンク、ソーシャルアイコンや電話番号の表示、行動喚起ボタンの表示など、コンバージョンを高めることができます。
ということで、WordPressのヘッダーを簡単にカスタマイズする方法を見ていきましょう。以下のリンクから読みたいセクションにジャンプできます。
- WordPressテーマカスタマイザーでヘッダーカスタマイズ
- WordPressフルサイトエディターによるヘッダーカスタマイズ
- SeedProdでカスタマイザーとページレイアウトを作成する
- カテゴリーごとにカスタムヘッダーを追加する
- WordPressのヘッダーにウィジェットエリアを追加する
- WordPressブログにランダムヘッダー画像を追加する
- カスタムコードをサイトのヘッダーに追加する（上級者向け）
WordPressテーマカスタマイザーを使ったヘッダーカスタマイズ
多くの人気WordPressテーマでは、WordPressテーマカスタマイザーを使ってWordPressレイアウトのヘッダーエリアを変更することができます。この機能はカスタムヘッダーと呼ばれることもありますが、すべてのテーマが対応しているわけではありません。
まずはWordPress管理エリアの外観 ” カスタマイズから始めましょう。
注意：WordPressの管理メニューに外観 ” カスタマイズが表示されず、外観 ” エディター（ベータ版）だけが表示されている場合は、テーマがフルサイト編集を有効化していることを意味します。その場合は、次のセクションに進んでください。
あなたのテーマはカスタマイザーに’ヘッダー’セクションを追加したり、’カラー’セクションの下にヘッダーオプションを追加するかもしれませんが、これはテーマによって異なります。以下はその例です。
Twenty Twenty-Oneのように、ヘッダーカスタマイズオプションをすべて提供していないテーマもあります。この場合は、以下で紹介するSeedProdのようなドラッグ＆ドロップ式のテーマビルダープラグインを使用することをお勧めします。
Twenty Sixteenテーマでは、ヘッダーに背景画像を追加したり、ランダムなヘッダー画像を追加することもできる。
無料やプレミアムWordPressテーマの中には、さらに多くのテーマカスタマイザーオプションを提供しているものもあります。例えば、ヘッダーのフォントスタイル、レイアウト、色などを変更できるかもしれません。しかし、あなたができることはテーマ開発者が許可することに限られています。
例えば、Astraテーマではカスタマイザーを使ってカスタムヘッダーを作成することができます。
Astraには、左側のパネルに専用の「ヘッダー・ビルダー」オプションがあります。ここでは、ヘッダーの外観とスタイルを編集するためのさまざまな設定を見つけることができます。 WordPressのコンテンツエディターでブログ投稿やページを編集するときと同じように、ブロックを追加してカスタマイザーヘッダーを構築することができます。
まず、ヘッダーの空エリアにマウスオーバーし、「+」アイコンをクリックしてヘッダーブロックを追加します。
次に、カスタムヘッダーに追加したいブロックを選択できます。例えば、ウィジェットブロック、アカウントブロック、検索ブロックなどを追加できます。
さらに、ヘッダー・ビルダーでは、ブロックをドラッグ＆ドロップして、ヘッダーの上や下に配置することもできます。
ヘッダーに追加する各ブロックをさらにカスタマイズできる。
たとえば、「サイトタイトルとロゴ」ブロックを選択すると、サイトタイトルとロゴのアップロード、ロゴの幅の変更、サイトのキャッチフレーズの表示などのオプション設定ができます。
そのほか、ヘッダーの背景色を変更したり、ヘッダーに表示される背景画像を追加することもできます。
カスタマイザーの編集が終わったら、「公開する」ボタンをクリックするだけです。
詳しくはWordPressテーマカスタマイザーの使い方をご覧ください。
WordPressフルサイトエディターによるヘッダーカスタマイズ
WordPressはバージョン5.9でフルサイト編集機能を追加しました。あなたのテーマがこの新機能をサポートしている場合、テーマカスタマイザーに取って代わります。しかし、現時点ではフルサイトエディターで動作するテーマは限られています。
互換性のあるテーマを使用している場合、外観 ” エディターに移動してヘッダーをカスタマイズすることができます。これは、WordPressの投稿やページを書くために使用するブロックエディターのようなものです。
ヘッダーをクリックすると、ページ上部のテンプレート名が「ページヘッダー」に変わることに気づくだろう。
ツールバーの「設定」アイコンをクリックすると、ヘッダーのレイアウト、色、枠線、寸法をカスタマイズするオプションが表示されます。
例として、ヘッダーの背景色を変更してみましょう。まず、「Color」セクションをクリックして展開します。その後、「背景」オプションをクリックしてください。
ソリッドカラーまたはグラデーションを選択できるポップアップが外観に表示されます。また、選択できる色もいくつかあります。色をクリックすると、ヘッダーの背景がすぐに変更されます。
ページの右上にある’スタイル’アイコンをクリックすると、より多くのカスタマイザーオプションを見つけることができます。これにより、ヘッダーのフォント、色、レイアウトを変更することができます。
フルサイトエディターの仕組みについて詳しく知りたい方は、WordPressテーマのカスタマイズ方法についての初心者向けガイドをご覧ください。
SeedProdでカスタマイザーとページレイアウトを作成する
ヘッダー、フッター、サイドバーを完全にコントロールし、あなたのサイトにユニークなデザインを与えたいのであれば、SeedProdの使用をお勧めします。
SeedProdは、コードを書くことなく簡単にカスタムのWordPressテーマを作成することができます最高のWordPressテーマビルダープラグインです。これには、ヘッダー、フッター、その他魅力的なWordPressテーマに必要なすべてのものの作成が含まれます。
サイトのページやセクションごとに複数のカスタムヘッダースタイルを作成することもできます。
注： SeedProdの無料版を使用してカスタムヘッダーを含むカスタムランディングページを作成することができますが、サイト全体のヘッダーレイアウトを含む完全なカスタムテーマを作成するにはPro版が必要です。
まず、コードなしで簡単にカスタマイザーWordPressテーマを作成する方法についてのガイドに従うことをお勧めします。一度これを行えば、SeedProdはヘッダーを簡単にカスタマイズすることができます。
必要なことはすべて、ヘッダーの下にある’Edit Design’リンクをクリックすることです。
これでSeedProdのドラッグ＆ドロップエディターでヘッダーが開きます。
ここから、新しいブロックを追加してヘッダーを簡単にカスタマイズできます。
サイトロゴのようなテンプレートタグ、WordPressウィジェットのブロック、カウントダウンタイマー、ナビゲーションメニュー、ソーシャルシェアボタンのような高度なブロックがあります。
一番の特徴は、テーマビルダーを使って各ブロックをさらにカスタマイズできることです。例えば、ロゴのサイズや配置を変更したり、ナビゲーションメニューに表示するページを選択したりできる。ヘッダーに画像を追加することもできる。
SeedProdを使えば、テーマのヘッダーテンプレートに完全なセクションを追加することもできます。
セクションはブロックのグループで、サイト上のさまざまなエリアに使用できます。これには、ヘッダー、フッター、機能、お客様の声、行動喚起などが含まれます。
ヘッダーセクションを使用するには、まずデザインパネルの「セクション」タブに切り替えます。
その後、サイトに使用したいヘッダーセクションを選択します。SeedProdは、あなたが使用できる複数のセクションテンプレートを提供しています。
次に、ヘッダーセクションをカスタマイズする。
カスタムヘッダーが完成したら、「保存」ボタンをクリックして変更を保存してください。
これでカスタムヘッダーを公開する準備ができました。
WordPress ダッシュボードからSeedProd ” Theme Builderページに移動し、「SeedProd テーマを有効化」オプションの横にある「はい」のトグルをクリックするだけです。
オプションを有効化すると、SeedProdは初期設定のWordPressテーマを新しいカスタムテーマとヘッダーで置き換えます。
あなたのサイトにアクセスして、新しいカスタムヘッダーを実際に見ることができます。
ページごとに異なるカスタマイザーを作成する
SeedProdを使えば、ページごとにカスタマイザーを作成できることをご存知ですか？
テーマビルダーでは、WordPressサイトの各ページにカスタマイザーヘッダーを追加することができます。この方法では、異なるカテゴリー、タグ、投稿タイプ、ページタイプなどのためにカスタマイズされたヘッダーを表示することができます。
まず、WordPressダッシュボードからSeedProd ” Theme Builderにアクセスし、’Add New Theme Template’ボタンをクリックします。
テーマテンプレートの詳細を入力するポップアップウィンドウが表示されます。
テーマテンプレートの名前を入力します。その後、ドロップダウンメニューからテンプレートタイプとして「ヘッダー」を選択します。優先順位」は空欄のままで構いません。
次に、カスタムヘッダーの表示条件を入力する必要があります。例えば、私たちはチュートリアルカテゴリーにあるすべての投稿日とページに表示する条件を使用しました。
終わったら「保存」ボタンをクリックするのをお忘れなく。
その後、SeedProdドラッグ＆ドロップテーマビルダーを使用してカスタムヘッダーを編集することができます。
カスタマイザーの編集が終わったら、上部にある「保存」ボタンをクリックするだけです。
SeedProdを使用してヘッダーをカスタマイズする方法については、SeedProdテーマビルダーを使用してカスタマイザーWordPressテーマを簡単に作成する方法についての初心者ガイドでより多くのアイデアをご覧いただけます。
カテゴリーごとのカスタムヘッダーの追加
ほとんどのサイトは、すべての投稿日、ページ、カテゴリー、アーカイブページに同じヘッダーを表示します。しかし、WordPressのカテゴリーごとに異なるヘッダーを表示することができます。
これはテーマファイルにコードを追加することで可能ですが、テーマビルダーを使うことでよりコントロールしやすくなります。
以前、テーマビルダープラグインSeedProdを使ってヘッダーをカスタムする方法を紹介しました。SeedProdでは、複数のカスタマイザーを作成し、条件ロジックを使用して異なるカテゴリーに表示することもできます。
新規ヘッダーを作成するには、SeedProd ” テーマビルダーに移動し、オレンジ色の「新規テーマテンプレートの追加」ボタンをクリックする必要があります。または、現在のヘッダーを複製し、それを出発点として使用することもできます。
ポップアップが表示されるので、テーマテンプレートに名前を付け、タイプドロップダウンメニューから「ヘッダー」を選択します。
また、優先順位を入力する必要があります。これは、あるページの条件を満たすヘッダーが複数ある場合に使用され、優先順位が最大のヘッダーが表示されます。初期設定のヘッダーの優先度は0ですので、1以上を入力してください。
その後、1つ以上の条件を設定する必要があります。これにより、SeedProdは特定のヘッダーを表示するタイミングを知ることができます。ドロップダウンメニューから条件を選択するだけです。
最初の2つのメニューで、’Include’を選択し、次に’Has Category’を選択する必要がある。最後のフィールドに、ヘッダーを表示させたいカテゴリー名を入力してください。
Add Condition’ボタンをクリックし、別のカテゴリーを含めることで、複数のカテゴリーに同じヘッダーを簡単に表示することができます。設定が終わったら、本当に〜してもよいですか？
SeedProdのドラッグ＆ドロップエディターを使って、新しいヘッダーのデザインをカスタマイズすることができます。
コードを使った方法を含め、さらに詳しく知りたい方は、カテゴリーごとにカスタマイザー、フッター、サイドバーを追加する方法をご覧ください。
WordPressのヘッダーにウィジェットエリアを追加する
コードを使ってカスタムテーマをゼロから構築している場合、訪問者の注意を引くためにWordPressウィジェットをヘッダーに追加したいと考えているかもしれません。ウィジェットを使えば、テーマの特定のセクションにコンテンツブロックを簡単に追加できますが、すべてのテーマにヘッダーウィジェットエリアが含まれているわけではありません。
SeedProdテーマビルダーを使用して、ヘッダーにウィジェットを追加することがいかに簡単であるか、先に述べました。しかし、通常のWordPressテーマのヘッダーにウィジェットを追加したい場合はどうすればよいでしょうか？
Astraテーマのように、WordPressのテーマカスタマイザーを使ってこれを実現できるテーマもある。例えば、Astraには「Header Builder」というオプションが追加されており、ウィジェットの追加など、ヘッダーを完全にカスタマイズすることができる。
WordPressテーマが現在ヘッダーにWordPressウィジェットエリアを持っていない場合は、functions.phpファイルに以下のコードを追加するか、サイト固有のプラグイン、またはコードスニペットプラグインを使用して手動で追加する必要があります。
この設定は、コードをどこに配置し、CSSを使ってどのようにスタイルを設定するかを知っておく必要があるため、より高度なオプションとなる。
function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Custom Header Widget Area',
'id' => 'custom-header-widget',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );
このコードは、テーマに新しいサイドバーまたはウィジェット準備エリアを登録します。
外観 ” ウィジェットにアクセスすると、「カスタムヘッダーウィジェットエリア」という新しいウィジェットエリアが表示されます。この新しいエリアにウィジェットを追加することができます。
最後に、テーマのheader.phpファイルにあるテーマのヘッダーテンプレートにコードを追加する必要があります。これにより、先ほど作成したウィジェットエリアがヘッダーに追加され、ウィジェットがサイトに表示されるようになります。
このコード・スニペットをコピー＆ペーストして、ウィジェットを表示したい場所に貼り付けてください。
<?php
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
<div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
<?php dynamic_sidebar( 'custom-header-widget' ); ?>
</div>
<?php endif; ?>
テーマによっては、ウィジェットエリアの表示方法をコントロールするためにWordPressにCSSを追加する必要があるかもしれません。
詳しくは、WordPressウィジェットをサイトヘッダーに追加する方法をご覧ください。
WordPressブログにランダムなヘッダー画像を追加する
WordPressのヘッダーをより魅力的にするもう一つの方法は、ヘッダーセクションにランダムな画像を追加することです。
ランダムに変化する画像を表示することで、訪問者の注意を引き、コンテンツをより魅力的なものにすることができます。
WordPressブログにランダムなヘッダー画像を追加するには、テーマカスタマイザーを使い、ヘッダーセクションに画像をアップロードします。この設定は、使用しているWordPressテーマによって異なる場合があります。
次に、「アップロードされたヘッダーをランダムにする」オプションを選択する。
ヘッダーセクションにランダムな画像を表示することをよりコントロールし、柔軟にしたい場合は、WordPressプラグインを使用することもできます。
詳しくは、WordPressブログにランダムなヘッダー画像を追加する方法をご覧ください。
サイトのヘッダーにコードを追加する（上級者向け）
最後に、サイトのヘッダー部分にカスタムコードを追加したい場合は、WordPressダッシュボードから簡単に行うことができます。この方法は、コードの編集を含み、技術的な知識が必要なため、上級ユーザーに必要であり、初心者には適していません。
WordPress管理画面の外観 ” テーマファイルエディターからテーマのヘッダーファイルを見つけることができます。style.css’テーマファイルの中で、サイトヘッダーセクションまでスクロールダウンし、コードを追加または削除することができます。
注：テーマファイルを直接編集することはお勧めしません。わずかなミスでサイトが壊れたり、デザインが台無しになったりする可能性があるからです。
サイトのヘッダーを編集するカスタムコードを追加する簡単な方法は、WPCodeを使用することです。
まず、無料のWPCodeプラグインをインストールし、有効化します。詳しくは、WordPressプラグインのインストール方法をご覧ください。
有効化したら、WordPressダッシュボードからCode Snippets ” Header & Footerにアクセスします。次に、カスタムコードを「ヘッダー」セクションに入力します。
コードを入力したら、「変更を保存」ボタンをクリックします。
詳しくは、WordPressでヘッダーとフッターのコードを追加する方法をご覧ください。
このチュートリアルでWordPressのヘッダーをカスタマイズする方法を学んでいただけたら幸いです。また、最適なウェブデザインソフトウェアの選び方や、サイトを成長させるために必須のプラグインリストもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
I thought for a long time about what actually makes the header interesting and finally I came to the opinion that the most visible element is the menu. For a long time, I mainly dealt with how to make a high-quality mega menu that will attract people at first glance with its appearance and content. In other words, for me, the header makes the menu exclusive.