4つの簡単な方法（3つはコードなし）

ヘッダーは、ほとんどの訪問者に表示されるWebサイトの最初の要素です。 通常、これはサイトのロゴとメニューが配置される場所であり、すべてのページの一部です。 WordPressヘッダーの編集方法がわからない場合は、強い第一印象を与えるのに苦労するでしょう。

WordPressを使用すると、いくつかの方法でサイトのヘッダーを編集できます。 ほぼすべてのテーマには、手動でカスタマイズできる独自のヘッダーデザインが付属しています。 または、より大きなWordPressコミュニティが提供する一連のツールを使用することもできます。

この記事では、プラグインを使用する場合と使用しない場合の両方で、WordPressヘッダーを編集する4つの方法を紹介します。 仕事に取り掛かろう！

目次：

1. カスタマイザーを使用してヘッダーを編集します
2. フルサイト編集（および互換性のあるテーマ）を使用する
3. WordPressページビルダーを使用してヘッダーを編集します
4. プラグインを使用してヘッダーにカスタムコードを追加する

1.カスタマイザーを使用してヘッダーを編集します

WordPress Customizerは、Webサイトのグローバル要素を編集できる組み込みツールです。 カスタマイザーを使用して、サイトのヘッダー、フッター、タイポグラフィ、メニュー、およびその他の重要な側面を編集できます。

カスタマイザーにアクセスするには、ダッシュボードに移動し、[外観]>[カスタマイズ]をクリックします。 カスタマイザーは、左側にオプションのメニューを表示し、右側にWebサイトのプレビューを表示します。

ダッシュボードにWordPressCustomizerオプションが表示されない場合は、ブロック対応のテーマを使用している可能性があることに注意してください。 このタイプのテーマのヘッダーを編集するには、次のセクションで説明するフルサイト編集を使用する必要があります。

カスタマイザーに、ヘッダーに関連するオプションが表示されます。 上記の例のように、これがすぐに表示される場合があります。 また、サブメニューに移動する必要がある場合もあります。 たとえば、一部のテーマでは、ヘッダーオプションをレイアウトオプションなどに配置します。

テーマのヘッダーオプションを見つけたら、現在表示される選択肢は、使用しているテーマによって異なります。 たとえば、Neveテーマには、ロゴ、ヘッダーの色、およびこのセクションに表示されるメニューを変更するためのオプションが含まれています。

Neveは、ドラッグアンドドロップ機能を使用してヘッダーに追加できる要素の選択も提供します。 [使用可能なコンポーネント]の下の要素のいずれかを選択し、カスタマイザーの下部にあるヘッダー行にドラッグします。 Neveを使用すると、ヘッダーに最大3行の要素を追加し、要素を任意の位置に配置できます。

ヘッダーの構成に問題がなければ、カスタマイザーの上部にある[公開]ボタンをクリックして、テーマへの変更を保存します。

カスタマイザーを使用して行った変更は、アクティブなテーマにのみ適用されることに注意してください。 テーマを変更した場合は、WordPressヘッダーを再度編集する必要があります。

2.フルサイト編集（および互換性のあるテーマ）を使用する

フルサイト編集は、ブロックエディタを使用してテーマテンプレートを編集できるようにする新しい機能です。 これはブロックが有効なテーマでのみ機能するため、サイトで利用できる場合とできない場合があります。

テーマがフルサイト編集をサポートしているかどうかを確認するには、[外観]メニューを開き、[エディター]オプションを探します。

それを選択してください オプションを選択すると、ブロックエディタが開きます。 ただし、個々のページや投稿ではなく、テーマテンプレートを編集することになります。

デフォルトでは、エディターはホームページテンプレートを開きます。これには、ヘッダー要素が含まれている必要があります。

一部のブロックは、フルサイト編集を使用している場合にのみプレースホルダーとして表示されることに注意してください。 これは、このツールが個々のブロックではなく、レイアウト全体を編集するためのものであるためです。

ヘッダーを編集するときは、含めるブロックと要素を完全に制御できます。 リストビューツールを開くと、ヘッダーに現在含まれているブロックの内訳を確認できます。

この段階で、ヘッダーにブロックを追加するか、ヘッダーからブロックを削除するかを選択できます。 既存のブロックを削除または編集するには、ブロックを選択し、そのときに画面に表示されるコンテキストメニューを使用します。

ブロックを選択すると、ブロックを使用して編集することもできます 画面右側の設定メニュー。 このメニューには通常、スタイルオプションが含まれており、編集しているブロックによって異なります。

新しいブロックを追加するには、 Header要素を選択し、プラス記号のアイコンを探します。 そのボタンをクリックすると、追加するブロックを選択できるメニューが開きます。

