WordPressでカスタムヘッダーウィジェットを作成する方法

あなたのサイトにヘッダーウィジェットを作成する方法を探していますか？ あなたは正しい場所に来ました。 WordPressでカスタムヘッダーウィジェットを簡単に作成する方法を紹介します。

魅力的なヘッダーを持つことは、訪問者に印象を与えるための鍵です。 さらに、期間限定のオファーや特別な機会を表示するのに最適な場所になる可能性があります。 テーマがこのウィジェット領域をサポートしていない場合は、手動で作成できます。 このガイドでは、WordPressでカスタムヘッダーウィジェットを作成する方法を紹介します。

その方法を理解する前に、カスタムヘッダーウィジェットの利点をよりよく理解しましょう。

WordPressでカスタムヘッダーウィジェットを作成する理由

ヘッダーは、訪問者がWebサイトにアクセスしたときに最初に表示されるものです。 これはユーザーがより注意を払うものの1つであるため、ほとんどのサイトでは、特別オファーやメニューなどの最も重要なコンテンツがヘッダーに表示されます。

それがユーザーが注目する場所である場合、そこに多くのコンテンツを追加したくなるでしょう。 ただし、プライマリメニュー（ヘッダー）にリンクが多すぎないようにする必要があります。 ヘッダーメニューのコンテンツが多すぎると、ユーザーが混乱し、サイトの見栄えが悪くなる可能性があるため、お勧めできません。 そこで、ヘッダーウィジェットが役立ちます。 メインナビゲーションバーの下にカスタムヘッダーウィジェットを追加し、メインメニューを狭めることなくこのスペースにウィジェットを追加できます。

カスタムヘッダーウィジェットを作成すると、広告、ニュースレターウィジェット、バナー、テキストコンテンツ、WooCommerceオファー、カスタムウィジェットなど、あらゆるものを問題なく表示できます。 このようにして、ヘッダーを整理したままコンテンツをヘッダーに追加できます。

カスタムヘッダーウィジェットの重要性をよりよく理解したので、最小限の労力でウィジェットを作成する方法を学びましょう。

WordPressでカスタムヘッダーウィジェットを作成する方法

WordPressヘッダーをカスタマイズするさまざまな方法を見てきました。 ただし、このセクションでは、カスタムヘッダーウィジェットを作成してヘッダーを編集する方法を学習します。 そのために、PHPとCSSスニペットを使用します。

注：先に進む前に、いくつかのコアファイルを編集するため、Webサイトの完全なバックアップを生成し、子テーマをインストールすることをお勧めします。 子テーマを作成するには、このチュートリアルに従うか、これらの専用プラグインのいずれかを使用できます。

それが終わったら、次のセクションに進んでください。

1）カスタムウィジェットの作成

まず、新しいウィジェット領域を作成する必要があります。 そのためには、 WordPressダッシュボードで、 [外観]> [ウィジェット]に移動します。

そこに到達すると、アクティブなテーマで使用可能なすべてのウィジェット領域が表示されます。 これはテーマによって変わる可能性がありますが、ほとんどの場合、ここにいくつかの領域が表示されます。 このデモでは、GeneratePressを使用しており、すでに登録およびスタイル設定されている多くのウィジェット領域が付属しています。

カスタムヘッダーウィジェットを追加する新しいウィジェット領域を作成する必要があります。 これを行うには、子テーマのfunctions.phpファイルを微調整する必要があります。 そのためには、ファイルを直接ファイルするか、コードスニペットなどのプラグインを使用することができます。

このデモでは、コードスニペットを使用するため、 [プラグイン]> [新規追加]に移動して、コードスニペットプラグインを検索します。 次に、以下のようにインストールしてアクティベートします。

アクティベーション後、左側にプラグインの設定が表示されます。 [すべてのスニペット]に移動し、[新規追加]を押して新しいスニペットを作成します。

スニペットに名前を付けてから、次のスニペットをコードセクションに貼り付けます。

 関数quadlayers_widgets_init（）{
 register_sidebar（array（
 'name' => 'QuadLayersヘッダーウィジェット'、
 'id' => 'quadlayers-header-widget'、
 'before_widget' => '<div class = "ql-widget">'、
 'after_widget' => '</ div>'、
 'before_title' => '<h2 class = "ql-title">'、
 'after_title' => '</ h2>'、
 ））;
 }
 add_action（ 'widgets_init'、 'quadlayers_widgets_init'）;

このスニペットは、WordPressサイトにQuadlayersヘッダーウィジェットと呼ばれる新しいウィジェットを作成します。

次に、変更を保存します。アクティブ化すると、WordPressウィジェットセクションの下に新しいウィジェット領域が表示されます。

このようにして、新しいウィジェットを登録できます。 この後、ウィジェットをWebサイトのヘッダーに追加する必要があります。 その方法を見てみましょう。

