✅Reordenar Entradas, Páginas y Productos (Arrastrar/Soltar) Sin Plugins [WordPress]

¿Alguna vez has deseado tener el control total sobre el orden de tus entradas, páginas o productos en WordPress? En el mundo del diseño web y la gestión de contenido, la capacidad de organizar visualmente tu contenido puede marcar una gran diferencia en la eficiencia del trabajo. Hoy quiero compartir contigo una solución práctica para este desafío: un código simple pero poderoso que permite ordenar y reordenar fácilmente tus publicaciones en el backend de WordPress con solo arrastrar y soltar.

Este método utiliza jQuery UI Sortable integrado con WordPress y un script personalizado que añades directamente en tu archivo functions.php. Una vez inplementado, podrás mover tus entradas, páginas y productos de WooCommerce con total libertad, y lo más importante, ¡guardar ese orden con solo un clic! Este enfoque no solo simplifica tu flujo de trabajo, sino que también mejora la organización y accesibilidad de tu contenido para ti como administrador.

Descubre cómo implementar esta solución y aprovecha al máximo la capacidad de ordenar y personalizar tu contenido en WordPress. ¡Sigue leyendo para aprender más!

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

// Función para cargar scripts personalizados según el tipo de post
function enqueue_custom_scripts() {
    // Verificar el tipo de post actual
    $post_type = get_current_screen()->post_type;

    // Solo cargar scripts si el tipo de post es alguno de los especificados
    if (in_array($post_type, ['post', 'page', 'product'])) {
        // Incluir jQuery UI Sortable
        wp_enqueue_script('jquery-ui-sortable');

        // Añadir el script personalizado directamente en línea
        add_action('admin_footer', 'inline_custom_ordering_script');
    }
}
add_action('admin_enqueue_scripts', 'enqueue_custom_scripts');

// Función para añadir el script personalizado en línea
function inline_custom_ordering_script() {
    // Obtener el tipo de post actual
    $post_type = get_current_screen()->post_type;

    // Solo imprimir el script si el tipo de post es alguno de los especificados
    if (in_array($post_type, ['post', 'page', 'product'])) {
        global $pagenow;

        // Tipos de post soportados
        $post_types = ['post', 'page', 'product'];

        ?>
        <script>
        jQuery(document).ready(function($) {
            // Asegúrate de que cada fila de la lista tenga un atributo data-id con el ID del post
            $('#the-list tr').each(function() {
                var id = $(this).attr('id');
                $(this).attr('data-id', id.replace('post-', ''));
            });

            // Aplica la funcionalidad de arrastrar y soltar a la lista de elementos
            $('#the-list').sortable({
                items: 'tr',
                cursor: 'move',
                axis: 'y',
                containment: 'tbody',
                update: function(event, ui) {
                    $('#save-order').prop('disabled', false); // Habilitar el botón de guardar cambios
                }
            });

            // Añadir botón de "Guardar cambios"
            if ($('#save-order').length === 0) {
                $('.wrap').append('<button id="save-order" class="button button-primary" disabled>Guardar cambios</button>');
            }

            // Función para manejar el clic en el botón de "Guardar cambios"
            $('#save-order').on('click', function() {
                // Obtiene el nuevo orden de los elementos
                var order = $('#the-list').sortable('toArray', {attribute: 'data-id'});
                // Envía el nuevo orden al servidor a través de Ajax
                $.post(ajaxurl, {
                    action: 'save_order',
                    order: order,
                    security: $('#order_nonce').val() // Añade el nonce de seguridad
                }, function(response) {
                    if (response.success) {
                        // Muestra un mensaje de éxito si se guardó correctamente
                        alert('Orden guardado correctamente.');
                        $('#save-order').prop('disabled', true); // Deshabilitar el botón después de guardar
                    } else {
                        // Muestra un mensaje de error si hubo algún problema
                        alert('Hubo un problema al guardar el orden.');
                    }
                });
            });
        });
        </script>
        <?php
    }
}

// Maneja la solicitud Ajax para guardar el nuevo orden
function save_order() {
    // Verifica el nonce de seguridad
    check_ajax_referer('order_nonce', 'security');

    // Verifica que el usuario tenga permisos para editar posts
    if (!current_user_can('edit_posts')) {
        wp_send_json_error('No tienes permisos para realizar esta acción.');
    }

    // Obtiene el orden de los elementos desde la solicitud Ajax
    $order = $_POST['order'];

    // Itera sobre cada elemento y actualiza su 'menu_order'
    foreach ($order as $menu_order => $post_id) {
        wp_update_post(array(
            'ID' => intval($post_id),
            'menu_order' => intval($menu_order)
        ));
    }

    // Envía una respuesta de éxito
    wp_send_json_success('Orden guardado.');
}
add_action('wp_ajax_save_order', 'save_order'); // Hook para manejar la solicitud Ajax

