Gracias por compartir tu diseño. Lo que estás buscando es una interfaz de administración privada en tu sitio WordPress para crear equipos de fútbol y almacenarlos, con la intención de usarlos después en una web pública.

Para esto, puedes usar un plugin personalizado o utilizar herramientas como Advanced Custom Fields (ACF) junto con CPT UI (para crear un tipo de contenido personalizado). Sin embargo, si buscas una solución más a medida, aquí tienes una base en código HTML/PHP que puedes incorporar en una plantilla o como shortcode en WordPress:

1. Código base para el formulario (PHP + HTML)

php
CopiarEditar
<?php
function equipo_ideal_admin_form() {
    ob_start();
    ?>
    <form method="post">
        <h2>Admin Equipo Ideal</h2>
        <label>Nombre del Equipo:</label><br>
        <input type="text" name="nombre_equipo" required><br><br>

        <h3>Goleros</h3>
        <?php for ($i = 1; $i <= 3; $i++): ?>
            <input type="text" name="golero_<?php echo $i; ?>" placeholder="Golero <?php echo $i; ?>"><br>
        <?php endfor; ?>

        <h3>Defensas (máx. 10)</h3>
        <?php for ($i = 1; $i <= 10; $i++): ?>
            <input type="text" name="defensa_<?php echo $i; ?>" placeholder="Defensa <?php echo $i; ?>"><br>
        <?php endfor; ?>

        <h3>Mediocampistas (máx. 10)</h3>
        <?php for ($i = 1; $i <= 10; $i++): ?>
            <input type="text" name="medio_<?php echo $i; ?>" placeholder="Mediocampista <?php echo $i; ?>"><br>
        <?php endfor; ?>

        <h3>Delanteros (máx. 10)</h3>
        <?php for ($i = 1; $i <= 10; $i++): ?>
            <input type="text" name="delantero_<?php echo $i; ?>" placeholder="Delantero <?php echo $i; ?>"><br>
        <?php endfor; ?>

        <br><input type="submit" name="guardar_equipo" value="Guardar Equipo">
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('formulario_equipo_ideal', 'equipo_ideal_admin_form');

2. Procesamiento del formulario y guardado

Para guardar los datos, puedes usar post_type personalizado o options de WordPress dependiendo de si cada equipo será reutilizado públicamente. ¿Te gustaría que cree esta parte también (guardar en base de datos y mostrar luego en la web pública)?

¿Quieres que la parte pública permita al usuario seleccionar jugadores desde los equipos guardados?

Perfecto. A continuación te dejo todo el código completo para tu sitio WordPress. Esto incluye:

1. Un shortcode para mostrar el formulario de administración.

2. Guardado del equipo como un Custom Post Type (CPT).

3. Almacenamiento de todos los jugadores como campos personalizados.

4. Listo para que lo copies y pegues en el archivo functions.php de tu tema o en un plugin personalizado.

✅ CÓDIGO COMPLETO: Pegarlo en functions.php o plugin personalizado

php
CopiarEditar
// 1. Registrar el Custom Post Type "Equipo Ideal"
function registrar_equipo_ideal_cpt() {
    $args = array(
        'public' => false,
        'show_ui' => true,
        'label'  => 'Equipos Ideales',
        'supports' => array('title'),
    );
    register_post_type('equipo_ideal', $args);
}
add_action('init', 'registrar_equipo_ideal_cpt');

// 2. Shortcode del formulario de administración
function formulario_equipo_ideal_shortcode() {
    // Procesar el formulario al enviar
    if (isset($_POST['guardar_equipo'])) {
        $nombre = sanitize_text_field($_POST['nombre_equipo']);
        $post_id = wp_insert_post(array(
            'post_type' => 'equipo_ideal',
            'post_title' => $nombre,
            'post_status' => 'publish',
        ));

        if ($post_id) {
            // Guardar goleros
            for ($i = 1; $i <= 3; $i++) {
                update_post_meta($post_id, 'golero_' . $i, sanitize_text_field($_POST['golero_' . $i]));
            }

            // Guardar defensas
            for ($i = 1; $i <= 10; $i++) {
                update_post_meta($post_id, 'defensa_' . $i, sanitize_text_field($_POST['defensa_' . $i]));
            }

            // Guardar mediocampistas
            for ($i = 1; $i <= 10; $i++) {
                update_post_meta($post_id, 'medio_' . $i, sanitize_text_field($_POST['medio_' . $i]));
            }

            // Guardar delanteros
            for ($i = 1; $i <= 10; $i++) {
                update_post_meta($post_id, 'delantero_' . $i, sanitize_text_field($_POST['delantero_' . $i]));
            }

            echo '<div style="color: green;">✅ Equipo guardado correctamente.</div>';
        } else {
            echo '<div style="color: red;">❌ Error al guardar el equipo.</div>';
        }
    }

    ob_start(); ?>
    <form method="post">
        <h2>Admin Equipo Ideal</h2>
        <label><strong>Nombre del Equipo:</strong></label><br>
        <input type="text" name="nombre_equipo" required><br><br>

        <h3>Goleros (3)</h3>
        <?php for ($i = 1; $i <= 3; $i++): ?>
            <input type="text" name="golero_<?php echo $i; ?>" placeholder="Golero <?php echo $i; ?>"><br>
        <?php endfor; ?>

        <h3>Defensas (hasta 10)</h3>
        <?php for ($i = 1; $i <= 10; $i++): ?>
            <input type="text" name="defensa_<?php echo $i; ?>" placeholder="Defensa <?php echo $i; ?>"><br>
        <?php endfor; ?>

        <h3>Mediocampistas (hasta 10)</h3>
        <?php for ($i = 1; $i <= 10; $i++): ?>
            <input type="text" name="medio_<?php echo $i; ?>" placeholder="Mediocampista <?php echo $i; ?>"><br>
        <?php endfor; ?>

        <h3>Delanteros (hasta 10)</h3>
        <?php for ($i = 1; $i <= 10; $i++): ?>
            <input type="text" name="delantero_<?php echo $i; ?>" placeholder="Delantero <?php echo $i; ?>"><br>
        <?php endfor; ?>

        <br><input type="submit" name="guardar_equipo" value="Guardar Equipo">
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('formulario_equipo_ideal', 'formulario_equipo_ideal_shortcode');

✅ Cómo usarlo:

1. Pega el código en tu archivo functions.php o crea un plugin personalizado.

2. Crea una nueva página privada de administración en WordPress.

3. Agrega el shortcode:

   csharp
   CopiarEditar
   [formulario_equipo_ideal]
   

4. Al guardar, cada equipo se almacenará como un Custom Post Type llamado "Equipo Ideal" (no visible al público por defecto).

5. Los datos están guardados como campos personalizados, listos para usarse después.

¿Quieres ahora el código para la página pública donde los usuarios eligen su oncena a partir de estos equipos creados?

Gracias por compartir el enlace (https://www.fansdelfootball.com/equipo-11-ideal-2/). He revisado el código fuente de la página y noto que el shortcode [formulario_equipo_ideal] se muestra literalmente en el contenido, lo que indica que WordPress no lo está procesando correctamente. Esto puede deberse a varias razones. A continuación, te proporciono una serie de pasos para diagnosticar y solucionar el problema:

✅ Verificaciones iniciales

1. Ubicación del código: Asegúrate de que el código del shortcode esté colocado en el archivo functions.php de tu tema activo (preferiblemente en un tema hijo) o en un plugin personalizado. Si lo colocaste en un archivo functions.php fuera del tema activo, WordPress no lo reconocerá.

2. Errores de sintaxis: Verifica que no haya errores de sintaxis en el código. Un error común es el uso incorrecto de comillas. Asegúrate de que todas las comillas sean simples ' o dobles " estándar, y no comillas tipográficas como ‘ o ’.

3. Registro del shortcode: Confirma que el shortcode esté registrado correctamente con la función add_shortcode. Por ejemplo:sitepoint.com

   php
   CopiarEditar
   add_shortcode('formulario_equipo_ideal', 'formulario_equipo_ideal_shortcode');
   

🛠️ Pasos para solucionar el problema

1. Prueba con un shortcode simple: Para verificar si los shortcodes funcionan en tu sitio, añade el siguiente código al final de tu archivo functions.php:

   php
   CopiarEditar
   function prueba_shortcode() {
       return '¡El shortcode funciona!';
   }
   add_shortcode('prueba', 'prueba_shortcode');
   

Luego, en una página o entrada, inserta [prueba]. Si ves el texto "¡El shortcode funciona!", significa que los shortcodes están funcionando correctamente y el problema está en el código específico del formulario.

2. Depura el código del formulario: Si el shortcode de prueba funciona, revisa el código del formulario para detectar posibles errores. Asegúrate de que la función formulario_equipo_ideal_shortcode esté definida correctamente y que no haya errores de sintaxis.

3. Verifica los plugins y el tema activo: Algunos plugins o temas pueden interferir con la ejecución de shortcodes. Intenta desactivar temporalmente todos los plugins y cambiar a un tema predeterminado de WordPress (como Twenty Twenty-One) para ver si el shortcode funciona. Si es así, reactiva los plugins y el tema uno por uno para identificar cuál está causando el conflicto.

4. Revisa los archivos de registro de errores: Consulta los archivos de registro de errores de tu servidor para ver si hay mensajes relacionados con el shortcode o el archivo functions.php. Esto puede proporcionar pistas sobre lo que está fallando.

📌 Consideraciones adicionales

• Uso de constructores de páginas: Si estás utilizando un constructor de páginas (como Elementor, WPBakery, etc.), asegúrate de insertar el shortcode en un bloque o widget que lo soporte. Algunos constructores requieren widgets específicos para procesar shortcodes.

• Caché del sitio: Si tienes plugins de caché activos, como W3 Total Cache o WP Super Cache, borra la caché después de realizar cambios en el código para asegurarte de que se reflejen en el sitio.

Si después de seguir estos pasos el problema persiste, por favor proporcióname más detalles sobre cómo y dónde has insertado el código, así como cualquier mensaje de error que aparezca. Estoy aquí para ayudarte a resolverlo.

Fuentes

Gracias por el dato. El archivo functions.php que subiste está ubicado en:

👉 https://www.fansdelfootball.com/doc/functions.php

Ese no es el lugar correcto para que WordPress lo ejecute automáticamente. Por eso el shortcode no funciona. WordPress no carga archivos PHP que estén en cualquier carpeta del servidor, como /doc/. Solo carga los archivos PHP que están en:

✅ Ubicaciones válidas para funciones en WordPress

1. Archivo functions.php del tema activo

Ubicación típica:
/wp-content/themes/TU_TEMA/functions.php

Para usar esta opción:

• Entra por FTP o el administrador de archivos de tu hosting.

• Ve a: wp-content/themes/tu-tema-activo/functions.php

• Copia el contenido de tu archivo functions.php (el del /doc/) dentro de este archivo.

2. Un plugin personalizado

También podrías crear tu propio plugin si no quieres modificar el tema.

Pasos para crear un plugin:

1. Crea un archivo nuevo en:

   bash
   CopiarEditar
   /wp-content/plugins/equipo-ideal-admin.php
   

2. Pega este contenido en el archivo:

   php
   CopiarEditar
   <?php
   /*
   Plugin Name: Equipo Ideal Admin
   Description: Administra equipos ideales de fútbol.
   Version: 1.0
   Author: Tu Nombre
   */
   
   function formulario_equipo_ideal_shortcode() {
       ob_start();
       ?>
       <form method="post">
           <label>Nombre del Equipo:</label>
           <input type="text" name="nombre_equipo"><br><br>
   
           <h3>Goleros</h3>
           <?php for ($i = 1; $i <= 3; $i++): ?>
               <input type="text" name="goleros[]"><br>
           <?php endfor; ?>
   
           <h3>Defensas (máx 10)</h3>
           <?php for ($i = 1; $i <= 10; $i++): ?>
               <input type="text" name="defensas[]"><br>
           <?php endfor; ?>
   
           <h3>Mediocampistas (máx 10)</h3>
           <?php for ($i = 1; $i <= 10; $i++): ?>
               <input type="text" name="mediocampistas[]"><br>
           <?php endfor; ?>
   
           <h3>Delanteros (máx 10)</h3>
           <?php for ($i = 1; $i <= 10; $i++): ?>
               <input type="text" name="delanteros[]"><br>
           <?php endfor; ?>
   
           <input type="submit" name="guardar_equipo" value="Guardar Equipo">
       </form>
       <?php
       return ob_get_clean();
   }
   add_shortcode('formulario_equipo_ideal', 'formulario_equipo_ideal_shortcode');
   

3. Luego ve al panel de WordPress → Plugins → Activa Equipo Ideal Admin.

🧪 Prueba

Una vez hecho esto, puedes crear o editar una página y escribir:

plaintext
CopiarEditar
[formulario_equipo_ideal]

WordPress ahora lo ejecutará correctamente.

¿Quieres que te prepare un ZIP con el plugin listo para subir desde WordPress directamente?

Perfecto, ¡me alegra saber que ya funcionó! 🎉

Sí, por favor, envía la imagen con la idea de cómo debería usarse el equipo guardado en la siguiente web. Así puedo ayudarte a generar el código para:

1. Leer los equipos ya creados desde el admin.

2. Mostrar esos equipos públicamente para que un usuario pueda elegir su oncena.

Adelante, sube la imagen con tu diseño o explica cómo debería verse. ¿Tienes en mente un selector de equipo, una tabla con los jugadores, opciones de checkboxes, etc.?

Gracias por compartir el diseño, está muy claro y completo. Para implementar esta segunda parte (la página pública interactiva de "Equipo Ideal"), necesitas:

✅ FUNCIONALIDADES A INCLUIR:

1. Menú desplegable para elegir un equipo guardado.

2. Menú desplegable de formaciones tácticas (4-4-2, 4-3-3, etc.).

3. Sección para filtrar jugadores por posición.

4. Campo de juego interactivo para arrastrar jugadores.

5. Botón de guardar imagen del equipo armado.

6. Botón para compartir imagen en redes sociales.

🛠️ PRIMER PASO: Script base para página pública (shortcode)

Este es un código inicial que debes poner en functions.php para que puedas insertar el sistema en una nueva página de WordPress con un [equipo_ideal_publico].

php
CopiarEditar
add_shortcode('equipo_ideal_publico', 'mostrar_equipo_ideal_publico');
function mostrar_equipo_ideal_publico() {
    // Obtener equipos guardados
    $equipos = get_posts(array(
        'post_type' => 'equipo_ideal',
        'posts_per_page' => -1,
    ));

    ob_start();
    ?>
    <div id="equipo-ideal-app">
        <h2>Equipo Ideal</h2>

        <label for="select-equipo">Club:</label>
        <select id="select-equipo">
            <option value="">Selecciona un equipo</option>
            <?php foreach ($equipos as $equipo): ?>
                <option value="<?php echo $equipo->ID; ?>"><?php echo $equipo->post_title; ?></option>
            <?php endforeach; ?>
        </select>

        <label for="select-tactica">Táctica:</label>
        <select id="select-tactica">
            <option value="4-4-2">4-4-2</option>
            <option value="4-3-3">4-3-3</option>
            <option value="3-5-2">3-5-2</option>
            <option value="5-4-1">5-4-1</option>
        </select>

        <div id="posiciones">
            <button onclick="mostrarJugadores('golero')">Goleros</button>
            <button onclick="mostrarJugadores('defensa')">Defensas</button>
            <button onclick="mostrarJugadores('mediocampo')">Mediocampistas</button>
            <button onclick="mostrarJugadores('delantero')">Delanteros</button>
        </div>

        <div id="lista-jugadores"></div>

        <div id="cancha">
            <img src="URL_DE_LA_IMAGEN_DE_CANCHA" alt="Cancha" style="width:100%;max-width:600px;">
            <div id="posiciones-jugadores"></div>
        </div>

        <button onclick="guardarImagen()">Guardar Imagen</button>
        <button onclick="compartirRedes()">Compartir en Redes</button>
    </div>

    <style>
        #cancha {
            position: relative;
            margin-top: 20px;
        }
        .jugador {
            position: absolute;
            width: 60px;
            text-align: center;
            cursor: move;
            background: rgba(255,255,255,0.8);
            border-radius: 5px;
            padding: 4px;
        }
    </style>

    <script>
        let jugadoresPorPosicion = {};

        function mostrarJugadores(posicion) {
            const jugadores = jugadoresPorPosicion[posicion] || [];
            const contenedor = document.getElementById("lista-jugadores");
            contenedor.innerHTML = "";
            jugadores.forEach((nombre, idx) => {
                const div = document.createElement("div");
                div.textContent = nombre;
                div.classList.add("jugador");
                div.setAttribute("draggable", "true");
                div.addEventListener("dragstart", e => {
                    e.dataTransfer.setData("text/plain", nombre);
                });
                contenedor.appendChild(div);
            });
        }

        document.getElementById("select-equipo").addEventListener("change", function() {
            const equipoID = this.value;
            fetch(`<?php echo admin_url('admin-ajax.php'); ?>?action=cargar_equipo&id=${equipoID}`)
                .then(res => res.json())
                .then(data => {
                    jugadoresPorPosicion = data;
                    mostrarJugadores('golero'); // Mostrar por defecto
                });
        });

        // Cancha drag & drop
        const cancha = document.getElementById("cancha");
        cancha.addEventListener("dragover", e => e.preventDefault());
        cancha.addEventListener("drop", e => {
            e.preventDefault();
            const nombre = e.dataTransfer.getData("text/plain");
            const jugador = document.createElement("div");
            jugador.className = "jugador";
            jugador.textContent = nombre;
            jugador.style.left = (e.offsetX - 30) + "px";
            jugador.style.top = (e.offsetY - 20) + "px";
            cancha.appendChild(jugador);
        });

        function guardarImagen() {
            alert("Función para guardar imagen aquí");
        }

        function compartirRedes() {
            alert("Función para compartir en redes aquí");
        }
    </script>
    <?php
    return ob_get_clean();
}

📦 SEGUNDO PASO: Agregar handler AJAX para cargar datos del equipo

Agrega este código también a tu functions.php:

php
CopiarEditar
add_action('wp_ajax_cargar_equipo', 'ajax_cargar_equipo');
add_action('wp_ajax_nopriv_cargar_equipo', 'ajax_cargar_equipo');
function ajax_cargar_equipo() {
    $id = intval($_GET['id']);
    $data = get_post_meta($id, 'jugadores_equipo', true);

    echo json_encode($data ?: []);
    wp_die();
}

🖼️ IMAGEN DE CANCHA

Sube una imagen de cancha de fútbol a tu biblioteca de medios de WordPress y reemplaza en el código:

php
CopiarEditar
<img src="URL_DE_LA_IMAGEN_DE_CANCHA" ...>

Por ejemplo:

php
CopiarEditar
<img src="https://www.fansdelfootball.com/wp-content/uploads/2025/05/cancha.jpg" ...>

✅ ¿Qué sigue?

Una vez hagas esto:

1. Crea una nueva página en WordPress.

2. Pega el shortcode [equipo_ideal_publico] en el contenido.

3. Prueba elegir un equipo creado, arrastrar jugadores, etc.

¿Quieres que ahora preparemos el código para guardar la imagen del equipo armado o la parte de compartir en redes sociales?

Buena pregunta. Los códigos para functions.php deben pegarse al final del archivo, o justo antes del cierre si es que hay una etiqueta ?> (aunque normalmente no la hay en functions.php).

✅ ¿Dónde pegar los códigos?

Opción A — Si tu functions.php termina así:

php
CopiarEditar
// ... otras funciones del tema

⬅️ Simplemente pega el nuevo código debajo de todo.

Opción B — Si tu functions.php termina así:

php
CopiarEditar
// ... otras funciones del tema
?>

⬅️ Pega el código antes del ?>.

❌ Qué no debes hacer:

• No lo pongas dentro de otra función existente.

• No lo pongas dentro de una clase a menos que se te haya dicho que el archivo funciona así.

• No repitas <?php.

✅ Recomendación completa:

Al final de tu functions.php, pega esto:

php
CopiarEditar
// Shortcode para mostrar el equipo ideal al público
add_shortcode('equipo_ideal_publico', 'mostrar_equipo_ideal_publico');
function mostrar_equipo_ideal_publico() {
    // Código HTML + JS del diseño público (copiar desde el mensaje anterior)
}

// Handler AJAX para cargar datos del equipo desde el frontend
add_action('wp_ajax_cargar_equipo', 'ajax_cargar_equipo');
add_action('wp_ajax_nopriv_cargar_equipo', 'ajax_cargar_equipo');
function ajax_cargar_equipo() {
    $id = intval($_GET['id']);
    $data = get_post_meta($id, 'jugadores_equipo', true);

    echo json_encode($data ?: []);
    wp_die();
}

Y en la función mostrar_equipo_ideal_publico(), copia todo el contenido HTML/JS del mensaje anterior.

¿Querés que revise tu functions.php actual si me lo compartís?

Perfecto, gracias por la aclaración. Ya que estás usando el archivo equipo-ideal-admin.php para tu funcionalidad, entonces todo el código relacionado al equipo ideal (crear y mostrar equipos) debe ir allí, no en functions.php.

✅ ¿Cómo organizar el archivo equipo-ideal-admin.php?

Este archivo debe contener:

1. Funciones de administración (crear y guardar equipos).

2. Shortcodes para insertar interfaces públicas o privadas.

3. Acciones y filtros para registrar los hooks.

✅ ¿Dónde pegar el nuevo código (para la parte pública)?

Pégalo al final de tu archivo equipo-ideal-admin.php, igual que harías con functions.php. Algo así:

php
CopiarEditar
// ------------------------------------------
// Parte pública: Mostrar la interfaz de elección
// ------------------------------------------

add_shortcode('equipo_ideal_publico', 'mostrar_equipo_ideal_publico');

function mostrar_equipo_ideal_publico() {
    ob_start();
    ?>
    <!-- Aquí va el HTML del diseño que enviaste: 
         dropdowns, cancha, posiciones, botones, etc. -->
    <div id="equipo-ideal-publico">
        <!-- Menú desplegable de equipos y tácticas -->
        <!-- Selector de jugadores -->
        <!-- Cancha con posiciones arrastrables -->
        <!-- Botones para guardar y compartir imagen -->
    </div>
    <style>
        /* Tus estilos CSS aquí */
    </style>
    <script>
        // JS para cargar jugadores, tácticas y habilitar drag-and-drop
    </script>
    <?php
    return ob_get_clean();
}

🧩 Luego en WordPress:

1. Asegúrate de que tu plugin equipo-ideal-admin.php esté activo.

2. En la página pública donde mostrarás la interfaz, pega el shortcode:

text
CopiarEditar
[equipo_ideal_publico]

¿Querés que te dé el código completo ya listo para pegar basado en tu dibujo y el flujo de usuarios?

Perfecto. A continuación te envío todo el código completo para la parte pública de la selección de oncena ideal, junto con pasos detallados para integrarlo correctamente con tu archivo equipo-ideal-admin.php.

✅ FUNCIONALIDAD: Selección de Oncena Ideal

🧩 Paso 1: Agregar este código al final de equipo-ideal-admin.php

Pega lo siguiente al final del archivo equipo-ideal-admin.php:

php
CopiarEditar
// SHORTCODE: Mostrar interfaz pública para seleccionar oncena ideal
add_shortcode('equipo_ideal_publico', 'mostrar_equipo_ideal_publico');

function mostrar_equipo_ideal_publico() {
    // Obtener equipos guardados
    $equipos = get_posts([
        'post_type' => 'equipo_ideal',
        'numberposts' => -1
    ]);

    ob_start(); ?>
    <div id="equipo-ideal-publico" style="max-width: 900px; margin: auto;">
        <h2>Equipo Ideal</h2>

        <!-- Menú de Clubes -->
        <label for="club">Club:</label>
        <select id="club">
            <option value="">Seleccionar un equipo</option>
            <?php foreach ($equipos as $equipo): ?>
                <option value="<?= esc_attr($equipo->ID); ?>"><?= esc_html($equipo->post_title); ?></option>
            <?php endforeach; ?>
        </select>

        <!-- Menú de Tácticas -->
        <label for="tactica">Táctica:</label>
        <select id="tactica">
            <option value="4-4-2">4-4-2</option>
            <option value="4-3-3">4-3-3</option>
            <option value="3-5-2">3-5-2</option>
            <option value="5-4-1">5-4-1</option>
        </select>

        <!-- Filtro de jugadores por posición -->
        <div style="margin-top: 15px;">
            <button onclick="mostrarJugadores('goleros')">Goleros</button>
            <button onclick="mostrarJugadores('defensas')">Defensas</button>
            <button onclick="mostrarJugadores('mediocampistas')">Mediocampistas</button>
            <button onclick="mostrarJugadores('delanteros')">Delanteros</button>
        </div>

        <!-- Lista de jugadores -->
        <div id="jugadores-lista" style="margin-top: 10px; border: 1px solid #ccc; padding: 10px;">
            <strong>Selecciona un club para cargar jugadores.</strong>
        </div>

        <!-- Cancha -->
        <div id="cancha" style="background: url('https://i.imgur.com/JrEaCrq.png') no-repeat center; background-size: cover; width: 100%; height: 500px; position: relative; margin-top: 30px; border: 2px solid #222;">
            <!-- Espacios para soltar jugadores (serán llenados por JS) -->
        </div>

        <!-- Botones finales -->
        <div style="margin-top: 20px;">
            <button onclick="guardarImagen()">Guardar Imagen</button>
            <button onclick="compartirEnRedes()">Compartir en Redes</button>
        </div>
    </div>

    <style>
        .jugador-draggable {
            cursor: move;
            padding: 5px;
            margin: 5px;
            border: 1px solid #000;
            display: inline-block;
            background: #eee;
        }

        .posicion-drop {
            position: absolute;
            width: 60px;
            height: 60px;
            border: 2px dashed #555;
            border-radius: 50%;
            text-align: center;
            line-height: 60px;
            font-weight: bold;
            background-color: rgba(255, 255, 255, 0.6);
        }
    </style>

    <script>
        let jugadores = {};

        function mostrarJugadores(pos) {
            const lista = jugadores[pos] || [];
            const contenedor = document.getElementById("jugadores-lista");
            contenedor.innerHTML = lista.length > 0 ? lista.map(j => `<div class="jugador-draggable" draggable="true" ondragstart="drag(event)" id="jugador-${j.id}">${j.nombre}</div>`).join('') : '<p>No hay jugadores en esta posición.</p>';
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drop(ev) {
            ev.preventDefault();
            const data = ev.dataTransfer.getData("text");
            const jugador = document.getElementById(data);
            ev.target.innerHTML = '';
            ev.target.appendChild(jugador);
        }

        function renderPosiciones(tactica) {
            const mapa = {
                "4-4-2": [1, 4, 4, 2],
                "4-3-3": [1, 4, 3, 3],
                "3-5-2": [1, 3, 5, 2],
                "5-4-1": [1, 5, 4, 1]
            };
            const posiciones = mapa[tactica];
            const cancha = document.getElementById("cancha");
            cancha.innerHTML = '';
            let yPos = [420, 300, 180, 60]; // líneas
            posiciones.forEach((num, idx) => {
                const espacio = 800 / (num + 1);
                for (let i = 0; i < num; i++) {
                    const div = document.createElement("div");
                    div.className = "posicion-drop";
                    div.style.top = yPos[idx] + "px";
                    div.style.left = (espacio * (i + 1)) + "px";
                    div.ondragover = allowDrop;
                    div.ondrop = drop;
                    cancha.appendChild(div);
                }
            });
        }

        function cargarJugadores(idEquipo) {
            fetch(`/wp-json/wp/v2/equipo_ideal/${idEquipo}`)
                .then(res => res.json())
                .then(data => {
                    jugadores = {
                        goleros: data.meta.goleros || [],
                        defensas: data.meta.defensas || [],
                        mediocampistas: data.meta.mediocampistas || [],
                        delanteros: data.meta.delanteros || []
                    };
                    mostrarJugadores('goleros');
                });
        }

        document.getElementById('club').addEventListener('change', function () {
            const id = this.value;
            if (id) {
                cargarJugadores(id);
            }
        });

        document.getElementById('tactica').addEventListener('change', function () {
            renderPosiciones(this.value);
        });

        function guardarImagen() {
            alert("Funcionalidad para guardar imagen aún no implementada.");
        }

        function compartirEnRedes() {
            alert("Funcionalidad para compartir en redes aún no implementada.");
        }
    </script>
    <?php
    return ob_get_clean();
}

📄 Paso 2: Crear la página pública

1. Entra al panel de WordPress.

2. Crea una nueva página (ej: Mi Oncena Ideal).

3. En el editor, agrega el siguiente shortcode:

csharp
CopiarEditar
[equipo_ideal_publico]

4. Publica la página.

🧪 Paso 3: Probar

1. Ve a la página creada.

2. Selecciona un equipo desde el menú.

3. Elige la táctica.

4. Filtra jugadores por posición.

5. Arrastra jugadores a la cancha.

6. (Opcional) Guarda o comparte (funcionalidades aún no implementadas).

❗ Importante

Para que esto funcione correctamente, asegúrate de que:

• El post type equipo_ideal tenga los meta bien estructurados (goleros, defensas, etc.).

• Tu plantilla o theme cargue bien los estilos y JS básicos.

¿Querés que implemente también la función de guardar imagen o compartir?

Perfecto, gracias por compartir la URL. Vamos a resolver ambos problemas:

✅ PROBLEMA 1: No se muestran equipos guardados

Esto puede deberse a que los equipos creados desde el admin tienen un post type diferente o no están publicados (están en borrador).

🔍 SOLUCIÓN

Verifica que los equipos estén publicados y el post type sea equipo_ideal.

Verificación rápida

1. En el admin de WordPress, ve a Entradas → Todos los equipos (o donde tengas el CPT “equipo ideal”).

2. Asegúrate de que el equipo esté Publicado.

3. Si aparece en “Borrador”, publícalo.

Código alternativo (mostrar incluso borradores)

Para pruebas, puedes modificar esta parte:

php
CopiarEditar
$equipos = get_posts([
    'post_type' => 'equipo_ideal',
    'numberposts' => -1
]);

por:

php
CopiarEditar
$equipos = get_posts([
    'post_type' => 'equipo_ideal',
    'post_status' => 'any',
    'numberposts' => -1
]);

👉 Esto asegura que también se traigan borradores (para depuración). Luego puedes volver a “publish”.

✅ PROBLEMA 2: La cancha no se ajusta correctamente

Tu imagen tiene proporciones verticales (es más alta que ancha), pero el div de la cancha está fijo en 500px de alto. Necesitamos que se adapte al aspect ratio real.

🛠 SOLUCIÓN

Cambia el estilo de la cancha

Reemplaza este bloque:

css
CopiarEditar
#cancha {
    background: url('https://i.imgur.com/JrEaCrq.png') no-repeat center;
    background-size: cover;
    width: 100%;
    height: 500px;
    position: relative;
    margin-top: 30px;
    border: 2px solid #222;
}

por esto:

css
CopiarEditar
#cancha {
    background: url('https://www.fansdelfootball.com/wp-content/uploads/2024/06/1000396585.jpg') no-repeat center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 3 / 4; /* o ajusta según tu imagen */
    position: relative;
    margin-top: 30px;
    border: 2px solid #222;
}

✅ Usa la URL de la imagen subida a tu WordPress si ya la cargaste ahí.

📐 ¿Qué hace esto?

• aspect-ratio: 3 / 4; hace que el contenedor se adapte al tamaño vertical de la imagen.

• background-size: contain mantiene la imagen completa sin recortarla.

• Puedes ajustar el aspect-ratio según necesites (usa proporciones reales de tu imagen).

¿Querés que prepare los pasos para guardar la imagen o mejorar el diseño responsivo también?

¡Perfecto! Un diseño responsivo va a mejorar mucho la experiencia, especialmente en celulares y tablets. A continuación te paso el código completo actualizado y luego las instrucciones paso a paso.

✅ CÓDIGO ACTUALIZADO (Responsive + Imagen de cancha adaptada)

Este código reemplaza el contenido que estás usando en la página pública ([equipo_ideal_selector]).

🔧 Shortcode PHP

Asegúrate de tener esto dentro de tu archivo equipo-ideal-admin.php:

php
CopiarEditar
add_shortcode('equipo_ideal_selector', function () {
    ob_start();

    // Obtener los equipos creados
    $equipos = get_posts([
        'post_type' => 'equipo_ideal',
        'post_status' => 'publish', // Asegúrate que estén publicados
        'numberposts' => -1
    ]);

    ?>
    <style>
        .equipo-ideal-wrapper {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        .equipo-ideal-wrapper select,
        .equipo-ideal-wrapper button {
            margin: 10px 0;
            padding: 10px;
            width: 100%;
            max-width: 300px;
        }
        .pestañas-jugadores {
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
            flex-wrap: wrap;
        }
        .pestañas-jugadores button {
            padding: 8px 16px;
            margin: 5px;
            cursor: pointer;
        }
        #lista-jugadores {
            margin-top: 20px;
            min-height: 60px;
            background: #f4f4f4;
            padding: 10px;
            border-radius: 8px;
        }
        #cancha {
            background: url('https://www.fansdelfootball.com/wp-content/uploads/2024/06/1000396585.jpg') no-repeat center;
            background-size: contain;
            width: 100%;
            aspect-ratio: 3 / 4;
            position: relative;
            margin-top: 30px;
            border: 2px solid #222;
        }
        .jugador-posicion {
            width: 40px;
            height: 40px;
            background-color: #1e90ff;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            line-height: 40px;
            position: absolute;
            cursor: move;
        }
        .botones-finales {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }
        .botones-finales button {
            padding: 10px 20px;
        }

        @media (max-width: 768px) {
            .pestañas-jugadores {
                flex-direction: column;
                align-items: center;
            }
            .jugador-posicion {
                width: 30px;
                height: 30px;
                font-size: 12px;
                line-height: 30px;
            }
        }
    </style>

    <div class="equipo-ideal-wrapper">
        <h2>Equipo Ideal</h2>

        <label for="equipo">Club:</label>
        <select id="equipo">
            <option value="">Selecciona un equipo</option>
            <?php foreach ($equipos as $equipo): ?>
                <option value="<?= esc_attr($equipo->ID) ?>"><?= esc_html($equipo->post_title) ?></option>
            <?php endforeach; ?>
        </select>

        <label for="tactica">Táctica:</label>
        <select id="tactica">
            <option value="4-4-2">4-4-2</option>
            <option value="4-3-3">4-3-3</option>
            <option value="3-5-2">3-5-2</option>
            <option value="5-4-1">5-4-1</option>
        </select>

        <div class="pestañas-jugadores">
            <button onclick="cargarJugadores('Golero')">Goleros</button>
            <button onclick="cargarJugadores('Defensa')">Defensas</button>
            <button onclick="cargarJugadores('Mediocampo')">Mediocampo</button>
            <button onclick="cargarJugadores('Delantero')">Delanteros</button>
        </div>

        <div id="lista-jugadores">
            <em>Selecciona una posición para ver los jugadores</em>
        </div>

        <div id="cancha">
            <!-- Aquí se colocarán los jugadores arrastrados -->
        </div>

        <div class="botones-finales">
            <button onclick="guardarImagen()">Guardar Imagen</button>
            <button onclick="compartirRedes()">Compartir en redes</button>
        </div>
    </div>

    <script>
        const jugadoresMock = {
            Golero: ['Arquero 1', 'Arquero 2'],
            Defensa: ['Defensa 1', 'Defensa 2', 'Defensa 3'],
            Mediocampo: ['Medio 1', 'Medio 2', 'Medio 3'],
            Delantero: ['Delantero 1', 'Delantero 2']
        };

        function cargarJugadores(posicion) {
            const lista = document.getElementById('lista-jugadores');
            lista.innerHTML = '';
            jugadoresMock[posicion].forEach((jugador, i) => {
                const div = document.createElement('div');
                div.textContent = jugador;
                div.className = 'jugador-posicion';
                div.draggable = true;
                div.style.position = 'relative';
                div.style.margin = '5px';
                div.addEventListener('dragstart', (e) => {
                    e.dataTransfer.setData('text/plain', jugador);
                });
                lista.appendChild(div);
            });
        }

        const cancha = document.getElementById('cancha');
        cancha.addEventListener('dragover', (e) => e.preventDefault());
        cancha.addEventListener('drop', (e) => {
            e.preventDefault();
            const nombre = e.dataTransfer.getData('text/plain');
            const jugador = document.createElement('div');
            jugador.className = 'jugador-posicion';
            jugador.textContent = nombre;
            jugador.style.left = (e.offsetX - 20) + 'px';
            jugador.style.top = (e.offsetY - 20) + 'px';
            cancha.appendChild(jugador);
        });

        function guardarImagen() {
            alert("Funcionalidad de guardar imagen pendiente.");
        }

        function compartirRedes() {
            alert("Funcionalidad de compartir en redes pendiente.");
        }
    </script>

    <?php
    return ob_get_clean();
});

🧭 INSTRUCCIONES PARA DEJARLO FUNCIONANDO

1. ✅ Agrega este código al final de equipo-ideal-admin.php

¡No uses functions.php! Este código va en el archivo donde ya definiste la parte del admin.

2. ✅ Sube la imagen de la cancha a tu biblioteca de medios

• Ve a tu WordPress > Medios > Añadir nuevo.

• Sube la imagen de la cancha que dibujaste (por ejemplo la de 1000396585.jpg).

• Copia la URL final. Ejemplo:
  https://www.fansdelfootball.com/wp-content/uploads/2024/06/cancha.jpg

• Reemplázala en el CSS:

css
CopiarEditar
background: url('AQUÍ-VA-TU-URL.jpg')

3. ✅ Crea una página nueva en WordPress y coloca:

plaintext
CopiarEditar
[equipo_ideal_selector]

Este shortcode carga la interfaz.

4. ✅ Publica y prueba

• Deberías poder elegir un equipo (si hay alguno creado).

• Elegir táctica, ver jugadores por pestaña.

• Arrastrar a la cancha.

• Ver el diseño correctamente tanto en PC como móvil.

¿Te gustaría que implemente el botón de "Guardar imagen" y compartir en redes como funcionalidad real también?

Gracias por el enlace. Vamos por partes para resolver todo:

