ウィジェットはWordPressテーマの非常に重要な部分であるため、ウィジェットのないWordPressテーマを想像するのは困難です。ウィジェットは、サイドバーやテーマのその他のウィジェット対応エリアにドラッグアンドドロップできる実行可能なスクリプトです。多くの読者は、ウィジェットを使用してサイドバーにカスタム要素を追加しています。ただし、この記事は、WordPressテーマに動的なウィジェット対応サイドバーまたはウィジェット対応エリアを追加する方法を学びたいと思っている好奇心旺盛なユーザー向けです。
WordPressでサイドバーまたはウィジェット対応エリアを登録する
まず、テーマのサイドバーまたはウィジェット対応エリアを登録する必要があります。複数のサイドバーやウィジェット対応エリアを登録できます。このコードをテーマのfunctions.phpファイルにコピー＆ペーストしてください。
function wpb_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'wpb' ),
'id' => 'sidebar-1',
'description' => __( 'The main sidebar appears on the right on each page except the front page template', 'wpb' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' =>__( 'Front page sidebar', 'wpb'),
'id' => 'sidebar-2',
'description' => __( 'Appears on the static front page template', 'wpb' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );
このコードでは、2つのサイドバーを登録しました。ウィジェット画面で識別できるように、名前と説明を付けました。説明パラメータは、このサイドバーがテーマのどこに表示されるかをユーザーに伝えるために使用できます。wpb は、現在作業中のテーマの名前であり、これらの文字列を翻訳可能にするためにここで使用されています。これをテーマの名前に置き換えてください。
WordPressテーマファイルに動的なウィジェット対応サイドバーを追加する
これまでのところ、動的サイドバーのみを登録しました。ユーザーは外観 » ウィジェット画面からウィジェットをこれらのサイドバーにドラッグアンドドロップできます。ただし、これらのサイドバーは、sidebar.phpのようなテンプレートで呼び出されるか、表示したい他の場所で呼び出されるまで、サイトに表示されません。これらのウィジェットエリアを追加するには、表示したいテンプレートファイルを編集し、このコードを貼り付けます。
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <div id="secondary" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </div> <?php endif; ?>
このサンプルコードでは、表示したいサイドバーを呼び出すためにサイドバーIDを使用しました。別のサイドバーを表示するには、サイドバーIDを変更してください。たとえば、フッターエリアに3つのサイドバーを登録し、テーマのfooter.phpテンプレートでそれらを1つずつ呼び出すことができます。
ウィジェットは非常に強力です。投稿やページコンテンツにウィジェットを追加したり、テキストウィジェットをカラフルにしたり、デフォルトのWordPressウィジェットの機能を拡張したりできます。適切に配置されたウィジェット対応サイドバーがあれば、ユーザーは簡単なドラッグ＆ドロップインターフェースを使用して、ウェブサイトにカスタム要素を追加できます。
この記事がWordPressでダイナミックウィジェット対応サイドバーを追加する方法を学ぶのに役立ったことを願っています。プロが製品でどのように使用しているかを学ぶために、Genesisのようなテーマフレームワークのコードを研究することをお勧めします。質問やフィードバックについては、以下にコメントを残してください。
nabil
こんにちは、サイドバーに2列必要です！CSSでどうすればできますか？
ジェイソン
WordPressのウィジェットの機能をどこで拡張できますか？
Milada
こんにちはチーム、再び、
お手数をおかけしますが、テーマの現在のプライマリサイドバーウィジェットの右上に1つのウィジェット、記事の中央の左側に別のウィジェットを配置したいのですが、指定させてください。
どのように進めればよいでしょうか？
よろしくお願いいたします。
Milada
Milada
こんにちはチーム、再び、
ウィジェットにフィールドを追加するにはどうすればよいですか？また、アフィリエイトリンクを配置するには、どのフィールドコードをどこに貼り付ければよいですか？
ありがとうございます。
Milada
Tanmay Bala
WordPressでDBプラグインとreduxフレームワークの使い方を学びたいです。
Marc
このチュートリアルは大変役に立ちました。
約1週間かけてこれを達成しようとしていました。
簡潔で要点を押さえています。
ありがとうございます！
Laura
コードを実際に貼り付ける前に、元々サイドバーが付いていないテーマでも機能しますか？フッターしかないBook Liteを使用しています。
WPBeginnerサポート
はい、そうです。
管理者
Laura
今のところありがとう。サイドバーを登録しようとしましたが、保存するたびにホワイトスクリーンの死が表示されます。これは以前は一度もありませんでした。何が間違っている可能性があるか、何か提案はありますか？
Lohith
Thanks Alot
Its really wonderful and simple method to explain….
Bakopu
誠にありがとうございます、先生。先生はどこにいらっしゃいますか、先生の足に触れて先生の祝福を受けたいです。
akhilesh
ありがとうございます、この投稿は私にとって非常に役立ちました
Marcos Nakamine
完璧に機能しました
ありがとう
gWorldz
ウィジェットの表示に問題があります o.O
ウィジェットはバックエンドで正常に登録および表示されており、問題はありません。ただし、前のウィジェットにコンテンツを含めないと、私のウィジェットコンテンツは表示されません。
2011年の子テーマを使用しており、追加のフッターエリアを登録しています。
functions.php スニペット：
https://gist.github.com/gWorldz/76273b5901e1b5c4759b#file-functions-php
sidebar-footer.php
https://gist.github.com/gWorldz/b6177ccc9734718dd636#file-sidebar-footer-php
style.css
https://gist.github.com/gWorldz/0f24a9350da164ee2f29#file-style-css
私が間違っていることや、この問題の原因について何か考えはありますか？
Tiger
これについて何か助けは得られましたか？私も同じ問題を抱えています。
MJ
これについて感謝の意を表したかっただけです。WordPressでサイドバーを登録する方法を調べるためにGoogle検索したところ、いくつかのサイトにアクセスしましたが、あなたのサイトが最も素晴らしく、明確で、最も理解しやすい説明でした。よくできました。
arvind
あなたの投稿は私にとって役立ちます。
ありがとうございます!!!!!!
Dharmendra Prajapati
やっと23日後にダイナミックウィジェット対応サイドバーが準備できました…すべてのサイトをグーグルで検索し…そしてついにあなたのサイトにたどり着きました。
ありがとう
Kevin
テンプレートにウィジェットコードを挿入している2番目のスニペットで、あなたが
div id=”secondary”
そのIDはウィジェットエリアごとに変更されるべきですか？
例：
1番目、2番目、3番目、4番目など
WPBeginnerサポート
Kevin はい、そうすべきです。ウィジェットエリアまたはそれが表すサイドバーの名前にちなんで名付けられるべきです。
管理者
SS
サイドバーの登録には機能しますが、[外観] » [ウィジェット]画面に行くと、すべてのウィジェットが表示されますが、ドラッグする場所がありません。
WPBeginnerサポート
SS、ダイナミックウィジェット対応サイドバーを正常に登録すると、ウィジェット画面に表示されます。これは、サイドバーの登録が機能しなかった可能性が高いことを意味します。
管理者
Steve Smart
こんにちは –
これは非常に役立つ投稿です。ありがとうございました！
1つの動的なウィジェットエリアでは成功しましたが、 now I’m trying to implement more than one. Everything seems to work as expected, except an odd problem in the dashboard. If I drag a text widget to my second dynamic widget area I can add content as you would expect, and save it, and it produces output on my pages as expected, however if I now revisit the dashboard widgets page, the second widget area does not appear to contain any widgets.
twentytwelve-childテーマとWordpress 3.7.1を使用しています。
何か考えはありますか？
Jackson
Hearty thanks….You have done such a wonderful work…thanks thanks thanks…
JP
ありがとう、これは役に立ちました。要点を押さえています。
Praveen Prasad
関数呼び出しが開始された場所を教えていただけますか？
Ed Du
追加ブロックとHeadwayを使用することもできます。そうすればすべてが処理されます。あるいは、その点ではPagelinesでも可能です。