ウィジェットに「CSSクラス」オプションを追加する方法

はじめに

プラグイン「Widget CSS Classes」などを使わずに、ウィジェットに任意の複数のCSSクラスをを追加します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// ウィジェットに設定メニューを追加
add_action('in_widget_form', function ($widget, $return, $instance) {
  $extra_class = !empty($instance['extra_class']) ? $instance['extra_class'] : '';

  ?>
  <p>
    <label for="<?php echo esc_attr($widget->get_field_id('extra_class')); ?>">
      CSSクラス
      <input class="widefat" id="<?php echo esc_attr($widget->get_field_id('extra_class')); ?>" name="<?php echo esc_attr($widget->get_field_name('extra_class')); ?>" type="text" value="<?php echo esc_attr($extra_class); ?>" />
    </label>
  </p>
  <?php
}, 10, 3);


// ウィジェットの入力データを更新
add_filter('widget_update_callback', function ($instance, $new_instance, $old_instance, $widget) {
  $raw_extra_class = isset($new_instance['extra_class']) ? trim($new_instance['extra_class']) : '';

  // CSSクラスなしは設定
  if ($raw_extra_class === '') {
    $instance['extra_class'] = '';
    return $instance;
  }

  // CSSクラスを分割
  $classes = preg_split('/\s+/', $raw_extra_class);
  $classes = array_map('sanitize_html_class', $classes);

  // CSSクラスを再結合して設定
  $instance['extra_class'] = implode(' ', array_filter($classes));

  return $instance;
}, 10, 4);


// ウィジェットの出力パラメータを変更
add_filter('dynamic_sidebar_params', function ($params) {
  global $wp_registered_widgets;

  if (empty($params[0]['widget_id'])) {
    return $params;
  }

  $widget_id = $params[0]['widget_id'];
  $widget_obj = isset($wp_registered_widgets[$widget_id]) ? $wp_registered_widgets[$widget_id] : null;

  // ウィジェット情報なしは処理対象外
  if (!$widget_obj || !isset($widget_obj['callback'][0]) || !is_object($widget_obj['callback'][0])) {
    return $params;
  }

  $widget_instance = $widget_obj['callback'][0];
  $number = isset($widget_obj['params'][0]['number']) ? $widget_obj['params'][0]['number'] : 0;
  $settings = method_exists($widget_instance, 'get_settings') ? $widget_instance->get_settings() : [];
  $extra_class = isset($settings[$number]['extra_class']) ? $settings[$number]['extra_class'] : '';

  // CSSクラスがある場合は設定
  if (!empty($extra_class)) {
    $params[0]['before_widget'] = str_replace(
      'class="',
      'class="' . esc_attr($extra_class) . ' ',
      $params[0]['before_widget']
    );
  }

  return $params;
});

さいごに

今回紹介した方法を使えば、ウィジェットに複数の任意CSSクラスを自由に追加できます。
管理画面から簡単にクラスを入力でき、出力時にまとめて反映されるため、デザインやレイアウトのカスタマイズが柔軟に行えます。