Como Crear un Plugin Sencillo en WordPress

por | noviembre 16, 2019

Tranquilo, no te asustes. A todos nos da miedo lo desconocido, tenemos pánico a intentar realizar algo para lo que no creemos que estemos capacitados. A continuación, vas a comprobar como crear un plugin sencillo en WordPress y, te darás cuenta, de que no es tan complicado como parece.

Conocimientos Previos

No es que tengas que ser un mago de la programación, pero sería conveniente saber, aunque sea sólo por encima, lo que es PHP, HTML y CSS. Te repito, no es necesario que seas un experto en éstos temas, pero hay que tener algunas mínimas nociones para comprender lo que estamos haciendo.

Estructura de una Página Web

Las páginas web pueden contener código HTML, CSS y Javascript. Cuando son leidas por el navegador, las transforma en páginas que visualmente los usuarios pueden interpretar.

Una página web esta dividida en secciones. Cada sección muestra un tipo de información determinada. Como ejemplo básico podía valer la siguiente distribución: cabecera, contenido, barra lateral y pie de página.

¿ Como Muestra el Navegador la Página ?

Cuando el navegador lee la página, la interpreta y la muestra de izquierda a derecha y de arriba hacia abajo de forma secuencial. Los elementos van apareciendo a medida que se van cargando, uno a continuación del otro.

Si queremos manipular algún elemento mediante Javascript, evidentemente debe estár cargado, de lo contrario no podremos acceder a él.

Aqui tienes una muestra de cuál sería el código fuente y como se vería esta simple página.
plugin-sencillo-wordpress-html-pagina-web

Añadiendo Funcionalidad a WordPress Mediante Hooks

WordPress nos permite extender sus funcionalidades de una forma muy sencilla, mediante los llamados hooks (o enganches). Un hook, no es más que un evento que se dispara al ir creando la página web. Por ejemplo, al mostrar la cabecera se produce un evento, también al insertar un comentario se produce otro evento, etc.

WordPress los llama acciones y filtros. Para crear este sencillo plugin en WordPress, tan sólo haremos uso de las acciones (action). Para añadir nuestro propio código, nos debemos suscribir a la acción concreta a la que pretendemos acceder. Por ejemplo, si quiero mostrar algún contenido en la zona de noticias del back-end, tendría que utilizar el siguiente código PHP.

 add_action('admin_notices', mi_funcion_php) 

¿ Donde se Guardan los Plugins en WordPress ?

Los plugins se almacenan en la ruta wp-content/plugins. Cada plugin se guarda en una carpeta con su mismo nombre. En su interior, está todo el código necesario para que funcione de forma adecuada. También es posible, que un plugin esté formado por un sólo archivo PHP y que no sea necesario crear una carpeta determinada.
Sencillo plugin wordpress

Aunque lo más habitual es, que cada plugin cree su propia carpeta, en donde estarán todos los archivos HTML, CSS, Javascript y PHP de los que se compone.

¿ Como Sabe WordPress Cual es el Archivo Principal del Plugin ?

Cuando WordPress lee la carpeta de un plugin para identificar cual es el archivo principal, buscará uno cuya cabecera tenga la información del mismo.

Este archivo debe contener datos como: nombre del plugin, versión, autor, descripción del plugin, url del plugin, etc. Debe ser un archivo con extensión PHP, con una cabecera como mostramos a continuación.

<?php
/*
Plugin Name: Mostrar Hora Servidor
Plugin URI: http://pluginswordpress.org
Description: Muestra la hora del Servidor en el back-end. 
Author: Ventura Rodríguez
Version: 0.3
Author URI: https://pluginswordpress.org
*/
?>

Con este código, bastaría para tener un plugin listo para funcionar en WordPress. Lo único que faltaría sería comprirlo en un archivo .ZIP y añadirlo desde el menú de plugins. También podríamos subir el archivo .PHP sin comprimir por FTP a la carpeta plugins (o directamente copiarlo si estamos trabajando en modo local) y, tendría el mismo efecto.

El plugin tal como está queda muy bonito, pero es inservible porque no hace absolutamente nada.

Enganchándonos a un Hook

