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

WordPressのヘッダーをカスタマイズする簡単な方法をお探しですか？

あなたのヘッダーがあらゆるページの上に坐るので、あなたのウェブサイトを決め付け、あなたの訪問者が運行するのを助け、あなたの最も重要な内容を促進することの必要な役割を担う。

ただし、サイトのヘッダーから最大限の利益を得るには、多くのテーマでは提供されていない編集方法が必要です。

この記事では、単純なドラッグアンドドロップインターフェイスと独自のコードの両方を使用して、WordPressのヘッダーをカスタマイズするために使用できるいくつかの異なる戦術を共有します。

最も簡単なオプションは、Astraテーマとそのドラッグアンドドロップヘッダービルダーを使用することですが、我々はまた、任意のWordPressテーマで動作するいくつかの

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

WordPressのヘッダーは、すべてのページの上部に表示されるサイトの一部です。 典型的には、少なくとも2つの要素が最低限含まれています。:

• サイトロゴ/アイデンティティ
• ナビゲーションメニュー（s)

たとえば、Astraブログのヘッダーの外観は次のようになります。 あなたはそれがAstraのロゴだけでなく、二つの別々のナビゲーションメニューが含まれているこ:

ニーズに応じて、ソーシャルメディアアイコン、検索ボックス、プロモーション、電話番号、その他の情報などの他の要素を含めることもできます。

あなたは今までそれがどのように動作するかを確認する必要がある場合は、WordPressのヘッダーがヘッダーに含まれています。あなたのWordPressテーマのphpファイル。

AstraでWordPressのヘッダーをカスタマイズする方法

あなたのWordPressのヘッダーを完全に制御したい場合は、無料のAstraのテーマはあなたに完全にあなたのWordPressのヘッ

ウェブサイトのライブプレビューで変更をすぐに確認でき、ボタン、ソーシャルアイコン、検索ボックスなど、さまざまな種類のコンテンツを簡単に追加

開始するには、Astraテーマをインストールしてアクティブ化します。 また、すぐに起動して実行して取得するために事前に構築されたデモサイトの何百ものいずれかをインポートすることができます。 これらの手順のいずれかで救いの手が必要な場合は、私たちはあなたを助けるためのガイドがたくさんあります:

• Astraのインストール方法
• スターターサイトのインポート方法

基本サイトの準備ができたら、Astraを使用してヘッダーをカスタマイズする方法を次に示します。

1. Astra Header Builder

を開き、WordPressダッシュボードの外観→カスタマイズに移動してネイティブWordPressカスタマイザを起動します。 次に、ヘッダービルダーオプションを選択します:

ヘッダービルダーを起動すると、ヘッダーのレイアウトを制御できる新しいオプションセットが表示されます:

2. ヘッダーのコンテンツを追加して整理する

楽しい部分のために今–コンテンツを追加します。 Header builderには3つの行があることがわかります。 各行は、ヘッダーの異なる部分のコンテンツを制御します:

1. ヘッダーの上
2. プライマリヘッダー–これはあなたの”メイン”コンテンツを置く場所です。

あなたは絶対にプライマリヘッダーにコンテンツを含めたいと思うでしょう、そしてあなたはあなたのニーズに応じてそれの上または下にコンテン

コンテンツを追加するには、コンテンツを追加したい場所をクリックすることができます。 これにより、一連のオプションが開きます:

• メインメニュー
• セカンダリメニュー
• ロゴ
• ボタン
• 検索
• ソーシャル
• HTML1
• HTML2

コンテンツを追加すると、表示されるオプションが少なくなることに注意してください。 たとえば、ロゴを追加できるのは一度だけなので、すでにヘッダーにロゴを追加した後はそのオプションが表示されなくなります:

コンテンツを追加したら、そのコンテンツをクリックして設定を開くことができます。 たとえば、ボタンを追加すると、ボタンのテキストとリンクを制御できます。

デザイン設定を開いて、さらにカスタマイズすることもできます:

コンテンツを再配置したり、別の行に移動したりする場合は、ドラッグアンドドロップするだけです:

3. ヘッダーのレイアウトをカスタマイズする

上記では、ヘッダー内の個々の要素をカスタマイズする方法を示しました。 また、ヘッダー全体をカスタマイズするためのいくつかのオプションがあります。

まず、メインヘッダービルダーのデザインタブに移動して、ヘッダーの幅と間隔を制御することができます。 また、各ヘッダー行の歯車アイコンをクリックして、高さとデザインをカスタマイズすることもできます:

4. さまざまな種類のヘッダーを試してみてください

あなたはAstraまたはAstra Proの無料版を使用しているかどうかに応じて、あなたはまた、透明ヘッダー（無料）と

上記と同じheader and footer builderを使用して、透明または粘着性のあるヘッダーを設計することができます。 これらのオプションは、[Header Types]セクションの下に表示されます。 それらをクリックして設定を展開し、それらの異なるヘッダタイプを設計することができます:

WordPressヘッダーをカスタマイズする他の3つの方法

AstraのドラッグアンドドロップヘッダービルダーはWordPressヘッダーをカスタマイズする最も簡単な方法を提供しますが、使用しているテーマに関係なく、使用できる他の戦術もあります。

ここでは、最良の戦略のいくつかがあります…

1. テーマのカスタマイザ設定を使用する

ほとんどのWordPressテーマは、ネイティブのWordPressカスタマイザでサイトのヘッダーを制御できます。 あなたはAstraがあなたに与える詳細のレベルを得ることはまずありませんが、あなたのヘッダーがどのように見え、機能するかを制御するためのいく

これらのオプションはテーマによって異なりますが、通常はヘッダー内の要素の横にある青い鉛筆アイコンをクリックして開くことができます。 たとえば、新しいTwenty Twenty-Oneデフォルトテーマでは、次のようにカスタマイズできることがわかります。:

• ロゴ
• サイト見出し
• メニュー

追加のヘルプが必要な場合は、テーマ開発者のドキュメントを参照してください。

2. Elementorと無料のカスタムヘッダープラグイン

を使用してくださいElementorに慣れていない場合は、サイト上のコンテンツを作成するために使用できる視覚的なドラ 無料のElementor–Header、Footer&ブロックテンプレートカスタムヘッダーワードプレスプラグインを使用すると、独自のWordPressのカスタムヘッダーを設計するためにElementorの無料版を使

このプラグインは、無料のアストラのテーマだけでなく、あなたが使用している可能性のある他のWordPressのテーマで完璧に動作します。

開始するには、以下から無料のプラグインをインストールしてアクティブ化しますWordPress.orgまた、Elementorの無料版をまだインストールしていない場合は、インストールする必要があります。

それが終わったら、外観→ヘッダーフッター&ブロックに移動し、新規追加をクリックします:

テンプレートに名前を付け、”テンプレートの種類”で”ヘッダー”を選択します。 また、[表示]または[ユーザーロール]オプションを使用して、ヘッダーを特定のコンテンツ/ユーザーにターゲット設定することもできます。

次に、ヘッダーを公開し、”Elementorで編集”をクリックしてvisual builderを開きます:

これで、Elementorの視覚的なドラッグアンドドロップインターフェイスを使用してヘッダーを完全にカスタマイズできます。 プラグインはまた、あなたのサイトのロゴやナビゲーションメニューのような重要なサイト要素を追加するために使用できる新しいヘッダー、フッター&ブ:

Elementorの使用の詳細については、私たちの完全なElementorチュートリアルまたはElementorレビューをチェックしてください。

3. カスタムコードを使用する(高度な)

最後に、上級ユーザーの場合は、独自のコードを使用してWordPressのヘッダーをカスタマイズすることもできます。 これを行うには、少なくともHTML、PHP、およびCSSの実用的な知識が必要なので、これは非技術的なユーザーのためのオプションではありません。

これらのコーディング言語がわからない場合は、このリストの前の方法のいずれかに固執することをお勧めします。

コードを使用してヘッダーをカスタマイズするには、二つの部分があります:

• HTML/PHP-これはヘッダー内の実際のコンテンツを制御します。
• CSS–ヘッダーのスタイルを制御します。

先に述べたように、サイトのヘッダーの内容はヘッダーにあります。phpファイル。 そのため、ヘッダーのコンテンツをカスタマイズするには、このファイルを直接操作する必要があります。 または、Astraなどの一部のテーマでは、ヘッダーにコンテンツを追加するために使用できるフックも提供しています。

Astra visual hooksガイドでは、ヘッダーをカスタマイズするためのいくつかのオプションがあることがわかります:

あなたのテーマのヘッダーを編集したい場合。phpファイルを直接使用する場合は、子テーマを使用して、テーマを更新するときに変更を上書きしないようにする必要があります。

一方、フックを使用している場合は、Astra Hooksやコードスニペットのようなプラグインを使用する限り、子テーマを使用する必要はありません。 テーマの関数にフックを直接追加する場合。phpファイル、あなたはまだ、しかし、子テーマを使用する必要があります。

Astra Proでは、Astra Proのカスタムレイアウト機能を使用してフックを追加するオプションもあります。

Astra Proのカスタムレイアウトについてのきちんとしたことは、表示ルールを使用して変更が表示されるタイミングを正確に制御できることです。 たとえば、ログインしているユーザーにのみ表示されるカスタムコンテンツをヘッダーに追加できます。

それはあなたのヘッダーのコンテンツをカスタマイズする方法です–しかし、スタイリングはどうですか？

ヘッダーのスタイルをカスタマイズするには、スタイルを編集します。子テーマを使用している場合は、cssファイルを直接使用します。 または、WordPressカスタマイザの追加CSS領域を使用して、独自のカスタムスタイルをヘッダーに追加できます。

今日のあなたのWordPressのヘッダーをカスタマイズ

あなたのWordPressのヘッダーは、あなたのサイトの成功に不可欠な役割を果たしています。 それはあなたのウェブサイトをブランド化し、主要なコンテンツにあなたの訪問者を導き、重要な情報や社会的プロファイルを促進するのに役立

サイトのヘッダーを完全に制御する最も簡単な方法は、無料のAstraテーマを使用することです。 Astraを使用すると、視覚的な、ドラッグアンドドロップヘッダービルダーへのアクセスを取得します。 あなたは、任意のコードや外部のプラグインを必要としない–あなたはWordPressのカスタマイザー内の右からあなたのヘッダーの100％の制御を取得します。

他の状況では、別のテーマのカスタマイザ設定、Elementor–Header、Footer&Blocks Templateプラグイン、または技術的な知識があれば独自のコードを使用することもできます。