ウェブサイトのヘッダーに WordPress ウィジェットを追加する方法 (2 つの方法)


Web サイトのヘッダー領域に WordPress ウィジェットを追加しますか?

ウィジェットを使用すると、テーマの特定のセクションにコンテンツ ブロックを簡単に追加できますが、すべてのテーマにヘッダー ウィジェット領域が含まれているわけではありません。

この記事では、WordPress ウィジェットをウェブサイトのヘッダーに簡単に追加する方法を説明します。

WordPress サイトにヘッダー ウィジェットを追加する理由

Web サイトのヘッダーは、訪問者が WordPress Web サイトにアクセスしたときに最初に目にするものの 1 つです。 WordPress ウィジェットをヘッダーに追加すると、この領域を最適化して読者の注意を引くことができます。

ほとんどの Web サイトのヘッダーには、訪問者がサイト内を移動できるようにするためのカスタム ロゴとナビゲーション メニューが含まれています。

この領域の上下にヘッダー ウィジェットを追加して、役立つコンテンツ、バナー広告、期間限定オファー、単一行フォームなどを表示することもできます。

ここ WPBeginner では、ナビゲーション メニューのすぐ下にヘッダーの CTA があります。

ほとんどの WordPress テーマには、サイトのサイドバーとフッター領域にウィジェット対応エリアがありますが、すべてのテーマがヘッダーにウィジェット対応エリアを追加しているわけではありません。

編集者注: テーマにウィジェット対応のヘッダー領域がない場合は、完全にカスタムの WordPress テーマを最初から (コーディングなしで) 作成できるようになりました。

まずは、既存のテーマの Web サイトヘッダーに WordPress ウィジェットを追加する方法を見てみましょう。以下のクイック リンクを使用するだけで、使用したい方法に直接ジャンプできます。

  • WordPress テーマ設定に WordPress ヘッダー ウィジェットを追加する

  • WordPress にコードを追加して、WordPress ヘッダー ウィジェットを追加します

方法 1. WordPress テーマ設定で Web サイトのヘッダーに WordPress ウィジェットを追加する

最高の WordPress テーマの多くには、好みに合わせてカスタマイズできるヘッダー ウィジェット領域が含まれています。

まず、現在の WordPress テーマがヘッダーの WordPress ウィジェット領域をサポートしているかどうかを確認します。

これは、WordPress テーマ カスタマイザーまたは WordPress 管理パネルのウィジェット領域に移動すると見つかります。これを行うには、外観 » カスタマイズに移動し、ヘッダーを編集するオプションがあるかどうかを確認します。

この例では、無料の Astra テーマには「Header Builder」と呼ばれるオプションがあります。 Astra でこの機能を使用する方法を説明しますが、使用しているテーマによって外観が異なることに注意してください。

これをクリックすると、ヘッダーを編集してウィジェットを追加する画面が表示されます。

画面の下部では、ヘッダーとヘッダーの上下の領域を完全にカスタマイズできます。空の領域の 1 つにカーソルを置き、「プラス」アイコンをクリックするだけです。

これにより、「ウィジェット 1」を選択できるポップアップ メニューが表示されます。

選択できる追加のオプションがありますが、ヘッダー ウィジェットを準備できるようにするには、「ウィジェット」オプションの 1 つを選択する必要があります。

ヘッダーにウィジェット領域を追加するには、ヘッダー カスタマイザー セクションにある [ウィジェット 1] ボックスをクリックします。

これにより、ウィジェットを追加するオプションが表示されます。

次に、左側のメニューにある「プラス」ブロック追加アイコンをクリックします。

これにより、ヘッダーに追加するウィジェットを選択できるポップアップが表示されます。

ヘッダーのカスタマイズを続けて、必要なだけウィジェットを追加できます。

完了したら、必ず「公開」ボタンをクリックして変更を保存してください。

これで、追加したウィジェットを含むヘッダー領域を表示できるようになります。

アストラを使っていないのですか?

