WordPressのヘッダーをカスタマイズするには？

WordPress ウェブサイトの美しいバナーデザイン (バナー)は、あなたのウェブサイトの文化を紹介する素晴らしい方法です。ナビゲーションを容易にし、デザインの観点からサイトの美観を向上させます。

多くのテーマにはあらかじめヘッダーがデザインされていますし、カスタマイズすることもできます：

• ソーシャルメディアへのリンク
• ドロップダウンメニューの追加
• 検索オプションの追加

をフルサイトエディタ関数を使うことができます。ブロックエディターカスタムコードを書いたりプラグインに頼ったりすることなく、プロフェッショナルなヘッダーを作成できます。

このガイドでは 3つの方法 WordPressのヘッダーをカスタマイズし、高度なヘッダーカスタマイズのヒントと複数のヘッダーテンプレートを作成する方法を共有します。

WordPressのヘッダーとは何ですか？

ヘッダーはウェブサイトの一番上の部分で、通常ウェブサイトの各ページの一番上に表示されます。通常、ヘッダーには以下の内容が含まれます：

• ウェブサイトのロゴ
• 検索機能
• 基本的なナビゲーションメニュー（ブログなど、会社概要そしてお問い合わせなど)

サイトのヘッダーは、訪問者にとってより便利になるようにカスタマイズすることができます：

• プロモーションバナー
• コールボタン(CTA)
• ソーシャルメディアリンク
• 人気ページリンク

次に、WordPressウェブサイトのヘッダーをカスタマイズする方法をご覧ください。

WordPressヘッダーのカスタマイズ

方法1：WordPressテーマカスタマイザーを使う

多くの ワードプレスのテーマ残りのサポート WordPressテーマカスタマイザーウェブサイトのルック＆フィールをカスタマイズする素晴らしい方法です。例えば Twenty Twenty｜WordPressテーマ テーマは、WordPress 5.9で完全なサイト編集機能が導入される前にリリースされたため、テーマカスタマイザーをサポートしています。

注：この方法は古いトピックに有効です。ブロックベースのアーキテクチャ.次のセクションでは、どのように完全なサイト編集機能でヘッダーをカスタマイズをクリックしてください。

WordPressのテーマカスタマイザーにアクセスするには、次の場所に移動します。 外観 > カスタマイズ.このオプションが表示されない場合は、そのサイトが完全なサイト編集機能をサポートしていることを意味します。

あるTwenty Twentyテーマタイトルを編集するためのオプションはあまりありません。実際、タイトルを編集するためのセクションはありません。タイトルをカスタマイズするには「カラー一部変更タイトルカラー.

テーマオプションからアクセスすることもできます。タイトルに検索オプション.

ヘッダーを追加したい場合ウェブサイトのロゴ歌で応えるサイトタイトルに行くことができます。「ウェブサイトのロゴオプション

以上です。で トゥエンティトゥエンティ このテーマでは、ナビゲーションメニューの追加や削除、ヘッダーのカスタマイズはできません。

次のようなヘッダー専用のカスタマイズオプションを提供しているテーマを使用している場合 アストラそれから、サイトのヘッダーにさらに変更を加えることができます。

