Como crear un plugin de wordpress

En este articulo veremos como crear un plugin de 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 necesitaras tener acceso a una computadora o servidor con WordPress instalado.

Creando la estructura básica de un plugin.

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:

Estructura de un plugin de wordpress

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.

Activar plugin de WordPress

Agregando 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 por que 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 cual 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 encargo de imprimir el código de el 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 por que 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 seria 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *