Crea un plugin de WordPress con Vue.js en la parte de administración

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:

1. Asegúrate de tener una instalación de WordPress en tu servidor local o remoto.
2. Crea una carpeta para tu plugin dentro del directorio “wp-content/plugins” de tu instalación de WordPress.
3. Dentro de la carpeta de tu plugin, crea un archivo llamado “index.php”.

Paso 2: Añadir el código del plugin:

1. 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' );

2. Guarda el archivo.

Paso 3: Crear el archivo del script personalizado:

1. Crea una carpeta llamada “assets” dentro de la carpeta de tu plugin.
2. Dentro de la carpeta “assets”, crea una carpeta llamada “js”.
3. Dentro de la carpeta “js”, crea un archivo llamado “plugin.js”.
4. 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!'
        }
    });
});

5. Guarda el archivo.

Paso 4: Crear la página de administración:

1. 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' );

2. Guarda el archivo.

Paso 5: Activar el plugin:

1. Inicia sesión en tu panel de administración de WordPress.
2. Navega hasta la sección “Plugins”.
3. Busca el nombre de tu plugin en la lista y haz clic en “Activar”.

Paso 6: Verificar el resultado:

1. Ve a la sección “Tu Plugin” en el panel de administración.
2. 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!