En este artículo veremos cómo crear un plugin para WordPress, este es el primero de una lista de artículos en los que iremos profundizando hasta crear plugins más complejos.
Para poder seguir los siguientes pasos necesitarás tener acceso a una computadora o servidor con WordPress instalado.
Crear la estructura básica de un plugin para WordPress.
Todos los plugins de WordPress se encuentran en la carpeta wp-content/plugins de la instalación de WordPress. Para crear un plugin debemos crear una carpeta en esa ubicación y dentro de esa carpeta creamos un archivo de PHP, de preferencia con el mismo nombre de la carpeta. Por ejemplo:
Es importante que el archivo de PHP inicie con un comentario con esta estructura:
<?php
/*
Plugin Name: ABC Demo de plugin
Plugin URI: https://www.codigonaranja.com
Description: Descripcion del plugin
Version: 1.0
Author: Luis Cruz
Author URI: https://www.codigonaranja.com
License: GPLv2
*/Para detectar el plugin, WordPress va a escanear los archivos en la carpeta wp-content/plugins y buscará archivos de PHP con un comentario que tenga una estructura similar.
Con esto es suficiente para que WordPress detecte nuestro plugin, y aunque aún no hace algo, podemos activarlo desde el dashboard de plugins.
Como agregar contenido en la cabecera HTML
Ahora vamos a hacer que el plugin sea un poco más interesante, vamos a crear un plugin que agregue un script de JS en la cabecera, haremos esto para insertar el código de seguimiento de Google Analytics.
Abre el archivo de PHP y le agregas este código al final:
add_action( 'wp_head', 'agregar_ga' );
function agregar_ga() {
echo "
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
m.parentNode.insertBefore(a,m)})(window,document,'script',
'https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-0000000-1', 'auto');
ga('send', 'pageview');
</script>";
}Ahora si activas el plugin y miras el código HTML que genera tu sitio de WordPress, verás que se ha agregado un script en la etiqueta HEADER.
El código anterior funciona porque WordPress permite ejecutar acciones en diferentes fases de la construcción de la página web a mostrar, esto se logra con la función add_action. Para entenderlo mejor, veamos cuál es la sintaxis.
add_action ( 'hook_name', 'funcion_a_ejecutar', [prioridad], [argumentos] );El primer parámetro es el nombre del “Hook”, podemos verlo como la sección que deseamos afectar, en nuestro ejemplo usamos wp_head que se usa para modificar el contenido de las etiquetas <head> a generar. Literalmente hay cientos de Hooks que puedes usar y si quieres conocer algunos que podrías llegar a usar, puedes revisar esta página web.
El segundo parámetro es el nombre de la función que WordPress debe ejecutar, en nuestro ejemplo la función se encargó de imprimir el código del script de JS.
El tercer parámetro es la prioridad con que se debe ejecutar nuestra función, el valor predeterminado es 10, y entre menor valor, mayor es la prioridad. Esto puede serte útil porque también hay otros plugins que podrían estar inyectando código en el Hook que tú elijas, y quizá tú necesites que tu función se ejecute al inicio o al final de la cola.
El último parámetro es para indicar la cantidad de parámetros que la función puede aceptar.
¿Qué más hace falta?
El plugin ya hace algo valioso, pero sería mejor si permitiera configurar en algún lugar el código de seguimiento de Google. Pero en los siguientes artículos escribiré como hacer eso y mucho más. Por el momento quería dejar todo lo más simple posible.