{"id":2223,"date":"2023-06-02T10:00:00","date_gmt":"2023-06-02T15:00:00","guid":{"rendered":"http:\/\/racmanuel.dev\/?p=2223"},"modified":"2023-05-27T19:28:04","modified_gmt":"2023-05-28T00:28:04","slug":"crea-un-plugin-de-wordpress-con-vue-js-en-la-parte-de-administracion","status":"publish","type":"post","link":"https:\/\/racmanuel.dev\/en\/crea-un-plugin-de-wordpress-con-vue-js-en-la-parte-de-administracion\/","title":{"rendered":"Create a WordPress plugin with Vue.js in the admin area"},"content":{"rendered":"

Introducci\u00f3n<\/h2>\n\n\n\n

En este tutorial, aprender\u00e1s c\u00f3mo desarrollar un plugin de WordPress utilizando Vue.js en la parte de administraci\u00f3n. Combinar el poder de WordPress y Vue.js te permitir\u00e1 crear interfaces de usuario interactivas y din\u00e1micas para tu plugin. El resultado final ser\u00e1 una p\u00e1gina de administraci\u00f3n que muestra un mensaje generado por Vue.js.<\/p>\n\n\n\n

\"person
Photo by Lukas on Pexels.com<\/a><\/figcaption><\/figure>\n\n\n\n

Paso 1: Configurar el entorno:<\/h2>\n\n\n\n
    \n
  1. Aseg\u00farate de tener una instalaci\u00f3n de WordPress en tu servidor local o remoto.<\/li>\n\n\n\n
  2. Crea una carpeta para tu plugin dentro del directorio “wp-content\/plugins” de tu instalaci\u00f3n de WordPress.<\/li>\n\n\n\n
  3. Dentro de la carpeta de tu plugin, crea un archivo llamado “index.php”.<\/li>\n<\/ol>\n\n\n\n

    Paso 2: A\u00f1adir el c\u00f3digo del plugin:<\/h2>\n\n\n\n
      \n
    1. Abre el archivo “index.php” y a\u00f1ade el siguiente c\u00f3digo:<\/li>\n<\/ol>\n\n\n\n
      <?php\r\n\/**\r\n * Plugin Name: Mi primer plugin con VueJS\n * Description: A\u00f1ade una p\u00e1gina de administraci\u00f3n de WordPress que muestra un mensaje usando Vue JS.\r\n * Version: 1.0.0\r\n *\/\r\n\r\n\/\/ Enqueue scripts and styles\r\nfunction wp_vue_admin_enqueue_scripts() {\r\n    wp_enqueue_script( 'vue', 'https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.14\/dist\/vue.js', array(), '2.6.14', true );\r\n    wp_enqueue_script( 'vue-plugin', plugins_url( '\/assets\/js\/plugin.js', __FILE__ ), array( 'vue' ), '1.0.0', true );\r\n}\r\nadd_action( 'admin_enqueue_scripts', 'wp_vue_admin_enqueue_scripts' );\r\n<\/code><\/pre>\n\n\n\n
        \n
      1. Guarda el archivo.<\/li>\n<\/ol>\n\n\n\n
        Paso 3: Crear el archivo del script personalizado:<\/h2>\n\n\n\n
          \n
        1. Crea una carpeta llamada “assets” dentro de la carpeta de tu plugin.<\/li>\n\n\n\n
        2. Dentro de la carpeta “assets”, crea una carpeta llamada “js”.<\/li>\n\n\n\n
        3. Dentro de la carpeta “js”, crea un archivo llamado “plugin.js”.<\/li>\n\n\n\n
        4. Abre el archivo “plugin.js” y a\u00f1ade el siguiente c\u00f3digo:<\/li>\n<\/ol>\n\n\n\n
          document.addEventListener('DOMContentLoaded', function() {\r\n    new Vue({\r\n        el: '#your-plugin-admin',\r\n        data: {\r\n            message: '\u00a1Hola desde Vue.js!'\r\n        }\r\n    });\r\n});\r<\/code><\/pre>\n\n\n\n
            \n
          1. Guarda el archivo.<\/li>\n<\/ol>\n\n\n\n
            Paso 4: Crear la p\u00e1gina de administraci\u00f3n:<\/h2>\n\n\n\n
              \n
            1. Abre el archivo “index.php” nuevamente y a\u00f1ade el siguiente c\u00f3digo:<\/li>\n<\/ol>\n\n\n\n
              function wp_vue_admin_page() {\r\n    echo '<div id="your-plugin-admin">';\r\n    echo '<h1>{{ message }}<\/h1>';\r\n    echo '<\/div>';\r\n}\r\n\r\nfunction wp_vue_admin_menu() {\r\n    add_menu_page(\r\n        'Tu Plugin de WordPress',\r\n        'Tu Plugin',\r\n        'manage_options',\r\n        'your-plugin-admin',\r\n        'wp_vue_admin_page',\r\n        'dashicons-admin-generic',\r\n        99\r\n    );\r\n}\r\nadd_action( 'admin_menu', 'wp_vue_admin_menu' );\r<\/code><\/pre>\n\n\n\n
                \n
              1. Guarda el archivo.<\/li>\n<\/ol>\n\n\n\n
                Paso 5: Activar el plugin:<\/h2>\n\n\n\n
                  \n
                1. Inicia sesi\u00f3n en tu panel de administraci\u00f3n de WordPress.<\/li>\n\n\n\n
                2. Navega hasta la secci\u00f3n “Plugins”.<\/li>\n\n\n\n
                3. Busca el nombre de tu plugin en la lista y haz clic en “Activar”.<\/li>\n<\/ol>\n\n\n\n
                  Paso 6: Verificar el resultado:<\/h2>\n\n\n\n
                    \n
                  1. Ve a la secci\u00f3n “Tu Plugin” en el panel de administraci\u00f3n.<\/li>\n\n\n\n
                  2. Deber\u00edas ver un mensaje que dice “\u00a1Hola desde Vue.js!” generado por Vue.js.<\/li>\n<\/ol>\n\n\n\n
                    Conclusion: <\/h2>\n\n\n\n
                    En este tutorial, has aprendido c\u00f3mo desarrollar un plugin de WordPress utilizando Vue.js en la parte de administraci\u00f3n. Ahora puedes aprovechar las capacidades de Vue.js para crear interfaces de usuario interactivas y din\u00e1micas en tu plugin de WordPress. \u00a1Explora m\u00e1s sobre Vue.js y personaliza tu plugin seg\u00fan tus necesidades!<\/p>\n\n\n\n
                    Recuerda que este tutorial proporciona una introducci\u00f3n b\u00e1sica para comenzar con Vue.js en la parte de administraci\u00f3n de WordPress. A medida que te familiarices m\u00e1s con Vue.js, podr\u00e1s implementar caracter\u00edsticas m\u00e1s avanzadas y ampliar la funcionalidad de tu plugin. \u00a1Disfruta programando con Vue.js y WordPress!<\/p>\n\n\n