Cómo hacer un plugin para WordPress

En este video te muestro como hacer tres plugins para WordPress. Para seguir el video necesitarás una pequeña base de PHP (muy pequeña), de WordPress y de como conectarte a un servidor por FTP.

Estos cuatro plugins tienen muy poquito código, pero sin embargo, hacen algo que me útil que me ha venido bien en el proceso de desarrollo de una página web y sobre todo, manejan conceptos fundamentales e indispensables a la hora de hacer un plugin (carga de estilos, de JavaScript, crear un shortcode y captura de los atributos de un shortcode).

Los he ordenado atendiendo a su dificultad de desarrollo, de menos a más.

Una vez creados y editados los ficheros del plugin, deberás seleccionarlos y añadirlos a tu wordpress llendo a Plugins Añadir nuevo.

Descripción y descarga de los plugins para WordPress que vamos a ver:

Plugin 1: Custom JS

En muchas ocasiones necesito añadir código Javascript a mis desarrollos en WordPress. Ya existen varios plugins que me permiten hacer esto, pero la ventaja de este es que yo mismo edito el código Javascript con mi editor de código habitual, pudiendo utilizar toda su potencia (números de línea, autocompletado, resaltado de sintaxis). Además, si me equivoco, volver atrás es muy fácil con control+z. Si quiero volver atŕas en una publicación de WordPress que ya he salvado, el proceso es mucho más tedioso.

<?php 
/**
 * Plugin Name: Monteserín Custom JS
 * Plugin URI: https://pablomonteserin.com
 * Description: This plugin injects Javascript code at the bottom of the page
 * Version: 1.0.0
 * Author: Pablo Monteserín
 * Author URI: https://pablomonteserin.com
 * License: GPL2
 */

add_action('wp_footer', function(){?>

<script>
	// Here comes the code
</script>
<?php }  ,9999); ?>

Como verás, este plugin tiene una llamada de PHP al método add_action. Este método se encarga de inyectar un código en alguna parte de nuestra web. Como puedes ver, este código recibe tres parámetros:

  • wp_footer: esto es un hook. Indica a wordpress en que posición será insertado nuestro código fuente en la web. En este caso, wp_footer indica que será insertado al final de la página, justo antes del cierre del body. Puedes consultar aquí otros hooks de WordPress, o si tu plantilla es Genesis (como es mi caso), hooks específicos de esta Genesis.
  • function…: el segundo parámetro es la función que vamos a ejecutar. Yo estoy usando una función anónima (no le he definido un nombre). En otros muchos sitios donde busques documentación no suelen usar funciones anónimas (me gusta más con función anónima). Te lo comento para que no te resulte raro.
  • 9999: el tercer parámetro es opcional. Indica la posición en la que será cargado nuestro script dentro de wp_footer. He puesto un número bastante alto para que en el caso de que haya varios scripts, el mío se ejecute el último.

Plugin 2: Banner

En este caso, el plugin será usado en la página web mediante un shortcode.

Imagina que quieres poner un banner en varias páginas de tu sitio web. Si el día de mañana quieres cambiar este banner, tendrías ir cambiando una a una todas las páginas en las que lo incluíste. Sin embargo, si pones el banner utilizando este plugin, sólo te hará falta actualizar el código en un único sitio.

/**
 * Plugin Name: Monteserin Banner
 * Plugin URI: https://pablomonteserin.com
 * Description: Inserta un banner de publicidad con el shortcode banner
 * Version: 1.0.0
 * Author: Pablo Monteserín
 * Author URI: https://pablomonteserin.com
 * License: GPL2
 */
add_shortcode( "banner", function($atts, $content){
	$output = '<div style="background-color: #00A9FF; font-size: 14px; line-height: 24px; color: #070707; text-align: center; padding: 6px 18px;">Suscríbete a mis cursos de tecnologías web <a style="display: inline-block; background-color: #FF7020; border: 1px solid #fff; border-radius: 6px; font-size: 14px; font-weight: normal; color: #fff; padding: 3px 8px; text-decoration: none;" href="#" target="_blank">SUSCRIBIRME</a></div>';
	return $output;
});

Plugin 3: Iframe responsive de youtube

Técnicamente, este plugin es una ampliación del anterior. Utilizaremos un shortcode para usarlo en nuestra página web, pero ahora a este shortcode le podremos pasar atributos.

Personalmente utilizo este plugin para colocar los videos de youtube en mis páginas de wordpress. El código CSS del plugin hace que el iframe del video se ajuste, manteniendo las proporciones, al lugar donde fue puesto.

<?php 
/**
 * Plugin Name: Monteserin Responsive Youtube Iframe
 * Plugin URI: https://pablomonteserin.com
 * Description: Inserts a responsive iframe with a youtube vide. 
 * Version: 1.0.0
 * Author: Pablo Monteserín
 * Author URI: https://pablomonteserin.com
 * License: GPL2
 */
add_shortcode( "mi", function($atts, $content){
	$id = $atts['id'];
	return '<div class="responsiveContent"><iframe width="560" height="315" src="https://www.youtube.com/embed/'.$id.'?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
});
?>

Plugin 4: Load font awesome

Muchas páginas utilizan los iconos de font awesome. Sin embargo, para poder usar estos iconos, es necesario cargar una hoja de estilos y varias tipografías. Este plugin viene con todo esto integrado, para cargar estos ficheros fácilmente. Descarga font-awesome.

<?php 
/**
 * Plugin Name: Monteserín loads Font Awesome 5.2
 * Description: This plugin loads font awesome css 5.2, so you can insert font awesome codes in you page
 * Version: 1.0.0
 * Author: Pablo Monteserín
 * Author URI: https://pablomonteserin.com
 * License: GPL2
 */

add_action('wp_enqueue_scripts', 'loadfontawesomecss', 999);

function loadfontawesomecss(){
	wp_register_style( 'fontawesomecss', plugin_dir_url( __FILE__ )."includes/css/all.min.css");
	wp_enqueue_style( 'fontawesomecss');
}
?>

Aviso Legal | Política de privacidad