¡Organiza tus datos favoritos con este plugin de WordPress súper sencillo!

Jun 19, 2024 | Diseño Web, Programación | 0 Comentarios

¡Oye, te entiendo! A veces necesitamos tener un lugar donde guardar esos datos relacionados que nos importan, ¿verdad? Por ejemplo, ¿quién no ha querido guardar la URL de ese video de YouTube que no quiere perderse? O tal vez una página web sobre un tema que nos fascina, o esa información en texto que nos pareció súper valiosa. ¡Y ni hablar del teléfono de alguien importante! Hay un montón de cosas que podríamos querer almacenar de esta forma.La idea es tener dos datos relacionados, como la URL y una descripción, y luego una etiqueta que nos ayude a categorizar toda esa información. Así, podemos tener varias referencias bajo una misma etiqueta, lo que nos facilita la búsqueda y organización. Sí, puede sonar un poco limitado, pero esa restricción nos obliga a ser bien claros al elegir el nombre de la etiqueta. ¡Es como tener una especie de sistema de archivos súper sencillo y efectivo!Para implementar esto, podemos usar un plugin de WordPress que haga todo el trabajo pesado por nosotros. ¡Mira, aquí te dejo un ejemplo básico del código que podríamos usar!

Estructura del Plugin

formulario_personalizado/
│
├── formulario_personalizado.php  # Archivo principal del plugin
├── inc/
│   └── form-handler.php           # Manejador del formulario y búsqueda
├── css/
│   └── style.css                  # Estilos del formulario
└── js/
    └── scripts.js                 # JavaScript para el formulario y búsqueda

Archivo Principal del Plugin: formulario_personalizado.php

<?php
/*
Plugin Name: Formulario Personalizado
Plugin URI: http://tusitio.com
Description: Crea formularios personalizados, guarda entradas en la base de datos y permite la búsqueda por etiquetas.
Version: 1.0
Author: Tu Nombre
Author URI: http://tusitio.com
*/

// Incluir el manejador del formulario y búsqueda
require_once plugin_dir_path(__FILE__) . 'inc/form-handler.php';

