Crear un plugin en WordPress para funcionalidades

1 min 11/06/2019

Cuando empecé a trabajar con WordPress me pasaba que cada función que veía por internet para mejorar mi web la metía en functions.php. Y todo el CSS iba para CSS adicional. Seguro que a ti también te pasa! Y no está mal. Todo funciona bien. El problema es cuando decides cambiar de tema. Empezamos con los copia y pega!! Esta mezclado el CSS de la plantilla con el CSS de ciertas funcionalidades. Hooks que son propios de la plantilla con otros que son de funcionalidades añadidas. ¡Esto es un lío! como diría mi hijo :).

Lo mejor es separar el código propio de la plantilla del de esas funcionalidades añadidas. Y la mejor solución para ello es crear un plugin en WordPress específico para funcionalidades.

En este post te voy a contar como crear un plugin en WordPress y como añadir un archivo CSS y otro de javaScript (para meter el respectivo código de esas funcionalidades añadidas. El ejemplo lo voy hacer desde el Administrador de archivos de cPanel, pero lo puedes hacer desde FTP, o desde el gestor de archivos que tenga tu hosting.

Sino quieres complicarte, puedes contratar mis servicios como desarrollador front-end para WordPress.

Crear un plugin WordPress desde cero

Para ello nos vamos al Administrador de archivos de cPanel. En la carpeta donde esté instalado nuestro WordPress nos vamos a wp-content->plugins y creamos una nueva carpeta que le podemos poner el nombre que queramos. Yo le puse dv-funciones.

Dentro de esta carpeta creamos un archivo php nombrándole igual que la carpeta. En mi caso dv-funciones.php.

En este archivo que acabamos de crear ponemos el siguiente código.

<?php
/*
Plugin Name: DV Funciones
Plugin URI: https://www.davidviña.es
Description: Plugin para añadir funcionalidades
Version:1.0
Author: David Viña
Author URI:https://www.davidviña.es
License:GPL
*/

En este archivo es muy importante poner la etiqueta <?php de apertura. El resto de código es el que se recomienda en el Codex de WordPress, aunque lo único obligatorio sería el Plugin Name.

Con tan solo esta información ya tendríamos nuestro plugin creado. En tu panel de control de WordPress, vas a Plugins->Plugins instalados. Ahí ya os aparece vuestro plugin y os da la opción de activar.

Dentro de ese archivo dv-funciones.php ya podemos añadir todos los hooks personalizados que queramos. Pero lo idóneo es separar el código para un buen mantenimiento poniendo en este archivo solo las llamadas al resto de archivos.

Crear un archivo adicional de php

Vamos a crear un nuevo archivo php en la carpeta raíz de nuestro plugin dónde sí vamos a poner los hooks y funciones específicas de funcionalidades.

Creamos un archivo nuevo y le ponemos fuciones.php (yo soy muy original con los nombres ??). Vosotros le podéis poner el nombre que queráis.

Para que este archivo funcione, en el archivo dv-funciones.php (el archivo principal de nuestro plugin) añadimos:

include(plugin_dir_url(__FILE__).'funciones.php');

Ya tenemos listo nuestro archivo para añadir funciones.

Ahora vamos añadir archivos para CSS y javaScript para nuestras funcionalidades.

Añadir archivo CSS y javaScript en un plugin de WordPress

Creamos una carpeta llamada CSS en la raíz de nuestro plugin y dentro un archivo que le podemos llamar custom.css (o como queramos). Dentro de este archivo es dónde ponemos todo el CSS de funcionalidades y que no dependa de la plantilla.

Pero tenemos que registrar este CSS para que funcione. En el archivo dv-funciones.php (el principal, ya sabes), ponemos el siguiente código:

// Register Style
function custom_styles() {

	wp_register_style( 'dv-custom', plugin_dir_url(__FILE__).'css/custom.css', false, '1.0' );
	wp_enqueue_style( 'dv-custom' );

}
add_action( 'wp_enqueue_scripts', 'custom_styles',10 );

Con esto ya tenemos registrado el archivo CSS. Sino se aplicaran los estilos es por el orden de carga. Por defecto es 10, pero si hay otros estilos que se cargan posterior y afectan al mismo elemento, no se va aplicar dicho estilo. Esto se soluciona cambiando el 10 en add_action por un número superior hasta conseguir que sea el último en cargar. El orden de carga lo puedes ver en el inspector de Chrome sin tener activo ningún plugin de cache o minificación de código.

Para el javaScript el proceso es similar. Añadimos una carpeta js y dentro un archivo cusmtom.js. Y para registrarlo usamos el siguiente código:

// Register Script
function custom_scripts() {

	wp_register_script( 'main', plugin_dir_url(__FILE__).'js/custom.js', array( 'jquery' ), '1.0', true );
	wp_enqueue_script( 'main' );

}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

Conclusión

Como podéis ver, crear un plugin para añadir funciones personalizadas es muy fácil. Lo aquí aprendido, también os vale de base para crear un plugin «completo», aunque en ese caso habría que añadir más cosas como funciones register_activation_hook register_deactivation_hook y algunas funciones más, pero no es el propósito de este post.

Con este plugin ya podemos añadir todo el código que queramos, tanto CSS, javaScript como hooks o código php que necesitemos para nuestro proyecto sin depender de la plantilla que estemos usando.

Si quieres añadir alguna sugerencia constructiva, deja un comentario para hacer este post más productivo!!