Cómo crear un Plugin de WordPress

Según W3Techs, WordPress ya es la plataforma de un 43% de todos los sitios web del mundo, tendencia al alza. Su éxito se debe en gran parte a su enorme flexibilidad gracias a los temas y plugins que permiten implementar prácticamente cualquier cosa con WordPress.

Además, en el repositorio oficial de plugins de WordPress puedes encontrar decenas de miles de plugins gratuitos, para añadir todo tipo de funcionalidades a tu web. La situación es similar con los temas en la parte del diseño del interfaz de usuario de WordPress.

No obstante, esta situación no es perfecta. En la práctica, si tienes un proyecto que funciona, lo normal es que, con el tiempo, te surjan necesidades para las cuales no existe un plugin que haga exactamente eso que estás buscando.

Por eso, si eres capaz de programar grandes o pequeñas cosas a medida, pasarás a otro nivel en el partido que le sacarás a WordPress. Y eso es en lo que te voy a introducir en este post.

Antes de empezar, comentario: he visto muchos posts que pretenden explicarlo todo. Este post es de introducción. Está orientado a principiantes en este tema y voy a limitarme cosas sencillas y lo básico para que el contenido sea asequible.

El desarrollo de plugins tiene mucha chicha. Me parece un error pretender abordarlo todo en un post, te quedarás inevitablemente en la superficie y los lectores tendrán muchas dificultades en poner en práctica lo aprendido.

Hoy vemos lo más fundamental y en otros posts veremos más aspectos concretos del desarrollo de plugins.

¿Para qué sirve un plugin exactamente y para qué no?

Para poder desarrollar buenos plugins, tenemos que empezar por entender qué es exactamente un plugin y qué no. En las consultas que nos llegan vemos que mucha gente confunde conceptos.

Un plugin es un conjunto de ficheros con código fuente que añade una o varias funcionalidades a WordPress, “empaquetados” con un formato determinado que permite que el plugin se instale muy fácilmente en WordPress.

Como dice el imprescindible manual de desarrollo de plugins de WordPress, responden a una de las reglas sagradas en WordPress: no toques el núcleo de WordPress. Nunca.

Esto es así, primero porque cualquier actualización de WordPress “machacaría” esas modificaciones con el código de la actualización. En la práctica, no podrías actualizarlo.

Pero, además, sería una práctica nefasta porque las instalaciones de WordPress, aunque no las actualices (que ya es impensable por sí solo) se volvería incontrolables: al estar modificadas con cosas a medida, cada una sería de su padre y su madre, habría errores seguro, etc.

Con la arquitectura de plugins se consigue aislar el núcleo al 100% de los desarrollos a medida.

Eso quiere decir que puedes añadir la misma funcionalidad que tocan el núcleo, pero de una manera “limpia”, cuando se actualice WordPress los plugins, si están bien hechos, seguirán funcionando exactamente igual.

Y si metes la pata en el código, lo haces sólo en el plugin, no afectas a tu instalación de WordPress.

Por último, hay que distinguir también muy bien los plugins de los temas o plantillas de diseño de WordPress. Técnicamente son muy similares en cómo están articulados, se podría decir incluso que los temas son una especie de plugins “especiales”. Pero su propósito está muy diferenciado:

1. Los temas se dedican específicamente al interfaz gráfico de usuario. De hecho, tienen que implementar una serie de pautas específicas a ese respeto. La idea es facilitar al usuario al máximo todo lo que tiene que ver con el diseño de su web.
2. Los plugins implementan el resto de las funcionalidades. Por ejemplo: un plugin de SEO como Yoast SEO que añade funcionalidades que no vienen “de fábrica” con WordPress que facilitan trabajar en el posicionamiento en Google de los contenidos.

No obstante, en la práctica, esto no suele ser tan “purista” como te lo estoy contando yo.

Hay plugins como, por ejemplo, Elementor que implementan funcionalidades 100% de diseño (aunque no abarquen todo lo que abarca un tema).