// Añade un nonce de seguridad al pie de la página de administración
function add_order_nonce() {
    global $pagenow;

    // Obtener el tipo de post actual
    $post_type = get_current_screen()->post_type;

    // Solo añadir el nonce si el tipo de post es alguno de los especificados
    if (in_array($post_type, ['post', 'page', 'product'])) {
        // Añade un campo nonce oculto para la seguridad
        wp_nonce_field('order_nonce', 'order_nonce');
    }
}
add_action('admin_footer', 'add_order_nonce'); // Usa admin_footer para añadir el nonce en el pie de la página de administración

// Función para habilitar la compatibilidad con el ordenamiento de páginas en el tipo de post deseado
function add_custom_post_type_support() {
    // Añade soporte para 'page-attributes' (que incluye 'menu_order') a los tipos de post personalizados
    add_post_type_support('post', 'page-attributes');
    add_post_type_support('page', 'page-attributes');
    add_post_type_support('product', 'page-attributes'); // WooCommerce products
}
add_action('init', 'add_custom_post_type_support'); // Usa init para habilitar el soporte en la inicialización de WordPress

// Ajuste de la consulta principal para que los posts se ordenen por 'menu_order'
function set_custom_post_order($query) {
    if (is_admin() && $query->is_main_query()) {
        $post_type = $query->get('post_type');
        
        // Verificar que el tipo de post sea alguno de los especificados
        if (in_array($post_type, ['post', 'page', 'product'])) {
            $query->set('orderby', 'menu_order');
            $query->set('order', 'ASC');
        }
    }
}
add_action('pre_get_posts', 'set_custom_post_order');

Lenguaje del código: PHP (php)

Entendiendo el Código

El código proporcionado permite implementar funcionalidades avanzadas de reordenamiento de posts en el panel de administración de WordPress, específicamente para los tipos de posts ‘post’, ‘page’ y ‘product’ (usado por WooCommerce).

Función enqueue_custom_scripts()

Esta función se encarga de cargar los scripts necesarios, como jQuery UI Sortable, solo cuando el usuario está en la pantalla de administración de algún tipo de post compatible (‘post’, ‘page’, ‘product’). Esto se realiza verificando el tipo de post actual usando get_current_screen()->post_type.

Función inline_custom_ordering_script()

Esta función imprime un script JavaScript en el pie de página del panel de administración. El script:

• Asigna un atributo data-id a cada fila de la lista de posts (#the-list), para almacenar el ID del post.
• Habilita la funcionalidad de arrastrar y soltar utilizando jQuery UI Sortable en la lista de posts.
• Agrega dinámicamente un botón «Guardar cambios» que se habilita cuando se realizan cambios en el orden.
• Maneja el evento de clic en el botón «Guardar cambios», enviando el nuevo orden de posts al servidor a través de Ajax para ser procesado por la función save_order().

Función save_order()

Esta función maneja la solicitud Ajax (wp_ajax_save_order) para guardar el nuevo orden de los posts:

• Verifica el nonce de seguridad para prevenir ataques CSRF.
• Verifica que el usuario tenga permisos adecuados (edit_posts) para realizar la operación.
• Recibe y procesa el nuevo orden de posts enviado desde el cliente.
• Utiliza wp_update_post() para actualizar el campo menu_order de cada post según el nuevo orden.
• Envía una respuesta JSON indicando si la operación fue exitosa o no.

Función add_order_nonce()

Esta función añade un campo nonce de seguridad al pie de página del panel de administración. Este nonce asegura que las solicitudes Ajax sean válidas y no puedan ser manipuladas por terceros maliciosos.

Función add_custom_post_type_support()

Esta función habilita el soporte para la ordenación personalizada (menu_order) en los tipos de posts especificados (‘post’, ‘page’, ‘product’). Esto es crucial para que el sistema reconozca y utilice el campo menu_order en estos tipos de posts durante el proceso de reordenamiento.

Función set_custom_post_order()

Esta función ajusta la consulta principal (pre_get_posts) para que los posts se ordenen por menu_order y en orden ascendente (ASC) cuando se está en el área de administración y se visualizan los tipos de posts especificados (‘post’, ‘page’, ‘product’).

Este código proporciona una base sólida y modular que puede ser extendida y adaptada según las necesidades específicas de cada proyecto.

Si deseas realizar modificaciones o integraciones más avanzadas, o si tienes preguntas específicas sobre la implementación de este código en tu proyecto, no dudes en contactarme. Estaré encantado de ayudarte a adaptar esta solución a tus necesidades específicas.