2）ウィジェットをヘッダーに追加する

Webサイトに新しいウィジェットを正常に作成しましたが、場所を指定していません。 このセクションでは、この新しいカスタムウィジェットをWordPressヘッダーに追加する方法を示します。

これを行うには、 header.phpファイルを編集する必要があります。 このファイルは、 [外観]> [テーマエディター]> [テーマヘッダー（header.php）]に移動すると、テーマディレクトリにあります。 ファイルを編集する前に、子テーマを使用していることを確認してください。 子テーマにheader.phpファイルがない場合は、親テーマのフォルダーを開き、そこからheader.phpファイルをダウンロードして、子テーマフォルダーにアップロードします。

その後、次のコードをheader.phpファイルに貼り付けます。

 <？php

 if（is_active_sidebar（ 'quadlayers-header-widget'））：？>
 <div class = "ql-widget-area widget-area" role = "complementary">
 <？php dynamic_sidebar（ 'quadlayers-header-widget'）; ？>
 </ div>

 <？php endif; ？>

コードを貼り付けたら、ファイルを更新します。

コードを追加する場所がわからない場合は、さまざまな場所をテストするか、テーマのサポートチームに連絡して、ニーズに応じて最適な場所を尋ねることができます。 コードを追加したら、ウィジェットを追加してウィジェット領域をテストします。 この例では、ダミーコンテンツを含む段落ブロックを追加しました。

Webサイトのフロントエンドには、次のようなヘッダーが表示されます。

これは、ウィジェットとコードが機能していることを意味します。 素晴らしい！

これは、WordPressでカスタムヘッダーウィジェットを追加する方法です。 その領域を使用して、バナー、広告、期間限定のオファーなど、必要なものを表示できます。

しかし、それだけではありません。 ウィジェットは機能していますが、それでも改善できます。 サイトのルックアンドフィールに一致するように、CSSを少し使用してウィジェットのスタイルを設定する方法を見てみましょう。

3）CSSを使用してウィジェットをカスタマイズする

ウィジェットをヘッダーファイルに追加したら、CSSを少し使ってウィジェットの見栄えを良くします。 CSSコードをテーマのstyle.cssファイルに入力するか、WordPressカスタマイザーを使用できます。 どちらの方法でも問題なく機能しますが、管理ダッシュボードの[追加のCSS]セクションを使用してCSSコードを追加することをお勧めします。 このようにして、ライブプレビューウィザードで変更をすぐに確認できます。 でも、

次に、前のセクションで作成したカスタムヘッダーウィジェットをカスタマイズできるように、サンプルスクリプトを見てみましょう。 次のコードをコピーし、 [外観] > [テーマエディター]> [追加のCSS]に移動して、貼り付けます。

 div＃quadlayers-header-widget {
 幅：100％;
 背景色：＃f5f5f5;
 border-bottom：1px solid #eeeeee;
 text-align：center;
 }

 .ql-ウィジェット{
 幅：100％;
 背景色：＃f5f5f5;
 text-align：center;
 }

 h2.ql-タイトル{
 margin-top：0px;
 text-align：左;
 text-transform：大文字;
 フォントサイズ：小さい;
 背景色：#feffce;
 幅：130px;
 パディング：5px;
 } 

CSSを更新すると、次のようになります。

これは単なるサンプルコードです。 あなたはそれをベースとして取り、あなたのウェブサイトのスタイリングと要件にそれを適応させるためにそれをカスタマイズすることができます。

それでおしまい！ これは、WordPressで少しのコードを使用してカスタムヘッダーウィジェットを作成する方法です。 そんなに大変じゃなかったですよね？

結論

要約すると、ヘッダーはWebサイトの最も目立つセクションの1つであり、訪問者に見てもらいたい重要なコンテンツを配置する必要があります。 そのため、ヘッダーウィジェットを追加することは、ユーザーの注意を引き、期間限定の取引やサイトの最も重要なセクションなどを表示するための優れたオプションです。

この投稿では、カスタムヘッダーウィジェットを作成し、少しのコードでカスタマイズする方法を紹介しました。 プログラミングのスキルがなくても、チュートリアルに従ってウィジェットをサイトに追加できます。 ただし、スタイルを変更するには、CSSの基本的な知識が必要になる場合があります。 テーマによっては、 header.phpファイルの編集が難しい場合があるため、問題が発生した場合は、テーマの作成者に連絡してください。

ヘッダーウィジェットを作成しましたか？ あなたの経験はどうでしたか？ 以下のコメントセクションでお知らせください。

ヘッダーをカスタマイズするその他の方法については、次のガイドをご覧ください。

• WordPressでヘッダーをカスタマイズする3つの方法
• Diviヘッダーをスティッキーにする方法