Vue Application on a WordPress

Aplicación Vue en un sitio de WordPress como plugin externo.

Es muy posible que alguna vez os haya ocurrido que queríais colocar en vuestro sitio de WordPress alguna pequeña aplicación escrita en JavaScript. Podía tratarse de algún tipo de calculadora, un minijuego o una animación interactiva. Muchos usuarios de WordPress con un nivel intermedio seguramente intentarán añadir ese código JavaScript a alguno de los elementos HTML de la página usando wp_enqueue_script() en el archivo functions.php del tema. Esta solución parece rápida y bastante sencilla — al fin y al cabo, todo el mundo (bueno… hoy en día casi todo el mundo :)) tiene un archivo functions.php en su tema. Sin embargo, se puede hacer de otra manera que nos dará más flexibilidad a la hora de gestionar esa aplicación JavaScript incrustada en el futuro.

En el título de la entrada utilicé la expresión “Aplicación Vue”, y para nuestro ejemplo mostraré cómo integrar una aplicación creada en Vue 3, aunque igualmente podría tratarse de una aplicación creada con React, Angular u otro framework o biblioteca de JavaScript.

Para empezar, supongamos que tenemos acceso al proyecto fuente ya preparado en Vue. Al abrir el directorio del proyecto, veremos una estructura de carpetas y archivos más o menos así.

>dist
>node_modules
>public
>src
index.html
package-lock.json
package.json
README.md
vite.config.js

Para empezar, supongamos que tenemos acceso al proyecto fuente ya preparado en Vue. Al abrir el directorio del proyecto, veremos una estructura de carpetas y archivos más o menos así. Hoy no voy a describir el proceso de creación de una aplicación en Vue; para los fines de esta publicación doy por hecho que el código fuente ya existe. Nos interesa el directorio /dist. Al abrirlo, deberíamos ver los archivos que conforman la versión de producción de nuestra aplicación. Si el directorio está vacío, mediante el comando correspondiente:

npm run build

creamos los archivos de la versión de producción. Supongo que tenéis instalado el entorno de ejecución de JavaScript Node.js y que usáis el gestor de paquetes npm. Si no es así, os remito a la documentación en la página de Node.js para instalar estos elementos. Si todo ha ido bien, en el directorio /dist del proyecto Vue deberíamos ver una estructura de carpetas y archivos como esta:

/assets
index.html

El directorio /assets contiene los archivos JavaScript y CSS minificados y, eventualmente, otros objetos binarios, como archivos gráficos, de sonido, etc. Ahora solo nos queda crear un plugin de WordPress que “añada” este código al sitio. En el directorio wp-content/plugins de nuestra instancia de WordPress creamos una carpeta cuyo nombre reflejará el nombre de nuestro plugin. Para este ejemplo, creamos la carpeta vue-app-1.

Para crear un plugin de WordPress, dentro de esta carpeta creamos el archivo vue-app-1.php. Es importante que la carpeta y el archivo tengan el mismo nombre. En el archivo vue-app-1.php añadimos:

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

Esta es la información básica necesaria para que WordPress detecte nuestro plugin. En el panel de administración de WordPress ya deberíamos ver nuestro plugin. Por ahora no hace absolutamente nada.

Añadamos entonces las instrucciones que nos permitirán incluir nuestra aplicación Vue. Primero, trasladamos el contenido del directorio /dist de nuestra aplicación Vue al directorio de nuestro plugin de WordPress.

Una de las funcionalidades que ofrece WordPress es la posibilidad de añadir los llamados shortcodes a nuestro sitio. Con el editor Gutenberg o con el popular page builder Elementor, podremos añadir sin dificultad un bloque con un código corto con la siguiente forma:

[nazwa-naszego-shortcodu]

Nosotros también utilizaremos esta funcionalidad en nuestro plugin. Crearemos un shortcode que añadirá la aplicación Vue a nuestra instancia de WordPress. Las funciones que añaden, respectivamente, JavaScript y CSS son wp_enqueue_script() y wp_enqueue_style(), así que añadimos lo siguiente al código de nuestro plugin:

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

function wp_my_plugin2()
{
    wp_enqueue_script('plik-js', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array(), '1.0', true);
    wp_enqueue_style('vue-style', plugin_dir_url(__FILE__) . '/assets/index-BqFQXHG0.css', array(), '1.0');
    wp_register_script('vue_wp_compiled', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array('plik-js'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'wp_my_plugin2');

Con add_action() hemos añadido los archivos JavaScript y CSS de nuestra aplicación y, además, hemos registrado nuestro archivo JavaScript en la instancia de WordPress para poder utilizarlo después al crear el shortcode. Creamos una función que añadirá nuestro script registrado y devolverá un fragmento de HTML al que se conectará nuestra aplicación.

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

function wp_my_plugin2()
{
    wp_enqueue_script('plik-js', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array(), '1.0', true);
    wp_enqueue_style('vue-style', plugin_dir_url(__FILE__) . '/assets/index-BqFQXHG0.css', array(), '1.0');
    wp_register_script('vue_wp_compiled', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array('plik-js'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'wp_my_plugin2');

function attach_vue()
{
    wp_enqueue_script('vue_wp_compiled');
    return "<div id='app'></div>";
}

A continuación, utilizando la función add_shortcode() de WordPress, añadimos esta función como shortcode. El conjunto de nuestro plugin debería verse de la siguiente manera:

<?php

/**
 * Plugin Name: Vue app 1 plugin
 * Plugin URI: https://web-workshop.eu/
 * Description: WordPress plugin.
 * Version: 1.0
 * Author: name of author
 * Author URI: https://web-workshop.eu/
 **/

function wp_my_plugin2()
{
    wp_enqueue_script('plik-js', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array(), '1.0', true);
    wp_enqueue_style('vue-style', plugin_dir_url(__FILE__) . '/assets/index-BqFQXHG0.css', array(), '1.0');
    wp_register_script('vue_wp_compiled', plugin_dir_url(__FILE__) . '/assets/index-D18Zw9ww.js', array('plik-js'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'wp_my_plugin2');

function attach_vue()
{
    wp_enqueue_script('vue_wp_compiled');
    return "<div id='app'></div>";
}

add_shortcode('vue_app', 'attach_vue');

En este caso, ‘vue_app’ es el valor de nuestro shortcode. En el editor Gutenberg o en Elementor adoptará la forma [vue_app]