✅¿Snippets o Plugins? Que Opción Elegir

Si trabajas con WordPress y sigues mi trabajo en PluginsWeb.es, seguro que has visto que me encanta compartir snippets de código útiles. De hecho, ya tengo un video donde explico cómo convertir mis snippets en plugins, aunque sin separarlos correctamente. Pero cuando estos snippets empiezan a superar las 1000 líneas y mezclan HTML con PHP, CSS y JavaScript, la cosa se complica. En este artículo te cuento si vale la pena manejar fragmentos de código tan grandes o si es mejor convertirlos en un plugin bien estructurado.

¿Es recomendable usar snippets de más de 1000 líneas?

No es que esté mal, pero hay que tener mucho control. Si decides usar snippets largos, ten en cuenta:

• Saber exactamente qué hace cada parte del código.
• Documentar cada sección para no perderte después.
• Usar nombres de funciones y variables únicas para evitar conflictos.
• Mantener una estructura clara para facilitar la lectura y depuración.

Si el snippet tiene mucho JavaScript y CSS incrustado, depurarlo puede volverse un infierno. En estos casos, lo mejor es dar el salto a un plugin personalizado para mantener el código organizado.

¿Cuándo optar por un plugin personalizado?

Si el código empieza a ser complicado de manejar, lo mejor es convertirlo en un plugin, porque:

• Separa el código en archivos organizados.
• Facilita la escalabilidad y reutilización.
• Hace que la depuración y mantenimiento sean mucho más simples.

Estructura recomendada de un plugin personalizado

mi-plugin/
│-- css/
│   ├── estilos.css
│-- js/
│   ├── script.js
│-- includes/
│   ├── funciones.php
│-- templates/
│   ├── header.php
│   ├── footer.php
│-- mi-plugin.php
│-- README.md

¿Qué hace cada carpeta y archivo?

• css/: Guarda los estilos (estilos.css).
• js/: Contiene los scripts (script.js).
• includes/: Aquí van las funciones auxiliares en PHP.
• templates/: Archivos estructurales, como header.php y footer.php.
• mi-plugin.php: Archivo principal del plugin.
• README.md: Documentación del plugin.

¿Cómo incluir JavaScript y CSS en un plugin de WordPress?

Para que los archivos funcionen correctamente, hay que cargarlos en mi-plugin.php con las funciones adecuadas.

Cómo agregar JavaScript en WordPress

En mi-plugin.php, usa wp_enqueue_script:

