ウィジェットに「PC・モバイル表示切り替え」オプションを追加する方法

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

/**
 * 設定値を管理
 *
 * @return array 設定配列
 */
if (!function_exists('get_widget_visibility_options')):
function get_widget_visibility_options() {
  return [
    'pc_off' => ['label' => 'PC非表示'      , 'class' => 'pc-off'],
    'sp_off' => ['label' => 'モバイル非表示', 'class' => 'sp-off'],
  ];
}
endif;


// ウィジェットに設定メニューを追加
add_action('in_widget_form', function ($widget, $return, $instance) {
  $options = get_widget_visibility_options();

  foreach ($options as $key => $option) {
    $field_id   = $widget->get_field_id($key);
    $field_name = $widget->get_field_name($key);
    $is_checked = !empty($instance[$key]);

    ?>
    <p>
      <input type="checkbox" id="<?= esc_attr($field_id); ?>" name="<?= esc_attr($field_name); ?>" value="1" <?php checked($is_checked); ?>>
      <label for="<?= esc_attr($field_id); ?>"><?= esc_html($option['label']); ?></label>
    </p>
    <?php
  }
}, 10, 3);


// ウィジェットの入力データを更新
add_filter('widget_update_callback', function ($instance, $new_instance, $old_instance, $widget) {
  $options = get_widget_visibility_options();

  foreach (array_keys($options) as $key) {
    $instance[$key] = !empty($new_instance[$key]) ? 1 : 0;
  }

  return $instance;
}, 10, 4);


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

  $widget_id = $params[0]['widget_id'] ?? null;

  if (!$widget_id || !isset($wp_registered_widgets[$widget_id])) {
    return $params;
  }

  $widget_obj  = $wp_registered_widgets[$widget_id];
  $option_name = $widget_obj['callback'][0]->option_name ?? null;
  $widget_num  = $widget_obj['params'][0]['number'] ?? null;

  if (!$option_name || $widget_num === null) {
    return $params;
  }

  $widget_opt = get_option($option_name);
  $options    = get_widget_visibility_options();
  $classes    = [];

  foreach ($options as $key => $option) {
    if (!empty($widget_opt[$widget_num][$key]) && (int) $widget_opt[$widget_num][$key] === 1) {
      $classes[] = $option['class'];
    }
  }

  if (empty($classes)) {
    return $params;
  }

  $class_string = implode(' ', $classes);
  $params[0]['before_widget'] = preg_replace('/class="/', 'class="' . esc_attr($class_string) . ' ', $params[0]['before_widget'], 1);

  return $params;
});

以下のコードをstyle.cssに追加します。

/* PC非表示 */
@media (width > 834px) {
  .pc-off {
    display: none;
  }
}

/* モバイル非表示 */
@media (width <= 834px) {
  .sp-off {
    display: none;
  }
}