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

WordPressウィジェットをWebサイトのヘッダー領域に追加しますか?ウィジェットを使用すると、テーマの指定したセクションにコンテンツブロックを簡単に追加できます。この記事では、WordPressウィジェットをサイトのヘッダーに簡単に追加する方法を説明します.


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

注意: これは中級レベルのチュートリアルです。 WordPressテーマファイルにコードを追加し、CSSを記述する必要があります.

サイトにヘッダーウィジェットが必要な理由とタイミング?

ウィジェットを使用すると、WordPressテーマの指定した領域にコンテンツブロックを簡単に追加できます。これらの指定された領域は、サイドバーまたはウィジェット対応領域と呼ばれます.

ヘッダーのウィジェット準備領域、またはコンテンツが広告、最近の記事、または必要なものを表示するために使用される前.

この特定の領域は「スクロールせずに見える範囲」と呼ばれ、すべての人気のあるサイトがこれを使用して非常に重要なものを表示します.

人気のあるList25 Webサイトのヘッダーセクション

通常、WordPressテーマは、コンテンツの横またはフッター領域にサイドバーを追加します。多くのWordPressテーマは、コンテンツの上またはヘッダーにウィジェット対応領域を追加しません.

そのため、この記事では、WordPress Webサイトのヘッダーにウィジェット領域を追加する方法を説明します.

ステップ1.ヘッダーウィジェット領域を作成する

まず、カスタムウィジェット領域を作成する必要があります。この手順により、カスタムウィジェット領域を表示できます 外観»ウィジェット WordPressダッシュボードのページ.

このコードをテーマのfunctions.phpファイルに追加する必要があります.

function wpb_widgets_init(){

register_sidebar(array(
‘名前’ => 「カスタムヘッダーウィジェット領域」,
‘id’ => 「カスタムヘッダーウィジェット」,
‘before_widget’ => 」,
‘after_widget’ => 」,
‘before_title’ => 」

」,
‘after_title’ => 」

」,
));

}
add_action( ‘widgets_init’、 ‘wpb_widgets_init’);

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

あなたは今行くことができます 外観»ウィジェット ページに移動すると、「カスタムヘッダーウィジェット領域」という新しいウィジェット領域が表示されます.

カスタムヘッダーウィジェット領域

先に進み、この新しく作成されたウィジェット領域にテキストウィジェットを追加して保存します。ウィジェットの追加の詳細な手順については、WordPressでウィジェットを追加して使用する方法に関するガイドを参照してください.

ステップ2:カスタムヘッダーウィジェットを表示する

今ウェブサイトにアクセスすると、新しく作成したヘッダーウィジェットに追加したばかりのテキストウィジェットが表示されなくなります.

これは、このウィジェット領域を表示する場所をWordPressにまだ伝えていないためです.

このステップでそれをしましょう.

テーマのheader.phpファイルを編集し、カスタムウィジェット領域を表示する場所にこのコードを追加する必要があります.

<?php

if(is_active_sidebar( ‘custom-header-widget’)): ?>

<?php dynamic_sidebar( ‘custom-header-widget’); ?>

<?php endif; ?>

変更を保存することを忘れないでください.

これでウェブサイトにアクセスできるようになり、ヘッダーウィジェット領域が表示されます.

スタイルなしヘッダーウィジェット

少し洗練されていないように見えます。見栄えを良くするにはCSSが必要です.

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

テーマに応じて、ヘッダーウィジェット領域とその中の各ウィジェットの表示方法を制御するCSSを追加する必要があります.

これを行う簡単な方法は、CSS Heroプラグインを使用することです。直感的なユーザーインターフェイスを使用して、WordPressテーマのCSSを変更できます。詳細については、CSSヒーローのレビューをご覧ください.

プラグインを使用したくない場合は、次のURLからカスタムCSSをテーマに追加できます。 外観»カスタマイズ ページ.

これにより、WordPressテーマカスタマイザインターフェースが起動します。 [追加のCSS]タブをクリックする必要があります.

WordPressテーマへのカスタムCSSの追加

テーマカスタマイザの追加のCSSタブを使用すると、ライブプレビューに変更が表示されるのを見ながら、カスタムCSSを追加できます。.

このチュートリアルでは、この領域を使用して、バナー広告を表示する単一のウィジェットまたはカスタムメニューウィジェットのみを追加することを想定しています。.

開始するのに役立つサンプルCSSを以下に示します.

div#header-widget-area {
幅:100%;
background-color:#f7f7f7;
border-bottom:1px solid #eeeeee;
text-align:中央;
}
h2.chw-title {
margin-top:0px;
text-align:左;
テキスト変換:大文字;
font-size:小;
background-color:#feffce;
幅:130px;
パディング:5px;
}

これは、カスタムヘッダーウィジェット領域がデフォルトのTwenty Seventeenテーマでどのように表示されたかです。.

ヘッダーウィジェットのプレビュー

テーマに合わせてCSSを調整する必要がある場合があります。 WordPressウィジェットにカスタムスタイルを追加する方法に関するガイドをご覧ください.

この記事が、WordPressウィジェットをサイトのヘッダーに追加する方法の学習に役立つことを願っています。あなたのサイトで最も役立つ25のWordPressウィジェットのリストもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me