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

はじめに
完成イメージ
実装手順
参考：WordPress 7.0のブロック表示設定の活用
さいごに

はじめに

以下の質問に回答します。

スマホとPCで表示するウィジェットを変えたい

初歩的な質問で申し訳ないのですが、スマホとPCでそれそれ別々のウィジェットを使いたいのですが可能でしょうか。お手数をおかけいたしますが、ご教示いただけると幸いです。

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

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

完成イメージ

実装手順

以下の手順で実装します。

ラベル

PHPを追加

以下のコードを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;
});

ラベル

CSSを追加

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

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

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