¡Hola de nuevo! Aquí que ando poniéndome al día con WordPress, y traigo un simple codekata para hacer un plugin básico para WordPress. Con este plugin se puede añadir contenido en la cabecera del frontend. Podemos usarlo para añadir códigos de Google Analytics, Facebook, Twitter.. editar estilos o añadir librerías Javascript para modificar el frontend.. etc..
Se trata de un plugin básico del tipo ¡Hola mundo! para WordPress. Punto de partida para customizar el frontend en instalaciones de WordPress. Es tan sencillo, que con ficheros como este no necesitas crear una plantilla hija completa para empezar a personalizar el frontend.
Tampoco necesitarás depender de otros módulos. Con lo que a base de pequeños plugins como este con tus personalizaciones, podrás instalar o desintalar los otros tantos módulos que hayas estado usando sin miedo a perder tus cambios ?
Un poco de teoría, pero poco xD
La idea es que en WordPress, de igual manera que en Prestashop, Magento, Drupal, Symfony.. ocurren eventos. Nos podemos entonces enganchar a estos eventos para realizar acciones que customicen el CMS.
A saber, en WordPress estos eventos se llaman hooks, y nos podemos enganchar de dos formas:
- Con un action.
- Con un filter.
A saber, con un action añadiremos acciones en el momento exacto del disparo de cada evento llamado hook. Y con un enganche del tipo filter, lo que haremos será filtrar el contenido que se va a enviar al navegador para realizar acciones sobre este.
Al grano, el código fuente del plugin
Simplemente añadimos en el fichero de nuestra instalación wp-content/plugins/jnj.php el siguiente contenido:
<?php
/**
* Plugin Name: Jnj plugin
* Plugin URI: https://jnjsite.com/
* Description: A tiny plugin made by Jnj just for testing purposes.
* Version: 0.0.1
* Author: Jaime Niñoles
* Author URI: https://jnjsite.com/.
*/
add_action('wp_head', 'jnj_wp_head');
function jnj_wp_head() {
$content = '<!-- THIS IS A SIMPLE CONTENT TO ADD FOR TESTING PURPOSES -->';
$content .= '<style>'
.'/* CSS styles here */'
.'</style>';
$content .= '<script>/* A Javascript script */</script>';
echo $content;
}Ya puedes entonces editarlo, y añadir en la variable $content todo lo que necesites ? Lo siguiente será, una vez subido o creado el fichero en WordPress, activarlo desde el listado de plugins. Se activa igual que cualquier otro plugin, en el Panel de control > Plugins > Plugins instalados.
Lo siguiente es que podemos ahora además trabajarlo directamente desde el mismo panel de control. Esto es un poco peligroso, pero es muy práctico. Podemos ir al Panel de control > Plugins > Editor de plugins, y al seleccionarlo ya podemos editarlo para lo que necesitemos. Tenemos que ver algo como lo de la imagen siguiente:
Una vez editado, guardado y activado podemos ir al frontend y debemos de ver algo parecido a lo siguiente si miramos el código fuente:
Un poco más de explicaciones
Si queremos extender un plugin como este, haciendo todo tipo de personalizaciones, no tenemos más que recordar el apartado de la teoría de arriba. Sólo hay que buscar en la documentación donde podemos engancharnos, es decir, a qué hook podemos hacer action o filter para ir customizando nuestro WordPress.
Podríamos por ejemplo usar el hook wp_body_open para añadir códigos en la apertura del <body>. Si por ejemplo los códigos queremos añadirlos antes del cierre de la etiqueta </body> podemos usar el hook wp_footer.
Terminando, enlaces y más ayuda
Para terminar sólo me queda remitirte a la documentación oficial, donde está el listado oficial de los hooks disponibles. Y también dejo enlace a la ayuda sobre el hook wp_head al que nos hemos enganchado en este post:
- https://developer.wordpress.org/reference/hooks/
- https://developer.wordpress.org/reference/hooks/wp_head/
Y para los que nos gusta escudriñar las documentaciones.. aquí toda la documentación oficial sobre WordPress:
No dudes en dejar un comentario aquí abajo o en contactar conmigo de forma privada aquí. Otro día más, ¡un saludo!
