WordPressヘッダーをカスタマイズする方法（初心者ガイド）

WordPressのウェブサイトを訪れたときに、それが…ありきたりだと感じたことはありませんか？個人的なものや記憶に残るものが何もない、テンプレートからそのまま出てきたようなものではありませんか？

デフォルトのWordPressヘッダーのままだと、そのような印象を与えてしまい、訪問者からの信頼を失う可能性があります。

ヘッダーは、訪問者がサイトにアクセスしたときに最初に目にするものなので、強い印象を与える必要があります。カスタマイズすることで、ナビゲーションリンク、ソーシャルアイコン、検索バーなどの主要な要素を追加できます。

これらの機能により、サイトのユーザーフレンドリーさが向上し、永続的でプロフェッショナルな印象を残すことができます。さらに、カスタムヘッダーが信頼とエンゲージメントの両方を高めることも確認しています。

このガイドでは、コーディングを全く必要としない複数の方法を学び、初心者でも WordPress ヘッダーをカスタマイズする方法を正確に説明します。これにより、際立った、訪問者により良いサービスを提供するヘッダーを構築できます。🌟

WordPressのヘッダーとは？

ウェブサイトのヘッダーは、WordPressウェブサイトのすべてのページの最上部セクションであり、訪問者が最初に目にする部分です。多くの場合、ウェブサイトのロゴとタイトル、ナビゲーションメニュー、その他ユーザーに最初に見てほしい重要な要素が表示されます。

例えば、WPBeginnerのヘッダーエリアは、毎月何百万人もの読者が見ています。

サイトのヘッダーをカスタマイズすることで、ユニークなタッチを与え、訪問者にとってより使いやすくすることができます。最も人気のあるページへのリンク、ソーシャルアイコンや会社の電話番号の表示、コンバージョンを増やすためのコールトゥアクションボタンの表示などが可能です。

次のセクションでは、WordPressヘッダーを簡単にカスタマイズする方法を説明します。以下のリンクを使用して、読みたいセクションにジャンプできます。

準備はいいですか？始めましょう。

WordPressテーマカスタマイザーを使用してヘッダーをカスタマイズする

人気のWordPressテーマでは、WordPressテーマカスタマイザーを使用してサイトのヘッダー領域を変更できます。この機能は「カスタムヘッダー」と呼ばれることもありますが、すべてのテーマがこれをサポートしているわけではないことに注意してください。

まず、WordPress 管理画面で 外観 » カスタマイズに移動してください。

テーマによっては、カスタマイザーに「ヘッダー」セクションが含まれているか、「カラー」セクションの下にヘッダーオプションが提供されている場合があります。ただし、これはテーマによって異なります。以下にいくつかの例を示します。

Twenty Twenty-Oneのような一部のテーマでは、ヘッダーのカスタマイズオプションがまったく提供されていません。この場合、SeedProdのようなドラッグアンドドロップのテーマビルダープラグインの使用をお勧めします。これは以下で説明します。

Twenty Sixteenテーマでは、ヘッダーに背景画像を追加したり、ランダムなヘッダー画像を追加したりできます。

一部の無料および有料のWordPressテーマでは、さらに多くのテーマカスタマイズオプションが提供されています。

例えば、ヘッダーのフォントスタイル、レイアウト、色などを変更できる場合があります。ただし、テーマによって異なり、テーマ開発者が許可する範囲に限定されます。

たとえば、Sydneyには、左側のカスタマイズパネルに専用の「ヘッダービルダー」オプションがあります。

ここでは、ヘッダーの外観とスタイルを編集するためのさまざまな設定が見つかります。WordPressコンテンツエディターでブログ投稿やページを編集するときと同じように、ブロックを追加してカスタムヘッダーを構築できます。

開始するには、ヘッダー内の空の領域にカーソルを合わせ、「+」アイコンをクリックして、ヘッダーブロックを追加します。これは、上部、中央、または下部の行のいずれかになります。

次に、カスタムヘッダーに追加したいブロックを選択できます。たとえば、ウィジェットブロック、アカウントブロック、検索ブロックなどを追加できます。

ヘッダービルダーを使用すると、ブロックをドラッグアンドドロップしてヘッダーの上または下に配置することもできます。

次に、ヘッダーに追加した各ブロックをさらにカスタマイズできます。

