要約：テーマを壊さずにWordPressヘッダーをカスタマイズする方法
WordPressのヘッダーは訪問者が最初に目にする部分であり、ほとんどのテーマでは予想よりもはるかにコントロールが効きません。私が使用する4つの方法を以下に示します。
- SeedProdテーマビルダー：ヘッダーのすべての要素を完全にポイント＆クリックで制御でき、どのテーマでも機能し、テーマの更新や切り替え時に変更を保持します。
- WordPressテーマカスタマイザー（またはサイトエディター）：クラシックテーマの基本的なロゴ、タイトル、メニューの調整に適しています。最新のFSEテーマでは代わりに[外観] » [エディター]を使用します。
- ヘッダーとフッターの挿入プラグイン：テーマファイルを変更せずに、ヘッダー領域にスクリプトや簡単なコードスニペットを追加するのに最適です。
- CSSとheader.phpの編集：上級ユーザー向けです。CSSの変更は安全です。header.phpを直接編集するには、更新時に生き残るために子テーマが必要です。
WordPressテーマがヘッダーレイアウトを選択しました。あなたではありません。
長年、数十のWordPressサイトでヘッダーを編集してきましたが、それが人々を最も悩ませることです。ロゴを追加しようとしている場合でも、ナビゲーションを変更しようとしている場合でも、コールトゥアクションボタンを配置しようとしている場合でも、ヘッダーはサイト全体のトーンを設定します。適切なアプローチをとれば、ほとんどのWordPressテーマでは単独ではできない、ページごとに異なるヘッダーを表示することさえできます。
このガイドでは、ビジュアルビルダーからCSSカスタマイズまで、4つの方法を使用してWordPressヘッダーを編集する方法を説明します。
クイックサマリー：WordPressヘッダーの編集方法
WordPressヘッダーとは？
WordPressヘッダーは、サイトのすべてのページの最上部にあるセクションです。通常、ロゴ、ナビゲーションメニュー、電話番号やサインアップボタンなどのCTAが含まれます。
たとえば、SeedProdウェブサイトのヘッダーは次のようになります。
ご覧のとおり、SeedProdロゴ、ナビゲーションメニュー、およびSeedProdを開始するためのコールトゥアクションボタンがあります。
ウェブサイトに他のニーズがある場合は、WordPressサイトのヘッダーに追加の要素を追加できます。SeedProdのように、コールトゥアクションボタンを追加したり、検索ボックス、ソーシャルメディアアイコン、その他のコンテンツを含めたりできます。
WordPressテーマのheader.phpファイルでWordPressヘッダーの詳細を見つけることができます。このファイルを編集するのは、何をしているか理解している上級ユーザーの場合にのみ推奨します。
WordPressヘッダーで変更できること
ヘッダーは第一印象が作られる場所であり、ほとんどのWordPressテーマではほとんどコントロールできません。実際に編集可能なものを理解することで、以下の適切な方法を選択できます。
ほとんどのヘッダーカスタマイズは、これらのカテゴリに分類されます：
- ロゴとサイトタイトル
- タグライン
- ナビゲーションメニュー
- CTAボタン（電話番号、「無料トライアルを開始」、[お問い合わせ]）
- 検索バー
- ソーシャルメディアアイコン
- 背景色とフォント
- 固定表示（スクロールしても表示されたままのヘッダー）
- モバイルレイアウト（ハンバーガーメニュー、スタックまたはインライン要素）
選択した方法によって、実際に制御できる数が決まります。標準のテーマカスタマイザーでは、ロゴとタグラインのオプションは提供されても、それ以外は何も提供されない場合があります。SeedProdのWordPressヘッダービルダーを使用すると、これらすべてを完全に制御できます。
1. SeedProdでWordPressのヘッダーをカスタマイズする方法
WordPressヘッダーを完全に制御したい場合は、SeedProdが最も強力な制御を提供します。これは、コードを書かずにカスタムWordPressヘッダーテンプレートを作成できる最高のWordPressテーマビルダープラグインです。
SeedProdは、コードに触れることなく、完全なWordPressウェブサイトとカスタムテーマを構築できるドラッグ＆ドロップWordPressウェブサイトビルダーです。
SeedProdのテーマビルダーはテーマに依存しません。アクティブなWordPressテーマを完全に置き換えるため、テーマの更新や切り替え時に変更が失われることはありません。
WordPressウェブサイトのカスタムヘッダーの作成は数クリックで完了し、ドラッグ＆ドロップで一般的なヘッダー要素を追加できます。
それでは、SeedProdでWordPressヘッダーを編集する手順を説明します。
ステップ1：SeedProdテーマビルダープラグインをインストールする
SeedProdテーマビルダーはどのWordPressテーマとも連携するため、既存の設定を最初に削除する必要はありません。
まず、WordPressサイトにSeedProdをインストールして有効化します。
この手順については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
注意：テーマビルダーのロックを解除するには、ProまたはEliteプランが必要です。
プラグインをアクティブ化した後、SeedProd » 設定に移動してプラグインライセンスキーを入力します。これはSeedProdウェブサイトのアカウントで見つけることができます。
ライセンスキーを入力してキーの検証をクリックすると、SeedProdを使用してカスタムWordPressヘッダーを作成する準備が整います。
ステップ2：スターターテーマテンプレートを選択する
SeedProdでヘッダーを編集するには、まずカスタムテーマを作成します。心配しないでください、それは聞こえるよりも簡単です。
SeedProd » テーマビルダーに移動します。このページには、現在のテーマテンプレートファイルが一覧表示されます。
まだ開始していないため、グローバルCSSテンプレートのみが表示されます。
開始するには2つのオプションがあります：
- 既製の SeedProd テーマを最初のステップとして使用する
- テーマテンプレートをゼロから手動で作成する
既存のテーマから始めることをお勧めします。SeedProdは、ヘッダー、フッター、ページテンプレートを含むすべてのテンプレートファイルを自動的に生成します。これらは完全でプロフェッショナルな品質のテーマであり、作業を迅速に進めることができます。
テーマをクリックし、サイトのニーズに最も合ったものを選択します。
テーマを選択すると、SeedProdはすべてのテンプレートファイルを自動的に作成します。そこから、ドラッグ＆ドロップエディターで各テンプレートを個別に編集できます。
ステップ3：ヘッダーセクションをカスタマイズする
SeedProdでヘッダーを編集するには、ヘッダーテンプレートを見つけて、デザインの編集をクリックします。
これにより、テンプレートファイルがSeedProdのテーマビルダーで開かれます。右側にWordPressヘッダーテンプレートのライブプレビューが表示され、左側に編集パネルが表示されます。
ヘッダーテンプレート内の任意の項目を変更するには、ポイントしてクリックして編集します。
クリックした項目に応じて、左側の列に異なる編集オプションが表示されます。フォント、色、背景、間隔などを変更できます。
カスタムヘッダー項目を追加するには、左側の列からSeedProdブロックをテンプレートにドラッグします。利用可能なブロックタイプは次のとおりです：
- テンプレートタグ – WordPressデータベースからブログ投稿、コメント、アイキャッチ画像などのテーマ要素を生成するブロック。
- 標準ブロック – 画像、ボタン、テキスト、区切り線などを追加できる一般的なウェブデザイン要素。
- 高度なブロック – お問い合わせフォーム、ソーシャルプロフィール、共有ボタン、WordPressショートコード、Googleマップなどを追加するためのブロック。
- WooCommerce – オンラインストアを運営している場合は、これらのブロックを使用して商品、ショッピングカート、カスタムチェックアウトページを表示します。
WordPressヘッダーをカスタマイズするためのセクションの使用
個々のブロックとは別に、ヘッダーテンプレートに完全なセクションを追加することもできます。
デザインパネルのセクションタブに切り替えます。
セクションは、ウェブサイトデザインのさまざまな領域のブロックのグループです。ヘッダー、フッター、CTA、機能などのための既製のセクションを見つけることができます。
ヘッダーセクションをクリックしてテンプレートに追加し、要件に合わせて編集します。
ヘッダーの外観に満足したら、右上隅の保存をクリックします。
これで、テーマ内の他のテンプレートについてもこのプロセスを繰り返し、完全にカスタムなWordPressテーマを作成します。
ステップ4.カスタムWordPressヘッダーを公開する
カスタムWordPressヘッダーテンプレートの外観に満足したら、最後のステップはサイトで有効化することです。
SeedProdでは、簡単なトグルでカスタムWordPressヘッダーを適用します。
SeedProd » テーマビルダーに移動し、「SeedProdテーマを有効化」の横にあるスイッチを「はい」に切り替えます。
SeedProdは、既存のデザインを新しいWordPressテーマとヘッダーに置き換えます。
あなたのウェブサイトを訪問して、カスタムWordPressヘッダーが機能していることを確認してください。
WordPressヘッダーをスティッキーにする方法
スティッキーヘッダーは、訪問者がページをスクロールダウンしても表示されたままになり、ナビゲーションとCTAを常に利用できるようにします。SeedProdまたは標準テーマを使用しているかどうかにかかわらず、アプローチは同じです。小さなCSSスニペットです。
これをテーマの追加CSS（外観 » カスタマイズ » 追加CSSに移動）に追加するか、SeedProdを使用している場合は、SeedProd » テーマビルダー » グローバルCSSに貼り付けます。
.site-header {
position: sticky;
top: 0;
z-index: 999;
}セレクター.site-headerはテーマによって異なります。そのため、正しいクラスを見つけるためにヘッダー要素を検査する必要がある場合があります。
SeedProdで複数のカスタムヘッダーを作成する
ウェブサイトのさまざまなセクションに対して複数のヘッダーを作成することもできます。
たとえば、特定のカテゴリまたはランディングページにのみ表示されるヘッダーが必要な場合があります。これを行うには、新しいテンプレートを作成し、表示条件をニーズに合わせて変更します。
SeedProdのドラッグアンドドロップテーマビルダーを使用すると、サイトに必要なカスタムヘッダーレイアウトを作成できます。
SeedProdのビジュアルエディターはWordPressヘッダーを編集する最も簡単な方法ですが、知っておく価値のある他の方法もあります。
2. テーマカスタマイザーでWordPressヘッダーを編集する
ほとんどのWordPressテーマでは、ネイティブWordPressカスタムizerでサイトのヘッダーをある程度制御できます。深い制御はできませんが、ヘッダーの外観と動作を変更するための基本的なオプションが得られます。
利用可能なオプションはテーマによって異なります。ほとんどのクラシックテーマでは、WordPress管理画面から外観 » カスタマイズに移動します。次に、左側の列にあるサイト基本情報をクリックします。
ほとんどのテーマでは、このパネルからロゴ、サイトタイトル、キャッチフレーズをカスタマイズできます。
次にメニューをクリックして、ナビゲーションメニューのレイアウトを変更できます。
注意: Twenty Twenty-Five（現在のデフォルト）のようなブロックベース（FSE）テーマを使用している場合、クラシックカスタマイザーは利用できません。代わりに、外観 » エディターに移動して、フルサイト編集インターフェイスを使用してヘッダーを編集します。
サイトエディターを使用すると、他の投稿やページと同じように、ブロックエディターでWordPressヘッダーを編集できます。クラシックカスタマイザーよりも柔軟性がありますが、SeedProdの専用WordPressヘッダービルダーほどの制御はありません。
3. ヘッダープラグインでWordPressのヘッダーをカスタマイズする
WordPressでヘッダーを編集するもう1つの簡単な方法は、シンプルなヘッダープラグインを使用することです。テーマファイルを直接編集せずに、ヘッダーにスクリプトやコードを追加する必要がある場合に適したオプションです。
何百ものプラグインから選択できますが、無料のInsert Headers and Footersプラグインが最も人気のあるオプションです。
ウェブサイトでプラグインを有効にした後、設定 » ヘッダーとフッターの挿入で見つけます。
そこから、ウェブサイトのヘッダーに追加したいコードを貼り付けることができます。
ここに追加したスクリプトは、WordPressサイトのヘッダータグに自動的に含まれます。変更を保存するには、保存をクリックします。
4. WordPress ヘッダーコードのカスタマイズ (上級者向け)
上級ユーザーの場合は、HTML、PHP、CSSを使用してWordPressヘッダーを直接編集できます。この方法は初心者には適していません。
重要: header.phpを直接編集する場合は、子テーマで行ってください。そうしないと、テーマを更新したときに変更が上書きされます。以下のCSSのみのアプローチでは、その問題はありません。
ヘッダーのコードを編集するには、外観 » テーマエディターに移動し、Style.cssファイルを開きます。
そこから下にスクロールしてサイトヘッダーセクションに移動し、コードを追加または削除してスタイルを調整します。
構造的および機能的な変更のために、header.phpファイルを編集することもできます。たとえば、電話番号を追加したり、ヘッダーレイアウトを再構築したりしたい場合は、CSSではなくheader.phpにあります。
これらの変更はサイト全体に適用されます。モバイルヘッダーの外観を変えたい場合は、個別に処理する方法を説明します。
モバイルでWordPressヘッダーをカスタマイズする方法
デスクトップとモバイルのヘッダーでは、異なるレイアウトが必要になることがよくあります。1440pxの画面できれいに表示されるナビゲーションメニューは、モバイルでは窮屈で乱雑になる可能性があり、ほとんどのテーマではそれを修正するための視覚的な方法が提供されていません。
WordPressでモバイルヘッダーのカスタマイズを処理する3つの方法を以下に示します。
- SeedProd レスポンシブプレビューモード: SeedProd のヘッダーエディターで、画面下部にあるモバイルアイコンをクリックすると、モバイルサイズでのヘッダーのプレビューと編集ができます。デスクトップレイアウトに影響を与えることなく、モバイル専用に要素を非表示にしたり、間隔を調整したり、ブロックを並べ替えたりできます。
- CSS メディアクエリ: テーマベースのサイトでは、特定のブレークポイントでヘッダー要素をターゲットにするレスポンシブ CSS ルールを追加します。たとえば、モバイルでサイトのタグラインを非表示にするには、次のようにします:
@media (max-width: 768px) { .site-description { display: none; } } - テーマの組み込みモバイルメニュー設定: ほとんどのテーマはハンバーガーメニューを自動的に処理しますが、テーマに含まれるモバイル固有のヘッダーオプションについては、[外観] » [カスタマイズ] » [モバイル] (または類似のパネル) を確認してください。
私が最もよく目にする一般的な問題は、CSS 編集後にデスクトップとモバイルのヘッダー スタイルが競合することです。その場合は、CSS ルールにレスポンシブ ブレークポイントがあるかどうか、またはモバイル用の正しいセレクターを編集しているかどうかを確認してください。
WordPress ヘッダーに関するよくある質問
WordPress のヘッダーをテーマを壊さずに編集するにはどうすればよいですか?
最も安全なアプローチは、SeedProd のテーマ ビルダーを使用することです。これは、アクティブなテーマを変更するのではなく、完全に置き換えます。これにより、テーマを更新または切り替えても、カスタム ヘッダーが危険にさらされることはありません。テーマを使い続けたい場合は、[外観] » [カスタマイズ] » [追加 CSS] を介した CSS 編集に限定し、header.php の直接編集は避けてください。header.php を編集する必要がある場合は、必ず最初に子テーマを使用してください。
WordPress.com と WordPress.org のヘッダー編集の違いは何ですか?
WordPress.org (セルフホスト) では、テーマのカスタマイズ、プラグイン、および直接のファイル編集を通じて、ヘッダーを完全に制御できます。WordPress.com は、より多くの制限があるホスト型サービスです。WordPress.com では、[サイト] » [エディター] を介してヘッダーを編集し、オプションはプランによって異なります。この記事の方法は、セルフホスト WordPress.org サイトにのみ適用されます。
WordPress ヘッダーをスティッキーにするにはどうすればよいですか?
SeedProd と標準のテーマ設定の両方で、同じ CSS アプローチが使用されます。ヘッダー要素の CSS クラスに position: sticky; top: 0; z-index: 999; を追加します。SeedProd ユーザーの場合は、[SeedProd] » [テーマ ビルダー] » [グローバル CSS] に貼り付けます。標準テーマの場合は、[外観] » [カスタマイズ] » [追加 CSS] に移動します。正確なクラスはテーマによって異なるため、ヘッダー要素を調べて正しいセレクターを見つけてください。
WordPress の特定のページに異なるヘッダーを表示できますか?
はい、SeedProd を使用すると、複数のヘッダー テンプレートを作成し、表示条件を使用して、それぞれを特定のページ、カテゴリ、または投稿タイプに割り当てることができます。これはテーマ ビルダーに組み込まれており、コーディングは不要です。標準の WordPress テーマでは、異なるページに異なるヘッダーを表示するには、カスタム PHP または Conditional Headers のようなプラグインが必要です。
WordPressヘッダーを今日カスタマイズ
この記事がWordPressでヘッダーを編集する方法を学ぶのに役立ったことを願っています。
SeedProdを使用すると、カスタムヘッダーのWordPressセットアップを完全に制御する最も簡単な方法が得られます。ビジュアルなドラッグアンドドロップWordPressヘッダービルダーを提供しており、コードやテーマファイルを編集する必要はなく、WordPressダッシュボード内で直接すべての変更を行うことができます。
WordPressのフッターを編集する方法に関するこのガイドも気に入るかもしれません。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
