register_sidebar()


WordPressのregister_sidebar()関数は、ウィジェットエリア(サイドバー)を登録するために使用されます。この関数を使うことで、テーマ内に新しいウィジェットエリアを作成し、管理画面からウィジェットを追加できるようになります。

構文

register_sidebar( array $args = array() );

引数の説明:

  • $args(array) — サイドバーの設定を指定する連想配列。以下のキーを持つことができます。
  • name(string) — サイドバーの名前。管理画面で表示されます。
  • id(string) — サイドバーの一意のID。英数字とハイフンのみ使用可能。
  • description(string) — サイドバーの説明。管理画面で表示されます。
  • class(string) — サイドバーに追加するCSSクラス。
  • before_widget(string) — 各ウィジェットの前に表示するHTML。
  • after_widget(string) — 各ウィジェットの後に表示するHTML。
  • before_title(string) — ウィジェットタイトルの前に表示するHTML。
  • after_title(string) — ウィジェットタイトルの後に表示するHTML。

例1: 基本的なサイドバーの登録

この例では、シンプルなサイドバーを登録します。

register_sidebar( array( 'name' => 'メインサイドバー', 'id' => 'main-sidebar', 'description' => 'メインのサイドバーエリア', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>' ) );

例2: 複数のサイドバーを登録

複数のサイドバーを一度に登録する例です。

function register_theme_sidebars() { register_sidebar( array( 'name' => 'フッターサイドバー1', 'id' => 'footer-sidebar-1', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) ); register_sidebar( array( 'name' => 'フッターサイドバー2', 'id' => 'footer-sidebar-2', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) ); } add_action( 'widgets_init', 'register_theme_sidebars' );

例3: カスタムクラスを追加

サイドバーにカスタムCSSクラスを追加する例です。

register_sidebar( array( 'name' => 'カスタムサイドバー', 'id' => 'custom-sidebar', 'class' => 'custom-class', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>' ) );

例4: ウィジェットタイトルのHTMLを変更

ウィジェットタイトルの前後に表示するHTMLを変更する例です。

register_sidebar( array( 'name' => 'タイトル変更サイドバー', 'id' => 'title-change-sidebar', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="custom-title">', 'after_title' => '</h4>' ) );

例5: ウィジェットのHTMLをカスタマイズ

ウィジェットの前後に表示するHTMLをカスタマイズする例です。

register_sidebar( array( 'name' => 'カスタムHTMLサイドバー', 'id' => 'custom-html-sidebar', 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h3 class="widget-heading">', 'after_title' => '</h3>' ) );

例6: ウィジェットエリアの説明を追加

サイドバーに説明文を追加する例です。

register_sidebar( array( 'name' => '説明付きサイドバー', 'id' => 'described-sidebar', 'description' => 'このサイドバーはフッターに表示されます。', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>' ) );

注意点

  • サイドバーのIDは一意である必要があります。重複するとエラーが発生します。
  • before_widgetafter_widgetには、%1$s%2$sを使用してウィジェットのIDとクラスを動的に挿入できます。
  • サイドバーを登録する際は、widgets_initアクションフックを使用する必要があります。

関連機能: