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:
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
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:
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
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
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_fields y do_settings_sections
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;
}
}