例えば、「サイトタイトルとロゴ」ブロックを選択すると、サイトタイトルとロゴのアップロード、ロゴの幅の変更、サイトのタグラインの表示などのオプションが表示されます。

さらに、ヘッダーの背景色を変更したり、ヘッダーに表示する背景画像を追加したりすることもできます。

カスタムヘッダーの編集が完了したら、[公開]ボタンをクリックするだけです。

詳細については、WordPressテーマカスタマイザーの使用方法に関する究極のガイドをご覧ください。

WordPress フルサイトエディターを使用してヘッダーをカスタマイズする

WordPressはバージョン5.9でWordPressにフルサイト編集を追加しました。テーマが新しい機能をサポートしている場合、それはテーマカスタマイザーに取って代わります。ただし、現時点では、フルサイトエディターと連携するテーマはごくわずかです。

互換性のあるテーマを使用している場合、外観 » エディターに移動することでヘッダーをカスタマイズできます。これにより、WordPressの投稿やページを作成するために使用するブロックエディターに似た、サイト全体エディターが起動します。

ヘッダーをクリックすると、ページの上部にあるテンプレートの名前が「Page Header」に変わることに気づくでしょう。

ここで、ツールバーの「設定」アイコンをクリックすると、ヘッダーのレイアウト、色、境界線、寸法をカスタマイズするオプションが表示されます。

例として、ヘッダーの背景色を変更します。まず、「色」セクションを展開し、「背景」オプションをクリックする必要があります。

表示されるポップアップウィンドウで、まず単色またはグラデーションを選択します。

次に、プリセットカラーをいくつか選択できます。色をクリックすると、ヘッダーの背景がすぐに変更されます。

ページ右上の「スタイル」アイコンをクリックすると、さらに多くのカスタマイズオプションを見つけることができます。これにより、ヘッダーのフォント、色、レイアウトを変更できます。

サイト全体エディターの仕組みについて詳しくは、WordPressテーマのカスタマイズ方法に関する初心者向けガイドをご覧ください。

SeedProdでカスタムヘッダーとページレイアウトを作成する

ヘッダー、フッター、サイドバーを完全に制御して、ウェブサイトにユニークなデザインを持たせたいですか？それなら、WordPressテーマビルダープラグインのベストであるSeedProdの使用をお勧めします。

SeedProd を使用すると、コードを書かずにカスタム WordPress テーマを簡単に作成できます。これには、ヘッダー、フッター、および魅力的な WordPress テーマに必要なすべてのものが含まれます。

ウェブサイトの異なるページやセクションごとに、複数のカスタムヘッダースタイルを作成することも可能です。

当社のパートナーブランドの中には、SeedProdを使用してウェブサイトを構築しているところがあり、素晴らしい成果を上げています。詳細については、SeedProdのレビュー全文をご覧ください。

まず、コードなしでカスタムWordPressテーマを簡単に作成する方法に関するガイドに従うことをお勧めします。これが完了したら、SeedProdエディターでヘッダーのカスタマイズを開始できます。

エディタにアクセスするには、ヘッダーの下にある「デザインを編集」リンクをクリックするだけです。

これにより、ヘッダーがSeedProdのドラッグ＆ドロップエディターで開きます。

ここから、新しいブロックを追加してヘッダーを簡単にカスタマイズできます。

サイトロゴやWordPressウィジェットなどのテンプレートタグ用のブロックや、カウントダウンタイマー、ナビゲーションメニュー、ソーシャル共有ボタンなどの高度なブロックがあります。

最も良い点は、テーマビルダーを使用して各ブロックをさらにカスタマイズできることです。たとえば、ロゴのサイズや配置を変更したり、ナビゲーションメニューに表示するページを選択したりできます。さらに、ヘッダーに画像を追加することもできます。

SeedProd を使用すると、テーマのヘッダーテンプレートにセクション全体を追加することもできます。

セクションは、ウェブサイトのさまざまな領域に使用できるブロックのグループです。これらには、ヘッダー、フッター、機能、お客様の声、行動喚起などが含まれます。

ヘッダーセクションを使用するには、「デザイン」パネルの「セクション」タブに切り替えます。

その後、ウェブサイトに使用したいヘッダーセクションを選択します。SeedProdは、使用できる複数のセクションテンプレートを提供しています。

ヘッダーセクションのカスタマイズを開始してください。

