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-content
carpeta 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.css
archivo.
$ cd vuetheme
$ touch style.css
Abra el style.css
archivo 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.php
archivo 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.php
archivo que necesita crear dentro de su carpeta de temas:
$ touch functions.php
El
functions.php
archivo 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.php
archivo 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.js
archivo 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 Vue
función incorporada. También proporciona un objeto JavaScript simple que le permite agregar diferentes partes de su aplicación Vue, como:
el
para especificar el elemento DOM donde puede montar la aplicación Vue. Puede especificar un selector de CSS o unHTMLElement
objeto que se pueda devolver desde eldocument.querySelector('#app')
método.mounted
para 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.js
archivo 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_url
función de WordPress para recuperar la URL completa del main.js
archivo. __FILE__
contiene la ruta al archivo PHP actual. Entonces, al concatenar la ruta actual con el main.js
nombre 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.
0 Comentarios
Dejanos tu comentario para seguir mejorando!