Para finalizar la clase que iniciamos en el articulo anterior, debemos preparar una pagina de opciones. Realmente, en este caso no es demasiado importante, y solo queremos mostrar como podríamos hacerlo si fuera imprescindibles… que en nuestro trabajo actual, hemos decidido que lo sea.

Ante todo, os quiero mostrar como se vera la pagina de opciones que vamos a crear:

Vista de la pagina de opciones en WordPress para el menú de restauración

Se trata, como podéis ver de una pagina con dos textareas, para solicitar los estilos con los que queremos presentar la tabla y las columnas.

Estos estilos, se enviaran al cliente para que los presente React, por lo que es necesario que utilicemos los nombres reconocidos en dicho entorno; para todos los atributos de una sola palabra, no cambia nada, pero para los que contienen un guion, se ha de utilizar la estructura CamelCase, pero… teniendo en cuenta que solo es para explicar como preparar la página…

Siguiendo las ultimas instrucciones de WordPress, puede que la preparación sea un poco retorcida, pero nada imposible de entender para vosotros; a continuación, os dejo la imagen de las instrucciones, y vamos comentando

programacion de pagina de opciones en WordPress

Al principio de la imagen, tenéis una dirección (http://ottopress.com/2009/wordpress-settings-api-tutorial/) en donde podéis encontrar todas las explicaciones necesarias.

Revisemos ahora las distintas funciones preparadas:

Definicion de pagina de opciones

Empezamos definiendo los parámetros generales de nuestra pagina de opción en rfm_presentaOpciones_admin_init. y para ello, registramos nuestra pagina (Opciones_PluginRfmMenu) y declaramos que utilizaremos la función  Opciones_PluginRfmMenu_validate para validar los datos entrados. A partir de este momento,  Opciones_PluginRfmMenu es nuestra pagina, y todas las secciones que queramos añadir, las asociaremos a ella

Declarar seccion en una pagina de opciones de wordpress

Nuestra pagina de opciones, solo contendrá una sección, que se la indicamos en la linea 151, donde declaramos a la función Rfm_MenuRestauracion_section para que genere el HTML necesario para  dibujarla. Naturalmente, indicamos que esta sección es de la pagina Opciones_PluginRfmMenu, y el nombre de la sección es PluginRfmMenu_main 

Plugin para wordpress. Pagina de opciones. Definir los campos

Ahora deberemos definir los campos que deseemos para la sección; en nuestro caso, dos. Para ello, indicamos las funciones que generaran el HTML necesario, (rfmEstiloColumna, y rfmEstiloTabla) y en la función add_setting_field, indicamos que son de la sección definida anteriormente (PluginRfmMenu_main)

Si revisamos las funciones encargadas de generar el HTML, veremos que son muy sencillas; en la que define la sección, Rfm_MenuRestauracion_section  se limita a incorporar un párrafo, brevemente explicativo; y, las otras dos, responsables de la creación del campo, en nuestro caso, declaran un textarea.

El label de cada campo, no aparece, ya que lo establecimos en el add_settings_field que incorpora este campo

Lo que aparece como «especial» es la instrucción

  $options = get_option('OPluginRfmMenu');

Que nos garantiza tener a mano los valores previamente guardados para estos campos, y, a continuación si en la operación anterior no hemos conseguido un array, nos indicará que es la primera vez a la que vamos a completar estas opciones,

if (!is_array($options))
            $options = $this->inicializaOpciones();

por lo que nos proveemos de una función (inicializaOpciones) que nos formateara la lista, cargando los valores por defecto

Sabemos que WordPress guardara cada valor con el nombre con el que se ha  definido el campo en la función add_settings_field  por lo que, tanto para mostrarlos en el textarea, como para recogerlo del mismo utilizamos el  array  conseguido en el getOption,, con el id que hemos definido.

Os quiero señalar que para el nombre del campo, debemos utilizar el contenido de otro array, que se genero en la linea 150 cuando hicimos el «register_setting»

Una vez definidas secciones y campos de las secciones, nos queda solo que escribir la funcion encargada de presentar la página HTML, en la que no nos deberemos preocuparnos ni de secciones, ni de campos, ni de botones, ya que los referenciaremos con el nombre que le hemos dado, y las funciones  settings_fieldsdo_settings_sections

Método de presentacion de la pagina de opciones

Por ultimo, el método que valida nuestro formulario, y ya estamos preparados para recibir las opciones que nuestros usuarios deseen.

A continuación, os dejo toda la clase  para que la podáis copiar y analizar con mas comodidad, y en el siguiente post, veremos como construir el resto de clases

<?php

namespace rf\mrw\rf_plugin_menu_r\clases;

require_once(CONTROLLER_FOLDER . '/RfmGruposController.php');
require_once(CONTROLLER_FOLDER . '/RfmMenuController.php');
require_once(CONTROLLER_FOLDER . '/RfmPlatosMenuController.php');

use rf\mrw\rf_plugin_menu_r\clases\controllers\RfmMenuController;
use rf\mrw\rf_plugin_menu_r\clases\controllers\RfmGruposController;
use rf\mrw\rf_plugin_menu_r\clases\controllers\RfmPlatosMenuController;



/**
 *
 * @author migarcia
 *        
 */
class RfPluginMenuR
{

    private $rfmGrupos;

    private $rfmMenus;

    private $rfmPlatos;


    function __construct()
    {
        $this->rfmGrupos = new RfmGruposController();
        $this->rfmMenus = new RfmMenuController();
        $this->rfmPlatos = new RfmPlatosMenuController();
    }

    public function init()
    {
        // crear men�s de administraci�n
        add_action('admin_menu', [
            $this,
            'rfm_menu_administrador'
        ]);
        add_action('admin_menu', [$this, 'rfmPaginaOpciones']);

        // scripts backend
        add_action('admin_enqueue_scripts', [
            $this,
            'rfm_addScripts'
        ]);
    }


    public function end()
    {
    }

    public function activacion()
    {

        $this->rfmGrupos->install();
        $this->rfmMenus->install();
        $this->rfmPlatos->install();
    }

    public function desactivacion()
    {
        $this->rfmGrupos->uninstall();
        $this->rfmMenus->uninstall();
        $this->rfmPlatos->uninstall();
    }

    public function rfm_menu_administrador()
    {
        $nombreMenu = 'rfmGestionMenuR';
        /*
         * version de menu saltando a la pagina deseada
         *
         * add_menu_page(
         * RFM_NOMBRE,
         * RFM_NOMBRE_CORTO,
         * 'manage_options',
         * RFM_DIR_URL . 'build/index.html');
         */
        /* version de menu incluyendo lo necesario aqui mismo. */

        add_menu_page(RFM_NOMBRE, RFM_NOMBRE_CORTO, 'manage_options', $nombreMenu, [
            $this,
            'rfm_presentaReact'
        ]);

        // add_submenu_page($nombreMenu, 'Gestion grupos', 'Gestion grupos', 'manage_options', 'rfmGG',
        // [$this,'rfm_manGrupos']);
        // add_submenu_page($nombreMenu,'Gestion Menus','Gestion menus',
        // 'manage_options', 'rfmMenus', [ $this,'rfm_manMenus', 'display' ],);
        // add_submenu_page($nombreMenu,'Gestion platos','Gestion platos',
        // 'manage_options', 'rfmPlatos', [ $this,'rfm_manPlatos', 'display' ],);
    }

    public function rfm_addScripts($hook)
    {
        if ($hook == "toplevel_page_rfmGestionMenuR") {
            //  Los siguientes scripts y estilos solo se cargan para la pagina indicada "toplevel_page_rfmGestionMenuR"
            // ficheros para react
            $asset_file = include(RFM_ASSET_MANIFEST);
            $index_file = plugins_url('widget/build/index.js', dirname(__FILE__));
            $dependencias = ['wp-blocks', 'wp-element', 'wp-polyfill'];
            wp_enqueue_script(
                'rfm_Index',
                $index_file,
                $asset_file['dependencies'],
                $asset_file['version'],
                true
            );
            wp_enqueue_style('Font_Awesome_icons', "https://use.fontawesome.com/releases/v5.13.0/js/all.js");
            wp_enqueue_style('bootstrap', "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css");
            wp_enqueue_style('GoogleFonts', "https://fonts.googleapis.com/css?family=Varela+Round");
            wp_enqueue_style('GoogleFontsD', "https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i");

            wp_enqueue_style('PropioRFMMenu', plugins_url('index.css', dirname(__FILE__)));

            wp_enqueue_script('rfmkwp-js', RFM_RUTA . '/rfmkwp.js', array(), '1.0');
            $opciones_wp = get_option('OPluginRfmMenu');
            // constantes de servidor, pasadas a JS
            wp_add_inline_script(
                'rfmkwp-js',
                '
                //Area de script que se incluira
                window.RFM_ABSOLUTE_PATH = "' . RFM_DIR_URL . '";
                window.OPCIONES_WP = ' . json_encode($opciones_wp) . ';
            '
            );
        }
    }

    /**
     * Pagina en donde se expandira react
     */
    public function rfm_presentaReact()
    {
        echo '<div class="wrap">';
        echo '<h1>Gestion de la Base de datos</h1>';
        echo '<div id="root">Dinámico</div>';
        echo '</div>';
    }

    // Gestion de opciones

    //http://ottopress.com/2009/wordpress-settings-api-tutorial/
    public function rfmPaginaOpciones()
    {
        add_action('admin_init', [$this, 'rfm_presentaOpciones_admin_init']);
        add_options_page('Opciones Gestion Menus', 'Gestion Menus restauración', 'manage_options', 'OpcionesPluginRfmMenu', [$this, 'rfm_presentaOpciones']);
    }


    public function rfm_presentaOpciones_admin_init()
    {
        register_setting('Opciones_PluginRfmMenu', 'OPluginRfmMenu', [$this, 'Opciones_PluginRfmMenu_validate']);
        add_settings_section('PluginRfmMenu_main', 'Opciones', [$this, 'Rfm_MenuRestauracion_section'], 'OpcionesPluginRfmMenu');
        add_settings_field('rfmEstiloTabla', 'Estilo Tabla', [$this, 'rfmEstiloTabla'], 'OpcionesPluginRfmMenu', 'PluginRfmMenu_main');
        add_settings_field('rfmEstiloColumna', 'Estilo columna', [$this, 'rfmEstiloColumna'], 'OpcionesPluginRfmMenu', 'PluginRfmMenu_main');
    }

    public function Rfm_MenuRestauracion_section()
    {
        echo '<p>Los valores que aquí se indiquen, seran enviados a un atributo "style", desde React.
        Recuerde que todas aquellas características que se nombren co subguion(_), deben ser cambiadas
        a notación <b>lowerCamelCase</b></p>';
    }
    public function rfmEstiloColumna()
    {
        $options = get_option('OPluginRfmMenu');
        if (!is_array($options))
            $options = $this->inicializaOpciones();
        echo "<textarea  id='rfmEstiloColumna' name='OPluginRfmMenu[rfmEstiloColumna]' size='40em' type='text' style='resize:both;width:30em;height:7em'>" .  $options['rfmEstiloColumna'] . "</textarea>";
    }

    public function rfmEstiloTabla()
    {
        $options = get_option('OPluginRfmMenu');
        if (!is_array($options))
            $options = $this->inicializaOpciones();
        echo "<textarea  id='rfmEstiloTabla' name='OPluginRfmMenu[rfmEstiloTabla]' size='40' type='text' style='resize:both;width:30em;height:7em'>" .  $options['rfmEstiloTabla'] . "</textarea>";
    }
    private function inicializaOpciones()
    {
        $opciones = [];
        $opciones['rfmEstiloColumna'] = 'font-size: 13px;line-height: 1.5em;';
        $opciones['rfmEstiloTabla'] = ';';
        return $opciones;
    }



    /**
     * Pagina de peticion de opciones
     */
    public function rfm_presentaOpciones()
    {
        echo '<div class="wrap">';
        echo '<h1>Opciones para el PluginRfmMenu</h1>';
        echo '<form method = "post" action = "options.php"> ';
        settings_fields('Opciones_PluginRfmMenu');
        do_settings_sections('OpcionesPluginRfmMenu');

        submit_button();
        echo '</form>';
        echo '</div>';
    }


    function plugin_options_Opciones_PluginRfmMenu_validatevalidate($input)
    {

        $options = get_option('OPluginRfmMenu');
        $options['rfmEstiloColumna'] = trim($input['rfmEstiloColumna']);
        if (!preg_match('/^[a-z0-9]{32}$/i', $options['rfmEstiloColumna'])) {
            $options['rfmEstiloColumna'] = '';
        }
        $options['rfmEstiloTabla'] = trim($input['rfmEstiloTabla']);
        if (!preg_match('/^[a-z0-9]{32}$/i', $options['rfmEstiloTabla'])) {
            $options['rfmEstiloTabla'] = '';
        }
        return $options;
    }
}

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.