ウィジェットは、WordPressウェブサイトの上部にコンテンツや機能を追加するための最良の方法の1つです。これらの便利なコンテンツブロックを使用すると、ソーシャルメディアフィード、メールサインアップフォーム、最近の投稿などをテーマの指定されたエリアに簡単にドロップできます。
しかし、ヘッダーにウィジェットエリアが組み込まれていないWordPressテーマにいくつか遭遇しました。読者の方々から、この問題をどう扱うのが最善かという質問をいくつか受けています。
この記事では、WordPressウィジェットをウェブサイトのヘッダーに簡単に追加する方法を紹介します。これにより、オンラインプレゼンスの価値が高まり、エンゲージメントが高まります。
WordPressサイトにヘッダーウィジェットを追加する理由
ウェブサイトのヘッダーは、訪問者があなたのWordPressウェブサイトを訪れた際に最初に目にするものの一つです。ヘッダーにWordPressウィジェットを追加することで、このエリアを最適化し、読者の注意を引くことができます。
ほとんどのウェブサイトのヘッダーには、訪問者がサイト内を移動するのに役立つカスタムロゴとナビゲーションメニューが含まれています。
ヘルプコンテンツ、バナー広告、期間限定オファー、一行フォームなどを表示するために、このエリアの上または下にヘッダーウィジェットを追加することもできます。
WPBeginnerでは、ナビゲーションメニューのすぐ下にヘッダーのコールトゥアクションがあります。
ほとんどのWordPressテーマには、サイトのサイドバーとフッター領域にウィジェット対応エリアがありますが、すべてのテーマがヘッダーにウィジェット対応エリアを追加しているわけではありません。
編集者注: テーマにウィジェット対応のヘッダーエリアがない場合は、コーディングなしでカスタムWordPressテーマをゼロから作成できます。
まず、既存のテーマでWordPressウィジェットをウェブサイトのヘッダーに追加する方法をステップバイステップで見ていきましょう。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。
方法1：WordPressテーマ設定でWordPressウィジェットをウェブサイトヘッダーに追加する
多くの優れたWordPressテーマには、好みに合わせてカスタマイズできるヘッダーウィジェットエリアが含まれています。
まず、現在のWordPressテーマがヘッダーにWordPressウィジェットエリアをサポートしているかどうかを確認します。
WordPressテーマカスタマイザーまたはWordPress管理画面のウィジェットエリアでこれを見つけることができます。これを行うには、外観 » カスタマイズに移動し、ヘッダーを編集するオプションがあるかどうかを確認してください。
注意: ブロックテーマを使用している場合、管理画面のサイドバーにこのオプションは表示されません。代わりに、WordPressフルサイトエディターを使用したヘッダーのカスタマイズ方法に関するガイドを参照してください。
この例では、無料のAstraテーマには「ヘッダービルダー」というオプションがあります。Astraでこの機能を使用する方法を説明しますが、使用しているテーマによって見た目が異なる場合があることに注意してください。
これをクリックすると、ヘッダーを編集してウィジェットを追加する画面が表示されます。
画面下部では、ヘッダーとその上下のエリアを完全にカスタマイズできます。空のエリアのいずれかにカーソルを合わせ、[+] アイコンをクリックするだけです。
ポップアップメニューが表示され、「ウィジェット1」を選択できます。
選択できる追加オプションがありますが、ヘッダーをウィジェット対応にするには「ウィジェット」オプションのいずれかを選択する必要があります。
ヘッダーにウィジェットエリアを追加するには、ヘッダーカスタマイザーセクションにある「ウィジェット1」ボックスをクリックします。
これにより、ウィジェットを追加するオプションが表示されます。
次に、左側のメニューにある「プラス」の追加ブロックアイコンをクリックします。
これにより、ヘッダーに追加するウィジェットを選択できるポップアップが表示されます。
ヘッダーのカスタマイズを続け、好きなだけウィジェットを追加できます。
完了したら、「公開」ボタンをクリックして変更を保存してください。
これで、追加したウィジェットまたはウィジェットを含むヘッダーエリアを表示できます。
デモサイトでの表示方法のスクリーンショットを以下に示します。
Astra を使用していませんか？
テーマにすでにWordPressヘッダーウィジェットがあるかどうかを確認する別の方法は、WordPress管理パネルで外観 » ウィジェットに移動することです。
次に、「ヘッダー」またはそれに類する名前のウィジェットセクションがあるかどうかを確認します。
もしあれば、単に「プラス」追加ブロックアイコンをクリックして、ウィジェットメニューを表示します。
次に、クリックするだけで好きなウィジェットを追加できます。
ヘッダーウィジェットエリアの変更を保存するために、「更新」ボタンをクリックしてください。
方法2：WordPressにコードを追加してWordPressウィジェットをウェブサイトヘッダーに追加する
WordPressテーマにヘッダーのWordPressウィジェットエリアがない場合は、WordPressにコードを追加して手動で追加する必要があります。
これが初めての場合は、WordPressにウェブ上のスニペットをコピー＆ペーストする方法に関するガイドをご覧ください。
次に、次のコードスニペットを functions.php ファイルに追加するか、WPCode（推奨）のようなコードスニペットプラグインを使用して追加できます。
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でサイトを壊さずにカスタムコードを追加する方法に関するガイドをご覧ください。
WPCodeの方法を説明します。
このコードは、テーマに新しいサイドバーまたはウィジェット対応エリアを登録します。
外観 » ウィジェット に移動すると、「カスタムヘッダーウィジェットエリア」という新しいウィジェットエリアが表示されます。
これで、この新しいエリアにウィジェットを追加できます。詳細については、WordPressでウィジェットを追加および使用する方法に関するガイドをご覧ください。WordPressでウィジェットを追加および使用する方法。
ただし、ヘッダーウィジェットはまだウェブサイトにライブ表示されません。次にその方法を示します。
カスタムヘッダーウィジェットをWordPressに表示する
ヘッダーウィジェットエリアを作成したら、ウェブサイトのどこに表示するかを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; ?>
このコードは、以前作成したカスタムウィジェットエリアをウェブサイトのヘッダーエリアに追加します。
これで、WordPressブログにアクセスして、ヘッダーウィジェットエリアがライブで表示されているのを確認できます。
WordPressヘッダーウィジェットエリアをCSSでスタイル設定する
テーマによっては、ヘッダーウィジェットエリアとその中の各ウィジェットの表示方法を制御するために、WordPressにCSSを追加する必要がある場合もあります。これはいくつかの方法で行うことができます。
- 古いテーマを使用している場合は、WordPressダッシュボードで外観 » カスタマイズにアクセスして、テーマカスタマイザーを使用できます。
- ブロックテーマを使用している場合は、WordPress管理画面でテーマカスタマイザーが見つからない問題を修正できます。
- ブロックテーマを使用している場合は、ダッシュボードで 外観 » エディター にアクセスして、サイトエディターで追加のCSSを追加できます。サイトエディターで追加のCSSを追加する。
- WPCodeプラグイン（推奨）を使用してカスタムCSSを追加できます。
- CSSがわからない場合は、代わりにCSS Heroのようなプラグインを使用できます。
詳細については、WordPressサイトにカスタムCSSを簡単に追加する方法に関するガイドをご覧ください。
この記事では、WPCodeプラグインとWordPressテーマカスタマイザーを使用してカスタムCSSを追加する方法を簡単に見ていきます。
上記の方法2では、WPCodeを使用してコードスニペットをfunctions.phpファイルに追加する方法を示しました。このプラグインを追加してカスタムCSSを追加することもできます。
WPCodeで新しいスニペットを作成する際は、右側のドロップダウンメニューからコードタイプ「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;
}
その後、「アクティブ」設定がオンになっていることを確認し、画面右上にある「スニペットを保存」ボタンをクリックする必要があります。
テーマカスタマイザーを使用するには、WordPress管理画面で外観 » カスタマイズに移動してください。これにより、WordPressテーマカスタマイザーパネルが表示されます。「追加CSS」タブをクリックする必要があります。
これにより、テーマに直接追加のCSSを追加し、リアルタイムで変更を確認できます。
上記で示したCSSコードを「追加CSS」ボックスに簡単に追加できます。
CSSの追加が完了したら、「公開」ボタンをクリックして変更を保存してください。
カスタムヘッダーウィジェットがCSSの変更をライブでどのように表示するかは次のとおりです。
この記事がWordPressウィジェットをウェブサイトヘッダーに追加する方法を学ぶのに役立ったことを願っています。また、WordPressでのヘッダーとフッターコードの追加方法に関するガイドや、最高のWordPress開発ツールの専門家による厳選リストも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Curtis
例（デモインク）の紫色のもののような「バナー」を作成するために、どのウィジェットオプションを選択しましたか？製品を販売している姉妹ウェブサイトにリンクするボタンがある、シンプルな「バナー」（それが正しい用語であれば）を作成したいのですが。
WPBeginnerサポート
例のバナーは、特定のURLにリンクされた単一の画像です。ほとんどのバナーは現在、その目的のために作成された画像であり、画像エディタツールで作成されています。
管理者
ロブ・ハートマン
このチュートリアルは完璧で、ヘッダーウィジェットを正常に作成できました。非常に軽量で、ページの読み込み速度にも影響しませんでした。同じアプローチでフッターにウィジェットエリアを追加し、Functionsとfooter.phpの両方でヘッダー関連の参照をすべて置き換えられることを期待していましたが、この場合はウィジェットエリアが登録されませんでした。
このアプローチはヘッダーエリアにのみ適用されますか？
とにかく、非常に簡潔なチュートリアルをありがとうございます。
WPBeginnerサポート
このコードはフッターでも機能するはずですが、テーマによってはフッターがすべてのページに表示されない場合があります。それが一般的な理由です。
管理者
Sjoerd
こんにちは！チュートリアルありがとうございます。ウィジェットエリアをプライマリメニューのすぐ下ではなく、その上に表示したい場合はどうすればよいですか？
WPBeginnerサポート
その後、コードをメニューの下ではなく、メニューの上に配置します。
管理者
Gaston
Thank you!!! I was looking for this
WPBeginnerサポート
Glad our guide was helpful
管理者
Ranjit
チュートリアルありがとうございます。質問が1つあります。ヘッダーウィジェットに（2つまたは3つの）列を追加するにはどうすればよいですか？
WPBeginnerサポート
それは特定のテーマによりますので、まず特定のテーマのサポートに連絡して、ご希望の機能が組み込まれているか、推奨設定があるかを確認することをお勧めします。
管理者
ムハンマド・カシフ
こんにちは、カスタムヘッダーウィジェットを正常に追加しましたが、テーマを更新した後、カスタムヘッダーウィジェットが機能しませんか？解決策を教えてください！返信をお待ちしています。ありがとうございます
WPBeginnerサポート
テーマを更新した際に、header.phpからコードを削除した可能性があります。将来的にこれを防ぐために、以下のガイドに従って子テーマを作成することを検討してください。
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
管理者
ソフィア
本当にありがとうございます！まさに探していたものでした。完璧に動作します。
WPBeginnerサポート
You’re welcome
管理者
イナヤタリ
この素晴らしい投稿に本当に感謝しています。このコードは私が望んでいたとおりに完璧に機能しました。
WPBeginnerサポート
You’re welcome, glad our article was helpful
管理者
ジム・ロルト
優れたコードスニペットで、適応させてスタイルを調整し、目的のジョブを実行できました。ありがとうございました。
WPBeginnerサポート
Glad our guide could be helpful
管理者
Vildan
WP Beginner様
メニューの右側にあるヘッダーにウィジェットエリアを配置するにはどうすればよいですか？ADD TO CARTアイコンを追加したいです。
WPBeginnerサポート
配置については、使用している特定のテーマによって異なります。テーマのサポートに確認すれば、ヘッダー.phpファイルのどの部分にコードを追加すればよいか、または組み込みの方法があるかどうかを教えてくれるはずです。
管理者
バトリ・ヴィジェイ
WPBeginner編集チームの皆様、初心者や中級コーダー向けの完璧なブログをありがとうございます。WordPressを学び、実行するための大きなプラットフォームです。多くのブロガーやビジネスオーナーの成功の大きな理由でした。
WPBeginnerサポート
You’re welcome, glad you’ve been finding our content helpful
管理者
zambol
チュートリアルありがとうございます。機能しますが、モバイルデバイスに対応していないのが問題です。サイドバーをレスポンシブにすることは可能ですか？
WPBeginnerサポート
レスポンシブのことだと思いますが、残念ながら現時点ではこのウィジェットをレスポンシブにするための推奨方法はありません。
管理者
Gen
ありがとうございます。
これでウィジェットや広告を追加プラグインなしで追加できるようになりました。
WPBeginnerサポート
You’re welcome
管理者
anju
作成したヘッダーの前にカスタムヘッダーを表示する方法
WPBeginnerサポート
特定のテーマによっては、header.php のコンテンツの前にコンテンツがある場合、テーマのサポートに連絡する必要があります。
管理者
dav
こんにちは、
このページの先頭にある最初の画像（リスト25ウェブサイト）のようなヘッダーを作成したいのですが。
どうすれば作成できますか？
助けてください！
WPBeginnerサポート
どのような意味かによりますが、メニュー項目に画像アイコンを追加するには、次を使用できます。https://www.wpbeginner.com/plugins/how-to-add-image-icons-with-navigation-menus-in-wordpress/
管理者
dav
実際には、中央ヘッダーと右ヘッダーのウィジェットを追加することについて話しています
WPBeginnerサポート
それはあなたのテーマに大きく依存します。あなたが望むもののようなものを簡単に作成するために、ページビルダープラグインを検討することをお勧めします。
Tehreem
ヘッダー.phpにアクセスできません！CSSのようにヘッダーを表示する他の方法はありますか？
WPBeginnerサポート
CSSを使用すると、追加後にその領域をスタイル設定できますが、セクションを配置するためのコードを追加するにはphpファイルを編集する必要があります。または、別のオプションとしてページビルダープラグインを使用することもできます: https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/
管理者
GoosePT
こんにちは！
完璧なチュートリアルです。
トップバーを作成するために使用していますが、問題が発生しています。ウィジェット（この場合は2つ）が縦に並んでしまいます。
それらを並べて表示するにはどうすればよいですか？
Lori
素晴らしいチュートリアルです。完璧に動作します。私もこの質問への回答を聞きたいです。同様の設定で使用しており、ウィジェットを並べて表示したいと考えています。
追伸 – ちなみに素晴らしいサイトです。追加機能を追加する必要があるときや、何か問題が発生したときは、いつもwpbeginnerから始めます。
WPBeginnerサポート
残念ながら、そのような質問には、ウィジェットの追加方法に関するテーマ固有のCSSの変更が必要になります。変更する必要のあるCSSオプションを見つけるには、要素の検査を使用する必要があるでしょう：https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
J M Das
このチュートリアルは非常に役立ちます。
投稿でこのウィジェットエリアの上部にある空白を削除するにはどうすればよいですか？ どなたか助けてください。
ミハイル・コヴァル
ホームページのみに表示し、他のページには表示しないようにするには、header.php に何を追加すればよいですか？
WPBeginnerサポート
Mikhailさん、こんにちは。
WordPressでは、is_homeやis_front_pageなどの条件付きタグを使用して、特定のページに何かを表示できます。たとえば、次のようになります。
If ( is_front_page() ) { // code you want to display on the homepage }1-click Use in WordPress
管理者
Anna
こんにちは、まさに探していたもので、動作させることができれば素晴らしいです！ウィジェットエリアの作成はうまくいきますが、表示は残念ながらできません。。スタートページのみに表示したいとも思っています。
確信が持てません
1) ヘッダーファイルのどこに表示コードを挿入すればよいか
2) 「スタートページのみ」のコードをどこに挿入すればよいか、また2行目にはどのようなコードが入るのか
私の質問が基本的なもので、わざわざ触れるほどではないかもしれませんが、それでも時間と忍耐力のある方がいらっしゃれば本当に感謝します。。:-) 事前にお礼申し上げます！！
WPBeginnerサポート
こんにちは、アンナさん、
これらは完全に妥当な質問です。
1. ヘッダーウィジェットを表示したい場所に表示コードを配置する必要があります。たとえば、テーマのheader.phpファイルには、サイトのタイトル、ロゴ、説明、ナビゲーションメニューを表示するセクションがある場合があります。これらは通常、divタグで囲まれています。ヘッダーウィジェットコードをこれらのエリアの前または後に配置します。不明な場合は、header.phpファイルの末尾にコードを配置できます。
2.ウィジェットエリアをウェブサイトのフロントページにのみ表示したい場合は、次のような条件付きタグを使用できます。
if ( is_front_page() ) { // your widget display code goes here }1-click Use in WordPress
Anna
OK、ずるをしてフロントページ.phpにウィジェットコードを入れました。うまくいきました！ありがとう :-)
Anna
再度こんにちは。CSS配置でスタートページに表示されるようになりました！
あとは、開始ページ限定コードと表示コードをどう組み合わせるか、という問題だけです…
親切と忍耐に改めて感謝します..)
ブルース・プラット
素晴らしいチュートリアルです！私が望んでいたことを正確に達成するのに役立ちました。素晴らしいです！
ポール・ジョンソン
素晴らしいチュートリアル、ありがとうございます。JetPack Cookie Consent Widgetを実装しようとしていますが、指示に従ってもCookie Consentバーがページの最下部に表示されます。
ウィジェットがコードを上書きしている可能性はありますか？
Keu
これはTwentyseventeenでもまだ機能しますか？ functions.phpの部分は正常に機能しますが、header.phpの部分は機能しません。
トーマス・エバンス
こんにちは
どなたか、これをあらゆるモバイルデバイスでレスポンシブにする方法を教えていただけますか？
ここに広告用のGoogle AdSenseコード（728 x 90バナーサイズ）を挿入したいのですが、毎回挿入するとデスクトップでは完璧に表示されるのに、モバイルデバイスでは奇妙な表示になります。
ありがとうございます
Anubhav Bhatt
ヘッダーウィジェットを正常に作成しました。皆さんのおかげで本当に簡単でした。しかし、実際にはホームページではなく投稿に表示したかったのです。Nikko Portfolioテーマを使用しており、見た目がひどいからです。
助けてください。
ソーレン
わあ、実際にこれができました…？！素晴らしいガイドを本当にありがとうございます！
ジェフリー
コードをfunctions.phpファイルに配置し、ウィジェットコードをheader.phpファイルに追加して、ウィジェットテキストを追加して保存しました。
ページを編集するために移動し、更新をクリックすると、白い画面が表示され、ページが見えなくなります。
その後、ダッシュボードを表示するために/wp-adminに戻る必要があります。
更新をクリックしてもコンソールエラーはありませんが、白い画面が表示されるだけです。
ジェフリー
トラブルシューティングの後、functions.phpファイルに構文エラーがあります。
ありがとうございます！
デレク
これはヘッダー広告には最適ですが、私がやりたいのはヘッダーにPayPal寄付ボタンを追加することです。（右側）PayPalウィジェットをドラッグしてヘッダーの右側に表示できるウィジェット化されたヘッダースペースを作成する方法のビデオチュートリアルがないことに驚いています。これに関する指示から多くの人が恩恵を受けることができると想像できます。
スティーブン・クローフォード
これは素晴らしいチュートリアルですが、ヘッダーエリアの上に配置できるウィジェットエリアを作成したいのですが、それは可能でしょうか？
ジョーイ
すべて更新したところ、デスクトップで正常に動作しています。次に、モバイルデバイスにウィジェットを表示させる方法を教えていただけると幸いです！途中で何か間違えましたか？
Kushal
この投稿をありがとうございます！探していたものが解決しました！
Mark
こんにちは、この記事を書いてくれて本当にありがとう。とても助かりました。しかし、私のウェブサイトでは、ウィジェットを一番右側に表示させるにはどうすればよいですか？ヘッダーに検索フィールドを表示するオプションを使用すると、そこに入れたいのですが？
Thanks in advance!
Linda Holiner
混乱しています。ウィジェットに画像を取り込み、ユーザーが画像を変更できるようにする方法がわかりません。画像がどこから来ているのかわかりません。
Thomas
セクション（ソーシャルメディアアイコン、通知、検索、WooCommerceカート）を持つトップバーを作成する方法のチュートリアルを作成することは可能ですか？
プラグインでうまく機能するものはありません
ありがとう
Liam
ウィジェットをデスクトップデバイスのみに表示させるにはどうすればよいですか？
Tim
複数のカスタムウィジェットエリアを追加したい場合、functions.phpにそれぞれ新しい関数を追加する必要がありますか？それとも、追加したいエリアに追加するだけでよいですか？
ファハド
言語切り替えオプションを追加したかったため、ヘッダーエリアの代わりにナビゲーションバーでウィジェットを使用することに成功しました。言語の2つのフラグを水平方向の任意の位置に移動できないという小さな問題があります。高度なCSSセクションにmargin-right: 100px;を追加しようとしましたが、変更されませんでした。ナビゲーションコンテンツ全体を中央揃えしている別の問題かもしれませんが、ウィジェットで修正できるかどうかを確認したいです。
Courtney
コードをナビゲーションバーに入れるためにどのように編集しましたか？現在、同じことを試していますが、うまくいきません。
Leanore
複数のカスタムウィジェットエリアを追加しようとすると、ウェブサイトで500エラーが発生します。何か原因はありますか？テーマで複数のカスタムウィジェットエリアを作成することは可能ですか？
WPBeginnerサポート
こんにちは、Leanoreさん、
はい、テーマ用に複数のカスタムウィジェットエリアを作成できます。
管理者
Antonis
Hello,
複数作成する方法を簡単に説明していただけますか？関数をコピーして要素の名前を変更しようとしましたが、うまくいきませんでした。
P.S. 非常に便利なコード、ありがとうございます!!
nina
こんにちは！function.phpファイルを更新しようとすると、この致命的なエラーが発生します。
Fatal error: Cannot redeclare wpb_widgets_init()
編集を間違えたのかどうか分かりません。手伝っていただけますか？
WPBeginnerサポート
こんにちは、ニーナさん、
これは、wpb_widgets_init関数が既にfunctions.phpファイルに存在することを意味します。一意にするためにwpb2_widgets_initに置き換えるか、以前に追加したコードを削除する必要があります。
管理者
サム
Hello,
本当にありがとうございます。とても参考になります。
1つ問題が発生しています。私のウィジェットは、いくつかのテキストリンクからなるメニューで、ページへのリンクになっています。私のサイトはこちらです。
テキストがヘッダーエリアの右端にぴったりくっついているのがわかりますか？余白エリアを白くすることなく、「連絡先」の下に配置するために右余白を使用したいです。
Also, would love to make the text black.
これらの調整を手伝っていただけると大変助かります！
サム
Tommy
あなたのブログはとても参考になります。Twenty Seventeen のカスタマイズにご協力いただきありがとうございます。あなたのような方がいるおかげで、Twenty-seventeen のような新しい WordPress テーマを使うのがずっと楽になります。
WordPressは比較的初心者で、Twenty Seventeenにいくつかの追加のカスタマイズを試してみたいです。
wpページ用の新しいウィジェットを作成したいと思います。ヘッダー用の新しいウィジェットの作成方法に関するブログ情報を、twenty seventeenテーマのwpページに適用する方法を調べています。行き詰まっています。
ページ用の新しいウィジェットを作成する方法を教えていただけますか？それは素晴らしいでしょう。
ありがとうございます
トミー
WPBeginnerサポート
Tommyさん、
カスタムWordPressウィジェットの作成方法を参照してください。
管理者
トム
Twenty Twelveテーマでは、ヘッダーエリアではなくメニューの下に配置されました。
liz
私も同じです – トム、解決策を見つけましたか？
Bobby_qw
管理者様、本当にありがとうございます。あなたは私たちに「自分のウェブサイトの作り方」を教えてくれています。私はいつもあなたの投稿をフォローして、自分のウェブサイトを作っています。本当にありがとうございます。
シェーン・カニンガム
これを使用しましたが、カスタムウィジェットエリアをページ上部に追加することはできましたが、Cherryのヘッダー内の他の項目（会社のロゴやナビゲーションメニュー）と整列させることができませんでした。ヘッダーのどこに配置しても、他の項目の上または下に表示されてしまいました。ロゴとナビゲーションメニューの間に電話番号ブロックを作成するために使用したかったのです。水平方向には正しい位置に中央揃えできましたが、それらの間に表示させることはできませんでした。より具体的に説明するために、このページのヘッダーで、ナビゲーションメニューを右寄せにして、ロゴと「wpbeginner」ロゴの間に800番台の電話番号を配置したいと想像してみてください。このコード（またはそのバリエーション）をどのように使用できますか？
Kristin
この（そしてすべての）詳細なチュートリアルを本当にありがとうございます！ホームページを除外して、ヘッダーウィジェットを実装する方法を教えていただけますか？
マッシモ
header.php に追加したコードの最初の行を次のように変更してください：
if ( is_active_sidebar( 'custom-header-widget' ) ) : ? >を次の行に置き換えます：
if ( is_active_sidebar( 'custom-header-widget' ) && ! is_front_page ) : ?マッシモ
すみません、何か見落としていました！
追加する必要がある行は次のとおりです。
if ( is_active_sidebar( 'custom-header-widget' ) && ! is_front_page() ) : ?>Kristin
本当にありがとうございます！
reus
thank men, more power
Nirmal Kumar
このチュートリアルをありがとうございます☺ このコードを使用してウェブサイトのヘッダーを作成しました。
WPBeginnerサポート
You are welcome
管理者
Mihaita Vulpe
すごい、サイドバーにしかウィジェットを追加できないと思っていました。ヒントをありがとうございます。
Mihaita,
Yukio
わあ、これは本当に面白くてとても役立ちそうです。試してみて、うまくいくことを願っています。