カスタムヘッダーに満足したら、「保存」ボタンをクリックして変更を保存してください。

これで、カスタムヘッダーを公開する準備が整いました。

単に、WordPressダッシュボードからSeedProd » Theme Builderに移動し、「SeedProdテーマを有効化」オプションの横にあるトグルを「はい」にクリックします。

オプションを有効にすると、SeedProdはデフォルトのWordPressテーマを新しいカスタムテーマとヘッダーに置き換えます。

これで、ウェブサイトにアクセスして、新しいカスタムヘッダーが機能していることを確認できます。

ページごとに異なるカスタムヘッダーを作成する

さらに、SeedProdを使用すると、サイトの特定のページ用のカスタムヘッダーを簡単にデザインできます。

テーマビルダーを使用すると、WordPressウェブサイトの各ページにカスタムヘッダーを追加できます。これにより、さまざまなカテゴリ、タグ、投稿タイプ、ページタイプなどにカスタマイズされたヘッダーを表示できます。

開始するには、WordPressダッシュボードからSeedProd » Theme Builderに移動し、「新しいテーマテンプレートを追加」ボタンをクリックする必要があります。

テーマテンプレートの詳細を入力する必要がある新しいポップアップウィンドウが表示されます。

テーマテンプレートの名前を入力してください。その後、ドロップダウンメニューからテンプレートタイプとして「ヘッダー」を選択します。「優先度」フィールドは空白のままで構いません。

次に、カスタムヘッダーの表示条件を入力する必要があります。たとえば、チュートリアルカテゴリに含まれるすべての投稿とページに表示されるように条件を使用しました。

完了したら、「保存」ボタンをクリックすることを忘れないでください。

その後、SeedProdのドラッグアンドドロップテーマビルダーを使用して、カスタムヘッダーを編集してください。

カスタムヘッダーの編集が完了したら、上部にある「保存」ボタンをクリックするだけです。

SeedProdテーマビルダーを使用してカスタムWordPressテーマを簡単に作成する方法に関する初心者向けガイドで、SeedProdを使用してヘッダーをカスタマイズする方法について、さらにアイデアを確認できます。

カテゴリごとにカスタムヘッダーを追加する

ほとんどのウェブサイトでは、すべての投稿、ページ、カテゴリ、アーカイブページに同じヘッダーが表示されます。ただし、各WordPressカテゴリに異なるヘッダーを表示できます。

これはテーマファイルにコードを追加することで実現できますが、テーマビルダーを使用する方がより多くの制御が可能になります。

以前、SeedProdテーマビルダープラグインを使用してヘッダーをカスタマイズする方法を説明しました。SeedProdでは、複数のカスタムヘッダーを作成し、条件付きロジックを使用して異なるカテゴリに表示することもできます。

新しいヘッダーを作成するには、SeedProd » Theme Builder に移動し、オレンジ色の「新しいテーマテンプレートを追加」ボタンをクリックする必要があります。または、現在のヘッダーを複製して開始点として使用することもできます。

ポップアップウィンドウが表示され、テーマテンプレートに名前を付け、「Type」ドロップダウンメニューから「Header」を選択できます。

優先度を入力する必要もあります。したがって、特定のページで複数のヘッダーが条件を満たす場合、最も高い優先度を持つヘッダーが表示されます。

デフォルトのヘッダーの優先度は0なので、1以上の値を入力してください。

その後、1つ以上の条件を設定する必要があります。これにより、SeedProd は特定のヘッダーをいつ表示するかを知ることができます。ドロップダウンメニューから条件を選択するだけです。

最初の2つのメニューでは、「Include」を選択し、次に「Has Category」を選択する必要があります。最後のフィールドには、ヘッダーを表示したいカテゴリの名前を入力します。

「条件を追加」ボタンをクリックして別のカテゴリを含めることで、複数のカテゴリに同じヘッダーを簡単に表示できます。完了したら、「保存」ボタンをクリックして新しいヘッダーを保存してください。

これで、以前に示したように、SeedProdのドラッグアンドドロップエディターを使用して、新しいヘッダーのそれぞれをデザインカスタマイズできます。

コードを使用した方法を含む詳細については、各カテゴリのカスタムヘッダー、フッター、またはサイドバーを追加する方法に関するガイドを参照してください。

WordPressのヘッダーにウィジェットエリアを追加する

