Share
Japh, en su artículo anterior, explicó la razón, y finalmente nos convenció, de establecer nuestro entorno de desarrollo tan cerca del servidor web remoto que usa Vagrant. El artículo tiene más de dos años, pero la idea sigue siendo relevante hoy en día. Aún más, Vagrant ha estado ganando terreno recientemente en la comunidad de WordPress con una configuración especial de Vagrant llamada VVV, abreviatura de Varying Vagrant Vagrants.
VVV es un ajuste preestablecido de la configuración de Vagrant orientada a proyectos centrados en WordPress, como desarrollar un tema, un complemento o contribuir a WordPress Core. VVV también incluye varias herramientas como WP-CLI, PHP Code Sniffer y Composer que potencian nuestros flujos de trabajo de desarrollo..
No obstante, el uso de una aplicación como MAMP, WAMP o XAMPP ha proporcionado un nivel suficiente de conveniencia para muchos desarrolladores; estas herramientas pueden haberles servido tan bien que no parece necesario migrar a VVV.
Por esa razón en particular, este tutorial está dirigido a aquellos de ustedes que han sido usuarios por mucho tiempo de estas aplicaciones de pila tradicionales para desarrollar WordPress, y ahora sienten que la aplicación ya no está lidiando con sus proyectos más extensos y complejos..
Tal vez lea en algún lugar sobre Vagrant como una gran alternativa, pero no sabe por dónde empezar y si Vagrant es la herramienta adecuada para usted. Entonces, antes de profundizar, describiremos el escenario de desarrollo de nuestro proyecto en el que el uso de VVV será apropiado..
Vamos a empezar.
En primer lugar, contamos con un equipo de desarrolladores que nos ayudan con este proyecto. Nuestro equipo está distribuido en todo el mundo, y cada uno tiene sus propias preferencias: algunos usan Windows, mientras que otros usan OS X. Adoptamos Vagrant y VVV para que todos tengan el mismo entorno y hagan que el resultado de la prueba sea más pertinente..
Nuestro proyecto es crear un tema y un complemento que enviaremos a sus respectivos repositorios de WordPress.org.
El tema debe ser compatible con algunos complementos populares como Jetpack, WooCommerce, EDD y BBPress. También probaremos el complemento frente a una serie de otros complementos, asegurando que no haya conflictos o errores cuando estén activos juntos.
Además, el tema y el complemento también deben ser compatibles con la última versión, así como con dos versiones anteriores de WordPress, y deberían estar listos para futuras versiones de WordPress al probarlos a través de la versión Beta..
La siguiente tabla muestra dónde nuestro tema y complemento deben ser compatibles con las versiones de WordPress, así como con varios complementos..
| Compatibilidad: | Acme-StoreFront (tema) | Acme-LocalCurrency (plugin) |
|---|---|---|
| WordPress 4.2 | √ | - |
| WordPress 4.3 | √ | - |
| WordPress más reciente | √ | √ |
| WordPress Beta | √ | √ |
| Jetpack | √ | - |
| BBPress | √ | - |
| Descargas digitales fáciles (EDD) | √ | √ |
| WooCommerce | √ | √ |
Además, podemos tener un sitio web local en jetpack.wordpress.dev que alojará los temas (o complementos) que dependen de uno o más de los módulos de Jetpack, como Infinite Scroll and Sharing.
Para evitar posibles interferencias de otros complementos, los complementos activos dentro de jetpack.wordpress.dev solo son Jetpack, con algunas excepciones para algunos complementos compatibles para el desarrollo, como el Monitor de consultas, Escáner VIP y Barra de depuración.
Eventualmente, también podemos crear woo.wordpress.dev, bbp.wordpress.dev, y así sucesivamente para construir y probar nuestros proyectos en torno a las funcionalidades de estos complementos..
Ahora que tenemos una idea aproximada de lo que vamos a hacer y tiene estas herramientas instaladas, ahora procederemos a configurar VVV en funcionamiento. Empecemos!
Lo primero es lo primero, necesitamos una máquina virtual (VM) para alojar nuestros entornos de desarrollo creados a través de Vagrant. En este tutorial, optamos por VirtualBox; Es gratis y funciona multiplataforma. Hay un instalador disponible para cada plataforma (Windows, OSX y un par de distribuciones de Linux) en la página de descarga..
Inicie el instalador y siga los pasos hasta el final del proceso. Alternativamente, los usuarios de OS X pueden instalar VirtualBox a través de Homebrew Cask, lo que le permite instalar VirtualBox más convenientemente con una sola línea de comando de la siguiente manera.
crear caseta instalar virtualbox
Una vez que se instala VirtualBox, lo que puede llevar un tiempo, procedemos a instalar Vagrant.
De manera similar, un instalador de Vagrant está disponible para OS X, Windows y Linux. Descarga uno para tu plataforma y sigue los pasos a través. Los usuarios de OS X pueden instalarlo a través de Homebrew Cask con la siguiente línea de comando.
barril de cerveza instalar vagrant
Una vez instalado, deberás acceder a la vagabundo CLI.
Recupera la versión instalada de Vagrant en la terminal OSXLa instalación de los siguientes complementos de vagrant es opcional, pero generalmente es una buena idea instalarlos para agilizar el proceso de obtención del entorno de desarrollo de VVV, incluidos los sitios web locales, en funcionamiento..
Vagrant Hosts Updater: este plugin permitirá a Vagrant actualizar el Hospedadores Archivo para registrar el nombre de dominio para los sitios web locales. De lo contrario, tendremos que agregarlo por nuestra cuenta, lo que parece un poco inconveniente..
Ejecute el siguiente comando para instalar el complemento:
vagrant plugin instalar vagrant-hostsupdater
Disparadores vagabundos: este complemento permitirá a VVV automatizar una serie de procesos como la copia de seguridad de bases de datos. Para instalarlo, ejecute:
vagrant plugin instalar vagrant-triggers
Se establecen los requisitos previos, VirtualBox y Vagrant junto con los complementos. Así podemos empezar a instalar VVV..
Primero, clone VVV del repositorio de GitHub en un directorio local.
git clone git: //github.com/Varying-Vagrant-Vagrants/VVV.git
Una vez que el clon esté en su lugar, navegue al directorio donde reside. Luego póngalo en marcha con la siguiente línea de comando:
cd vvv; vagabundo
VVV descargará e instalará Ubuntu como el sistema operativo virtual que alojará nuestros sitios web locales. En algún momento, es posible que también deba ingresar su contraseña para permitir que Vagrant escriba su archivo de hosts.
VVV inicializado por primera vezTenga en cuenta que esta es la primera vez que configuramos VVV en funcionamiento. El proceso llevará bastante tiempo; puede tardar entre 30 minutos y una hora más o menos en completarse. Salga a caminar, tome un café o descanse mientras el proceso está en marcha.
Cuando VVV está en funcionamiento, nos proporciona un par de instalaciones predeterminadas de WordPress, de la siguiente manera:
Accentsconagua
Está utilizando una versión de desarrollo (4.5-RC1-37169) en el pie de página.Inicie sesión en estos sitios con administración como el nombre de usuario y contraseña como la contraseña.
Ahora que tenemos VVV en funcionamiento, podemos iniciar nuestros nuevos proyectos. Vamos a crear un tema de ejemplo y un complemento. Y siempre ha sido mi preferencia comenzar un tema con guiones bajos y usar WPPB para un complemento..
Añadimos estas placas de calderas en sus respectivos directorios dentro del / wp-content / directorio de local.wordpress.dev, situado en directorio vvv / www / wordpress-default / wp-content /.
Continuar con el desarrollo del tema y el plugin; agregue algunas funciones, agregue una página de configuración para el tema, agregue una integración más profunda con el personalizador para el tema y finalmente prepárelas para las próximas versiones de WordPress.
Envato Tuts + ha publicado numerosos recursos que pueden ser útiles durante el desarrollo. Los siguientes son algunos de mis favoritos seleccionados:
Como mencionamos anteriormente, crearemos algunos sitios web locales más en los que desarrollaremos nuestro tema y complemento para la integración con varios complementos como Jetpack, WooCommerce, EDD y BBPress. También vamos a establecer un par de sitios web para probar nuestros proyectos con las versiones anteriores de WordPress, en este caso, 4.3 y 4.2. En este punto, solo hemos tenido local.wordpress-trunk.dev up, que aloja la versión nocturna de WordPress, beta o versión candidata (RC).
La creación y configuración de un sitio web local generalmente toma varios pasos. Primero, tendremos que descargar la copia de WordPress, extraerla y colocarla en la raíz de nuestro localhost, cree una base de datos, ejecute la instalación de WordPress y cambie el archivo de hosts para registrar el nombre de dominio. Si tomamos el proceso para crear, digamos, tres o más sitios web locales, pronto encontraremos el proceso ineficientemente lento..
Con VVV y su extensión llamada VV, abreviatura de VVV variable, Podremos ser más productivos con menos esfuerzo. Echemos un vistazo a cómo implementar VV.
Dado que el proceso de instalación de VV en OS X y Windows varía, esta sección se divide en dos secciones. Puede saltar inmediatamente a la sección de la plataforma que está utilizando actualmente..
La forma más fácil de instalar VV en OSX es a través de Homebrew. Simplemente escriba el siguiente comando.
brew install bradp / vv / vv
En Windows, primero deberá clonar el repositorio VV, en algún lugar del directorio de su computadora.
git clone https://github.com/bradp/vv.git vv
Entonces necesitamos que Windows reconozca la vv mando.
Para hacerlo, haga clic con el botón derecho en Mi PC o Esta PC y seleccione Propiedades ... . Luego ve a Configuración avanzada del sistema> Variables de entorno. Seleccione "Ruta" en la lista de variables del sistema y haga clic en Editar… .
Añade el vv Ruta de directorio que ha clonado anteriormente. Por ejemplo:C: \ Users \ thoriq \ Sites \ vv.
Una vez instalado, deberemos acceder a la vv comando global. El comando nos permitirá establecer nuevas instalaciones de WordPress en funcionamiento, entre otras, de las cuales puede encontrar los detalles a través de vv - ayuda mando.
En OS X: VV CLI lista de comandosEn Windows, se puede acceder a la CLI a través del símbolo del sistema (cmd.exe) y el Bash Git.
VV ha hecho que la instalación de un nuevo sitio de WordPress sea tan fácil como escribir el siguiente comando:
vv crear
Una vez ejecutado, generará algunas preguntas en el camino para configurar el nuevo sitio web, a saber:
Para los usuarios de MAMP, es similar a crear una nueva carpeta dentro de la raíz del documento MAMP en / MAMP / htdocs /. Esta es la carpeta donde residen todos los activos del sitio web. En este paso, ingrese el nombre del directorio sin espacios, preferiblemente en minúsculas, por ejemplo:
Establecer el dominio para nuestro nuevo sitio web. Un dominio para un sitio web local comúnmente termina ya sea con .dev o .local. En este caso, nombraré la nuestra. 42.wordpress.dev. Es un subdominio con el número. 42, que se refiere a la versión de WordPress, 4.2.x, que vamos a instalar.
Aquí instalaremos WordPress 4.2.8, que es la última iteración dentro de la rama 4.2. La lista completa de lanzamientos de WordPress se puede encontrar en la página Archivo de lanzamientos.
Nos pregunta si queremos activar el modo multisitio de WordPress. Seleccionamos norte.
Por el momento, la compatibilidad con WordPress Multisite para nuestros temas y complementos no es la máxima prioridad. Si alguna vez necesitaremos compilar y probar proyectos en el entorno de varios sitios, más adelante, podremos crear otro sitio bajo un nuevo dominio, por ejemplo,. mu.wordpress.dev.
El wordpress wp-contenido El directorio generalmente alberga una serie de subdirectorios, como los temas, los complementos y los directorios de carga. A veces también puedo crear algunas carpetas adicionales para almacenar algunos archivos arbitrarios. Si tiene un contenido preestablecido alojado en un repositorio Git, puede ingresar la URL y dejar que VV clone el repositorio.
Por ahora, lo dejamos vacío..
No tenemos una base de datos SQL para importar, por lo que también dejaremos este mensaje vacío. Pero, si tiene uno, especifique la ruta del directorio donde reside el archivo SQL, por ejemplo: /Sites/db/wp.sql.
WordPress viene con los temas predeterminados (por ejemplo, TwentyFifteen, TwentySixteen, etc.) y complementos (Akismet y Hello Dolly) que, a menudo, no usaremos. En este paso, podemos pasar y al indicador para indicar a VV que los elimine por completo..
Podemos decirle a VV que instale contenido de muestra de WPTest. Es un extenso conjunto de contenido que incluye publicaciones, páginas y comentarios. Este contenido será útil para encontrar desalineaciones, problemas de compatibilidad o errores en nuestros temas y complementos. Por lo tanto, tipo y.
Definitivamente, permitiremos que WP_DEBUG permita que WordPress imprima cualquier error de PHP durante el desarrollo. Por lo tanto, tipo y a la orden.
Finalmente, confirme que todas las configuraciones definidas sean correctas antes de que VV continúe con la instalación. Si todo se ve bien, escribe y para proceder. De lo contrario, escriba norte para abortar la operación y puede repetir el vv crear desde el comienzo.
Una vez hecho esto, VV mostrará el sitio, así como el nombre de usuario y la contraseña para iniciar sesión, de la siguiente manera:.
Repita estos pasos para instalar los otros sitios mencionados en la sección "Resumen del proyecto" de este tutorial..
Ahora tenemos varios sitios con diferentes entornos para probar nuestros proyectos, temas o complementos. La cantidad de nuestros sitios aumentará con el tiempo, hasta el punto en el que copiar los directorios del proyecto en estos entornos de prueba sería un inconveniente..
Por esa razón, necesitaríamos una única carpeta donde podríamos enviar nuestro proyecto a estos sitios web a la vez, haciendo que nuestro flujo de trabajo sea más organizado..
Vagrant nos permite sincronizar directorios con la máquina virtual. De hecho, Vagrant despliega su propia característica bajo el capó. Si miramos en el Vagrantfile En la sección "Asignación de unidades", encontraremos que sincroniza una serie de directorios, incluida la www/ Donde está alojada la instalación de todos nuestros sitios..
Para empezar, primero debemos crear dos directorios, respectivamente, para alojar nuestros complementos y temas. Puede colocar estos directorios en cualquier lugar en su computadora. En mi caso, tengo un directorio llamado dev que contiene todos mis proyectos, como sigue.
. └── dev └── biblioteca ├── plugins └── temas
Luego, registraremos el mapa de estos directorios. Tenemos tres sitios de WordPress instalados en local.wordpress.dev y local.wordpress-trunk.dev. Por lo tanto, estos directorios se asignarán, apuntando y sincronizando a cada uno de los / plugins / y el / temas / Directorio de estos sitios en la Máquina Virtual..
Sin embargo, siempre se debe evitar modificar el archivo de sistema predeterminado. De ahí que en lugar de modificar el Vagrantfile, Agregaremos la configuración de mapeo en un archivo llamado Archivo personalizado-buscando en el Vagrantfile, Aproximadamente en la línea 241, la encontraremos cargada para aplicar personalizada o anular las configuraciones predeterminadas.
Crear el Archivo personalizado archivo en la misma ubicación que Vagrantfile.
. └── vvv └── Vagrantfile ├── Customfile
Agregue las siguientes líneas de código, que estoy seguro que se explican por sí mismas, en el archivo.
## Plugins config.vm.synced_folder "/ Users / thoriq / Sites / dev / plugins /", "/ srv / www / wordpress-default / wp-content / plugins",: owner => "www-data",: mount_options => ["dmode = 775", "fmode = 774"] config.vm.synced_folder "/ Users / thoriq / Sites / dev / plugins /", "/ srv / www / wordpress-develop / wp-content / plugins ",: owner =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "] config.vm.synced_folder" / Users / thoriq / Sites / dev / plugins / "," / srv / www / wordpress-42 / htdocs / wp-content / plugins ",: owner =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "] ## Themes config.vm .synced_folder "/ Users / thoriq / Sites / dev / themes /", "/ srv / www / wordpress-default / wp-content / themes",: owner => "www-data",: mount_options => ["dmode = 775 "," fmode = 774 "] config.vm.synced_folder" / Users / thoriq / Sites / dev / themes / "," / srv / www / wordpress-trunk / wp-content / themes ",: owner => "www-data",: mount_options => ["dmode = 775", "fmode = 774"] config.vm.synced_folder "/ Users / thoriq / Sites / dev / themes /", "/ srv / www / wordpress- 42 / htdocs / wp-con tienda / temas ",: owner =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "]
Recargar vagrant al correr recarga errante, más vagabundo si no se está ejecutando actualmente. Nuestros plugins y temas en / dev / plugins / y / dev / temas / Ahora debería estar listado en todos los sitios.
En este punto, hemos configurado Vagrant y VVV en funcionamiento. Ahora podemos crear un nuevo sitio web local en cuestión de minutos sin hacer malabarismos con el desorden de descargar WordPress .cremallera paquete, extrayendo el paquete y editando el Hospedadores entradas de archivo.
La mayoría de nuestras operaciones hasta este punto se han realizado a través de la interfaz de línea de comandos. Comprensiblemente, puede ser un poco intimidante para los principiantes, especialmente para aquellos que vienen de aplicaciones de interfaz gráfica como MAMP o WAMP. Se necesita tiempo para acostumbrarse..
Sin embargo, algunas operaciones en Vagrant pueden reemplazarse con una contraparte de GUI. Hay algunas extensiones disponibles que agregan capas agradables de GUI a Vagrant y VVV, haciendo que hacer algunas cosas sea tan fácil como hacer clic. Algunos de ellos incluyen:
El Vagrant Dashboard en vvv.dev es quizás un equivalente a MAMP localhost / MAMP / Página, excepto que aparece en blanco liso..
Afortunadamente, podemos animarlo con una extensión. Hay algunas opciones, y optaré por VVV Dashboard por De arriba hacia abajo. Para desplegar la extensión, navegue a la / www / default / Directorio y tire del repositorio de extensión:
git clone https://github.com/topdown/VVV-Dashboard.git dashboard
Entonces copia /dashboard/dashboard-custom.php dentro / por defecto /, como sigue.
. ── dashboard ├── dashboard-custom.php (el dashboard personalizado) ├── database-admin ├── index.php ├── memcached-admin ├── estado de opcache ├── phpinfo └── webgrind
No hay necesidad de recargar Vagrant. Simplemente actualice el VVV Dashboard en vvv.dev. Ahora debería encontrar muchos otros detalles de nuestra configuración de Vagrant en el panel, además de solo enumerar los sitios instalados.
Panel VVV personalizado. Otra utilidad que puedes instalar es el Vagrant Manager..
Vagrant Manager es similar a MAMP y WAMP donde, en este caso, nos permite ejecutar, detener y volver a cargar Vagrant en unos pocos clics. Vagrant Manager está disponible en OS X a través de Homebrew Cask y el .dmg, y en Windows a través de la .exe paquete de instalación Por lo tanto, la instalación de la aplicación debería ser una tarea fácil.
Una vez que Vagrant Manager esté instalado y en ejecución, puede encontrar una lista de sus configuraciones de Vagrant y cuál está actualmente activa..
Vagrant también viene con phpMyAdmin incorporado, accesible en vvv.dev/database-admin/. Sin embargo, no soy un fan de phpMyAdmin. Aparte de la interfaz desagradable, es lento procesar una consulta en una gran base de datos. Estas son las razones por las que prefiero usar una aplicación nativa como Sequel Pro o SQL Workbench para Windows. Sin embargo, primero tenemos que conectar la aplicación a MySQL..
Aquí estoy usando Sequel Pro para OS X. Sin embargo, las credenciales necesarias para conectarse a MySQL son aplicables independientemente de las aplicaciones que esté utilizando. Ellos son lo mismo.
127.0.0.1 raíz raíz local.wordpress.dev (también aplicable con cualquier dominio registrado en VVV)vagabundo vagabundo Si ve una advertencia como se muestra a continuación, puede ignorarla y simplemente hacer clic en "Sí" o "Aceptar" para continuar. Solo nos estamos conectando a una Máquina Virtual en nuestra propia computadora, por lo que no debería haber nada de qué preocuparse.
Una vez conectado, podemos ver la base de datos de nuestros sitios. Ahora, podemos hacer algunas cosas, como importar y exportar una base de datos, o probablemente ejecutar algunas consultas SQL.
Como se mencionó, VVV viene con un paquete de herramientas que incluye PHP CodeSniffer, que le permite realizar una auditoría de código en sus proyectos según los estándares de codificación de WordPress. Eso es algo que creo que deberías hacer, especialmente antes del lanzamiento del proyecto.
Sin embargo, dado que PHP CodeSniffer es algo que está más allá del alcance de este tutorial, he reunido un par de referencias para ayudarlo a comenzar con el tema..
Hemos recorrido un largo camino para configurar VVV en funcionamiento, así como para mejorarlo con varias extensiones. En última instancia, agiliza nuestro flujo de trabajo cuando se trata de crear un nuevo sitio local o probar entornos con WordPress, aunque puede tardar un tiempo en acostumbrarse..
WordPress tiene una economía increíblemente activa. Hay temas, complementos, bibliotecas y muchos otros productos que lo ayudan a desarrollar su sitio y proyecto. La naturaleza de código abierto de la plataforma también lo convierte en una excelente opción desde donde puede mejorar sus habilidades de programación. En cualquier caso, puede ver todo lo que tenemos disponible en Envato Marketplace..
Espero que encuentre este tutorial una referencia útil para comenzar con Vagrant y VVV.
