WordPressでサイドバーにウィジェットエリアを追加する方法

WordPressにはウィジェットという機能が備わっており、ウィジェットを使用することでさまざまな機能を簡単に追加することができます。

ここではサイドバーにウィジェットエリアを追加する方法について見ていきましょう。

ウィジェットエリアを作成することで、ウィジェットの設定が可能になります。

ウィジェット機能を有効化する

テーマでウィジェット機能が有効になっていない場合は、ダッシュボードからウィジェットを設定することができません。（「外観」メニューで「ウィジェット」が表示されません。）

ウィジェット機能を使用するためには、機能を有効化しましょう。

register_sidebar関数をfunctions.phpに追加します。

【functions.php】

if (function_exists('register_sidebar')) {
    register_sidebar(array(
      'name' => 'ウィジェット名',
      'id' => 'ウィジェットのID',
      'description' => 'ウィジェットの説明',
      'before_widget' => 'ウィジェットを囲む開始タグ',
      'after_widget' => 'ウィジェットを囲む終了タグ',
      'before_title' => 'ウィジェットのタイトルを囲む開始タグ',
      'after_title' => 'ウィジェットのタイトルを囲む終了タグ'
   ));
}

記述例

if (function_exists('register_sidebar')) {
    register_sidebar(array(
      'name' => 'サイドバー',
      'id' => 'sidebar',
      'description' => 'サイドバーウィジェット',
      'before_widget' => '<div>',
      'after_widget' => '</div>',
      'before_title' => '<h3>',
      'after_title' => '</h3>'
   ));
}

以上で、ダッシュボードからウィジェットを設定できるようになります。（「外観」メニューに「ウィジェット」が表示されます。）

【作成されたウィジェットエリア】

ウィジェットエリアを表示する

ウィジェット機能を有効化しただけでは、作成したウィジェットエリアはまだ表示されません。

ウィジェットエリアを表示しましょう。

ウィジェットエリアを表示したい箇所（ここではsidebar.php内）に以下のコードを記述します。

【sidebar.php】

<?php dynamic_sidebar( 'sidebar' ); ?>

dynamic_sidebarの（）の中はregister_sidebar関数で指定したidを設定していますが、idの他にもウィジェットエリアの名前を使用することができます。

<?php dynamic_sidebar( 'サイドバー' ); ?>

ウィジェットエリアにウィジェットを追加して、サイドバーに正しく表示ができているかを確認しましょう。

以上、Wordpressでサイドバーにウィジェットエリアを追加する方法でした。

Wordpressの中級者以上を目指すなら

Wordpressの中級者以上を目指すのであればオンラインスクールもおすすめです。

筆者も講師（メンター）の一人ですが、オンラインスクールの一つ「Techacademy」ではWordpressをカスタマイズするために必要なカリキュラムが用意されています。

⇒オンラインブートキャンプ WordPressコース

Wordpressにも利用されているPHPを利用してWebアプリケーションを開発してみたい方には「PHP/Laravelコース」がおすすめです。

⇒オンラインブートキャンプ PHP/Laravelコース