Y al revés: temas que vienen muy completos añadiendo funcionalidades que serían típicamente de plugins: botones sociales, formularios de contacto, etc.

En cualquier caso, lo importante es que sepas ubicar correctamente cada concepto.

¿Qué herramientas necesito para crear plugins?

Lo que necesitas son dos cosas: conocimientos de programación en PHP, HTML y CSS. Y un entorno de desarrollo para trabajar con estos lenguajes de programación.

En el post de arriba te lo detallo todo mucho más, incluidos mis comentarios sobre JavaScript que es un cuarto lenguaje que para cosas sencillas no vas a necesitar, pero que para cosas más avanzados sí te puede hacer falta también.

Cómo crear la estructura básica de un plugin de WordPress

Bien, pues ya estamos listos para hacer código. 😊

Antes decía que para un plugin sea un plugins tiene que estar “empaquetado” como tal.

Esto quiere decir que debe seguir una estructura básica, una estructura muy simple que consiste tan solo en un directorio para el plugin y el fichero PHP principal del mismo.

Para ponerte un ejemplo, no me voy a comer mucho la cabeza, vamos a llamar nuestro plugin de ejemplo “MiPrimerPlugin”.

En este caso, lo coherente sería entonces un directorio y fichero principal con este mismo nombre o una variante. Personalmente sigo siempre el criterio de nombres en minúscula y separados por guiones, me parece limpio y estético cuando ves el código.

Es decir: un directorio “mi-primer-plugin” y un fichero principal “mi-primer-plugin.php”.

Veamos entonces qué debe ir en el fichero de código: mi-primer-plugin.php.

Este fichero es un fichero de código fuente del lenguaje de programación PHP que es el lenguaje de programación en el que está hecho WordPress.

Es el lenguaje de programación para aplicaciones web por excelencia, en este momento más del 70% de las webs en todo el mundo están hechas con este lenguaje. No tiene ninguna relación específica con WordPress, es simplemente el lenguaje que los creadores de WordPress eligieron.

La clave para convertir este fichero PHP en un plugin reconocible por WordPress es el siguiente comentario de PHP (el texto encerado entre “/*” y “*/”):

<?php
/*
Plugin Name: Mi primer plugin
Description: Plugin de demostración de cómo crear un plugin.
Author: Berto López
Version: 1.0
Plugin URI: http://www.ciudadano2cero.com
Author URI: http://bertolopez.com
*/

Este comentario tiene una estructura determinada que WordPress sabe reconocer, con seis atributos concretos que rellenas con los textos que quieras (y que tengan sentido, claro…):

• Plugin Name: éste es un atributo obligatorio (sin él no se reconocerá el plugin) con el nombre identificativo del plugin que aparecerá en la lista de plugins en el escritorio de WordPress.
• Description: la descripción del plugin que aparece en el listado de plugins.
• Author: nombre del autor del plugin.
• Version: el número de versión del plugin.
• Plugin URI: la URL del sitio origen del plugin.
• Author URI: la URL del autor. Esto lo rellenas a tu criterio también, puede ser la misma que la anterior u otra diferente (la web personal del autor, por ejemplo).

Si quieres, puedes añadir más campos, aquí puedes ver cuáles.

Fíjate también en la primera línea en el “<?php”, esto no es algo específico para el plugin sino la primera línea con la que debe empezar cualquier fichero PHP.

Aquí puedes ver cómo quedaría en un IDE:

¡Y esto es todo! Aunque el plugin como tal aún no hace nada, ya tenemos un plugin que podemos instalar y ver en la lista de plugins del escritorio de WordPress.

Veamos entonces cómo instalarlo:

Los ficheros del plugin tienen que ubicarse en la carpeta de plugins de WordPress, es decir, en “/wp-content/plugins/”.

Pero no te preocupes, para instalar un plugin no hace falta subir los ficheros manualmente a esa carpeta. Es mucho más fácil, aparte de instalar los plugins desde el repositorio (seguro que esto ya lo conoces), puedes subir los plugins como ficheros comprimidos .zip.