コードを使用してカスタムテーマをゼロから構築している場合、訪問者の注意を引くためにWordPressウィジェットをヘッダーに追加したい場合があります。

ウィジェットを使用すると、テーマの特定のセクションにコンテンツブロックを簡単に追加できますが、すべてのテーマにヘッダーウィジェット領域が含まれているわけではないことに注意してください。

以前、SeedProdテーマビルダーを使用してヘッダーにウィジェットを追加するのがいかに簡単かについて言及しました。しかし、通常のWordPressテーマのヘッダーにウィジェットを追加したい場合はどうでしょうか？

Sydneyテーマのような一部のテーマでは、WordPressテーマカスタマイザーを使用してこれを行うことができます。Sydneyは、「ヘッダービルダー」と呼ばれるオプションを追加して、ウィジェットの追加を含むヘッダーを完全にカスタマイズできます。

WordPressテーマに現在ヘッダーウィジェットエリアがない場合は、手動で追加する必要があります。

一般的なアプローチはfunctions.phpファイルにコードスニペットを追加することですが、より簡単で安全なアプローチはWPCodeを使用することです。これは、サイトを壊すことなくコードスニペットを追加するための最良のプラグインです。

当社のパートナーブランドの中には、WPCodeを使用してカスタムコードスニペットを追加および管理している企業があります。このプラグインについては素晴らしい評判を聞いており、詳細についてはWPCodeの詳細レビューを読むこともできます。

始めるにあたり、WPCodeコードスニペットプラグインがWordPressウェブサイトにインストールされ、有効化されていることを確認してください。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

アクティベートしたら、コードスニペット » + スニペットを追加に移動します。

さて、最初に行う必要があるのは、スニペットタイトルを作成することです。たとえば、 oursを「WordPressウィジェットをヘッダーエリアに追加する」と名付けます。2番目のステップは、コードタイプのドロップダウンを展開し、「PHPスニペット」を選択することです。

完了したら、以下のコードをコピーして「コードプレビュー」セクションに貼り付けるだけです。

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' );

このコードは、テーマに新しいヘッダーまたはウィジェット対応領域を登録します。

WPCodeエディタでは、このようになります。

スニペットをアクティブにするには、青い「スニペットを保存」ボタンの横にあるトグルを「アクティブ」に切り替えます。その後、「スニペットを保存」ボタンをクリックして変更を保存することを忘れないでください。

スイッチをオンにして変更を保存すると、エディターは次のようになります。

さて、外観 » ウィジェットに移動すると、「カスタムヘッダーウィジェットエリア」という新しいウィジェットエリアが表示されます。

ここにウィジェットを追加します。ヘルプが必要な場合は、WordPressでウィジェットを追加して使用する方法に関するガイドを参照してください。

テーマによっては、ウィジェットエリアの表示方法を制御するために、WordPressにCSSを追加する必要がある場合もあります。

詳細な手順については、WordPressウェブサイトのヘッダーにWordPressウィジェットを追加する方法に関するガイドを確認してください。

WordPressブログにランダムなヘッダー画像を追加する

WordPressヘッダーをより魅力的にするもう1つの方法は、ヘッダーセクションにランダムな画像を追加することです。

ランダムに変化する画像を表示すると、訪問者の注意を引きつけ、コンテンツをより魅力的にすることができます。

WordPressブログにランダムなヘッダー画像を追加するには、テーマカスタマイザーを使用してヘッダーセクションに画像をアップロードできます。このオプションは、使用しているWordPressテーマによって異なる場合があります。

次に、「アップロードしたヘッダーをランダム化する」オプションを選択してください。

ヘッダーセクションにランダムな画像を表示する際に、より多くの制御と柔軟性が必要な場合は、WordPressプラグインを使用することもできます。

詳細については、WordPressブログにランダムなヘッダー画像を追加する方法に関するガイドを参照してください。

ウェブサイトのヘッダーにコードを追加する（上級）

最後に、ウェブサイトのヘッダーセクションにカスタムコードを追加したい場合は、WordPressダッシュボードから簡単に行うことができます。この方法は高度なユーザー向けに推奨されており、コードの編集が含まれ、技術的な知識が必要なため、初心者には適さない場合があります。

WordPress管理画面から外観 » テーマファイルエディターに移動すると、テーマのヘッダーファイルを見つけることができます。「style.css」テーマファイルで、サイトヘッダーセクションまでスクロールしてコードを追加または削除できます。

