Integración de Vue.js en WordPress

En el sector del desarrollo del software existe una verdadera revolución debido, en gran medida, a la aparición de nuevos frameworks basados en el lenguaje de programación interpretado JavaScript. Seguro que conoces términos como Vue, React, Polymer, Angular, … Se trata de frameworks basados en bibliotecas de JavaScript, con una gran popularidad, y, por ende, con una gran demanda laboral de profesionales especializados en esta rama.

Su popularidad se basa en dotar al Frontend, la parte del lado del cliente de nuestra aplicación, de propiedades como modularidad, escalabilidad, facilidad de mantenimiento, lo que reduce drásticamente los tiempos de desarrollo, soporte y mantenimiento. Además, disponen de gran cantidad de módulos, extensiones y templates que ahorran mucho tiempo de desarrollo, facilitando nuestra labor como desarrolladores de software.

En este post te explicamos cómo puedes integrar Vue.js en WordPress, el CMS (Content Management System) con mayor cuota de mercado, ampliamente utilizado por multitud de programadores y usuarios.

En este sentido, una de las tendencias de programación más actuales se frameweeeeeeeeeeeeen establecer toda la lógica de la programación y la gestión de datos con algún lenguaje de programación de primer nivel (PHP, Java, Golang, Python, …) de forma separada (Backend). Mientras que la parte de visualización de datos, la interacción y experiencia de usuario se realiza mediante alguno de los citados frameworks. En esta línea, te sonarán los servicios API Rest, que permiten mediante una serie de especificaciones técnicas la comunicación entre diferentes aplicaciones (Frontend>Backend), y es ahí donde las aplicaciones Frontend consumen los recursos establecidos por la aplicación Backend, mediante un servicio de API Rest.

Qué es Vue.js y por qué nos interesa su integración en WordPress

Vue.js es uno de los Framework más populares del entorno javaScript, está especialmente diseñado para la creación de interfaces de usuario y pertenece a la rama del desarrollo Frontend. Su integración progresiva permite comenzar un proyecto desde cero y fácilmente extenderlo con gran facilidad debido a su gran modularidad. En este Framework, se trabaja mediante vistas, componentes, layouts, páginas… Los proyectos se construyen de forma progresiva mediante componentes, con una estructura bien organizada y 100% escalable. Además, tiene la gran ventaja de que su curva de aprendizaje es mucho menor comparada con otros frameworks similares como React o Angular.

Mediante la integración con WP, tendremos un Framework Frontend de primer nivel integrado junto a un CMS que sirve como Backend. Esta integración reduce considerablemente el tiempo de desarrollo de nuestras aplicaciones. Por ejemplo, mediante WordPress ya tenemos resuelta la gestión de usuarios, la automatización de publicaciones del blog, y disponemos de todo el potencial de personalización y funcionamiento que nos ofrecen los diferentes plugins.

Cómo integrar Vue.js en WordPress

Para poder utilizar Vue.js en nuestro CMS, debemos realizar la carga de los recursos externos en la instalación de WordPress. La carga se puede realizar mediante un CDN (Content Delivery Network) o incluirlo en las librerías de nuestro código mediante el gestor de paquetes de Node.js, NPM.

Para proceder al despliegue de nuestra app se aconseja que el servicio de hosting, al menos disponga de la opción de acceso por SSH o FTP, que permita la edición de archivos mediante algún IDE de desarrollo. Aunque, te aconsejamos, que para un despliegue óptimo deberías disponer de algún tipo de virtualización de servicios. Los servicios como las VPN o servidores dedicados son imprescindibles para este tipo de operaciones. Es fundamental, que nuestro servicio de despliegue permita disponer de cierto control sobre la configuración y el despliegue de nuestra aplicación. Por tanto, los conocidos como hostings autoadministrados o de uso compartido, que ya traen por defecto una instalación de WP, no sirven para este fin.

Para la integración entre estas dos tecnologías, te traemos tres formas o mecanismos diferentes. La elección de uno u otro dependerá de la funcionalidad que queramos darle a Vue.js, obviamente cada método tiene sus ventajas e inconvenientes.

No obstante, desde OpenWebinars pensamos que el último método de integración, tiene mucho más interés para la comunidad de desarrolladores, debido a las potencialidades y grado de innovación que conlleva.

1- Integrando Vue.js mediante la creación de un plugin

La programación de nuevas funcionalidades en WordPress, se suele hacer mediante la implantación de un plugin. Este método permite extrapolar estas funciones a cualquier instalación que tengamos, por tanto, podremos reutilizar nuestro código en cualquier instalación de WP.

