Introducción
En este tutorial, aprenderás cómo desarrollar un plugin de WordPress utilizando Vue.js en la parte de administración. Combinar el poder de WordPress y Vue.js te permitirá crear interfaces de usuario interactivas y dinámicas para tu plugin. El resultado final será una página de administración que muestra un mensaje generado por Vue.js.

Paso 1: Configurar el entorno:
- Asegúrate de tener una instalación de WordPress en tu servidor local o remoto.
- Crea una carpeta para tu plugin dentro del directorio “wp-content/plugins” de tu instalación de WordPress.
- Dentro de la carpeta de tu plugin, crea un archivo llamado “index.php”.
Paso 2: Añadir el código del plugin:
- Abre el archivo “index.php” y añade el siguiente código:
<?php
/**
* Plugin Name: Mi primer plugin con VueJS
* Description: Añade una página de administración de WordPress que muestra un mensaje usando Vue JS.
* Version: 1.0.0
*/
// Enqueue scripts and styles
function wp_vue_admin_enqueue_scripts() {
wp_enqueue_script( 'vue', 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js', array(), '2.6.14', true );
wp_enqueue_script( 'vue-plugin', plugins_url( '/assets/js/plugin.js', __FILE__ ), array( 'vue' ), '1.0.0', true );
}
add_action( 'admin_enqueue_scripts', 'wp_vue_admin_enqueue_scripts' );
- Guarda el archivo.
Paso 3: Crear el archivo del script personalizado:
- Crea una carpeta llamada “assets” dentro de la carpeta de tu plugin.
- Dentro de la carpeta “assets”, crea una carpeta llamada “js”.
- Dentro de la carpeta “js”, crea un archivo llamado “plugin.js”.
- Abre el archivo “plugin.js” y añade el siguiente código:
document.addEventListener('DOMContentLoaded', function() {
new Vue({
el: '#your-plugin-admin',
data: {
message: '¡Hola desde Vue.js!'
}
});
});
- Guarda el archivo.
Paso 4: Crear la página de administración:
- Abre el archivo “index.php” nuevamente y añade el siguiente código:
function wp_vue_admin_page() {
echo '<div id="your-plugin-admin">';
echo '<h1>{{ message }}</h1>';
echo '</div>';
}
function wp_vue_admin_menu() {
add_menu_page(
'Tu Plugin de WordPress',
'Tu Plugin',
'manage_options',
'your-plugin-admin',
'wp_vue_admin_page',
'dashicons-admin-generic',
99
);
}
add_action( 'admin_menu', 'wp_vue_admin_menu' );
- Guarda el archivo.
Paso 5: Activar el plugin:
- Inicia sesión en tu panel de administración de WordPress.
- Navega hasta la sección “Plugins”.
- Busca el nombre de tu plugin en la lista y haz clic en “Activar”.
Paso 6: Verificar el resultado:
- Ve a la sección “Tu Plugin” en el panel de administración.
- Deberías ver un mensaje que dice “¡Hola desde Vue.js!” generado por Vue.js.
Conclusión:
En este tutorial, has aprendido cómo desarrollar un plugin de WordPress utilizando Vue.js en la parte de administración. Ahora puedes aprovechar las capacidades de Vue.js para crear interfaces de usuario interactivas y dinámicas en tu plugin de WordPress. ¡Explora más sobre Vue.js y personaliza tu plugin según tus necesidades!
Recuerda que este tutorial proporciona una introducción básica para comenzar con Vue.js en la parte de administración de WordPress. A medida que te familiarices más con Vue.js, podrás implementar características más avanzadas y ampliar la funcionalidad de tu plugin. ¡Disfruta programando con Vue.js y WordPress!
Suscripción al Newsletter
Si estás interesado en aprender más sobre WordPress, no olvides suscribirte a nuestro blog para recibir las últimas noticias y consejos sobre WordPress, alojamiento web.
¿Necesitas un Hosting para tu Web?
¿Necesitas ayuda con un Proyecto Web o un Plugin a Medida?
Si ¿Necesitas ayuda con algún proyecto web? No dudes en contactarme desarrollo soluciones completas y personalizadas con WordPress y PHP, con herramientas y procesos modernos, utilizando HTML, CSS, SCSS, PHP, JavaScript, Bootstrap y más… Si ¿Estás listo? ¡Envíame un mensaje y hablemos de tu proyecto web!