Reading time aprox: 7 minutes, 7 seconds
Mi primer plugin
¡Siempre hay una primera vez!
Es posible que cuando estás empezando algo, en este caso a sumergirte en el mundo WordPress, te preguntes cómo empezar una tarea y, también es posible, que busques y rebusques información sobre el tema.
Seguro que encuentras miles de artículos que te dicen cosas como, «¡Cómo hacer …», o «la forma fácil de hacer …»
Y cuando empiezas a leer, hay un montón de palabras técnicas y asumen que ya sabes de qué estan hablando. Yo quiero contarte cómo hacer las cosas fáciles y entendiendo lo que haces.
Mi primer plugin de WordPress
Para poder entender las cosas (al menos a mi me pasa) lo mejor es ir por partes, entendiendo cada paso, antes de dar el siguiente.
Lo primero es saber qué es un plugin y para qué sirve.
Puedes leer el artículo Cómo hacer un plugin en WordPress (explicado de forma más general y rápida) o puedes seguir aquí.
¿Qué es un plugin?
Salvando las distancias, un plugin en WordPress es como una aplicación para un sistema operativo. Ambos son trozos de código, en este caso en lenguaje php, que realizan una labor dentro del entorno del sistema que los contiene.
En ambos casos, para que sea posible «instalar» ese código dentro del sistema, se han de cumplir unas reglas y requisitos.
Los requisitos para un plugin en WordPress son de fácil cumplimiento, pero conviene conocerlos para que las cosas estén correctamente hechas y podamos aprovechar todas las ventajas que el sistema del entorno nos ofrece.
Como es realmente sencillo hacer un plugin, hay plugin hechos para casi todo, la calidad de la programación interna … «Hay de todo, como en botica» y la certeza de que cumplan completamente con nuestros requisitos …
Por eso aplaudo tu inquietud, nadie hará el plugin que tu necesitas, mejor que tu mismo.
¿Cómo sabe WordPress qué plugin usar?
La respuesta es muy sencilla: No lo sabe.
Jeje, No lo sabe ni puede saberlo. Como he dicho el plugin es un trozo de código que cumple una función. Así, si queremos que WordPress pinte la pantalla de rojo, harémos un plugin que le diga a WordPress que pinte la pantalla de rojo, pero WordPress, no tiene forma de saber que queremos la pantalla de color rojo.
WordPress se limita a recorrer el contenido del subdirectorio plugins bajo wp-content y ejecutar los trozos de código que encuentre y sean plugin.
WordPress, en su recorrido, no pregunta ni puede saber, qué hace el código, se limita a ejecutarlo
¿Cualquier código?
Jeje, bueno, «Cualquier código» es un poco exagerado, puntualicemos un poco: «Cualquier código que cumpla las condiciones de ser un plugin».
Si situamos un archivo de código php que, digamos, realice una suma de los primeros cien números primos, WordPress no lo leerá; pero no porque no sepa sumar, es que no sabe qué hacer con ese código.
Para que un archivo conteniendo un trozo de código en php sea considerado un plugin debe cumplir una serie de requisitos. Muy fáciles de cumplir, por otro lado.
Los requisitos de un plugin
El archivo que contiene el código, puede tener cualquier nombre. Si hemos podido almacenar el archivo con un nombre y la extensión «.php», el nombre ha cumplido con los requisitos de nombre del servidor y, por tanto, es legible por WordPress (que también está hecho en php).
Debe tener un comentario al principio del archivo, a modo de declaración.
Debe contener un código php válido.
Si alguna de estas condiciones no se cumple, el plugin será ignorado. Después de la versión 5.2 de WordPress, se ha realizado una gran labor para dar más rigidez o, si prefieres al anglicismo, más «resiliencia» al corazón de la aplicación.
Si un plugin está mal configurado, su código no es bueno o, ha quedado obsoleto. WordPress lo desactiva y te avisará con un mensaje de error, para que actualices o corrijas antes de activarlo de nuevo.
Para este ejemplo, vamos a crear un plugin «inofensivo», es decir, que no pasa nada si cometemos un error en su construcción, no podemos romper nada del sistema; ni pasa nada si el lugin no está, ni pasa nada si funciona, no hay nada crítico afectado.
¿Qué hará nuestro plugin?
Para que sea absolutamente transparente para nuestros visitantes, vamos a hacer cambios en un sitio que sólo tu ves, la pantalla de entrada al escritorio de administración o «backoffice».
Así nos aseguramos de que nada de lo que hagamos afectará la buena experiencia de tus lectores.
¡Vamos allá!
Tras instalar WordPress, lo normal es dirigirnos a la dirección https://misitio.xxx/wp-login.php, con lo que aparece la pantalla que nos solicita las credenciales para iniciar sesión. Si no hemos cambiado el aspecto de esa pantalla, veremos algo parecido a:
Para seguir con el ejemlo, suponemos que no hemos instalado ningún plugin de seguridad o de otro tipo que altere el funcionamiento del acceso.
Como habrá más de un acceso a la página por parte de otros administradores, editores, etcétera, queremos personalizar la página y que aparezca el logotipo de nuestra compañía, en lugar del logotipo de WordPress.
Para hacer el cambio, lo que necesitamos es subir el logotipo al servidor, en un sitio accesible a nuestra copia de WordPress. También necesitamos hacer un plugin que haga ese reemplazo.
Vamos a centrarnos en el contenido del archivo del plugin y luego nos ocuparemos de dónde y cómo subirlo al servidor para que nuestro WordPress lo use.
El contenido del archivo
Como el plugin que vamos a hacer modifica la entrada al WordPress, en un alarde de imaginación vamos a llamarle mi_entrada.php.
Cómo hemos dicho, la primera parte del archivo es un comentario que resulta identificativo para WordPress. Ese comentario será algo parecid a:
<?php /* Plugin Name: Mi Entrada a WordPress Plugin URI: https://misitio.xxx/ Description: Modificación del aspecto de la página de acceso a WordPress Version: 1.0 Author: [Pon aquí tu nombre] Author URI: https://misitio.xxx License: GPLv2 o posterior */ ?>
«Plugin Name» es el nombre que quieres usar para tu plugin; será el nombre por el que aparecerá en la lista de plugins instalados (menú Plugins -> Plugins instalados).
«Plugin URI» será la dirección web de la página donde tienes la descripción forma de descarga, etc. de tu plugin (no pasa nada si no la tienes aún).
«Description» Es la descripción de lo que hace tu plugin, la funcionalidad, que aparecerá en la lista de plugins.
«Version» Que corresponde a la versión o revisión de tu plugin.
«Author» Corresponde a tu nombre, como autor del plugin.
«Author URI» Normalmente es la página personal del autor, que no tiene porqué ser la misma que la del plugin.
«License» Por defecto, todo lo que se haga con WordPress está sujeto a la licencia GPL, pero si no es así o tu usas una distinta, ponlo aquí.
La siguiente línea corresponde a la instrucción de «final de comentario» de php, (*/).
La última línea de código es la instrucción de «final de código» de php, ?>, esto quiere decir que el código propiamente dicho de nuestro plugin, deberá estar situado entre las líneas de final de comentario (*/) y final de código (?>).
Lo siguiente que tiene que hacer nuestro plugin, es «hacer algo»; no vale de nada identificarse, si no vamos a realizar ninguna acción.
Pero si dejáramos el archivo como está, habríamos creado un plugin válido para WordPress, aunque no hace absolutamente nada.
Existe mucha documentación sobre WordPress y su funcionamiento, aunque a veces nos encontramos con que no está actualizada y, la actualizada, está en inglés.
En cualquier caso, en esta ocasión, la documentación está actualizada, ya que aunque se han hecho cambios en la pantalla de inicio, especialmente durante las versiones más recientes, lo básico se ha mantenido.
Lo que queremos hacer es reemplazar el logotipo de WordPress por el nuestro y, eso se hace sencillamente, llamando a la acción a un gancho de WordPress.
El código también es muy sencillo y lo explicaremos:
// Logo personalizado en login
add_action("login_head", "mi_cabecera_login");
function mi_cabecera_login() {
echo "
<style>
body.login div#login h1 a {
background-image: url('/images/hd-logo.png') !important;
background-size: 155px 101px !important;
background-position: center top !important;
background-repeat: no-repeat !important;
height: 101px;
width: 320px;
}
</style>
";
}
Se dice siempre que cada programador tiene su firma, la forma en que se escribe el código indica, muchas veces, quién fue su creador.
Por ejemplo, en este pedacito de código php, aprovechando la flexibilidad del lenguaje, esta:
Una línea con el comentario de lo que hace el código que viene a continuación.
Una línea que identifica la acción a realizar y cómo. Voy a explicarla por partes:
add_action("login_head", "mi_cabecera_login");
«add_action(» es la llamada a la función interna de WordPress que realizará la acción que afectará a una parte del código existente.
«‘login_head’» le indica a la función, dónde ha de realizar la acción, en este caso, en la cabecera de la página de entrada («login») en donde debe añadir lo que venga a continuación.
«‘mi_cabecera_login’» le dice qué añadir, en este caso, lo que indique el retorno de la función ‘mi_cabecera_login’.
A continuación tenemos la declaración de la función
function mi_cabecera_login() {Luego viene el cuerpo de la función, es decir, lo que queremos que haga y, en este caso, es una única línea de código, una sentencia echo, con todo el contenido que queremos insertar en la cabecera.
La línea echo introduce en la cabecera de la página, la declaración de estilo que modifica la existente, para poner la imagen del logotipo.
La forma de alterar la declaración existente, es:
- Especificando lo más concretamente posible, el elemento sobre el que actuamos: body.login div#login h1 a
- Diciendo al CSS, que es importante el cambio: !important
Si analizas el código, te habrás dado cuenta de que podríamos haber resumido todo esto en una sola sentencia, en lugar de usar una función con un echo, es decir, que retorne una cadena de caracteres, podríamos introducirla directamente. Algo como:
// Logo personalizado en login
add_action("login_head", "<style>
body.login div#login h1 a {");
Y todo lo que viene a continuación, pero hay varias razones para no hacerlo, entre ellas:
- Segmentación. Si ocurre algún error, es más fácil encontrarlo si tenemos el punto localizado, no sólo una laaaarga cadena de caractéres
- Claridad. Aunque el motor de PHP sea capaz de entender esa larga ristra de caracteres, nosotros simples humanos, tenemos dificultad en manejarla, hacerlo línea a línea es mas cómodo.
Y con esto concluimos la clase de hoy … No, ya puestos, vamos a incluir un par de cambios más.
Si lo dejamos así, el plugin cambiará el logotipo, pero si alguien hace clic (o toca) el logotipo, será redirigido a «http://wordpress.org», en lugar de a nuestro sitio web.
Vamos a cambiar ese comportamiento, para que las cosas concuerden.
WordPress ya tiene previsto el que los usuarios quieran cambiar esto, por lo que existe una función interna llamada «’login_headerurl’» que podemos alterar fácilmente.
Agregamos al código de nuestro plugin:
// personalizar url logo acceso
add_action( 'login_headerurl', 'mi_acceso_personal_url' );
function mi_acceso_personal_url() {
return 'https://misitio.xxx';
}
Y también podemos cambiar lo que aparece si algún visitante ve la página con un lector, exactamente, cambia el contenido de la «h1» (que actualmente es: «funciona gracias a wordpress»)
El código es:
//Cambiar texto alt del logo de login
add_action("login_headertext","my_custom_login_title");
function my_custom_login_title()
{
return 'Bienvenido a HD';
}
Ahora si, tenemos completo nuestro primer plugin de WordPress.
Ahora nos queda situarlo en un sitio adecuado para que realice su función en nuestro WordPress.
Por un lado, tenemos el archivo del código php llamado mi_entrada.php y por otro, el logotipo que queremos reemplazar, llamado hd-logo.png.
Este último, como hemos indicado en el código, deberá situarse en un subdirectorio llamado images, debajo del directorio raíz de nuestra instalación de WordPress.
Por su lado, el plugin propiamente dicho, deberá estar dentro de una carpeta o subdirectorio situado bajo el subdirectorio plugins, con el nombre mi_entrada, tendremos así un camino o «path»: /wp-content/plugins/mi_entrada/mi_entrada.php
Al acceder al menú Plugins -> Plugins instalados aparecerá un plugin con el nombre de «mi_entrada» que estará desactivado. Una vez se active, empezará a cumplir su función y podremos apreciar los cambios en la pagina de acceso.
¡Gracias por leernos!
¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!