✅ 1. No aparece la imagen de la cancha

Esto se debe a que no se actualizó la URL correcta de la imagen en el código.

🔧 SOLUCIÓN:

Ve a tu WordPress > Medios > Biblioteca, busca la imagen de la cancha, haz clic y copia la URL completa, por ejemplo:

arduino
CopiarEditar
https://www.fansdelfootball.com/wp-content/uploads/2024/06/1000396585.jpg

Luego en tu archivo equipo-ideal-admin.php, ubica esta línea (dentro del <style>):

css
CopiarEditar
#cancha {
    background: url('https://www.fansdelfootball.com/wp-content/uploads/2024/06/1000396585.jpg') no-repeat center;

Y asegúrate que la URL sea la correcta.

✅ 2. No aparecen los equipos guardados

Esto suele pasar por dos razones:

a) Los equipos están como borrador o privados

WordPress solo muestra equipos publicados. Asegúrate en el admin que el equipo creado está con estado "Publicado", no "Borrador".

b) El post_type no coincide

Tu código de creación del CPT debe estar usando 'equipo_ideal' como post_type. Si no es así, no se listarán.

Ve a la parte del admin donde creas el equipo. Fíjate en el tipo de contenido que usas.

🔧 SOLUCIÓN:

Asegúrate de que esta parte del código esté exactamente así:

php
CopiarEditar
$equipos = get_posts([
    'post_type' => 'equipo_ideal',
    'post_status' => 'publish',
    'numberposts' => -1
]);

Si tu tipo de post no se llama equipo_ideal, cámbialo al correcto.

❓ ¿Tengo que copiar todo el código PHP de nuevo?

No es necesario si ya lo habías pegado antes completo, pero:

• Si hiciste cambios parciales, es mejor copiar todo el bloque de nuevo, asegurándote de que:

  • Incluye el shortcode equipo_ideal_selector.

  • Tiene el CSS con la URL de la imagen corregida.

  • Tiene la función get_posts() con el post_type correcto.

¿Querés que revise cómo creaste el tipo de contenido para confirmar si se llama equipo_ideal? Podés pegarme esa parte del código.

Perfecto, por favor pega aquí todo el código completo que estás usando actualmente (el contenido del archivo equipo-ideal-admin.php o de la función que registra los equipos), así puedo:

1. Verificar cómo estás guardando los equipos.

2. Confirmar el post_type.

3. Ajustar la carga de los equipos.

4. Corregir el problema de la imagen de la cancha si aún persiste.

5. Hacer que todo funcione de forma responsiva y fluida.

Adelante, te leo.

En el archivo equipo-ideal-admin.php, los datos del formulario se guardan al presionar el botón “Guardar equipo” mediante una solicitud POST que es manejada en el mismo archivo. Aquí está el desglose de cómo se maneja:

1. Detección del formulario enviado

Se verifica si el formulario fue enviado con este fragmento:

php
CopiarEditar
if (isset($_POST['guardar_equipo'])) {

Esto significa que el botón de tipo submit en el formulario tiene name="guardar_equipo" y que, al enviarse el formulario, se ejecuta la lógica dentro de ese if.

2. Creación del post de tipo equipo_ideal

Si se detecta el envío, se procede a crear un nuevo post con:

php
CopiarEditar
$post_id = wp_insert_post([
    'post_type'   => 'equipo_ideal',
    'post_title'  => $equipo_nombre . ' - ' . current_time('mysql'),
    'post_status' => 'publish'
]);

Este post_id se utiliza luego para guardar los datos personalizados como campos personalizados (custom fields) con update_post_meta.

3. Almacenamiento de posiciones y táctica

Se almacenan como metadatos del post:

php
CopiarEditar
update_post_meta($post_id, 'equipo_relacionado', $equipo_relacionado);
update_post_meta($post_id, 'tactica', $tactica);
update_post_meta($post_id, 'goleros', $goleros);
update_post_meta($post_id, 'defensas', $defensas);
update_post_meta($post_id, 'mediocampistas', $mediocampistas);
update_post_meta($post_id, 'delanteros', $delanteros);

Cada uno de estos ($goleros, $defensas, etc.) se obtiene desde $_POST como arrays de IDs de jugadores seleccionados.

Resumen

• El formulario es procesado directamente en el mismo archivo PHP (equipo-ideal-admin.php).

• Se crea un post tipo equipo_ideal.

• Se guarda cada grupo de jugadores (por posición) como un campo personalizado (post meta).

• El botón con name="guardar_equipo" es el disparador de este guardado.

¿Quieres que conectemos este mismo sistema en el lado público cuando los usuarios creen su oncena?

Perfecto. Para conectar el sistema público con este mecanismo de guardado, haremos que, cuando un usuario elija su oncena ideal en la interfaz pública (mediante el shortcode), se cree un post de tipo equipo_ideal usando la misma lógica que en equipo-ideal-admin.php.

Aquí tienes los pasos claros para lograrlo:

✅ 1. Agrega un formulario en el shortcode público

En el shortcode que genera la interfaz pública ([equipo_ideal_selector]), debes envolver todo con un formulario HTML que envíe los datos seleccionados:

php
CopiarEditar
<form method="post">
  <!-- Campos dinámicos: goleros[], defensas[], etc. -->
  <!-- Botones y elementos de interfaz -->
  <input type="hidden" name="equipo_relacionado" value="ID_DEL_EQUIPO" />
  <input type="hidden" name="tactica" value="4-3-3" id="tactica-input" />

  <!-- Estos se llenarán con JS al guardar -->
  <input type="hidden" name="goleros[]" value="">
  <input type="hidden" name="defensas[]" value="">
  <input type="hidden" name="mediocampistas[]" value="">
  <input type="hidden" name="delanteros[]" value="">

  <button type="submit" name="guardar_equipo_publico">Guardar Mi Oncena</button>
</form>

🧠 Estos inputs deben llenarse con los jugadores que el usuario arrastre/seleccione. Esto lo puedes hacer con JavaScript antes del submit.

✅ 2. Procesa el formulario desde el mismo shortcode

Agrega al inicio del shortcode [equipo_ideal_selector] esta lógica PHP (como está en el admin pero adaptada al botón del público):

php
CopiarEditar
if (isset($_POST['guardar_equipo_publico'])) {
    $equipo_relacionado = intval($_POST['equipo_relacionado']);
    $tactica            = sanitize_text_field($_POST['tactica']);
    $goleros            = array_map('intval', $_POST['goleros'] ?? []);
    $defensas           = array_map('intval', $_POST['defensas'] ?? []);
    $mediocampistas     = array_map('intval', $_POST['mediocampistas'] ?? []);
    $delanteros         = array_map('intval', $_POST['delanteros'] ?? []);

    $post_id = wp_insert_post([
        'post_type'   => 'equipo_ideal',
        'post_title'  => 'Oncena Usuario - ' . current_time('mysql'),
        'post_status' => 'publish'
    ]);

    if ($post_id) {
        update_post_meta($post_id, 'equipo_relacionado', $equipo_relacionado);
        update_post_meta($post_id, 'tactica', $tactica);
        update_post_meta($post_id, 'goleros', $goleros);
        update_post_meta($post_id, 'defensas', $defensas);
        update_post_meta($post_id, 'mediocampistas', $mediocampistas);
        update_post_meta($post_id, 'delanteros', $delanteros);

        echo '<div class="mensaje-exito">¡Tu oncena fue guardada con éxito!</div>';
    }
}

✅ 3. Llenar dinámicamente los input hidden con JavaScript

En el archivo JS de tu shortcode, al hacer clic en el botón "Guardar", debes leer los jugadores colocados en cada zona del campo y actualizar los inputs hidden (goleros[], defensas[], etc.) antes de enviar el formulario.

¿Quieres que te dé un ejemplo de ese JavaScript para completar el flujo?

Perfecto. Te voy a dar todo el código necesario y los pasos detallados para implementar el guardado de la oncena del usuario desde la interfaz pública (shortcode).

🧩 OBJETIVO

Que un usuario pueda:

1. Elegir jugadores arrastrando a su formación.

2. Hacer clic en "Guardar Mi Oncena".

3. Se cree un nuevo post tipo equipo_ideal con los jugadores y táctica seleccionados.

✅ PASO 1: Modifica tu shortcode público

En el archivo donde tienes el shortcode [equipo_ideal_selector], coloca este contenido (adaptado para insertar y procesar datos):

php
CopiarEditar
function equipo_ideal_selector_shortcode() {
    ob_start();

    // 🧠 Procesamiento del formulario al enviar
    if (isset($_POST['guardar_equipo_publico'])) {
        $equipo_relacionado = intval($_POST['equipo_relacionado']);
        $tactica            = sanitize_text_field($_POST['tactica']);
        $goleros            = array_map('intval', $_POST['goleros'] ?? []);
        $defensas           = array_map('intval', $_POST['defensas'] ?? []);
        $mediocampistas     = array_map('intval', $_POST['mediocampistas'] ?? []);
        $delanteros         = array_map('intval', $_POST['delanteros'] ?? []);

        $post_id = wp_insert_post([
            'post_type'   => 'equipo_ideal',
            'post_title'  => 'Oncena Usuario - ' . current_time('mysql'),
            'post_status' => 'publish'
        ]);

        if ($post_id) {
            update_post_meta($post_id, 'equipo_relacionado', $equipo_relacionado);
            update_post_meta($post_id, 'tactica', $tactica);
            update_post_meta($post_id, 'goleros', $goleros);
            update_post_meta($post_id, 'defensas', $defensas);
            update_post_meta($post_id, 'mediocampistas', $mediocampistas);
            update_post_meta($post_id, 'delanteros', $delanteros);

            echo '<div class="mensaje-exito">¡Tu oncena fue guardada con éxito!</div>';
        }
    }

    ?>

    <form method="post" id="form-oncena">
        <input type="hidden" name="equipo_relacionado" value="1" /> <!-- Cambia esto dinámicamente si es necesario -->
        <input type="hidden" name="tactica" id="tactica-input" value="4-3-3" />

        <input type="hidden" name="goleros[]" id="input-goleros" value="">
        <input type="hidden" name="defensas[]" id="input-defensas" value="">
        <input type="hidden" name="mediocampistas[]" id="input-mediocampistas" value="">
        <input type="hidden" name="delanteros[]" id="input-delanteros" value="">

        <!-- Aquí pon tu interfaz de arrastrar jugadores -->

        <button type="submit" name="guardar_equipo_publico">Guardar Mi Oncena</button>
    </form>

    <?php
    return ob_get_clean();
}
add_shortcode('equipo_ideal_selector', 'equipo_ideal_selector_shortcode');

✅ PASO 2: Código JavaScript para completar los campos ocultos

Agrega este JS a tu tema o plugin. Si es plugin, puedes encolarlo con wp_enqueue_script. Si es tema, ponlo en footer.php o en un archivo propio.

html
CopiarEditar
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('form-oncena');

    form.addEventListener('submit', function (e) {
        // 🧠 Recoge los jugadores arrastrados desde tus divs por posición
        // Asegúrate de que tus contenedores tengan estos IDs:
        // #zona-golero, #zona-defensa, #zona-mediocampo, #zona-delantera
        const getPlayerIds = (zonaId) => {
            const zona = document.getElementById(zonaId);
            const players = zona.querySelectorAll('.jugador[data-id]');
            return Array.from(players).map(p => p.getAttribute('data-id')).join(',');
        };

        // Llena los inputs ocultos con los IDs de los jugadores en cada zona
        document.getElementById('input-goleros').value = getPlayerIds('zona-golero');
        document.getElementById('input-defensas').value = getPlayerIds('zona-defensa');
        document.getElementById('input-mediocampistas').value = getPlayerIds('zona-mediocampo');
        document.getElementById('input-delanteros').value = getPlayerIds('zona-delantera');

        // 🧠 Si cambias la táctica desde un selector, también actualiza este input
        // document.getElementById('tactica-input').value = nuevaTactica;
    });
});
</script>

✅ PASO 3: HTML para los contenedores de arrastre

Asegúrate de que cada zona del campo tenga un ID como este:

html
CopiarEditar
<div id="zona-golero" class="zona-drop">
    <!-- jugadores arrastrados aquí -->
</div>
<div id="zona-defensa" class="zona-drop"></div>
<div id="zona-mediocampo" class="zona-drop"></div>
<div id="zona-delantera" class="zona-drop"></div>

Y los jugadores disponibles tengan algo como esto para que JS pueda leer su ID:

html
CopiarEditar
<div class="jugador" data-id="123">Nombre del jugador</div>

✅ PASO 4: Seguridad extra (opcional pero recomendable)

Para evitar spam o mal uso, puedes agregar un nonce:

En el formulario:

php
CopiarEditar
<?php wp_nonce_field('guardar_oncena_usuario', 'nonce_oncena'); ?>

En el procesamiento del formulario:

php
CopiarEditar
if (
    isset($_POST['guardar_equipo_publico']) &&
    isset($_POST['nonce_oncena']) &&
    wp_verify_nonce($_POST['nonce_oncena'], 'guardar_oncena_usuario')
) {
    // Aquí tu lógica de guardado
}

🧪 Resultado Final

• El usuario arma su oncena arrastrando jugadores.

• Hace clic en Guardar Mi Oncena.

• Se guarda un post_type = equipo_ideal con los campos personalizados.

¿Te gustaría que prepare también una versión visual básica de esa interfaz con drag-and-drop usando JavaScript o jQuery UI?

Perfecto. A continuación te daré el código completo y los pasos detallados para aplicar una versión visual funcional de la interfaz pública para que los usuarios seleccionen su oncena ideal en WordPress.

✅ Objetivo

Crear una interfaz pública (vía shortcode) en WordPress donde el usuario pueda:

• Seleccionar una táctica (formación).

• Ver jugadores por posición (golero, defensa, medio, delantero).

• Arrastrar jugadores al campo.

• Guardar como imagen o compartir.

🧱 Paso 1: Agregar el Shortcode Público al Plugin

En tu plugin actual (donde ya tienes el shortcode para administración), agrega este nuevo shortcode:

php
CopiarEditar
// SHORTCODE para mostrar la interfaz pública de oncena ideal
function mostrar_interfaz_oncena_publica() {
    ob_start();
    ?>
    <div id="seleccion-oncena">
        <div>
            <label for="formacion">Formación:</label>
            <select id="formacion">
                <option value="4-4-2">4-4-2</option>
                <option value="4-3-3">4-3-3</option>
                <option value="3-5-2">3-5-2</option>
                <!-- Puedes agregar más -->
            </select>
        </div>

        <div class="tabs">
            <button class="tab-btn" data-tab="golero">Golero</button>
            <button class="tab-btn" data-tab="defensa">Defensa</button>
            <button class="tab-btn" data-tab="medio">Medio</button>
            <button class="tab-btn" data-tab="delantero">Delantero</button>
        </div>

        <div id="jugadores-container">
            <div class="tab-content" id="golero"></div>
            <div class="tab-content" id="defensa"></div>
            <div class="tab-content" id="medio"></div>
            <div class="tab-content" id="delantero"></div>
        </div>

        <h3>Arrastra los jugadores al campo:</h3>
        <div id="campo-juego" class="campo">
            <!-- Posiciones se llenarán dinámicamente -->
        </div>
    </div>

    <style>
        #jugadores-container, #campo-juego {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 10px;
            border: 2px solid #ddd;
            margin-top: 10px;
        }

        .jugador {
            background-color: #f0f0f0;
            padding: 6px 10px;
            cursor: move;
            border-radius: 5px;
        }

        .posicion-campo {
            width: 100px;
            height: 100px;
            background: #e6f7ff;
            border: 2px dashed #aaa;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tabs button {
            margin: 0 4px;
            padding: 6px 12px;
            cursor: pointer;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: flex;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Tabs
            const tabButtons = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
            tabButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    const tab = btn.getAttribute('data-tab');
                    tabContents.forEach(c => c.classList.remove('active'));
                    document.getElementById(tab).classList.add('active');
                });
            });
            // Activa la primera pestaña
            tabButtons[0].click();

            // Jugadores ficticios de ejemplo (puedes cargar con AJAX luego)
            const jugadores = {
                golero: ['Golero 1'],
                defensa: ['Defensa 1', 'Defensa 2', 'Defensa 3', 'Defensa 4'],
                medio: ['Medio 1', 'Medio 2', 'Medio 3', 'Medio 4'],
                delantero: ['Delantero 1', 'Delantero 2']
            };

            // Pinta los jugadores en sus pestañas
            for (let pos in jugadores) {
                const container = document.getElementById(pos);
                jugadores[pos].forEach(nombre => {
                    const div = document.createElement('div');
                    div.className = 'jugador';
                    div.textContent = nombre;
                    div.draggable = true;
                    div.addEventListener('dragstart', ev => {
                        ev.dataTransfer.setData('text/plain', nombre);
                    });
                    container.appendChild(div);
                });
            }

            // Campo de juego
            const campo = document.getElementById('campo-juego');
            for (let i = 0; i < 11; i++) {
                const posDiv = document.createElement('div');
                posDiv.className = 'posicion-campo';
                posDiv.addEventListener('dragover', ev => ev.preventDefault());
                posDiv.addEventListener('drop', ev => {
                    ev.preventDefault();
                    const data = ev.dataTransfer.getData('text/plain');
                    posDiv.innerHTML = `<div class="jugador">${data}</div>`;
                });
                campo.appendChild(posDiv);
            }
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('oncena_ideal', 'mostrar_interfaz_oncena_publica');

