Cómo ▶ Crear con ChatGPT Plugin de WordPress para Mostrar un Formulario en una Ventana Modal

Objetivo: Generar una ventana para enviar los datos de solicitud de una cotizacion de un producto en particular

Con Inteligencia Artificial (ChatGPT 4o)

En el mundo del desarrollo web, WordPress se destaca por su flexibilidad y facilidad de personalización. Una de las muchas razones por las que WordPress es tan popular es la capacidad de extender su funcionalidad mediante plugins.

En este post, te enseñaré cómo crear un plugin con Inteligencia Artificial (ChatGPT 4o) sencillo que muestra un formulario en una ventana modal activada por un botón.

Prompt para crear un plugin con Inteligencia Artificial (ChatGPT 4o)

Actua como un experto desarrollador wordpress, enseñame a crear un pluging que genere una ventana modal donde pueda insertar un formulario con un shotcode de wpform a traves de un boton con el titulo "Quiero una cotizacion", revisa que todo el desarrollo compla con lo sestanderes de seguridad de wordpress.org

Resultado

Paso a Paso: Creación de un Plugin de WordPress

Paso 1: Configuración Básica del Plugin

Lo primero que debes hacer es configurar la estructura básica de tu plugin. Crea una carpeta en el directorio wp-content/plugins/ y nómbrala modal-form-plugin.

Dentro de esta carpeta, crea un archivo PHP principal llamado modal-form-plugin.php con el siguiente contenido:

<?php
/*
Plugin Name: Modal Form Plugin
Plugin URI: https://example.com
Description: A simple plugin to display a modal with a WPForms form.
Version: 1.0
Author: Napoleon Contreras
Author URI: https://example.com
License: GPL2
*/

// Evita el acceso directo al archivo
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Encola los scripts y estilos necesarios
function mfp_enqueue_scripts() {
    wp_enqueue_style( 'mfp-modal-style', plugin_dir_url( __FILE__ ) . 'css/modal-style.css' );
    wp_enqueue_script( 'mfp-modal-script', plugin_dir_url( __FILE__ ) . 'js/modal-script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mfp_enqueue_scripts' );

// Genera el shortcode para el modal
function mfp_modal_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'form_id' => ''
    ), $atts );

    ob_start();
    ?>
    <div id="mfp-modal" class="mfp-modal">
        <div class="mfp-modal-content">
            <span class="mfp-close">&times;</span>
            <?php echo do_shortcode( '[wpforms id="' . esc_attr( $atts['form_id'] ) . '"]' ); ?>
        </div>
    </div>
    <button id="mfp-open-modal">Quiero una cotización</button>
    <?php
    return ob_get_clean();
}
add_shortcode( 'mfp_modal', 'mfp_modal_shortcode' );
?>

Paso 2: Estilos CSS para el Modal

Crea una carpeta css dentro del directorio de tu plugin y un archivo modal-style.css dentro de ella con el siguiente contenido:

/* Estilos básicos para el modal */
.mfp-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.mfp-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
}

.mfp-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.mfp-close:hover,
.mfp-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

Paso 3: Script JavaScript para el Modal

Crea una carpeta js dentro del directorio de tu plugin y un archivo modal-script.js dentro de ella con el siguiente contenido:

jQuery(document).ready(function($) {
    var modal = $('#mfp-modal');
    var btn = $('#mfp-open-modal');
    var span = $('.mfp-close');

    btn.on('click', function() {
        modal.show();
    });

    span.on('click', function() {
        modal.hide();
    });

    $(window).on('click', function(event) {
        if ($(event.target).is(modal)) {
            modal.hide();
        }
    });
});

Paso 4: Uso del Shortcode

Después de activar el plugin desde el panel de administración de WordPress, puedes insertar el formulario en cualquier página o entrada utilizando el shortcode [mfp_modal form_id="123"], donde 123 es el ID de tu formulario WPForms.

Paso 5: Activar el Plugin

Para activar el plugin, ve al panel de administración de WordPress, navega a «Plugins» y activa tu nuevo plugin «Modal Form Plugin».

Resultado

Tambien lo puedes testear en plugins generado con CHatGPT

Ovisitar la pagina donde se ha hecho la implementacion de plugin con inteligencia artificial