Atascado en creación de mi primer plugin

(@adrianfraga)

Hola a tod@s, lo primero saludar y decir que soy nuevo en el foro, este es mi primer post!

Estoy desarrollando mi primer plugin para WordPress, se trata de un plugin para configurar un slider que se muestra en la template-frontpage.php del theme.
En el menú del plugin podemos configurar 3 fotos, teniendo para cada una las siguientes opciones:
Url de la imagen -> metemos la url de una imagen que tengamos en la galería de WP.
Título, subtítulo y algunos campos más.

En el archivo principal del plugin, encolo bootstrap, css, propio, js etc y tengo la función createMenu la cual contiene la función de WP add_menu_page() en la cual en la función que llama al contenido, llamo al archivo del backoffice.

gestion-wen.php

//AGREGAR MENU DE ADMINISTRADOR

    function createMenu(){
        add_menu_page(
            'Gestión web',                                    //Título de la página
            'Gestión web',                                    //Título del menú
            'manage_options',                                 //Permiso de administrador
            'gw_menu',                                        //Slug
            'requireContent',                                 //Función del contenido, llama al archivo del backOffice
             plugin_dir_url(__FILE__).'/img/icon.png',        //Icono
            '1'                                               //Posición menú
        );
    }

    function requireContent(){
        require_once 'views/admin-content.php';
    }
    add_action('admin_menu', 'createMenu');

    //LLAMADA A ARCHIVO FRONTEND

    include 'views/front-content.php';

En el archivo admin-content.php tengo la maquetación de la vista del menú, este es un ejemplo de uno de los bloques para configurar la primera foto (todos dentro de un form):

<div class="flex-grow-1 m-1 item-slider">

                    <h3 class="d-flex justify-content-center">Slider 1</h3>

                    <div class="border border-1 rounded highlight-texts">

                        <div class="m-3">
                            <label class="fw-bold" for="slider1-titulo">Título</label> <br>
                            <input class="w-100" name="s1" type="text" id="slider1-titulo" placeholder="Título"></input> <br>
                        </div>

                        <div class="m-3">
                            <label class="fw-bold" for="slider1-subtitulo">Subtítulo</label> <br>
                            <input class="w-100" type="text" id="slider1-subtitulo" placeholder="Subtítulo"></input> <br>
                        </div>
  
                        <div class="m-3">  
                            <label class="fw-bold form-check-label" for="exampleCheck1">Textos con mayor contraste</label> <br>
                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        </div>
                           
                    </div>
                    
                    <div class="m-3">
                        <label class="fw-bold" for="slider1-imagen">Imagen</label> <br>
                        <input class="w-100" type="text" id="slider1-imagen" placeholder="Url imagen"></input> <br>
                    </div>

                    <div class="m-3">
                        <label class="fw-bold" for="slider1-imagen-movil">Imagen móvil</label> <br>
                        <input class="w-100" type="text" id="slider1-imagen-movil" placeholder="Url imagen móvil"></input> <br>
                    </div>

                </div>

Y por último, tengo el archivo front-content.php con el bootstrap, css y js propio encolado y el siguiente código que muestra el slider en el front después del header gracias al add_action del final.

function printCarousel()
    {
        
    ?>
        <!-- CARGAR BOOTSTRAP PARA EL FRONTEND ??  YA ESTÁ ENLOCADO, PERO SIN LA CDN NO FUNCIONA -->

        <head>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>   
        </head>
        
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="http://localhost/portugalStage/wp-content/uploads/2020/12/152.webp" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <div class=" highlight-front">
                            <h3>First slide label</h3>
                            <p>Some representative placeholder content for the first slide.</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="http://localhost/portugalStage/wp-content/uploads/2021/06/134.webp" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <div class=" highlight-front">
                            <h3>First slide label</h3>
                            <p>Some representative placeholder content for the first slide.</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="http://localhost/portugalStage/wp-content/uploads/2021/06/133.webp" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <div class=" highlight-front">
                            <h3>First slide label</h3>
                            <p>Some representative placeholder content for the first slide.</p>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
            
        </div>

    <?php
    }

    add_action('generate_after_header', 'printCarousel');

Ahora lo que necesito, es que, desde el backOffice, cuando cubro los inputs y envío mediante el botón, estos datos se muestren en el front. Para ello el form del back lo tengo con method=»POST» y action=»front-content.php» Tango el archivo admin-content como front-content están dentro del directorio views del plugin.

Estoy haciendo la prueba con el primer input del título al cual le pongo como atributo name=»s1″… desde el front-content para intentar visualizarlo tengo lo siguiente:

$slider1_titulo = $_POST["s1"];

echo $slider1_titulo;

Con esto, desde el backOffice, si meto texto en el primer input y pulso el botón de enviar la url pasa de http://localhost/portugalStage/wp-admin/admin.php?page=gw_menu a la siguiente: http://localhost/portugalStage/wp-admin/front-content.php y efectivamente puedo ver el texto que metí en el input en la parte superior. Sin embargo, desde mi front, con la url http://localhost/portugalStage/ no se me muestra el dato, en su lugar tengo el siguiente error: Notice: Undefined index: s1 in C:\xampp_7.4\htdocs\portugalStage\wp-content\plugins\gestion-web\views\front-content.php on line 38

y es justamente ahí donde intento visualizarlo para luego poder enviar cada dato a su lugar correspondiente en la maquetación.

Siento haberme extendido todo, pero soy novato e intenté explicarme lo mejor posible.
Gracias de antemano

Viendo 1 respuesta (de un total de 1)

kallookoo
(@kallookoo)

hace 1 año, 2 meses

Hola @adrianfraga

Respondeme a las siguientes preguntas:
– El plugin es para uso personal o tienes intencion de publicarlo?
– Porque no usas la Settings API?
– Porque no guardas las opciones (datos del slider) en la DB?
– Porque usas el Bootstrap y lo cargas entero tanto el admin como en la web?
– Porque usas la etiquete <head> en front-content.php?

Saludos

Viendo 1 respuesta (de un total de 1)

El debate ‘Atascado en creación de mi primer plugin’ está cerrado a nuevas respuestas.

Atascado en creación de mi primer plugin

Etiquetas del debate

Vistas