ある アストラ テーマでは ヘッダービルダー(ヘッダービルダー）でサイトのヘッダーをカスタマイズできます。

今、サイトのヘッダーに多くの変更を加えることが可能です。例えば、ナビゲーションメニューを更新することから始めましょう。これを行うには、"メインメニュー"(メインメニュー)オプション

さて、既存のナビゲーションメニューをカスタマイズしたいと思います。

をクリックします。ここからメニューを設定 > プライマリメニュー > + 新しいメニューを作成。新しいメニューの作成")

新しいメニューに名前を付け、"次のページナビゲーションメニューにリンクしたいページを追加します。

これで、もし気づかれたら、既存のナビゲーション・メニューは削除されます。

新しいメニューを追加するには、"+ 項目を追加ボタン。

今、私はホームページ、価格ページ歌で応えるログインヘッダーに追加し、"出版ボタン。

これで、新しいナビゲーションメニューがサイトのヘッダーに追加されたことがわかります。

さらにカスタマイズするために、ヘッダーをソーシャルメディアリンク.カスタマイズページの一番下にある「Addガジェットオプションは以下の通りです：

サイトナビゲーションメニューにソーシャルウィジェットが追加されました。

今です。ソーシャルウィジェットにリンクを追加するにはをクリックし、追加したソーシャルガジェットをクリックします。

リンクを追加するための独立したメニューが左側に表示されるようになりました。リンクはこのメニューから追加でき、アイコンは必要に応じて変更できます。

次に、ヘッダーのデザインを変更します。そのためには デザイン（DESIGN） メニュー

ナビゲーションメニューにアンダーライン効果を追加します。

ナビゲーションメニューの文字色も変更されます。変更すると、テキストの色は黒、クリックすると赤、カーソルを合わせると青になります。

必要に応じてさらにカスタマイズすることもできますが、あまり複雑なチュートリアルではないので、ここでやめておきます。今サイトをプレビューすると、ヘッダーはこのようになっています：

きれいではありませんが、カスタマイズは可能です。自分好みにカスタマイズできます。

方法2：サイト全体の編集機能を使ってカスタマイズする方法

それでは、WordPressのサイト全体の編集機能を使ってヘッダーをカスタマイズしてみましょう。これは トゥエンティトゥエンティフォー トピックブロックベースのアーキテクチャをサポートするテーマを変更すると、以前の"カスタム」オプションは削除されました。の代わりにエディターオプション.クリックすると操作が開始されます。

一旦エディターの中に入れば、無制限のカスタマイズオプションがあります。まず、以前のようにカスタマイズされたナビゲーションメニュー私には分かりにくいから。

ナビゲーションメニューの編集方法

• ナビゲーションメニューをクリックし、"編集).

• ヘッダーの中に入れておきたいんです」。ホーム、会社概要、ログインページ.

• 調整が完了したら「セーブ.

これが新しいメニューです：

次に、ヘッダーに背景色を追加します。

• サイトタイトル、ロゴ、ナビゲーションメニューを含むものを選択してください。列ブロック.

• のブロックの設定に移動します。「カラー下を探す背景オプション

ヘッダーにグラデーションの背景色を追加しました。プレビューすると以下のような効果が見られます：

さて、ナビゲーション・メニューは小さすぎて、隅に詰め込まれているように見えます。文字を少し大きくして、間隔を空けましょう。

• オプションナビゲーションブロック" に移動します。スタイルオプションでテキストサイズを中サイズに変更し、メニュー項目間にスペースを追加します。

ヘッダーがプレビューされ、より見やすくなったはずです：

次に、異なる言語オプションを表示するサブメニューをナビゲーションメニューに追加します。

• 追加 "サブメニューブロックと名付けました。言語.
• 次に、以下のようにサブメニュー項目を追加します：

プレビュー効果は以下の通りです：

完全なサイトエディタを使って、WordPressサイト用の完全にユニークなナビゲーションヘッダーを作成してみてください。

複数のヘッダーテンプレートの作成

WordPressウェブサイトエディタの大きな利点の1つは、テンプレートごとに異なるヘッダーを作成できることです。

ヘッダーの外観とスタイルの変更は、ブロックモードでプリセットヘッダーを使用できるサイトエディターで簡単にできます。

例えば、サイト全体のヘッダーではなく、個々のページにユニークなヘッダーを作成したいです。
個々のヘッダーを作成したいテンプレートを選択し、以下の手順に従います：

1.既存のヘッダーを削除

テンプレートが選択されると、現在表示されているヘッダーが先ほど作成したものであることがわかります。

重要なヒント サイト全体のヘッダーに影響を与えるので、このテンプレートや他のテンプレートで既存のヘッダーを直接編集しないでください。
したがって、このヘッダーを削除し、現在のテンプレート用に新しいヘッダーを作成する必要があります。

• とおすリスト表示.
• オプション「ヘッダークリック楕円アイコン > 削除.
• これは既存のヘッダーを削除します。

ヘッダー削除の効果は以下の通り：

2.新しいヘッダーの追加

これでテンプレートに新しいヘッダーを追加できます。オプションです：

• ゼロから新しいヘッダーを作成します。または
• 支出プリセットヘッダーパターン（プリメイドパターンヘッダー）.

本文は、以下の手順でプリセットヘッダーモードを使用することを選択します：

• 入り込む パターン > ヘッダー.

• サイト全体に影響を与えることなく、このカスタムテンプレートを使用して個々のページまたは投稿にのみ表示されるヘッダーのニーズを満たすヘッダーパターンを選択します。

ヘッダーをプリセットしたテンプレートはこんな感じです：

カスタムヘッダーのスタイルと内容は、必要に応じてさらに調整できます！

方法3: ページビルダーを使用してカスタムヘッダーを作成します。

ヘッダーをカスタマイズするもう一つの方法はページビルダー.しかし、サイトが厳格なレイアウトルールを持つカスタムテーマを使用しており、ヘッダーを上書きするためにページビルダーの使用を許可していない場合、この方法は適切ではないかもしれません。

しかし、ゼロからウェブサイトを構築するのであれば、ページビルダーが良い選択でしょう。

ここでは エレメンタ の無料版（カスタマイズオプションは制限付き）です。

ステップ：Elementorを使ったカスタムヘッダー

1. 外観の設定
打点 外観 > カスタマイズ.

2. ヘッダーとフッターのオプションを選択
打点 ヘッダーとフッター オプション

3. デザイン開始
打点 デザイン開始 オプションを使ってヘッダーを編集できます。

4. ヘッダーテーマの選択
打点 テーマヘッダー（ヘッダー） オプション

5. 簡単なカスタマイズ
無料版ではカスタマイズオプションが限られているため、ここではカラーオプションを変更することで、ウェブサイトのヘッダーをカスタマイズするためのさまざまなオプションを調整することがいかに簡単であるかを示すことができます。

色をカスタマイズした後のヘッダーはこんな感じです：

はんけつをくだす

上記はWordPressのヘッダーをカスタマイズするためのガイドです。ヘッダーをカスタマイズする3つの異なる方法を説明します。 WordPressテーマカスタマイズツールによる サイト全体の編集機能のようなツールを使うだけでなく エレメンタ このようなページビルダーです。