Para crear el fichero de plugin, debes añadir el directorio con sus ficheros a un fichero .zip que, por coherencia, deberías nombrar también de una manera similar. En este caso: “mi-primer-plugin.zip”.

Este fichero lo puedes subir desde el menú de WordPress de “Plugins / Añadir nuevo”. En la pantalla a la que accedes verás el típico botón de “Examinar…” que te permite seleccionar el fichero del plugin y subirlo.

A partir de ahí, todo (activación, desactivación, etc.) es exactamente igual que con cualquier otro plugin que hayas subido desde el repositorio de WordPress.

Si lo has hecho todo bien, el plugin debería aparecer en el listado de plugins de tu web de desarrollo tal como en la siguiente imagen:

¿A que mola verlo ahí? 😊

Cómo añadir tus propios shortcodes a WordPress

Pero bueno, por ahora, es un plugin un poco “triste”, un plugin que no hace absolutamente nada porque aún no hemos desarrollado código que haga algo. Así que toca darle algo de “chicha”.

Para ello he creado un ejemplo que sin ser del todo simple, creo que tampoco se pasa en complejidad. Eso nos permitirá ver ya bastante “chicha” útil del desarrollo de plugins.

El ejemplo implementa plugin para crear un banner como el de hosting que ves arriba en este post, pero aplicado a otras cosas. Para el ejemplo he supuesto que es una persona que se dedica profesionalmente a Microsoft Office y vende productos propios.

Para ello, el plugin que he desarrollado como ejemplo para este post implementa dos shortcodes (código cortos) que permiten generar banners como el que ves aquí:

Los shortcodes son ideales para esta aplicación porque usas el shortcode en cuestión como si fuera contenido normal y en el lugar en el que has puesto el shortcode se verá el contenido creado por ese shortcode, normalmente generan algo en HTML.

La sintaxis de los shortcodes es un código entre corchetes tal como puedes ver a continuación. En nuestro ejemplo he implementado dos variantes:

• [excel-banner]: genera un banner con una serie de ofertas para productos para Excel.
• [word-banner]: lo mismo, pero para productos para Microsoft Word.

Si mañana se quiere cambiar las ofertas es tan simple como cambiar en un minuto los textos en el código y actualizar el plugin. Así se cambiarán automáticamente en todas las páginas que lo usen (que pueden ser decenas o centenares con el tiempo).

Te puedes bajar el código aquí:

[botón descarga]

Por cierto, el botón de descarga también está hecho con un shortcode. 😉

No voy a explicar todos los detalles del código en este post, el código está ampliamente documentado y te debería servir para entender cómo funciona todo.

No obstante, voy a destacar algunos aspectos.

En primer lugar la estructura de ficheros. Personalmente te recomiendo esta estructura:

• El fichero PHP principal tiene que ir a nivel raíz de la carpeta del plugin, tal como ya lo habíamos hecho al principio.
• En este mismo nivel te recomiendo crear las carpetas “css”, “images” y “src”. En ellas se ubicarían las hojas de estilo CSS, las imágenes que use tu plugin y los ficheros PHP. En este último caso, si empiezan a ser muchos ficheros PHP, te recomiendo encarecidamente crear una estructura bien organizada de subcarpetas.
• En caso de utilizar ficheros de JavaScript lo suyo sería añadir otra carpeta “js”. En nuestro ejemplo no lo usamos, así que no verás la carpeta.

En definitiva, la estructura quedaría tal como puedes ver en la parte izquierda de la siguiente imagen:

Si te fijas en el código, verás que he añadido varias cosas: una hoja de estilo CSS, un fichero de imagen (para el icono en verde) y el fichero PHP “banners.php”.

En banners.php se implementa la “chicha” del plugin el código que componte el HTML del banner. Es un código PHP muy simple que toda persona con un nivel básico de PHP aceptable debería entender sin problemas.

Eso sí, he tratado de que sea “eficiente” usando constantes, etc. para que sea muy fácil actualizar los textos ante cambios y añadir nuevos banners para otras cosas. Podrás ver también que todo está programado orientado a objetos que es lo suyo.