Para que el plugin haga algo, aunque sea muy simple, lo que haremos será engancharnos a un hook y ejecutar el código de una función que nosotros configuremos. El código es el siguiente.

function mostrar_hora_servidor() {
  echo '<p id="plugin-hora-servidor">' . date("H:i:s", time()) . '</p>';
}
add_action('admin_notices', 'mostrar_hora_servidor');

El código es muy sencillo. Por un lado tenemos la función  mostrar_hora_servidor(), con la que creamos un simple párrafo,  que muestra la hora del servidor utilizando la función date() y también la función time().

Para que mostrar_hora_servidor() se pueda ejecutar, tenemos que asociarla con algún hook. En la última línea add_action('admin_notices', 'mostrar_hora_servidor'), lo que hacemos es precisamente eso.

Cambiando el Aspecto Visual

crear-sencillo-plugin-hora-servidor-sinestilos
Este sería el resultado final, lo malo es que visualmente, el aspecto de la hora no resulta demasiado atractivo. Lo que haremos a continuación, será maquetar y darle un poco de colorido al párrafo que muestra la hora del servidor. Para conseguirlo, le aplicaremos unas cuantas propiedades CSS, que harán que la hora no se vea tan simple.

Código del Plugin Completo en WordPress

Aquí tenemos el plugin terminado. Para cambiar el aspecto, nos hemos enganchado al hook de la cabecera con este código  add_action('admin_head', 'aplicar_css'). Por tanto, cuando se produzca el evento, ejecutaremos la función que cambia el aspecto de la hora del servidor.

Lo único que nos queda es guardarlo con extensión .PHP, comprimirlo en un .ZIP y, añadirlo a nuestro WordPress.

<?php

/*
Plugin Name: Mostrar Hora Servidor
Plugin URI: http://pluginswordpress.org
Description: Muestra la hora del Servidor en el back-end. 
Author: Ventura Rodríguez
Version: 0.3
Author URI: https://pluginswordpress.org
*/

add_action('admin_notices', 'mostrar_hora_servidor');

function mostrar_hora_servidor() {
  echo '<p id="plugin-hora-servidor" onclick="javascript:alert(this.id)">' . date("H:i:s", time()) . '</p>';
}

add_action('admin_head', 'aplicar_css');

function aplicar_css() {
?>
  <style>
    #plugin-hora-servidor {
      font-weight: bold;
      background-color: orange;
      color: black;
      font-size: 30px;
      width: 150px;
      border: 4px solid black;
      text-align: center;
      box-shadow: 5px 10px 18px #888888;
      border-radius: 50px 20px;
      position: fixed;
      bottom: 0;
      right: 5px;
      z-index: 999;
    }
  </style>
<?php
}

Plugin Activado

Una vez activado el plugin tendrá el siguiente aspecto. Mas adelante veremos como se puede hacer una página de configuración para guardar datos relativos al plugin, como colores, posición, efectos, etc.

Plugin-hora-servidor-final

Un importante apunte final que había olvidado. Existen miles de plugins para WordPress. Cada programador, crea sus propias funciones con los nombres que estima oportunos. Se puede dar el caso, de que el nombre de alguna función coincida con la de otro plugin. Esto provocaría una colisión de nombres y WordPress mostraría un error.

En la medida de lo posible, para evitar esto, debemos colocar un prefijo a la función que estemos programando. Las regla que se suele seguir es, comenzar la función con una abreviatura que represente el nombre del plugin. Por ejemplo, en nuestro caso como el plugin se llama mostrar hora servidor, la abreviatura sería mhs.

Por tanto los nombres de las funciones serían los siguientes.

function mhs_mostrar_hora_servidor()
function mhs_aplicar_css()

También se pueden usar espacios de nombres para evitar colisionar con otras funciones, pero esto lo veremos mas adelante, otro día y en otro artículo.

Ahora que sabes como crear un plugin sencillo en WordPress, te invito a que lo modifiques y hagas cualquier cambio que se te pueda ocurrir.

El plugin en formato ZIP preparado para instalar lo puedes descargar pinchando aquí.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 5)

Deja una respuesta

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