フルサイトエディタのもう1つの便利な機能は、メニューを視覚的に編集できることです。 これを行うには、 Navigationブロックを使用してメニューを選択するだけです。 新しいリンクを追加したり、新しいメニューを作成したり、既存のメニューを交換したりするオプションが表示されます。

ヘッダーの変更に満足したら、[保存]をクリックします。 これにより、テーマのヘッダーテンプレートへの変更が保存され、Webサイトに自動的に反映されます。

3.WordPressページビルダーを使用してヘッダーを編集します

一部のWordPressページビルダープラグインは、WordPressヘッダーを編集するためのオプションを提供します。 たとえば、Elementor Proには、プレミアムライセンスでアクセスできるテーマビルダーツールが含まれています。

Elementor Proにアクセスできない場合は、WordPress.orgのElementor Header＆FooterBuilderプラグインなどの無料のサードパーティ拡張機能を使用できます。

ただし、ElementorProとそのテーマビルダー機能を使用してそれを行う方法を紹介します。

実際には、ElementorThemeBuilderはフルサイト編集と同様に機能します。

テーマビルダーにアクセスするには、 [テンプレート] >[テーマビルダー]に移動します。 SITE PARTSの下のヘッダーオプションを選択し、右側にある既存のテンプレートを探します。 ヘッダーテンプレートは1つだけで、その横にある[編集]ボタンをクリックできます。

これにより、Elementorエディターが起動します。 ここから、Elementorブロックを使用してヘッダーを作成するか、既製のテンプレートをインポートするかを選択できます。 エディター本体内のフォルダーアイコンをクリックすると、アクセスできるヘッダーテンプレートを確認できます。

Elementorを使用している場合は、これらのテンプレートを利用することをお勧めします。 これにより、モジュールを追加またはカスタマイズして編集できる複数のヘッダースタイルを試すことができます。

Elementorの使用に慣れていない場合は、このページビルダーを使用すると、左側のメニューを使用してモジュールを選択できます。 これらのモジュールをページにドラッグすると、画面の右側のプレビューに表示されます。

テーマビルダーを使用する場合は、特定のテーマテンプレートのみを編集します。 ただし、Elementorが提供するモジュールと構成オプションの完全な配列を引き続き使用できます。

ヘッダーテンプレートの編集が完了したら、[公開]ボタンを使用して保存します。 次に、Elementorは、テンプレートを表示するページを選択するように求めます。

プレミアムElementorライセンスの料金を既に支払っていない限り、テーマビルダーツールだけでは購入を正当化できない場合があります。 フルサイト編集とまったく同じように機能しますが、コストがかかります。 主な違いは、Elementorの幅広いモジュールを使用できることです。すでにElementorを使用している場合は、ヘッダーのデザインがサイトの他の部分と一致していることを確認するのが簡単になります。

4.プラグインを使用してヘッダーにカスタムコードを追加します

通常、プラグインを使用するのがWordPressでカスタマイズを実装する最も簡単な方法です。 ただし、ヘッダーの場合は通常そうではありません。 ヘッダーを視覚的に編集できるプラグインが必要な場合は、ページビルダーを使用する必要があります。 前のセクションで説明したように、この機能を提供するほとんどのページビルダーはプレミアムです。

ヘッダーをカスタマイズできる無料のプラグインは、通常、ヘッダーにカスタムコードを追加する簡単な方法しか提供しません。 別の方法は、子テーマを使用してテーマファイルを手動で編集することです。これは、Web開発の経験がない限り、威圧的（かつ危険）になる可能性があります。

このようなプラグインの素晴らしい例の1つは、Header FooterCodeManagerです。 このツールを使用すると、HTML、CSS、JavaScriptスニペットをヘッダーやフッターに追加し、これらのスニペットをロードするページを選択できます。

プラグインがアクティブになったら、ダッシュボードの[ HFCM] >[新しいスニペットの追加]ページに移動します。 ここで、追加するスニペットのタイプ、表示する場所、およびヘッダーとフッターのどちらに追加するかを選択できます。

ヘッダーに新しい要素を追加する場合は、HTMLを使用する必要があります。 ヘッダーとそれに含まれる要素のスタイルを変更するには、CSSスニペットを使用する必要があります。

このアプローチの主な欠点は、CSSを追加するために、ヘッダーコードをチェックして使用するクラスとIDを確認する必要があることです。 これは、新しいコードスニペットを追加し、変更が機能するかどうかを確認し、満足のいく結果が得られるまでコードを微調整するため、時間のかかるプロセスになる可能性があります。

今すぐWordPressヘッダーをカスタマイズする

WordPressでヘッダーを編集する方法について質問がありますか？ 以下のコメントセクションでそれらについて話しましょう！