WordPressの既存テーマにウィジェットエリアを追加する方法

WordPressには様々なテーマが提供されていますが、中にはユーザーがカスタマイズすることが前提になっているテーマもあり、いくつかの場所に自分でウィジェットエリアを追加できることがあります。

追加できる場所

WordPressにはフックと呼ばれる仕組みによってユーザーが処理を追加できるようになっており、例えばテーマ内にdo_actionと記載しておけばその個所にadd_actionで指定した処理を実行することができます。

do_action('action_name');

add_action('action_name', 'function_name');

この仕組みを使えば、既存のテーマを書き換えることなく、ある程度は好みの位置にウィジェットエリアを追加することができます。

ウィジェットエリアを作成する手順

do_actionを探す

既存テーマの中からdo_actionの場所を探します。

do_action('action_name');

ウィジェットエリアを作成したい個所のaction_nameをメモしておきます。

function.phpに追記する

子テーマのfunction.phpに対して以下を追記します。

/*
 * ウィジェットエリアの作成
 */
function my_add_widgets_init() {
  // ウィジェットエリアの追加（複数のエリアを追加することも可）
  register_sidebar(
    array(
      'name' => '名前１',
      'id' => 'widget-my-add-1', // 一意な文字列
      'description' => '説明',
      'before_widget' => '<div id="%1$s" class="widget-my-add-1 %2$s">', // ウィジェットを囲むdivタグ
      'after_widget' => '</div>', // ウィジェットを囲むdivタグ
      'before_title' => '<h3>', // タイトルを囲むタグ
      'after_title' => '</h3>', // タイトルを囲むタグ
    )
  );
}
add_action('widgets_init', 'my_add_widgets_init');

/*
 * do_action('action_name');の位置に挿入する
 */
function add_widget_1() {

  ob_start();
  dynamic_sidebar('widget-my-add-1');
  $str = ob_get_clean();
  
  // 必要に応じて処理を記述
  
  echo $str;
}
add_action('action_name', 'add_widget_1');

ウィジェットエリアを作成するやり方は以上です。