【WordPress】投稿一覧ページにカスタム並び順をドラッグ＆ドロップで実装する方法

function add_menu_order_support() {
  add_post_type_support('post', 'page-attributes');
  // カスタム投稿タイプにも追加可能
  // add_post_type_support('news', 'page-attributes');
}
add_action('init', 'add_menu_order_support');

function set_admin_order_by_menu_order($query) {
  if (is_admin() && $query->is_main_query() && $query->get('post_type') === 'post') {
    $query->set('orderby', 'menu_order');
    $query->set('order', 'ASC');
  }
}
add_action('pre_get_posts', 'set_admin_order_by_menu_order');

function enqueue_drag_drop_script($hook) {
  if ($hook !== 'edit.php') return;

  // edit.phpは全投稿タイプ共通のフックサフィックスのため、post以外の
  // 一覧画面に機能が漏れないよう投稿タイプも確認する
  $current_post_type = isset($_GET['post_type']) ? sanitize_key($_GET['post_type']) : 'post';
  if ($current_post_type !== 'post') return;

  wp_enqueue_script('jquery-ui-sortable');
  wp_enqueue_script('custom-order-script', get_stylesheet_directory_uri() . '/js/custom-order.js', array('jquery', 'jquery-ui-sortable'), null, true);

  // Ajax用データ
  wp_localize_script('custom-order-script', 'customOrderAjax', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce'    => wp_create_nonce('custom_order_nonce'),
  ));
}
add_action('admin_enqueue_scripts', 'enqueue_drag_drop_script');

jQuery(document).ready(function ($) {
  var $tbody = $('tbody');

  $tbody.sortable({
    items: 'tr',
    cursor: 'move',
    update: function () {
      var order = [];
      $tbody.find('tr').each(function (i, el) {
        var id = $(el).attr('id').replace('post-', '');
        order.push(id);
      });

      $.post(customOrderAjax.ajax_url, {
        action: 'save_custom_order',
        order: order,
        nonce: customOrderAjax.nonce
      });
    }
  });
});

function save_custom_order() {
  check_ajax_referer('custom_order_nonce', 'nonce');

  if (!current_user_can('edit_posts')) {
    wp_send_json_error('許可されていません');
  }

  $order = isset($_POST['order']) ? $_POST['order'] : array();

  foreach ($order as $menu_order => $post_id) {
    $post_id = intval($post_id);

    // 投稿ごとに編集権限を確認する（他人の投稿を書き換えられないようにする）
    if (!current_user_can('edit_post', $post_id)) {
      continue;
    }

    wp_update_post(array(
      'ID'         => $post_id,
      'menu_order' => intval($menu_order),
    ));
  }

  wp_send_json_success('並び順を更新しました');
}
add_action('wp_ajax_save_custom_order', 'save_custom_order');

function add_menu_order_column($columns) {
  $columns['order'] = '順番';
  return $columns;
}
add_filter('manage_post_posts_columns', 'add_menu_order_column');

function show_menu_order_column($column_name, $post_id) {
  if ($column_name === 'order') {
    echo get_post_field('menu_order', $post_id);
  }
}
add_action('manage_post_posts_custom_column', 'show_menu_order_column', 10, 2);