ウィジェット画面のウィジェットを固定化してドラッグ禁止にする方法

はじめに

管理画面でウィジェットを整理していると、誤ってドラッグして位置がずれてしまうことがあります。

特に重要な情報を表示するウィジェットや、デザイン上必ず特定の位置に置きたいウィジェットを管理する場合、固定化機能があると便利です。

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

完成イメージ

実装手順

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

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

  ?>
  <p>
    <input type="checkbox" id="<?= esc_attr($widget->get_field_id('fixed_widget')); ?>" name="<?= esc_attr($widget->get_field_name('fixed_widget')); ?>" value="1" <?php checked($fixed); ?> />
    <label for="<?= esc_attr($widget->get_field_id('fixed_widget')); ?>">ウィジェットを固定</label>
  </p>
  <?php
}, 10, 3);


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

  return $instance;
}, 10, 4);


// 管理画面用JS・CSSを追加
add_action('admin_enqueue_scripts', function ($hook_suffix) {
  if ($hook_suffix !== 'widgets.php') {
    return;
  }

  ob_start();
  ?>
  .fixed-label {
    color: red;
    font-weight: bold;
    margin-right: 3px;
  }

  .fixed-widget .widget-title {
    cursor: default !important;
  }
  <?php
  wp_add_inline_style('wp-admin', ob_get_clean());

  ob_start();
  ?>
  jQuery(function ($) {

    /**
     * 固定ウィジェットの状態を更新
     *
     * @return void
     */
    function updateFixedWidgets() {
      $('.widgets-sortables').each(function () {
        const cancelIds = [];

        $(this).find('.widget').each(function () {
          const $widget = $(this);
          const $title = $widget.find('.widget-title h3');
          const $checkbox = $widget.find('input[name*="fixed_widget"]');

          if ($checkbox.is(':checked')) {
            cancelIds.push('#' + $widget.attr('id'));

            if ($title.find('.fixed-label').length === 0) {
              $title.prepend('<span class="fixed-label">固定</span>');
            }

            $widget.addClass('fixed-widget');
          } else {
            $title.find('.fixed-label').remove();
            $widget.removeClass('fixed-widget');
          }
        });

        if ($(this).data('ui-sortable')) {
          $(this).sortable('option', 'cancel', cancelIds.join(','));
        }
      });
    }

    // 初期状態を反映
    updateFixedWidgets();

    // 固定状態の変更を反映
    $(document).on('change', 'input[name*="fixed_widget"]', updateFixedWidgets);

  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());
});

さいごに

今回紹介した方法を使えば、管理画面のウィジェットを簡単に固定化でき、誤ってドラッグで順番が変わるのを防止できます。
固定ウィジェットにはタイトルの先頭に「固定」ラベルが表示されるため、一目で識別可能です。
複数のウィジェットを使い分ける大規模サイトや、編集者が多い環境でも便利に活用できます。