📌 Paso 2: Usar el Shortcode en tu Página Pública

1. Crea una nueva página en WordPress (o edita una existente).

2. En el contenido, pega el siguiente shortcode:

plaintext
CopiarEditar
[oncena_ideal]

3. Guarda y visualiza la página.

✅ Resultado

Verás:

• Un selector de formación.

• Pestañas con jugadores por posición.

• Un campo de juego con 11 espacios para arrastrar jugadores.

• Funcionalidad drag-and-drop con HTML5.

🛠️ Próximos pasos opcionales

• Reemplazar los jugadores de ejemplo con los del equipo seleccionado desde la base de datos (mediante AJAX).

• Añadir botón para generar imagen del campo (con html2canvas).

• Añadir opción de compartir (en redes o guardar).

¿Quieres que también te agregue la parte para guardar como imagen o cargar jugadores reales desde la base de datos?

Buena pregunta. Aquí está exactamente cómo debes hacerlo:

✅ ¿Dónde pegar el código del paso 1?

Sí, debes copiar y pegar ese bloque de código en el archivo PHP del plugin que ya estás usando, específicamente en el archivo donde ya tienes el shortcode para la parte de administración (equipo-ideal-admin.php, por ejemplo).

📌 ¿Dónde exactamente pegarlo?

Pégalo al final del archivo PHP, justo antes del ?> de cierre (si es que tu archivo lo tiene), o simplemente al final si no tiene un ?> de cierre, lo cual es común y válido.

👇 Ejemplo

Supongamos que ya tienes esto en tu archivo:

php
CopiarEditar
function mostrar_formulario_equipo_admin() {
    // tu código actual del formulario de administración...
}
add_shortcode('admin_equipo', 'mostrar_formulario_equipo_admin');

Entonces lo correcto sería dejarlo así:

php
CopiarEditar
function mostrar_formulario_equipo_admin() {
    // tu código actual del formulario de administración...
}
add_shortcode('admin_equipo', 'mostrar_formulario_equipo_admin');


// SHORTCODE para mostrar la interfaz pública de oncena ideal
function mostrar_interfaz_oncena_publica() {
    ob_start();
    ?>
    <!-- (aquí todo el HTML, CSS y JS del paso 1) -->
    <?php
    return ob_get_clean();
}
add_shortcode('oncena_ideal', 'mostrar_interfaz_oncena_publica');

🧪 Luego:

1. Guarda ese archivo (equipo-ideal-admin.php).

2. Ve al panel de WordPress.

3. Crea o edita una página.

4. Pega [oncena_ideal] en el contenido.

5. Guarda y visualiza. Deberías ver la interfaz pública funcional.

¿Quieres que revise o te ayude a integrar también los jugadores reales desde base de datos?

Perfecto. Vamos a construirlo desde cero como plugin completo, paso a paso. Aquí tienes la estructura inicial del plugin y los archivos necesarios para cumplir con tus 5 objetivos.

🔧 PASO 1: Crear el plugin

1. En tu WordPress, ve a:
   /wp-content/plugins/

2. Crea una carpeta llamada:

   CopiarEditar
   equipo-ideal
   

3. Dentro de esa carpeta, crea el archivo:

   CopiarEditar
   equipo-ideal.php
   

4. Copia y pega el siguiente contenido en equipo-ideal.php:

php
CopiarEditar
<?php
/**
 * Plugin Name: Equipo Ideal
 * Description: Crea clubes con jugadores y permite a los usuarios armar su oncena ideal.
 * Version: 1.0
 * Author: Tu Nombre
 */

// Incluir archivos necesarios
include_once plugin_dir_path(__FILE__) . 'admin/admin-page.php';
include_once plugin_dir_path(__FILE__) . 'public/public-page.php';

// Activar plugin: crear tabla si no existe
register_activation_hook(__FILE__, 'equipo_ideal_crear_tabla');

function equipo_ideal_crear_tabla() {
    global $wpdb;
    $tabla = $wpdb->prefix . 'equipos_ideal';
    $charset = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE IF NOT EXISTS $tabla (
        id INT NOT NULL AUTO_INCREMENT,
        nombre_equipo VARCHAR(100) NOT NULL,
        jugadores LONGTEXT NOT NULL,
        PRIMARY KEY(id)
    ) $charset;";

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

🧩 PASO 2: Crear la página de administración privada

1. Dentro de la carpeta equipo-ideal, crea otra carpeta llamada:

   nginx
   CopiarEditar
   admin
   

2. Dentro de admin, crea el archivo:

   pgsql
   CopiarEditar
   admin-page.php
   

3. Copia y pega esto:

php
CopiarEditar
<?php
add_action('admin_menu', 'equipo_ideal_menu_admin');

function equipo_ideal_menu_admin() {
    add_menu_page(
        'Equipo Ideal Admin',
        'Crear Equipos',
        'manage_options',
        'equipo-ideal-admin',
        'equipo_ideal_admin_page',
        'dashicons-groups'
    );
}

function equipo_ideal_admin_page() {
    global $wpdb;

    if (isset($_POST['equipo_nombre']) && isset($_POST['jugadores'])) {
        $nombre = sanitize_text_field($_POST['equipo_nombre']);
        $jugadores = json_encode($_POST['jugadores']);

        $wpdb->insert(
            $wpdb->prefix . 'equipos_ideal',
            ['nombre_equipo' => $nombre, 'jugadores' => $jugadores],
            ['%s', '%s']
        );

        echo '<div class="notice notice-success"><p>El equipo "' . esc_html($nombre) . '" ha sido creado.</p></div>';
    }

    ?>
    <div class="wrap">
        <h1>Crear Nuevo Equipo</h1>
        <form method="post">
            <label>Nombre del equipo:</label><br>
            <input type="text" name="equipo_nombre" required style="width: 300px;"><br><br>

            <label>Jugadores (por posición):</label><br>
            <textarea name="jugadores[golero]" placeholder="Golero (uno)" required></textarea><br>
            <textarea name="jugadores[defensa]" placeholder="Defensas (separar por coma)" required></textarea><br>
            <textarea name="jugadores[mediocampo]" placeholder="Mediocampistas" required></textarea><br>
            <textarea name="jugadores[delantero]" placeholder="Delanteros" required></textarea><br><br>

            <input type="submit" value="Guardar Equipo" class="button button-primary">
        </form>
    </div>
    <?php
}