La hoja de ruta a seguir para esta lograr esta integración es:

• Crea un plugin en WP para usar su código. Recuerda que en OpenWebinars, tienes a tu disposición un curso de WP, en la que te enseñamos a crear tu propio plugin desde cero, incluso puedes entrar en el repositorio de GitHub y probar con los ejemplos disponibles. Es imprescindible que al comienzo del código de nuestro plugin pongamos el siguiente texto a modo de Manifest:

/*
Plugin Name: Integrando Vue.js en WordPress
Description: Añade soporte para Vue.js en WordPress
Version:     1.0
Author:      Openwebinars
Author URI:  www.openwebinars.net
License:     proprietary
Domain Path: /languages
Text Domain: openwebinars
*/

De esta forma, WP leerá de forma correcta nuestro script, en los plugins disponibles aparecerá nuestro plugin y podremos activarlo o gestionar la configuración.

• Implementa un shortcode en el plugin. Te recordamos que un shortcode en WP, es un código simplificado que puedes insertar en el editor de tu web. De esta forma podemos añadir funcionalidades al contenido de tu página sin necesidad de tener que insertar lenguaje de programación. Por tanto, te permite reutilizar código en diferentes secciones o apartados de la página.

• Diseña y programa el código de Vue.js. Este Framework, se estructura mediante componentes bajo una filosofía de modularización y reutilización de código. En OpenWebinars disponemos, también, de un curso de Vue.js, que te ayudará a implementar una aplicación totalmente funcional.

Para no extendernos demasiado, os dejamos el popular código “Hola Mundo” en Vue.js:

    <div id='app'>
        <h1>{{titulo}}</h1>
    </div>
        <script>
        app = new Vue({
            el: '#app',
            data: {
                titulo: 'Hola mundo!'            }
        })
    </script>

