Anexo 2 – Creando un plugin de WordPress para nuestra funcionalidad

En esta última lección del curso de creación de una app con ReactJS y WordPress gracias a Frontity, vamos a crear un plugin específico para añadir la funcionalidad extra que necesita nuestro producto. Por cierto, el plugin te lo dejo al final de la lección para que puedas descargarlo.

¿Por qué un plugin?

Vamos a crear un plugin para WordPress porque es la manera correcta de añadir la funcionalidad que necesitamos para el backend de nuestra app. En este caso vamos a crear un plugin donde añadimos la funcionalidad que ya hemos creado para añadir un rol personalizado de tipo «donante» a nuestra aplicación. Lo bueno de utilizar un plugin es que siempre tendremos nuestra funcionalidad preparada cuando el mismo esté activado, e incluso podemos crear diferentes plugins para diferentes grupos de funcionalidades, lo cual nos abre un enorme abanico de posibilidades para añadir o probar nuevas funciones en nuestro sitio.

Creando nuestro plugin

Lo primero que tenemos que hacer para crear nuestro plugin es dirigirnos a la carpeta de instalación de nuestro WordPress y localizar la carpeta wp-content. En esta carpeta es donde podemos encontrar todo el contenido personalizado de nuestro sitio, desde temas hasta plugins pasando por la carpeta uploads que es donde se alojan todos los archivos e imágenes que subimos a nuestro WordPress.

Dentro de wp-content nos dirigimos a la carpeta de plugins y creamos una nueva carpeta con el nombre que le queramos dar a nuestro plugin para que sea reconocido por WordPress, en nuestro caso donalibros-plugin.

estructura de archivos de wp-content
Estructura de archivos de wp-content

Una vez dentro podemos crear el archivo principal del que va a ser nuestro plugin, y que tendrá el mismo nombre que el plugin para que WordPress sepa qué archivo debe ejecutar. En nuestro caso donalibros-plugin.php

Securizando nuestro plugin

Nuestro plugin tiene la capacidad de manipular la base de datos de WordPress. Este es un enorme poder, y por tanto tiene una gran responsabilidad. Debemos proteger cualquier tipo de vulnerabilidad para que ningún ataque pueda utilizar nuestro plugin para modificar y adulterar la base de datos de nuestra app. Vamos a hacerlo de dos manera:

  • Creando un archivo índex.php: creando un archivo índex.php vacío estamos protegiendo nuestro sitio de acciones de un usuario desde un navegador, ya que automáticamente cuando se intenta acceder al archivo desde fuera se va a ejecutar un índex que está vacío, no tiene ninguna funcionalidad.
  • Podemos recibir un ataque de un usuario desde fuera de WordPress. Para ello podemos poner la condición de que nuestro archivo de plugin solo se ejecute si, por ejemplo, la variable global de WordPress ABSPATH, está definida. Si WordPress no ha definido esa propiedad significa que el intento de ejecución del código no viene desde WordPress y por tanto es un ataque. Para ello basta con añadir la siguiente línea de código:
defined('ABSPATH') or die;

 

Presentando nuestro plugin a WordPress

Para que WordPress detecte nuestro plugin y pueda mostrar la información del mismo al usuario en la vista de plugins de panel de administración necesitamos «presentarlo». Para ello, al igual que hacemos cuando creamos un tema para WordPress, necesitamos crear un bloque de comentarios con la siguiente información que WordPress va a necesitar:

/*
Plugin Name: Donalibros
Plugin URI: https://productdesigner.es
Description: Plugin para dotar de funcionalidad a la aplicación de Donalibros
Version: 0.1.0
Author: Fran Gallardo (PDA)
Author URI: https://gallardoramos.com
License: MIT
License URI: https://opensource.org/licenses/MIT
Text domain: donalibros-plugin
*/

Con ésta información WordPress ya puede mostrar nuestro plugin en el listado y puede ser activado, desactivado o desinstalado.

Nuestro plugin ya aparece en el listado de plugins

Añadiendo más funcionalidad al plugin

