WordPressの自作テーマにウィジェットを追加する

自分用メモ。

オリジナルテーマにウィジェットを追加したい場合は以下を記述する。

functions.php

// 「theme_widgets」は任意の名称に変更してもOK
function theme_widgets() {
  register_sidebar(array(
    'name' => 'オリジナルウィジェット', // 任意のウィジェット名
    'id' => 'origin_id', // 任意のウィジェットのID名
    'before_widget' => '<div class="l-singleSide__block --widget">', // ウィジェット直前のHTML
    'after_widget' => '</div>', // ウィジェット直後のHTML
    'before_title'  => '<h3 class="l-singleSide____heading">', // ウィジェットのタイトル開始タグ
    'after_title'   => '</h3>', // ウィジェットのタイトル終了タグ
  ));

  // 複数ある場合は下に追加していく
  register_sidebar(array(
    'name' => 'オリジナルウィジェット02',
    'id' => 'origin_id02',
    'before_widget' => '<div class="l-singleSide__block --widget">',
    'after_widget' => '</div>',
    'before_title'  => '<h3 class="l-singleSide____heading">',
    'after_title'   => '</h3>',
  ));
}
add_action( 'widgets_init', 'theme_widgets' );

出力先のページファイル（sidebar.phpなど）

<?php if(is_active_sidebar('origin_id')): ?> // 表示させたいウィジェットのID名
  <?php dynamic_sidebar('origin_id'); ?> // 表示させたいウィジェットのID名
<?php endif; ?>

PR