Hemos comentado que en este proyecto, trabajaríamos con PHP orientado a objetos; esto es: con clases, lo mas independientes posibles, y, nuestro primer trabajo será la instalación del plugin; para ello, hemos dedicado una clase, quizás la mas difusas de todas, y que hubiéramos podido sustituir con funciones, pero…. lo hemos hecho así.

Nuestra clase será llamada los los hooks de wordpress tal y como definimos en el articulo  WordPress – Iniciando nuestro plugin , si ya lo habéis leido y tenéis listo el modulo que explicamos, vamos a realizar la clase de instalación

La clase RfPluginMenuR. La instalación del plugin

Durante el articulo anterior, terminábamos instanciando la clase RfPluginMenuR  y ejecutando el método init(), a la vez que dejábamos los métodos activacion() y desactivacion() enganchados a los hooks de activación y desactivación de WordPress, por lo que ahora deberemos escribirlos

En primer lugar, definiremos el fichero en la carpeta «clases». Es desde donde lo cargábamos antes, y creo que es el sitio correcto para esta clase

En esta clase, deberemos  añadir a la base de datos de WordPress tres tablas, para utilizarlas en nuestro plugin. Para ello, me he apartado un poco de la normativa, y he situado los métodos de creación y borrado en cada controlador, que definiremos mas adelante; de momento, nos basta con saber que cada controlador tendrá un método install que definirá la tabla, y un método unistall que borrara la tabla.

En esta clase, empezaremos requiriendo dichos controladores, y especificando la ruta de la clase

<?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;

Acordaros que en el modulo que llama, establecimos todas las constantes que necesitábamos para las rutas

Nuestro siguiente paso, es definir las variables en donde instanciaremos cada controlador, y en el método constructor, podemos instanciarlos

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

   private $rfmGrupos;
   private $rfmMenus;
   private $rfmPlatos;

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

Ya está. Nos toca definir el método «init()». En este método vamos a:

    • Preparar el menú de administración desde el que colgaremos nuestro REACT para mantenimiento de nuestras tablas (método rfm_menu_administrador)
    • Añadir una entrada al menú de ajustes de wordpress, para conseguir el mantenimiento de algunas opciones de nuestro plugin ( método rfmPaginaOpciones)
    • Añadir a la carga de wordpress todas las paginas css y javascript que necesitemos, para el funcionamiento de nuestro producto (método rfm_addScripts)

Para ello, nos bastará un código tal y como este:

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'
      ]);
}

Ahora, vamos a ir viendo cada uno de estos métodos.

rfm_menu_administrador – La pagina de administración de tablas del plugin

Como siempre, este método lo que hace es definir los datos para el menú, y luego,  invoca al método rfm_presentaReact que es el encargado de construir la pagina como tal.

public function rfm_menu_administrador()
{
   $nombreMenu = 'rfmGestionMenuR';

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

Toda la operación la realiza la función add_menu_page Facilitada por WordPress, y que recibe los siguiente parámetros

    • Nombre del plugin
    • Texto que debe figurar en el menú
    • permisos necesarios para poder utilizar la página
    • método que construye la página

Respecto a la construcción de la página, y, tras recordar que a nosotros solo nos incumbe hacer el «body», ya que el resto lo proporciona WordPress, y que vamos a realizar la aplicación cliente con React, nos quedara algo tan sencillo como

public function rfm_presentaReact()
{
   echo '<div class="wrap">';
   echo     '<h1>Gestion de la Base de datos</h1>';
   echo     '<div id="root">Dinamico</div>';
   echo '</div>';
}

Y, como estamos acostumbrados, desde react, sustituiremos el contenido del DIV «root» con el valor que nos convenga

rfm_addScripts – Añadiendo CSS y Scripts

En este caso, y debido a que es un poco complejo, os paso el código, y lo vamos a ir viendo a trozos.

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__));
          
            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) . ';
            '
            );
        }
    }

Todo este código, solo necesitamos que se ejecute cuando se carga nuestra pagina de administración, de forma que todo lo condicionamos a ello com

if ($hook == «toplevel_page_rfmGestionMenuR») {

eso significa que solo pasara al interior del if cuando se vaya a cargar la página indicada

El fichero que incluimos en asset_file, es uno que nos generara react, y que se llama index.assets.php, y que contiene dos arrays, una de ellas llamada dependecies con todos los scripts que necesita react para funcionar, y otro llamado version en donde aparece un numero que nos permite identificar la version de nuestros scripts.

Como en nuestra aplicación react hemos definido donde irán a parar los ficheros y que nombre tendrán, no tenemos problemas para pedirle a WordPress que cuando cargue el index.js (nuestro fichero de arranque de cliente), cargue todos los scripts que se indiquen

El ultimo parámetro de wp_enqueue_script es un booleano «true«, para decirle que queremos que realice la carga, cuando se haya cargado el HTML, ya que hasta entonces, no dispondremos del div root, sobre el que vamos a trabajar

A continuación, dejamos las ordenes para cargar las hojas de estilo que necesitemos (wp_enqueue_style). En mi caso, utilizo algunas que ya estaban en mi proyecto original, pero os invito a que defináis las que queréis usar, a menos que vayáis a trabajar los los estilos que proporciona wordpress.

Observad, también que trabajo con un estilo propio, definido el el fichero index.css y que tendréis que decidir en que carpeta ubicarlo. Sobre esto, quiero aclarar que he utilizado el React que viene de origen con WordPress, esto me limita la inclusión de estilos en los módulos React, y lo he resuelto así, Ya volveremos a ello, cuando estemos comentado la parte cliente

De este método, solo me queda unas líneas

Traspasando opciones a React, desde wordpress

React tiene un problema, todo el trabajo se desarrolla en el cliente, pero… WordPress tiene las opciones en el servidor; si esas opciones han de afectar al cliente… ¿Cómo hacerlo?

La solucion que he encontrado yo, es crear en el servidor un pequeño script que me traspase esa informacion al cliente, y eso es lo que hago. Con

encolar un script en wordpress

Doy la orden de encolar un script mas, pero, esta vez el script lo creo dinámicamente con

Crear dinamicamente un script para subirlo a wordpress

Fijaros que lo unico que hace, es crear dos variables en JavaScript y pasarles información. En una de ellas le traspaso la dirección absoluta de la aplicación, para que luego pueda ser invocada desde React, y en la otra, le paso las opciones que he creado para este plugin, que las he recuperado mediante

Obtencion de las opciones creadas para un plugin de WordPress

Mas adelante, veremos como editarlas

Lo que he conseguido con este JavaScript, es dejar disponible en cliente las dos variable, y que puedan ser invocadas desde JavaScript, en cualquier momento

Lo ultimo que nos queda de esta clase, es ver como creamos las opciones, pero me vais a permitir que lo explique en el siguiente artículo.

Deja un comentario

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