function cargar_scripts_personalizados() {
    wp_enqueue_script('mi-script', plugin_dir_url(__FILE__) . 'js/script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'cargar_scripts_personalizados');
Lenguaje del código: PHP (php)

Explicación:

• wp_enqueue_script carga script.js desde la carpeta js/.
• Se indica que depende de jquery.
• true hace que el script se cargue en el footer para mejorar el rendimiento.

Cómo agregar CSS en WordPress

Igual que con JavaScript, se usa wp_enqueue_style:

function cargar_estilos_personalizados() {
    wp_enqueue_style('mi-estilo', plugin_dir_url(__FILE__) . 'css/estilos.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'cargar_estilos_personalizados');
Lenguaje del código: PHP (php)

Explicación:

• wp_enqueue_style carga estilos.css desde la carpeta css/.
• 'all' significa que se aplicará a todos los dispositivos.

Seguridad en los plugins de WordPress

Uno de los aspectos más importantes al desarrollar un plugin es la seguridad. Una de las primeras medidas es definir ABSPATH, que es una constante en WordPress que evita el acceso directo a los archivos de nuestro plugin. Esto se hace agregando lo siguiente en cada archivo PHP que creemos:

if (!defined('ABSPATH')) {
    exit; // Salir si se accede directamente.
}
Lenguaje del código: PHP (php)

Este código evita que alguien pueda acceder a los archivos PHP de nuestro plugin directamente desde el navegador, protegiendo así nuestra estructura interna.

¿Dónde poner el código, en mi-plugin.php o en includes/funciones.php?

• mi-plugin.php: Este es el archivo principal del plugin. Aquí definimos el nombre, descripción y registramos los scripts y estilos. También es donde añadimos acciones (add_action) y filtros (add_filter) globales.
• includes/funciones.php: Aquí colocamos funciones adicionales que ayudan a estructurar mejor el código. Si tenemos muchas funciones personalizadas, lo ideal es incluir este archivo dentro de mi-plugin.php para mantener todo organizado:

require_once plugin_dir_path(__FILE__) . 'includes/funciones.php';Lenguaje del código: PHP (php)

¿Cuándo y cómo se ejecutan los archivos del plugin?

WordPress ejecuta el archivo principal del plugin (mi-plugin.php) cuando el plugin es activado en el administrador. Al hacer esto, se ejecutan los add_action y add_shortcode definidos en el archivo.

Si en includes/funciones.php tienes una función que no está conectada a una acción o shortcode, no se ejecutará automáticamente. Por eso, siempre hay que asegurarse de llamarla dentro de un hook adecuado como:

add_action('init', 'mi_funcion_personalizada');Lenguaje del código: JavaScript (javascript)

Ejemplo: Crear un plugin para manejar alertas con JavaScript

Supongamos que queremos construir un plugin en WordPress que permita mostrar alertas en la web. La estructura del plugin sería:

mi-plugin-alertas/
│-- css/
│   ├── estilos.css
│-- js/
│   ├── script.js
│-- includes/
│   ├── funciones.php
│-- templates/
│   ├── alerta-template.php
│-- mi-plugin-alertas.php
│-- README.md

Paso 1: Configurar el archivo principal del plugin

En mi-plugin-alertas.php, registramos los scripts y estilos:

<?php
/*
Plugin Name: Mi Plugin de Alertas
Plugin URI: https://pluginsweb.es/
Description: Un plugin simple para mostrar alertas en WordPress.
Version: 1.0
Author: PluginsWeb.es
*/

if (!defined('ABSPATH')) {
    exit;
}

require_once plugin_dir_path(__FILE__) . 'includes/funciones.php';

function cargar_recursos_plugin() {
    wp_enqueue_script('mi-plugin-alertas-js', plugin_dir_url(__FILE__) . 'js/script.js', array('jquery'), '1.0', true);
    wp_enqueue_style('mi-plugin-alertas-css', plugin_dir_url(__FILE__) . 'css/estilos.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'cargar_recursos_plugin');
Lenguaje del código: HTML, XML (xml)

Paso 2: Crear el archivo de funciones

En includes/funciones.php, podemos definir funciones reutilizables:

if (!defined('ABSPATH')) {
    exit;
}

// Shortcode para mostrar una alerta
function mostrar_alerta_shortcode($atts) {
    return '<button id="mi-boton-alerta">Mostrar alerta</button>';
}
add_shortcode('alerta', 'mostrar_alerta_shortcode');Lenguaje del código: PHP (php)

Paso 3: Crear el script JavaScript

En js/script.js, definimos la lógica para la alerta:

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("mi-boton-alerta").addEventListener("click", function() {
        alert("¡Hola! Esta es una alerta de mi plugin de WordPress.");
    });
});
Lenguaje del código: JavaScript (javascript)

Paso 4: Crear los estilos CSS

En css/estilos.css, añadimos estilos para el botón:

#mi-boton-alerta {
    padding: 10px 20px;
    background-color: #0073aa;
    color: white;
    border: none;
    cursor: pointer;
}
#mi-boton-alerta:hover {
    background-color: #005177;
}Lenguaje del código: CSS (css)

Paso 5: Comprimir el plugin y probarlo antes de instalarlo

Una vez que hayas terminado de desarrollar tu plugin, el siguiente paso es comprimirlo en un archivo .zip para facilitar su instalación en WordPress. Para hacerlo, sigue estos pasos:

1. Asegúrate de que todos los archivos estén correctamente organizados dentro de la carpeta mi-plugin-alertas/.
2. Comprímelo en un archivo .zip (por ejemplo, mi-plugin-alertas.zip).
3. Antes de instalarlo en un sitio en producción, es recomendable probarlo en un entorno de pruebas. Para ello:
   • Accede al panel de administración de WordPress en tu web de pruebas.
   • Ve a Plugins > Añadir nuevo y haz clic en Subir plugin.
   • Selecciona el archivo .zip y haz clic en Instalar ahora.
   • Activa el plugin y verifica que funciona correctamente, sin errores que puedan afectar tu web.
4. Si todo está en orden, el plugin estará listo para ser usado en producción.

Conclusión

Siguiendo estos pasos, puedes crear un plugin en WordPress que maneje alertas con JavaScript de forma organizada y segura. La clave está en estructurar bien los archivos, asegurarse de incluir ABSPATH para seguridad y usar wp_enqueue_script para registrar los recursos correctamente. Si el código crece, dividirlo en archivos como includes/funciones.php ayuda a mantenerlo ordenado.