Desde el fichero “mi-primer-plugin.php” se hace el resto. Cabe las siguientes secuencias de código:

add_action('wp_enqueue_scripts', array($this, 'addStyles'), 9999);

Aquí estamos usando una las facilidades que nos da el interfaz de programación (API) de WordPress para programar plugins y temas: los “action hooks”. Es a través de este tipo de mecanismos cómo integramos nuestro código con el núcleo de WordPress, pero sin mezclarlos.

Los action hooks son una especie de “ganchos” para funcionalidades de nuestro código que queremos que se ejecuten en un momento determinado.

En ese sentido, en el código de arriba llamamos a la función add_action() del núcleo de WordPress con los siguientes parámetros para “enganchar” un método de nuestro plugin (addStyles) al gancho en cuestión (wp_enqueue_scripts):

• 'wp_enqueue_scripts': el nombre del gancho de WordPress para añadir estilos CSS y JavaScript.
• $this: es un objeto de la clase que contiene el método que va en el siguiente parámetro.
• 'addStyles': es el nombre del método que será llamado por el hook.

Como seguramente ya sepas, WordPress “construye” las página a las que accede el usuario dinámicamente, es decir, no son ficheros HTML estático, sino que ejecuta una compleja secuencia de PHP donde carga primero los plugins y el tema, luego lee el contenido de la base de datos, etc.

Durante ese procese es cuando se ejecutan todos los hooks de WordPress a los que los plugins y el tema se pueden enganchar para que el núcleo llame a las funciones (en PHP no orientado a objeto) o métodos (en PHP orientado a objetos) registrados.

Esto se conoce también como “callbacks”, llamadas “de vuelta” porque funcionan al revés: en vez de llamar directamente a una función o método, registramos su nombre para que sea llamada.

Total, que el núcleo de WordPress acabará llamando a este método de nuestro plugin:

public function addStyles() {
  // Método que añade nuestra hoja de estilos a la página actual.
  wp_enqueue_style('mi-plugin-styles-css',
  plugins_url("/css/style.css", __FILE__));
}

Y aquí lo que estamos haciendo con el método wp_enqueue_style(), que no debemos confundir con el hook anterior, es añadir nuestra hoja de estilo en la ruta “/css/style.css” dentro de nuestro plugin a WordPress para que acabe insertándola con las demás en la página HTML final generada.

Por último, quiero destacar el código que crea nuestros dos shortcodes finales que vienen con este plugin, otro de los mecanismos de integración que nos ofrece el API de WordPress. Son sólo dos para el ejemplo, pero, por supuesto, podrías ampliar este plugin con tantos otros como quisieras:

// Crear una instancia de la clase MiPluginBanners para poder usarla.
$myBanners = new MiPluginBanners();
// Crear los shortcodes. Cada uno de los shortcodes se asocia …
add_shortcode("excel-banner",array($myBanners,"getExcelBanner"));
add_shortcode("word-banner",array($myBanners,"getWordBanner"));

¿Qué está sucediendo aquí?

Los shortcodes tienen ciertas similitudes con los hooks: aquí también la idea es registrar una función o método de una clase para que sea llamado por el núcleo de WordPress en un momento dado.

Pero en este caso se asocia simple a un nombre (del shortcode), “excel-banner” y “word-banner” en nuestro caso.

Las llamadas se harán cuando WordPress al procesar el contenido se encuentre estos shortcodes en el mismo. En ese momento, ejecutará el shortcode en cuestión y lo sustituirá (como si fuera un comodín) con la salida generada por la función o método llamado (que será normalmente HTML).

Y así es como tendremos finalmente en la página a nuestro banner.

Como ves, los shortcodes son una herramienta del API de relativamente fácil de utilizar y que da mucho juego. Además, se puede hacer mucho más con ellos: pueden usarse atributos para pasarles valores desde el contenido, etc.

Merece la pena que profundices un poco más, así que te dejo estas lecturas complementarias a este post: