Usando Vue.js en WordPress

 El uso de Vue.js con WordPress permite a los desarrolladores crear aplicaciones web modernas sobre el CMS más popular del mundo. De hecho, con la adición de la API REST, WordPress se ha convertido en una plataforma de aplicaciones completa para crear aplicaciones web con un back-end PHP / WP y un front-end JavaScript. Eso significa que se beneficia de las modernas herramientas de desarrollo de front-end, marcos y bibliotecas como Angular, React y Vue.js para crear potentes temas y complementos de WordPress.

Prerrequisitos

Este tutorial requiere algunos requisitos previos. Para completarlo, necesita tener:

• PHP instalado en su máquina de desarrollo,
• WordPress instalado y configurado,
• Conocimientos básicos de PHP,
• Experiencia laboral de WordPress,
• Conocimientos básicos de JavaScript,
• Familiaridad con Vue.js

Este tutorial no está diseñado para enseñarle WordPress o Vue.js, sino las formas de usarlos para crear complementos y temas que tienen un front-end de Vue.js.

Los temas parecen más apropiados para usar una interfaz de Vue.js, pero los complementos también pueden beneficiarse de Vue.js para crear widgets. Por ejemplo, puede crear un complemento que use Vue.js para obtener y mostrar datos de una API REST de WordPress o incluso una API de terceros.

Introducción

En este tutorial, verá cómo puede integrar Vue.js en su tema o complemento de WordPress. Esto lo ayudará a crear aplicaciones de una sola página o temas SPA potentes y modernos y le permitirá proporcionar sus complementos con interfaces Vue.js que aprovechan características como DOM virtual, reactividad y componentes.

Presentamos Vue.js

Vue.js es una biblioteca progresiva de JavaScript para crear interfaces de usuario modernas. Tiene características poderosas como:

• DOM virtual,
• Vinculación de datos y reactividad,
• Componentes, etc.

Estas características le permitirán crear aplicaciones web del lado del cliente que se mantengan y funcionen correctamente.

Un componente es simplemente una clase / función de JavaScript que tiene entradas y salidas, interactúa con otros componentes y controla una parte de la pantalla de la aplicación.

Vue.js toma prestadas muchas de sus características tanto de React como de Angular.js, lo que la convierte en una biblioteca poderosa que toma las mejores características de ambos mundos. Por ejemplo, DOM virtual de React y directivas de Angular.js.

Puede usar Vue.js para agregar código pequeño en su aplicación web, lo que significa que puede ser una alternativa a JavaScript simple o jQuery para agregar interactividad a sus aplicaciones, se puede usar para crear pequeños widgets reutilizables o también para crear Single completo Aplicaciones de página.

Usando Vue.js

Los documentos oficiales de Vue.js proporcionan diferentes formas que puede utilizar para crear proyectos de Vue.js, como:

• Usando Vue CLI: la forma recomendada,
• Usando una <script>etiqueta clásica ,
• Usando un CDN.

El uso de Vue CLI para crear una interfaz Vue.js para su API de WordPress requiere más trabajo porque necesita modificar la configuración de Webpack para exportar los paquetes finales en su directorio de temas. Entonces, el más fácil es usar un solo archivo JS que contenga el código de la biblioteca.

Básicamente, esto es lo que debe hacer para integrar una aplicación Vue.js con su tema o complemento de WordPress:

• Lo primero que necesita Vue.js es un elemento DOM donde se pueda montar. En un complemento, esto se puede hacer usando un código corto,
• Después de eso, deberá importar el archivo de script Vue.js en WordPress. Esto se puede hacer, ya sea en temas o complementos, poniendo en cola el archivo,
• Finalmente, puede continuar creando su aplicación Vue.js en un archivo JavaScript y ponerla en cola.

Esos son todos los pasos que debe seguir. Ahora, veamos cómo puede crear un complemento de WordPress simple que use Vue.js en el front-end.

Integrando Vue.js con WordPress

Primero, debe crear un tema secundario o un complemento. Para crear un tema hijo, navegue dentro de la carpeta de temas dentro de la wp-contentcarpeta de su directorio de instalación de WordPress:

$ cd /var/www/html/wp-content/themes
$ mkdir vuetheme

Tu tema debe incluir los siguientes archivos:

• style.css: Tiene dos roles, contiene metainformación sobre su tema y se puede usar para estilos CSS.
• functions.php: Se puede usar para agregar cualquier función en su tema, como poner en cola scripts JS y estilos CSS, etc.
• index.php: Este archivo actúa como archivo de índice para su tema.

Ahora, navegue hasta el tema recién creado y agregue un style.cssarchivo.

$ cd vuetheme
$ touch style.css

Abra el style.cssarchivo y agregue la siguiente metainformación que su tema requiere para que WordPress lo reconozca como un tema válido que se puede activar desde la interfaz de administración:

/*
 Theme Name:  Vue Theme
 description: A Vue WordPress Theme
 Author:       Ahmed Bouchefra
 Template:     twentyseventeen
 Version:      1.0.0
*/

Para la propiedad de la plantilla, puede ver que está creando un tema hijo del tema Twenty Seventeen WordPress .

Ahora puede ir a la interfaz de administración y activar este tema.

A continuación, cree y abra el index.phparchivo y agregue el siguiente código:

<!DOCTYPE html> 
<html <?php language_attributes(); ?>> 
<head> 
   <?php wp_head(); ?> 
</head> 

<body> 
    <div id="app">
    </div> 
    <?php wp_footer(); ?> 
</body> 
</html>

La aplicación Vue se montará en el <div id="app">.

Puede agregar funcionalidad personalizada en su tema utilizando un functions.phparchivo que necesita crear dentro de su carpeta de temas:

$ touch functions.php

El functions.phparchivo es un archivo estándar de WordPress, por lo que no necesita hacer nada para cargarlo en su tema, excepto crearlo allí.

A continuación, abra el functions.phparchivo y agregue el siguiente código para importar la biblioteca Vue.js en su tema de WordPress:

function enqueue_scripts(){
   wp_enqueue_script('vue', 'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js', [], '2.5.17');           
}

A continuación, agregue un main.jsarchivo dentro de la carpeta de su tema y luego use el siguiente código para crear una instancia de Vue:

( function() {
 new Vue({
  el: document.querySelector('#app'),
  template: "WP Vue Theme",
  mounted: function(){
   console.log("WP Vue Theme!");
 }
});
})();

Primero crea una instancia de Vue usando la Vuefunción incorporada. También proporciona un objeto JavaScript simple que le permite agregar diferentes partes de su aplicación Vue, como:

• elpara especificar el elemento DOM donde puede montar la aplicación Vue. Puede especificar un selector de CSS o un HTMLElementobjeto que se pueda devolver desde el document.querySelector('#app')método.
• mountedpara especificar una función que se llama cuando se monta la aplicación Vue. ¡Entonces debería ver un tema de WP Vue! en la consola de su navegador cuando la aplicación está montada.
• template se usa para especificar una plantilla que se renderiza cuando se monta la aplicación Vue.

Finalmente, para que esto funcione, debe poner en cola el main.jsarchivo que incluye el código Vue.js. Agrega el siguiente código en tu enqueue_scripts()función:

wp_enqueue_script('vueapp', plugin_dir_url( __FILE__ ) . 'main.js', [], '1.0', true);

Utiliza la plugin_dir_urlfunción de WordPress para recuperar la URL completa del main.jsarchivo. __FILE__contiene la ruta al archivo PHP actual. Entonces, al concatenar la ruta actual con el main.jsnombre del archivo, obtiene la ruta completa del archivo.

Si visita su sitio de WordPress, debería ver la cadena WP Vue Theme mostrada.

Conclusión

Este es un ejemplo muy simple de integración de una aplicación Vue.js con WordPress, pero esto se puede aprovechar fácilmente para agregar componentes y enrutamiento que le permitirán crear aplicaciones Vue.js muy complejas que pueden consumir las API REST de WordPress para crear, leer y actualizar. y elimine datos en su base de datos de WordPress desde su interfaz Vue.js.