Una vez creado, registrado y secularizado nuestro plugin ya podemos añadir la funcionalidad que habíamos creado en el mismo. Pero si nos fijamos bien vemos que tenemos un problema. La función add_role que hemos programado ya ha cumplido su cometido: crear un rol. Una vez el rol ha sido creado no ejecuta nada nuevo. De hecho, si desactivamos nuestro plugin la funcionalidad sigue existiendo. Esto no es correcto.

Nuestro plugin debe añadir funcionalidad cuando está activo, y eliminar la funcionalidad cuando está desactivo o desinstalado.

Si recuerdas la anterior lección hablábamos de los «hook», que son esos momentos de ejecución de WordPress donde podemos añadir nuestra funcionalidad o modificar la ya existente. Pues bien, existe algo parecido para saber cuando un plugin está activado o desactivado. Parece buena idea el aprovechar estos eventos para activar y desactivar nuestra funcionalidad.

Para ello, lo primero que necesitamos es una función que elimine el rol que hemos creado. Para ello WordPress nos provee de la función remote_role(string $role). Vamos a utilizarla creando nuestra propia función:

function pda_remove_donante_role() {
  remove_role( 'donante' );
}

Con esta función estamos borrando el rol que hemos creado con el nombre de donante.

Ya tenemos las dos funciones que necesitamos, la que crea el rol y la que lo elimina. Ahora solo tenemos que ejecutarlas en el momento oportuno: cuando se active y se desactive el plugin. WordPress nos provee para ello de los siguientes hooks, donde __FILE__ es la variable global dinámica de la ruta del archivo que se está ejecutando:

// Hook de activación de plugin:
register_activation_hook( __FILE__, 'pluginprefix_function_to_run' );

//Hook de desactivación de plugin:
register_deactivation_hook( __FILE__, 'pluginprefix_function_to_run' );

Estos «hooks» tienen que ejecutar las funciones que hemos creado, por lo tanto:

register_activation_hook( __FILE__, 'pda_add_donante_role' );
register_deactivation_hook( __FILE__, 'pda_remove_donante_role' );

Y ya tenemos nuestro plugin totalmente terminado. Quedando más o menos con el siguiente código:

<?php
/*
Plugin Name: Donalibros
Plugin URI: https://productdesigner.es
Description: Plugin para dotar de funcionalidad a la aplicación de Donalibros
Version: 0.1.0
Author: Fran Gallardo (PDA)
Author URI: https://gallardoramos.com
License: MIT
License URI: https://opensource.org/licenses/MIT
Text domain: donalibros-plugin
*/

defined('ABSPATH') or die;

// Funcionalidad para añadir role customizado "donante"
function pda_add_donante_role() {
  add_role( 'donante', 'Donante', array (
    'read'	=> true,
    'edit_post'	=>	true,
    'remove_post'	=>	true,
    'delete_published_post'	=> true,
    'publish_posts'	=> true,
    'upload_files'	=> true,
    'edit_published_posts'	=> true
  ) );
}

function pda_remove_donante_role() {
  remove_role( 'donante' );
}

// add_action('init', 'pda_remove_donante_role');
register_activation_hook( __FILE__, 'pda_add_donante_role' );
register_deactivation_hook( __FILE__, 'pda_remove_donante_role' );

 

Conclusión

Como ves es relativamente sencillo añadir de forma segura la funcionalidad a nuestro producto. Este es solo un ejemplo y un punto de partida para que puedas experimentar en el mundo de la creación de plugins para WordPress. Te animo a que intentes añadir nueva funcionalidad a este producto y que lo compartas con la comunidad.

Contenidos del curso

(⟵ Ir al inicio del curso)

02 – Instalación y configuración de Frontity

En esta segunda parte veremos cómo instalar y configurar Frontity utilizando el tema que nos provee el framework por defecto. Terminaremos esta parte mostrando los libros que hemos creado anteriormente […]

Suscríbete a la lista de correo para recibir un resumen de las novedades y los contenidos de Product Designer Academy.

Suscribirme

* Nada de SPAM, sólo contenido de alto valor para ayudarte a crear productos digitales.