• Carga las dependencias necesarias antes de empezar tu código. Recuerda que Vue.js utiliza varias dependencias externas. Es fundamental que se carguen en el momento preciso para que todo vaya como la seda.
  Para la carga de la biblioteca y recursos externos, debes de hacer la llamada externa mediante el siguiente script, en este caso hacemos uso de un CDN.
  Para este fin, es recomendable que utilicemos dos funciones nativas de WP, la primera función para registrar el script y la segunda para poner en cola la carga.

  wp_register_script(‘vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js"',null,null, true);
  wp_enqueue_script(‘vuejs’);
  

• Por último, asegúrate que el plugin esté cargado antes que el DOM (Document Object Model) sea dibujado. A partir de este punto, ya puedes comenzar con Vue.js, definir sus componentes y mostrarlos mediante una vista en WP.

2- Utilizando la API de WordPress como Backend y Vue.js como Frontend.

Este segundo método de integración se basa en la utilización del servicio de API Rest del Core de WordPress. Lo que permite el uso de nuestro contenido sin necesidad de consultarlo solo a través de un único sitio web. En este sentido, nuestra aplicación Vue.js se ejecuta de forma paralela haciendo consultas a través de los endpoints diseñados en la API Rest.

A través de la REST API de WordPress es posible consultar los datos desde otro tipo de recursos: aplicación de escritorio, móvil u otro servicio web externo. En nuestro caso, desde Vue.js como servicio de Frontend podemos, por ejemplo, obtener el listado de post publicados, editarlos, eliminarlos, … Por tanto, las posibilidades de esta funcionalidad son casi ilimitadas.

Un ejemplo práctico

Los endpoints diseñados para la API Rest de WP los podemos ver en la documentación para desarrolladores de WP. En este post por razones de extensión, solo te daremos unas pinceladas. Por ejemplo, te mostraremos cómo acceder al listado de posts publicados.

En versiones actuales de WordPress la REST API está activada por defecto, por lo que podemos hacer consultas directamente en el navegador usando una sintaxis de URL. Por tanto, si conoces alguna web desarrollada en WP o tienes una propia, prueba a agregar /wp-json/wp/v2/ a la URL de petición, y adicionalmente agregar algún endpoint.

Para obtener el listado de los posts publicados añadimos a la URL de la página, en nuestro caso usamos la web oficial del proyecto de WP, la siguiente sintaxis: /wp-json/wp/v2/posts.

Es decir, nuestra URL de consulta sería:

https://es.WordPress.org/wp-json/wp/v2/posts

Si lo visualizas en un navegador obtenemos como respuesta un objeto JSON, que nos muestra el listado de post de una web además de información asociada: Titulo, contenido, fecha de publicación, ….

Visualización del Objeto JSON devuelto por la consulta en el navegador.

WordPress nos ofrece una instalación de demostración de la API con fines de prueba, disponible en https://demo.wp-api.org/wp-json/. Y que nos puede servir para realizar pruebas de lectura y conocer los diferentes endpoints.

Para visualizar el listado de post en un componente de Vue.js, podemos utilizar la función nativa de JS Api fetch o la librería de Vue.js, Axios.

Para la carga en Vue.js utilizando la librería Axios, la consulta sería de esta forma:

new Vue({
 el: '#app',
 data () {
   return {
     info: null
   }
 },
 mounted () {
   axios
     .get('https://es.WordPress.org/wp-json/wp/v2/posts’)
     .then(response => (this.info = response))
 }
})
<div id="app">
 <h1>Listado de Posts</h1>
 <div   v-for="post in info"   class="blog">
       {{ post.title }}:
  <span class="lighten">
{{ post.content }}
   </span>
 </div>
</div

Con este código de ejemplo, obtendremos los últimos post publicados por la web oficial de WP.

En definitiva, el formato JSON devuelto por la API REST de WordPress, nos permite intercambiar datos con otros sitios web y software escritos en cualquier lenguaje de programación. Por lo tanto, como desarrolladores ya no estamos limitados a PHP, y podemos usar WordPress para manejar los datos a través de REST API del Core.

Por último, asegúrate que el plugin esté cargado antes que el DOM (Document Object Model) sea dibujado. A partir de este punto, ya puedes comenzar con Vue.js, definir sus componentes y mostrarlos mediante una vista en WP.

3- Incorporando Vue.js en un tema y utilizando el servicio API Rest de WP

La última forma de integración es mediante el diseño de un tema que utilice todo el potencial visual de Vue.js. Esta solución permite almacenar nuestro código como si fuera un tema más de WordPress, utilizando la API Rest del core para consultar los registros de la base de datos, así como otros recursos externos.

El diseño básico de un tema para WP tan sólo necesita de estos tres archivos:

• style.css: este archivo tan solo incluye etiquetas meta, así como estilos a aplicar. Es el código CSS de nuestra App.
• functions.php: para poner en cola (Queue) nuestros scripts y estilos, así como la información de salida que no podemos recuperar del servicio API REST.
• index.php: Muestra el contenido HTML muy básico de la página para que sea rastreada por los motores de búsqueda.

Para integrar la parte de Vue.js, los ficheros deben ser almacenados en una carpeta dentro de los ficheros de nuestro tema, por ejemplo, en el directorio src/main.js.

En este directorio creamos el componente principal de nuestra aplicación con esta simple plantilla:

<template>
    <div class="post">
        <h1 class="entry-title" v-if="isSingle">{{ post.title.rendered }}</h1>
        <h2 class="entry-title" v-else><a v-link="{ path: '/' + post.slug }">{{ post.title.rendered }}</a></h2>

        <div class="entry-content">
            {{{ post.content.rendered }}}
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            post: {
                type: Object,
                default() {
                    return {
                        id: 0,
                        slug: '',
                        title: { rendered: '' },
                        content: { rendered: '' }
                    }
                }
            }
        },

        ready() {
                if (!this.post.id) {
                this.getPost();

                this.isSingle = true;
            }
        },

        data() {
            isSingle: false
        },

        methods: {
            getPost() {
                this.$http.get(wp.root + 'wp/v2/posts/' + this.$route.postId).then(function(response) {
                    this.post = response.data;
                    this.$dispatch('page-title', this.post.title.rendered);
                }, function(response) {
                    // Error
                    console.log(response);
                });
            }
        }
    }
</script>

Con este fragmento de código ya disponemos de una estructura básica de Vue.js y una consulta básica al core del API REST de WordPress, que muestra el listado de posts. A partir de aquí, puedes ir mejorando y ampliando con más componentes y funcionalidades.

¿Qué más podemos hacer?

Como ves con la integración se abre todo un abanico de posibilidades, así que esperamos que hayas disfrutado este post y que en esta primera aproximación dispongas de las pinceladas básicas para disponer de Vue.js en el CMS más popular, WordPress.
Por último, te dejamos una serie de retos o desafíos para que puedas seguir probando e investigando en el mundo de la integración de servicios y nuevas tecnologías.

Te proponemos que pruebes a:

• Crear bloques para el nuevo editor de WordPress basados en Vue.js.
• Listar los últimos posts en un componente de Vue.js utilizando la función API fetch o a través de la librería Axios.
• Gestionar los posts de una web realizando una aplicación en Vue.js, para que sea consultada desde el móvil.
• Cambiar la apariencia del área admin de WordPress, personalizando ciertos aspectos de visualización.