サイトのヘッダーを編集するためにカスタムコードを追加する簡単な方法は、市場で最高のコードスニペットプラグインであるWPCodeを使用することです。

まず、無料のWPCodeプラグインをインストールして有効化してください。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

アクティベートしたら、WordPressダッシュボードから コードスニペット » ヘッダー & フッター に移動できます。次に、ヘッダーセクションにカスタムコードを入力します。

コードを入力したら、「変更を保存」ボタンをクリックしてください。

詳細については、WordPressでヘッダーとフッターのコードを追加する方法に関するガイドをご覧ください。

これで完了です！

ボーナスヒント：さまざまなヘッダー スタイルをテストする（A/B スプリット テストを使用）

ヘッダーをカスタマイズした後、「これは訪問者にとって最良のバージョンだろうか？」と疑問に思うのは当然です。そこでA/Bスプリットテストが登場します。

レイアウトの変更、ボタンの色、検索バーのような追加された要素など、ヘッダーのさまざまなバージョンを比較し、どれが実際にパフォーマンスが良いかを確認できます。

推測だけでなく、実際のユーザー行動に基づいてデザインの決定を下すことができます。

心配しないでください。開発者である必要はありません。

Thrive OptimizeやNelio AB Testingのような初心者向けのツールを使えば、すぐにプロのようにテストできるようになります。このアプローチは、あらゆる微調整でヘッダーを改善するのに役立ちます。

詳細については、WordPressでA/Bスプリットテストを行う方法に関するガイドをご覧ください。

よくある質問：WordPress ヘッダーのカスタマイズ

WordPressヘッダーのカスタマイズについて、まだ質問がありますか？心配しないでください。すべてカバーしています！ここでは、初心者がよく尋ねる一般的な質問をいくつか紹介します。

WordPressヘッダーとは何ですか？なぜ重要ですか？

ヘッダーはWordPressサイトの上部セクションであり、訪問者が最初に目にするものです。通常、サイトのロゴ、ナビゲーションメニュー、その他の重要な要素が含まれています。適切に設計されたヘッダーは、良い第一印象を与え、人々をサイトの最も重要な部分に誘導するのに役立ちます。

WordPressヘッダーをカスタマイズするためにコーディングを知っている必要がありますか？

全く必要ありません！コーディングスキルは不要です。WordPressテーマやプラグイン（SeedProdなど）の多くは、シンプルなドラッグアンドドロップビルダーでヘッダーをカスタマイズできます。初心者にも最適です。

SeedProdのようなプラグインをヘッダーに使用するメリットは何ですか？

SeedProdを使用すると、コードに触れることなくカスタムヘッダーを簡単にデザインできます。見た目とレイアウトを完全に制御できるだけでなく、サイトのスタイルに合わせるための高度なオプションもあり、全体的なユーザーエクスペリエンスを向上させることができます。

ヘッダーにウィジェットを追加すると、サイトはどのように改善されますか？

検索バー、ソーシャルアイコン、連絡先情報などのウィジェットをヘッダーに追加すると、重要な機能が見つけやすくなります。これにより、訪問者はサイトをより速くナビゲートでき、サイトはより洗練されたプロフェッショナルな印象になります。

ページや投稿ごとに異なるヘッダーを設定できますか？

はい！SeedProdのような適切なツールを使用すると、ページ、投稿、カテゴリ、またはタグごとにカスタムヘッダーを追加することができます。これにより、サイトのさまざまなセクションでの見た目と雰囲気をより細かく制御できます。

追加リソース：WordPressのデザインとナビゲーションに関するその他のヒント

このチュートリアルでWordPressのヘッダーをカスタマイズする方法を学べたことを願っています。次に、以下のガイドも参照してください。

• WordPressに画像を正しく追加する方法
• WordPressにフォントリサイザーを追加してアクセシビリティを向上させる方法
• WordPressの各投稿を個別にスタイル設定する方法
• WordPressで折りたたみ可能なサイドバーメニューを作成する方法
• WordPressの投稿やページごとに異なるサイドバーを表示する方法
• WordPressでバイラル待機リストランディングページを作成する方法
• 効果的なWordPressウェブサイトのための主要なデザイン要素
• 究極のガイド：WordPressテーマを正しく変更する方法

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。