テーマにすでに WordPress ヘッダー ウィジェットがあるかどうかを確認するもう 1 つの方法は、WordPress 管理パネルの外観 » ウィジェットに移動することです。

次に、「ヘッダー」またはそれに類似したラベルの付いたウィジェット セクションがあるかどうかを確認します。

存在する場合は、「プラス」ブロック追加アイコンをクリックするだけでウィジェット メニューが表示されます。

次に、クリックして好きなウィジェットを追加できます。

必ず「更新」ボタンをクリックして、ヘッダー ウィジェット領域への変更を保存してください。

方法 2. WordPress にコードを追加して、WordPress ウィジェットを Web サイトのヘッダーに追加する

現在、WordPress テーマのヘッダーに WordPress ウィジェット領域がない場合は、WordPress にコードを追加して手動で追加する必要があります。

これまでにこれを行ったことがない場合は、WordPress でコードをコピーして貼り付ける方法に関するガイドを参照してください。

次に、サイト固有のプラグインで、またはコード スニペット プラグインを使用して、次のコード スニペットを function.php ファイルに追加できます。

function wpb_widgets_init() {

	register_sidebar( array(
		'name'          => 'Custom Header Widget Area',
		'id'            => 'custom-header-widget',
		'before_widget' => '<div class="chw-widget">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="chw-title">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'wpb_widgets_init' );

このコードは、テーマの新しいサイドバーまたはウィジェット準備完了領域を登録します。

外観 » ウィジェットに移動すると、「カスタム ヘッダー ウィジェット領域」というラベルの新しいウィジェット領域が表示されます。

これで、この新しい領域にウィジェットを追加できます。詳細については、WordPress でウィジェットを追加および使用する方法に関するガイドを参照してください。

ただし、ヘッダー ウィジェットはまだ Web サイトにライブで表示されません。次にその方法を説明します。

WordPress でのカスタム ヘッダー ウィジェットの表示

ヘッダー ウィジェット領域を作成したので、Web サイト上のどこにヘッダー ウィジェット領域を表示するかを WordPress に指示する必要があります。

これを行うには、テーマの header.php ファイルを編集する必要があります。次に、ウィジェットを表示する場所に次のコードを追加する必要があります。

<?php

if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
	<?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>

<?php endif; ?>

このコードは、以前に作成したウィジェット領域を Web サイトのヘッダー領域に追加します。

これで、WordPress ブログにアクセスして、ヘッダー ウィジェット領域をライブで確認できるようになりました。

CSS を使用して WordPress ヘッダー ウィジェット領域をスタイル設定する

テーマによっては、ヘッダー ウィジェット領域とその中の各ウィジェットの表示方法を制御するために、WordPress に CSS を追加する必要がある場合もあります。 CSS がわからない場合は、代わりに CSS Hero などのプラグインを使用できます。

詳細については、WordPress サイトにカスタム CSS を簡単に追加する方法に関するガイドを参照してください。

次に、WordPress 管理パネルの外観 » カスタマイズに移動します。

これにより、WordPress テーマ カスタマイザー パネルが表示されます。 「追加CSS」タブをクリックする必要があります。

これにより、追加の CSS をテーマに直接追加し、リアルタイムで変更を確認できるようになります。

開始に役立つサンプル CSS コードを次に示します。

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
		padding: 20px;
}
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

CSS コードを「追加 CSS」ボックスに追加するだけです。

CSS の追加が完了したら、必ず「公開」ボタンをクリックして変更を保存してください。

CSS の変更をライブで適用したカスタム ヘッダー ウィジェットがどのように表示されるかを次に示します。

この記事が、Web サイトのヘッダーに WordPress ウィジェットを追加する方法を学ぶのに役立つことを願っています。最適な WordPress ホスティングの選び方に関するガイドや、中小企業に最適なライブ チャット ソフトウェアの専門家が選んだガイドもご覧ください。

この記事が気に入っていただけましたら、WordPress ビデオ チュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook でもご覧いただけます。