WordPressのウェブサイトを訪れたときに、それが…ありきたりだと感じたことはありませんか？個人的なものや記憶に残るものが何もない、テンプレートからそのまま出てきたようなものではありませんか？
デフォルトのWordPressヘッダーのままだと、そのような印象を与えてしまい、訪問者からの信頼を失う可能性があります。
ヘッダーは、訪問者がサイトにアクセスしたときに最初に目にするものなので、強い印象を与える必要があります。カスタマイズすることで、ナビゲーションリンク、ソーシャルアイコン、検索バーなどの主要な要素を追加できます。
これらの機能により、サイトのユーザーフレンドリーさが向上し、永続的でプロフェッショナルな印象を残すことができます。さらに、カスタムヘッダーが信頼とエンゲージメントの両方を高めることも確認しています。
このガイドでは、コーディングを全く必要としない複数の方法を学び、初心者でも WordPress ヘッダーをカスタマイズする方法を正確に説明します。これにより、際立った、訪問者により良いサービスを提供するヘッダーを構築できます。🌟
WordPressのヘッダーとは？
ウェブサイトのヘッダーは、WordPressウェブサイトの各ページの最上部セクションであり、訪問者が最初に目にする部分です。多くの場合、ウェブサイトのロゴとタイトル、ナビゲーションメニュー、その他ユーザーに最初に見てほしい重要な要素が表示されます。
例えば、WPBeginnerのヘッダーエリアは、毎月何百万人もの読者が見ています。
サイトのヘッダーをカスタマイズすることで、ユニークなタッチを与え、訪問者にとってより使いやすくすることができます。最も人気のあるページへのリンク、ソーシャルアイコン、またはビジネスの電話番号を表示したり、コンバージョンを増やすための行動喚起ボタンを表示したりできます。
次のセクションでは、WordPressヘッダーを簡単にカスタマイズする方法を説明します。以下のリンクを使用して、読みたいセクションにジャンプできます。
- WordPressテーマカスタマイザーを使用してヘッダーをカスタマイズする
- WordPress フルサイトエディターを使用してヘッダーをカスタマイズする
- SeedProdでカスタムヘッダーとページレイアウトを作成する
- カテゴリごとにカスタムヘッダーを追加する
- WordPressのヘッダーにウィジェットエリアを追加する
- WordPressブログにランダムなヘッダー画像を追加する
- ウェブサイトのヘッダーにコードを追加する（上級者向け）
- ボーナスヒント：さまざまなヘッダー スタイルをテストする（A/B スプリット テストを使用）
- よくある質問：WordPress ヘッダーのカスタマイズ
- 追加リソース：WordPressのデザインとナビゲーションに関するその他のヒント
準備はいいですか？始めましょう。
WordPressテーマカスタマイザーを使用してヘッダーをカスタマイズする
人気のあるWordPressテーマでは、WordPressテーマカスタマイザーを使用してサイトのヘッダー領域を変更できます。この機能は、カスタムヘッダーと呼ばれることもありますが、すべてのテーマがこれをサポートしているわけではないことに注意してください。
まず、WordPress 管理画面で 外観 » カスタマイズに移動してください。
💡 注意：WordPress管理メニューに外観 » カスタマイズが表示されず、外観 » エディターしか表示されない場合は、テーマでフルサイト編集が有効になっていることを意味します。その場合は、次のセクションに進んでください。
テーマによっては、カスタマイザーに「ヘッダー」セクションが含まれているか、「カラー」セクションの下にヘッダーオプションが提供されている場合があります。ただし、これはテーマによって異なります。以下にいくつかの例を示します。
Twenty Twenty-One のような一部のテーマでは、ヘッダーのカスタマイズオプションがまったく提供されていません。この場合、以下で説明する SeedProd のようなドラッグ＆ドロップテーマビルダープラグインの使用をお勧めします。
Twenty Sixteenテーマでは、ヘッダーに背景画像を追加したり、ランダムヘッダー画像を追加したりできます。
一部の 無料および有料の WordPress テーマ では、さらに多くのテーマカスタマイズオプションが提供されています。
例えば、ヘッダーのフォントスタイル、レイアウト、色などを変更できる場合があります。ただし、テーマによって異なり、テーマ開発者が許可する範囲に限定されます。
例えば、Sydneyには、左側のカスタマイズパネルに専用の「ヘッダービルダー」オプションがあります。
ここでは、ヘッダーの外観とスタイルを編集するためのさまざまな設定が見つかります。WordPressコンテンツエディターでブログ投稿やページを編集するときと同様に、ブロックを追加してカスタムヘッダーを構築できます。
開始するには、ヘッダー内の空の領域にカーソルを合わせ、「+」アイコンをクリックして、ヘッダーブロックを追加します。これは、上部、中央、または下部の行のいずれかになります。
次に、カスタムヘッダーに追加したいブロックを自由に選択できます。例えば、ウィジェットブロック、アカウントブロック、検索ブロックなどを追加できます。
ヘッダービルダーを使用すると、ブロックをドラッグアンドドロップしてヘッダーの上または下に配置することもできます。
💡 注: Sydneyの無料版では、ヘッダーに最大5つのコンポーネントを追加できます。ログイン機能やカスタムHTMLなどの高度な要素を含むフルライブラリのロックを解除するには、Sydney Proにアップグレードする必要があります。
テーマの詳細については、詳細なSydneyレビューをご覧ください。
次に、ヘッダーに追加した各ブロックをさらにカスタマイズできます。
例えば、「サイトタイトルとロゴ」ブロックを選択すると、サイトタイトルとロゴのアップロード、ロゴの幅の変更、サイトのタグラインの表示などのオプションが表示されます。
それに加えて、ヘッダーの背景色を変更したり、ヘッダーに表示される背景画像を追加したりすることもできます。
カスタムヘッダーの編集が完了したら、[公開]ボタンをクリックするだけです。
WordPressテーマカスタマイザーの使い方の詳細については、WordPressテーマカスタマイザーの使い方に関する究極ガイドをご覧ください。
WordPress フルサイトエディターを使用してヘッダーをカスタマイズする
WordPress は、バージョン 5.9 で WordPress にサイト全体編集機能を追加しました。テーマが新しい機能をサポートしている場合、テーマカスタマイザーが置き換えられます。ただし、現時点では、サイト全体エディターで動作するテーマはごくわずかです。
対応するテーマを使用している場合、外観 » エディターに移動してヘッダーをカスタマイズできます。これにより、WordPress の投稿やページを作成するために使用する ブロックエディター に似た、サイト全体エディターが起動します。
ヘッダーをクリックすると、ページの上部にあるテンプレートの名前が「Page Header」に変わることに気づくでしょう。
ここで、ツールバーの「設定」アイコンをクリックすると、ヘッダーのレイアウト、色、境界線、寸法をカスタマイズするオプションが表示されます。
例として、ヘッダーの背景色を変更します。まず、「色」セクションを展開し、「背景」オプションをクリックする必要があります。
表示されるポップアップウィンドウで、まず単色またはグラデーションを選択します。
次に、プリセットカラーをいくつか選択できます。色をクリックすると、ヘッダーの背景がすぐに変更されます。
ページ右上の「スタイル」アイコンをクリックすると、さらに多くのカスタマイズオプションを見つけることができます。これにより、ヘッダーのフォント、色、レイアウトを変更できます。
サイトエディターの仕組みについて詳しくは、WordPressテーマのカスタマイズ方法に関する初心者向けガイドをご覧ください。
SeedProdでカスタムヘッダーとページレイアウトを作成する
ウェブサイトにユニークなデザインを与えるために、ヘッダー、フッター、サイドバーを完全に制御したいですか？それなら、SeedProd、つまり最高のWordPressテーマビルダープラグインの使用をお勧めします。
SeedProd を使用すると、コードを書かずにカスタム WordPress テーマを簡単に作成できます。これには、ヘッダー、フッター、および魅力的な WordPress テーマに必要なすべてのものが含まれます。
ウェブサイトの異なるページやセクションごとに、複数のカスタムヘッダースタイルを作成することも可能です。
当社のパートナーブランドの中には、SeedProd を使用してウェブサイトを構築しているところがあり、素晴らしい成果を上げています。詳細については、SeedProd の完全レビューをご覧ください。
💡 注： SeedProdの無料版を使用して、カスタムヘッダーを含むカスタムランディングページを作成できます。ただし、サイト全体のヘッダーレイアウトを含む完全にカスタムなテーマを作成するには、Proバージョンが必要になります。
まず、コードなしでカスタムWordPressテーマを簡単に作成する方法に関するガイドに従うことをお勧めします。これが完了したら、SeedProdエディターでヘッダーのカスタマイズを開始できます。
エディタにアクセスするには、ヘッダーの下にある「デザインを編集」リンクをクリックするだけです。
これにより、ヘッダーがSeedProdのドラッグ＆ドロップエディターで開きます。
ここから、新しいブロックを追加してヘッダーを簡単にカスタマイズできます。
サイトロゴやWordPressウィジェットなどのテンプレートタグ用のブロック、およびカウントダウンタイマー、ナビゲーションメニュー、ソーシャル共有ボタンなどの高度なブロックがあります。
最も良い点は、テーマビルダーを使用して各ブロックをさらにカスタマイズできることです。たとえば、ロゴのサイズや配置を変更したり、ナビゲーションメニューに表示するページを選択したりできます。ヘッダーに画像を追加することも可能です。
SeedProd を使用すると、テーマのヘッダーテンプレートにセクション全体を追加することもできます。
セクションは、ウェブサイトのさまざまな領域に使用できるブロックのグループです。これらには、ヘッダー、フッター、機能、 お客様の声、行動喚起などが含まれます。
ヘッダーセクションを使用するには、「デザイン」パネルの「セクション」タブに切り替えます。
その後、ウェブサイトに使用したいヘッダーセクションを選択します。SeedProdは、使用できる複数のセクションテンプレートを提供しています。
ヘッダーセクションのカスタマイズを開始してください。
カスタムヘッダーに満足したら、「保存」ボタンをクリックして変更を保存してください。
これで、カスタムヘッダーを公開する準備が整いました。
WordPressダッシュボードからSeedProd » Theme Builderに移動し、「SeedProdテーマを有効にする」オプションの横にあるトグルを「はい」にクリックするだけです。
オプションを有効にすると、SeedProdはデフォルトのWordPressテーマを新しいカスタムテーマとヘッダーに置き換えます。
これで、ウェブサイトにアクセスして、新しいカスタムヘッダーが機能していることを確認できます。
ページごとに異なるカスタムヘッダーを作成する
さらに、SeedProdを使用すると、サイトの特定のページ用のカスタムヘッダーを簡単にデザインできます。
テーマビルダーを使用すると、WordPressウェブサイトの各ページにカスタムヘッダーを追加できます。これにより、異なるカテゴリ、タグ、投稿タイプ、ページタイプなどにカスタマイズされたヘッダーを表示できます。
開始するには、WordPressダッシュボードからSeedProd » Theme Builderに移動し、「新しいテーマテンプレートを追加」ボタンをクリックする必要があります。
テーマテンプレートの詳細を入力する必要がある新しいポップアップウィンドウが表示されます。
テーマテンプレートの名前を入力してください。その後、ドロップダウンメニューからテンプレートタイプとして「ヘッダー」を選択します。「優先度」フィールドは空白のままで構いません。
次に、カスタムヘッダーの表示条件を入力する必要があります。たとえば、チュートリアルカテゴリにあるすべての投稿とページに表示される条件を使用しました。
完了したら、「保存」ボタンをクリックすることを忘れないでください。
その後、SeedProdのドラッグアンドドロップテーマビルダーを使用して、カスタムヘッダーを編集してください。
カスタムヘッダーの編集が完了したら、上部にある「保存」ボタンをクリックするだけです。
SeedProd を使用してヘッダーをカスタマイズする方法については、SeedProd テーマビルダーを使用した「カスタム WordPress テーマを簡単に作成する方法」の初心者向けガイドでさらに多くのアイデアを確認できます。
カテゴリごとにカスタムヘッダーを追加する
ほとんどのウェブサイトでは、すべての投稿、ページ、カテゴリ、アーカイブページに同じヘッダーが表示されます。ただし、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プラグインのインストール方法に関するガイドをご覧ください。
💡 注：このチュートリアルは、WPCodeの無料バージョンを使用して進めることができます。ただし、WPCode Proにアップグレードすると、スケジュールされたスニペット、完全な改訂履歴、開発者承認済みコードスニペットの全ライブラリへのアクセスなどの追加機能を利用できます。
アクティベートしたら、コードスニペット » + スニペットを追加に移動します。
さて、最初に行う必要があるのは、スニペットタイトルを作成することです。たとえば、 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ヘッダーをより魅力的にするもう1つの方法は、ヘッダーセクションにランダムな画像を追加することです。
ランダムに変化する画像を表示すると、訪問者の注意を引きつけ、コンテンツをより魅力的にすることができます。
WordPressブログにランダムなヘッダー画像を追加するには、テーマカスタマイザーを使用してヘッダーセクションに画像をアップロードできます。このオプションは、使用しているWordPressテーマによって異なる場合があります。
次に、「アップロードしたヘッダーをランダム化する」オプションを選択してください。
ヘッダーセクションにランダムな画像を表示する際に、より多くの制御と柔軟性が必要な場合は、WordPressプラグインを使用することもできます。
詳細については、WordPress ブログにランダムなヘッダー画像を追加する方法に関するガイドをご覧ください。
ウェブサイトのヘッダーにコードを追加する（上級）
最後に、ウェブサイトのヘッダーセクションにカスタムコードを追加したい場合は、WordPressダッシュボードから簡単に行えます。この方法はコードの編集を伴い、専門知識が必要なため、上級者向けであり、初心者には適さない場合があります。
WordPress管理画面から外観 » テーマファイルエディターに移動すると、テーマのヘッダーファイルを見つけることができます。「style.css」テーマファイルで、サイトヘッダーセクションまでスクロールしてコードを追加または削除できます。
💡 注意：テーマファイルを直接編集することは推奨しません。わずかな間違いでもウェブサイトが壊れたり、WordPressのデザインが台無しになったりする可能性があります。
サイトのヘッダーを編集するためにカスタムコードを追加する簡単な方法は、市場で最高のコードスニペットプラグインであるWPCodeを使用することです。
まず、無料のWPCodeプラグインをインストールして有効化します。詳細については、WordPressプラグインのインストール方法に関するガイドを参照してください。
アクティベートしたら、WordPressダッシュボードから コードスニペット » ヘッダー & フッター に移動できます。次に、ヘッダーセクションにカスタムコードを入力します。
コードを入力したら、「変更を保存」ボタンをクリックしてください。
詳細については、WordPressにヘッダーとフッターコードを追加する方法に関するガイドを参照してください。
これで完了です！
ボーナスヒント：さまざまなヘッダー スタイルをテストする（A/B スプリット テストを使用）
ヘッダーをカスタマイズした後、「これは訪問者にとって最良のバージョンだろうか？」と疑問に思うのは当然です。そこでA/Bスプリットテストが登場します。
レイアウトの変更、ボタンの色、または検索バーのような要素の追加など、ヘッダーのさまざまなバージョンを比較し、どれが実際にパフォーマンスが良いかを確認できます。
推測だけでなく、実際のユーザー行動に基づいてデザインの決定を下すことができます。
心配しないでください。開発者である必要はありません。
Thrive OptimizeやNelio AB Testingのような初心者向けのツールを使えば、すぐにプロのようにテストできるようになります。このアプローチにより、ヘッダーはあらゆる調整で改善されます。
詳細については、WordPressでのA/Bスプリットテストの方法に関するガイドをご覧ください。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でもフォローできます。
デビッド・リム
私はWPcodeが本当に好きです。これはスポンサーではなく、真剣な意見です。これを使う人の人生をずっと楽にしてくれます。
イジー・ヴァネック
ヘッダーを興味深くしているものは何かについて長い間考えました。そしてついに、最も目立つ要素はメニューであるという意見に至りました。長い間、私は主に、その外観とコンテンツで一目で人々を惹きつける高品質のメガメニューをどのように作成するかを扱ってきました。つまり、私にとって、ヘッダーはメニューを特別なものにしています。