Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで動的ウィジェット対応のサイドバーを追加する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

ウィジェットはWordPressテーマに不可欠な要素であり、ウィジェットなしのWordPressテーマを想像するのは難しい。ウィジェットは実行可能なスクリプトで、サイドバーやテーマ内の他のウィジェット対応エリアにドラッグ&ドロップするだけです。私たちの読者の多くは、サイドバーにカスタム要素を追加するためにウィジェットを利用しています。しかし、この投稿は、WordPressテーマで動的なウィジェット準備サイドバーまたはウィジェット準備エリアを追加する方法を学びたい好奇心旺盛なユーザーのためのものです。

WordPressにサイドバーまたはウィジェット準備エリアを登録する

まず最初に行うべきことは、テーマにサイドバーやウィジェット準備エリアを登録することです。サイドバーやウィジェット準備エリアは複数登録することができます。テーマのfunctions.phpファイルに以下のコードをコピー&ペーストしてください。

[cbk1]

このコードでは、2つのサイドバーを登録しています。ウィジェット画面で識別できるように、名前と説明を付けました。説明パラメータは、このサイドバーがテーマのどこに表示されるかをユーザーに伝えるために使用できます。wpbは作業しているテーマの名前で、これらの文字列を翻訳可能にするためにここで使われています。テーマ名に置き換えてください。

Newly created sidebars appearing on Widgets screen

WordPressテーマファイルに動的ウィジェット対応のサイドバーを追加する

ここまで、動的サイドバーのみを登録してきました。ユーザーは外観 ” ウィジェット画面からこれらのサイドバーにウィジェットをドラッグ&ドロップすることができます。しかし、これらのサイドバーは、sidebar.phpのようなテンプレートや表示したい場所で呼び出されるまでは、サイトに表示されません。これらのウィジェット・エリアを追加するには、表示したいテンプレート・ファイルを編集し、以下のコードを貼り付けます:

[cbk2]

このコード例では、表示したいサイドバーを呼び出すためにsidebar idを使用しています。別のサイドバーを表示するには、サイドバーidを変更してください。例えば、フッターエリアに3つのサイドバーを登録し、テーマのfooter.phpテンプレートで1つずつ呼び出すことができます。

ウィジェットは非常に強力です。投稿やページのコンテンツにウィジェットを追加したり、テキストウィジェットをカラフルにしたり、WordPress初期設定のウィジェットのパワーを拡張したりできます。ウィジェット対応のサイドバーを適切に配置することで、ユーザーは簡単なドラッグ&ドロップインターフェースを使ってカスタマイザー要素をサイトに追加することができます。

この投稿が、WordPressで動的なウィジェットレディサイドバーを追加する方法を学ぶのに役立てば幸いです。Genesisのようなテーマフレームワークのコードを勉強して、プロがどのように使用しているかを学ぶことをお勧めします。質問やフィードバックは、以下にコメントを残してください。

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

28件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Milada says

    Hallo team again,

    sorry to trouble you, but I would like to specify, that I would need one widget above the themes current Primary Sidebar widget on the right and the other widget on the left side from the article in the middle.
    How should I proceed?
    Thank you,

    Milada

  3. Milada says

    Hallo team again,

    how do I add a field in the widget and which and where do I paste a field code to have there affiliate links?
    Thank you,

    Milada

  4. Marc says

    This tutorial was a great help.
    Been trying to accomplish this for about a week now.
    Nice and to-the-point.

    Thank you!

  5. Laura says

    I just wondered, before I actually paste the code, does this work on a theme that originally doesn’t come with a sidebar? I’m using Book Lite which only has footers.

  6. Bakopu says

    Thank you very very much sir. Where are you sir , we want to take your blessings by touching your feet.

  7. gWorldz says

    I am having trouble getting the widget to display o.O

    The widget is registering and displaying in the back-end properly with no issues, however, it will only show my widget content if I include content in the previous widget.

    I’m using a 2011 child theme and registering an additional footer area.
    functions.php snippet:
    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

    Do you have any idea what I’m doing wrong or what is causing this issue?

  8. MJ says

    Just wanted to say thanks for this. I Googled to find out how to register a sidebar in WordPress, and hit a few other sites before this one, and yours had the best, clearest, most understandable directions. Well done.

  9. Dharmendra Prajapati says

    Finally i got my dynamic widget ready sidebar after 23 days… I was googled all the sites.. and finally i redirected @ your site.

    Thanks

  10. Kevin says

    In the second snippet, where you are inserting the widget code into the template, where you have

    div id=”secondary”

    Should that id change with each widget area.

    Ex:

    First, Secondary, Third, fourth, etc

  11. SS says

    Works for registering the sidebars but when I go to the Appearance » Widgets screen I see all my widgets but nothing to drag them into.

  12. Steve Smart says

    Hi –

    This is a very helpful post. Thankyou!

    I’ve been successful using one dynamic widget area, 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.

    I am using a twentytwelve-child theme, and WordPress 3.7.1.

    Any thoughts?

  13. Ed Du says

    You can also use Headway with a additional block and it will take care of all of this. Or pagelines for that matter.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。