// Shortcode para mostrar el formulario
function fp_crear_formulario() {
    ob_start();
    ?>
    <form id="fp_formulario" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" method="post">
        <textarea name="fp_campo1" maxlength="10000" placeholder="Ingrese el primer campo..."></textarea>
        <textarea name="fp_campo2" maxlength="10000" placeholder="Ingrese el segundo campo..."></textarea>
        <input type="text" name="fp_etiqueta" placeholder="Ingrese una etiqueta">
        <input type="hidden" name="action" value="fp_form_action">
        <input type="submit" value="Enviar">
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('formulario_personalizado', 'fp_crear_formulario');

// Shortcode para mostrar el formulario de búsqueda
function fp_formulario_busqueda() {
    ob_start();
    ?>
    <form id="fp_busqueda_formulario">
        <input type="text" id="fp_buscar_etiqueta" name="fp_buscar_etiqueta" placeholder="Buscar por etiqueta">
        <input type="submit" value="Buscar">
    </form>
    <div id="fp_resultados_busqueda"></div>
    <?php
    return ob_get_clean();
}
add_shortcode('formulario_busqueda', 'fp_formulario_busqueda');

// Cargar hojas de estilo y scripts
function fp_enqueue_assets() {
    wp_enqueue_style('fp-style', plugins_url('css/style.css', __FILE__));
    wp_enqueue_script('fp-script', plugins_url('js/scripts.js', __FILE__), array('jquery'), null, true);
    wp_localize_script('fp-script', 'fp_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'fp_enqueue_assets');

// Crear la tabla personalizada al activar el plugin
register_activation_hook(__FILE__, 'fp_crear_tabla');

function fp_crear_tabla() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'formulario_personalizado';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        campo1 text NOT NULL,
        campo2 text NOT NULL,
        etiqueta varchar(255) NOT NULL,
        PRIMARY KEY (id)
    ) $charset_collate;";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}
?>

Manejador del Formulario y Búsqueda: inc/form-handler.php

<?php
// Función para manejar la captura del formulario
function fp_handle_form_action() {
    if (isset($_POST['fp_campo1'], $_POST['fp_campo2'], $_POST['fp_etiqueta'])) {
        $campo1 = sanitize_textarea_field($_POST['fp_campo1']);
        $campo2 = sanitize_textarea_field($_POST['fp_campo2']);
        $etiqueta = sanitize_text_field($_POST['fp_etiqueta']);

        global $wpdb;
        $table_name = $wpdb->prefix . 'formulario_personalizado';
        $wpdb->insert($table_name, array(
            'campo1' => $campo1,
            'campo2' => $campo2,
            'etiqueta' => $etiqueta
        ));

        $post_id = wp_insert_post([
            'post_title' => wp_trim_words($campo1, 10, '...'),
            'post_content' => $campo1 . "\n\n" . $campo2,
            'post_status' => 'draft',
            'post_type' => 'post',
            'meta_input' => ['fp_etiqueta' => $etiqueta]
        ]);

        if (is_wp_error($post_id)) {
            wp_die('Error al crear el post.');
        } else {
            wp_redirect(home_url());
            exit;
        }
    }
}
add_action('admin_post_fp_form_action', 'fp_handle_form_action');
add_action('admin_post_nopriv_fp_form_action', 'fp_handle_form_action');

// Función para manejar la búsqueda por etiqueta
function fp_buscar_por_etiqueta() {
    if (isset($_POST['etiqueta'])) {
        $etiqueta = sanitize_text_field($_POST['etiqueta']);
        global $wpdb;
        $table_name = $wpdb->prefix . 'formulario_personalizado';
        $resultados = $wpdb->get_results($wpdb->prepare("SELECT * FROM $table_name WHERE etiqueta = %s", $etiqueta));

        if (!empty($resultados)) {
            foreach ($resultados as $resultado) {
                echo '<div class="fp-resultado">';
                echo '<h3>' . esc_html($resultado->campo1) . '</h3>';
                echo '<p>' . esc_html($resultado->campo2) . '</p>';
                echo '<p><strong>Etiqueta:</strong> ' . esc_html($resultado->etiqueta) . '</p>';
                echo '</div>';
            }
        } else {
            echo 'No se encontraron resultados.';
        }
    }
    wp_die();
}
add_action('wp_ajax_fp_buscar_por_etiqueta', 'fp_buscar_por_etiqueta');
add_action('wp_ajax_nopriv_fp_buscar_por_etiqueta', 'fp_buscar_por_etiqueta');
?>

Hoja de Estilo: css/style.css

/* Estilo general para formularios */
#fp_formulario, #fp_busqueda_formulario {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#fp_formulario textarea, #fp_busqueda_formulario input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

#fp_formulario input[type="submit"], #fp_busqueda_formulario input[type="submit"] {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#fp_formulario input[type="submit"]:hover, #fp_busqueda_formulario input[type="submit"]:hover {
    background-color: #005177;
}

#fp_resultados_busqueda .fp-resultado {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #fff;
}

#fp_resultados_busqueda .fp-resultado h3 {
    margin-top: 0;
}

#fp_resultados_busqueda .fp-resultado p {
    margin: 5px 0;
}

JavaScript: js/scripts.js

jQuery(document).ready(function($) {
    $('#fp_busqueda_formulario').on('submit', function(e) {
        e.preventDefault();
        var etiqueta = $('#fp_buscar_etiqueta').val();

        $.ajax({
            url: fp_ajax.ajax_url,
            type: 'POST',
            data: {
                action: 'fp_buscar_por_etiqueta',
                etiqueta: etiqueta
            },
            success: function(response) {
                $('#fp_resultados_busqueda').html(response);
            },
            error: function() {
                $('#fp_resultados_busqueda').html('Error en la búsqueda.');
            }
        });
    });
});

Cómo Usar el Plugin

  1. Instalación
    • Subir el plugin a través del panel de administración de WordPress (Plugins > Añadir nuevo > Subir plugin).
    • Activar el plugin.
  2. Usar los Shortcodes
    • Insertar [formulario_personalizado] en una página o entrada para mostrar el formulario de captura de datos.
    • Insertar [formulario_busqueda] en una página o entrada para mostrar el formulario de búsqueda.
  3. Interacción del Usuario
    • Los usuarios pueden rellenar el formulario y enviar datos.
    • Los datos se guardan en la base de datos y se crea un post borrador.
    • Los usuarios pueden buscar entradas guardadas por su etiqueta utilizando el formulario de búsqueda.

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *