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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 調(diào)整が完了したら「セーブ.

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

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

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

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

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

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

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

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

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

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

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

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

複數(shù)のヘッダーテンプレートの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

カスタムヘッダーのスタイルと內(nèi)容は、必要に応じてさらに調(diào)整できます！

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

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

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

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

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

1. 外観の設(shè)定
打點(diǎn) 外観 > カスタマイズ.

2. ヘッダーとフッターのオプションを選択
打點(diǎn) ヘッダーとフッター オプション

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

4. ヘッダーテーマの選択
打點(diǎn) テーマヘッダー（ヘッダー） オプション

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

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

はんけつをくだす

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

お問い合わせ
チュートリアルが読めない？無料でお答えします！個(gè)人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時(shí)間: 月～金、9:30～18:30、祝日休み