文章拖拉重新排序drag the posts and reorder

<?php
/**
 * Advanced Draggable Order for image_collection CPT
 * Add this to your theme's functions.php
 */

// 1. Enable menu_order support
function ic_enable_menu_order() {
    add_post_type_support('image_collection', 'page-attributes');
}
add_action('init', 'ic_enable_menu_order');

// 2. Add custom column to show order
function ic_add_order_column($columns) {
    $columns['menu_order'] = 'Order';
    return $columns;
}
add_filter('manage_image_collection_posts_columns', 'ic_add_order_column');

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

// 3. Make the column sortable
function ic_sortable_columns($columns) {
    $columns['menu_order'] = 'menu_order';
    return $columns;
}
add_filter('manage_edit-image_collection_sortable_columns', 'ic_sortable_columns');

// 4. Enqueue admin scripts and styles
function ic_enqueue_admin_scripts($hook) {
    if ('edit.php' !== $hook) {
        return;
    }
    
    $screen = get_current_screen();
    if ('image_collection' !== $screen->post_type) {
        return;
    }
    
    wp_enqueue_script('jquery-ui-sortable');
    
    add_action('admin_footer', 'ic_add_sortable_script');
    add_action('admin_head', 'ic_add_sortable_styles');
}
add_action('admin_enqueue_scripts', 'ic_enqueue_admin_scripts');

// 5. Add sortable JavaScript
function ic_add_sortable_script() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        var fixHelper = function(e, ui) {
            ui.children().each(function() {
                $(this).width($(this).width());
            });
            return ui;
        };
        
        $("#the-list").sortable({
            helper: fixHelper,
            cursor: 'move',
            opacity: 0.7,
            placeholder: 'sortable-placeholder',
            start: function(e, ui) {
                ui.placeholder.height(ui.item.height());
            },
            update: function(event, ui) {
                // Show saving indicator
                var $message = $('<div class="notice notice-info" style="position:fixed;top:32px;right:20px;z-index:9999;"><p>Saving order...</p></div>');
                $('body').append($message);
                
                var order = [];
                $('#the-list tr').each(function(index) {
                    var postId = $(this).attr('id').replace('post-', '');
                    if (postId) {
                        order.push(postId);
                        // Update the menu_order column display
                        $(this).find('.menu_order.column-menu_order').text(index);
                    }
                });
                
                $.ajax({
                    url: ajaxurl,
                    type: 'POST',
                    data: {
                        action: 'ic_update_order',
                        nonce: '<?php echo wp_create_nonce("ic_sort_nonce"); ?>',
                        order: order
                    },
                    success: function(response) {
                        $message.removeClass('notice-info').addClass('notice-success').find('p').text('Order saved!');
                        setTimeout(function() {
                            $message.fadeOut(function() {
                                $(this).remove();
                            });
                        }, 2000);
                    },
                    error: function() {
                        $message.removeClass('notice-info').addClass('notice-error').find('p').text('Error saving order');
                    }
                });
            }
        });
        
        // Add drag cursor to rows
        $("#the-list tr").css('cursor', 'move');
    });
    </script>
    <?php
}

// 6. Add sortable styles
function ic_add_sortable_styles() {
    ?>
    <style>
        .post-type-image_collection #the-list tr {
            cursor: move !important;
        }
        .post-type-image_collection .sortable-placeholder {
            background: #f0f0f1;
            border: 2px dashed #c3c4c7;
        }
        .post-type-image_collection #the-list tr:hover {
            background: #f6f7f7;
        }
    </style>
    <?php
}

// 7. Handle AJAX request
function ic_handle_order_update() {
    check_ajax_referer('ic_sort_nonce', 'nonce');
    
    if (!current_user_can('edit_posts')) {
        wp_send_json_error('Insufficient permissions');
    }
    
    $order = isset($_POST['order']) ? $_POST['order'] : array();
    
    foreach ($order as $position => $post_id) {
        wp_update_post(array(
            'ID' => intval($post_id),
            'menu_order' => $position
        ));
    }
    
    wp_send_json_success('Order updated');
}
add_action('wp_ajax_ic_update_order', 'ic_handle_order_update');

// 8. Default query to use menu_order
function ic_default_query_order($query) {
    if (!is_admin() && $query->is_main_query() && $query->get('post_type') == 'image_collection') {
        $query->set('orderby', 'menu_order');
        $query->set('order', 'ASC');
    }
}
add_action('pre_get_posts', 'ic_default_query_order');

×

文章拖拉重新排序drag the posts and reorder

<?php /** * Advan...