✅Ahorra Tiempo Editando Contenidos en WordPress con este Código

En la gestión de un sitio web WordPress, la eficiencia en la edición y creación de contenido es fundamental. Implementar soluciones que optimicen estos procesos puede resultar en ahorros significativos de tiempo y aumentar la productividad. En este artículo, desglosaremos una solución que utiliza SweetAlert2 para manejar ediciones y creaciones de contenido mediante popups, proporcionando una experiencia de usuario más fluida y eficiente.

El tiempo es un recurso valioso, especialmente para los administradores y editores de sitios web. La posibilidad de editar y crear contenido rápidamente sin perder el contexto de la página actual es crucial para mantener un flujo de trabajo eficiente. Los popups proporcionan una solución efectiva al permitir que los usuarios realicen estas tareas en un entorno controlado sin necesidad de cambiar de pestañas o recargar la página actual.

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

// Enqueue SweetAlert2 CSS y JS en el área de administración
function enqueue_sweetalert2() {
    wp_enqueue_style('sweetalert2-css', 'https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css');
    wp_enqueue_script('sweetalert2-js', 'https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js', [], null, true);
}
add_action('admin_enqueue_scripts', 'enqueue_sweetalert2');
add_action('wp_enqueue_scripts', 'enqueue_sweetalert2'); // Asegurarse de que se cargue también en el frontend

// Agregar el JavaScript para manejar el popup de edición y creación
function add_popup_editing_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Función para manejar el popup de edición y creación de nuevo contenido
    function handlePopup(event) {
        event.preventDefault();
        const editUrl = event.target.closest('a').getAttribute('href');
        
        Swal.fire({
            title: 'Editar contenido',
            html: `
                <div style="z-index: 9999; padding-left:100px;">
                    <button id="exit-button" class="components-button is-secondary" style=" margin:5px; position: absolute; top: 10px; right: 10px; z-index: 9999;">X</button>
                    <iframe id="edit-iframe" src="${editUrl}" style="width:calc(100% - 20px);height:80vh;border:none;margin-top: 10px;margin-left: 10px;"></iframe>
                </div>
            `,
            width: '100%',
            heightAuto: false,
            showConfirmButton: false,
            showCancelButton: false,
            padding: '0', // Eliminar el padding por defecto
            customClass: {
                popup: 'swal2-custom-popup'
            }
        });

        // Agregar funcionalidad al botón "Salir"
        document.getElementById('exit-button').addEventListener('click', function() {
            Swal.close();
        });
    }

    // Agregar event listeners a los enlaces de edición en el backend
    document.querySelectorAll('a.row-title, a[href*="action=edit"]').forEach(function(editLink) {
        editLink.addEventListener('click', handlePopup);
    });

    // Agregar event listeners a los enlaces de nuevo contenido en el backend
    document.querySelectorAll('a[href*="post-new.php"]').forEach(function(newContentLink) {
        newContentLink.addEventListener('click', handlePopup);
    });

    // Agregar event listener al botón de editar en la barra de administración en el frontend
    const adminBarEditButtons = document.querySelectorAll('#wp-admin-bar-edit a, #wp-admin-bar-edit-page a, #wp-admin-bar-edit-product a');
    adminBarEditButtons.forEach(function(editButton) {
        editButton.addEventListener('click', handlePopup);
    });

    // Escuchar el mensaje de contenido guardado desde el iframe
    window.addEventListener('message', function(event) {
        if (event.data.action === 'content-saved') {
            Swal.fire({
                icon: 'success',
                title: 'Contenido guardado',
                showConfirmButton: false,
                timer: 1500
            }).then(() => {
                window.open(event.data.url, '_blank'); // Abrir la entrada en una nueva pestaña
                location.reload(); // Recargar la página actual
            });
        }
    });
});
</script>
<style>
/* Agregar estilos personalizados para asegurar el z-index del popup */
.swal2-custom-popup {
    z-index: 9999 !important;
}
</style>
<?php
}
add_action('admin_footer', 'add_popup_editing_script');
add_action('wp_footer', 'add_popup_editing_script'); // Asegurarse de que se cargue también en el frontend

// Función para agregar el script dentro del contenido del iframe
function add_iframe_save_script() {
    if (is_admin()) {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const saveButton = document.querySelector('.editor-post-publish-button__button');
    if (saveButton) {
        saveButton.addEventListener('click', function() {
            setTimeout(function() { // Añadiendo una ligera demora para asegurar que el post se guarde
                const viewButton = document.querySelector('.components-button.is-secondary');
                if (viewButton) {
                    const viewUrl = viewButton.getAttribute('href');
                    window.parent.postMessage({ action: 'content-saved', url: viewUrl }, '*');
                }
            }, 2000); // Demora para asegurar que el proceso de guardado se complete
        });
    }
});
</script>
<?php
    }
}
add_action('admin_footer', 'add_iframe_save_script');
?>

Lenguaje del código: PHP (php)

Entendiendo el Código

El primer paso para implementar esta solución es encolar los archivos CSS y JavaScript de SweetAlert2 en el área de administración de WordPress. SweetAlert2 es una biblioteca que permite crear popups altamente personalizables con facilidad.

Función enqueue_sweetalert2

Esta función encola los archivos necesarios de SweetAlert2 en el backend de WordPress:

• wp_enqueue_style: Encola el archivo CSS de SweetAlert2 para los estilos del popup.
• wp_enqueue_script: Encola el archivo JavaScript de SweetAlert2 para la funcionalidad del popup.

Se utiliza el hook admin_enqueue_scripts para asegurarse de que estos archivos se carguen en el área de administración.

Implementación del Popup para Edición y Creación de Contenidos

El siguiente paso es agregar un script que maneje los eventos de clic en los enlaces de edición y creación de contenido, y muestre el contenido en un popup.

Función add_popup_editing_script

Esta función inserta un script en el pie de página del área de administración que:

1. Intercepción de Enlaces de Edición y Creación: Se agregan listeners a los enlaces de edición y creación de contenido para interceptar los clics y prevenir la recarga de la página.
2. Generación del Popup: Utiliza SweetAlert2 para crear un popup con un iframe que carga la URL de edición o creación correspondiente.
3. Botón de Cierre: Se añade un botón «Salir» dentro del popup para cerrar el mismo y regresar a la vista anterior sin perder el contexto.
4. Comunicación entre Iframe y Popup: Escucha mensajes desde el iframe indicando que el contenido ha sido guardado, mostrando una notificación de éxito.

Integración del Script de Guardado en el Iframe

Para completar la funcionalidad, es necesario añadir un script dentro del iframe que maneje el evento de guardado del contenido.

Función add_iframe_save_script

Esta función inserta un script en el iframe que:

1. Intercepción del Guardado: Intercepta el evento de clic en el botón de guardado del editor.
2. Mensaje al Popup: Después de una breve demora para asegurar que el proceso de guardado se complete, envía un mensaje al script del popup indicando que el contenido ha sido guardado.

Conclusión

Implementar popups para la edición y creación de contenido en WordPress utilizando SweetAlert2 es una estrategia eficaz para mejorar la productividad y ahorrar tiempo. Esta solución permite a los administradores y editores gestionar contenido de manera más eficiente, sin necesidad de cambiar entre múltiples pestañas o perder el contexto de su trabajo actual. La capacidad de editar y crear contenido en un entorno controlado y fácil de usar se traduce en una experiencia de usuario mejorada y una gestión de contenido más fluida y eficaz.

Nos vemos en el siguiente tutorial. Un saludo.