Share
Japh, nel suo precedente articolo, ha spiegato la logica - e alla fine ci ha convinto - a impostare il nostro ambiente di sviluppo più vicino al server web remoto usando Vagrant. L'articolo ha più di due anni, ma l'idea è ancora attuale oggi. Ancora di più, Vagrant sta recentemente guadagnando popolarità nella community di WordPress con una configurazione speciale di Vagrant chiamata VVV, abbreviazione di Varying Vagrant Vagranti.
VVV è un preset della configurazione di Vagrant orientato verso progetti incentrati su WordPress come lo sviluppo di un tema, un plugin o il contributo a WordPress Core. VVV è anche dotato di una manciata di strumenti come WP-CLI, PHP Code Sniffer e Composer che potenziano i nostri flussi di lavoro di sviluppo.
Tuttavia, l'utilizzo di un'applicazione come MAMP, WAMP o XAMPP ha fornito un livello sufficiente di comodità per molti sviluppatori; questi strumenti potrebbero averli serviti così bene che la migrazione verso VVV non sembra necessaria.
Per questo particolare motivo, questo tutorial è rivolto a quelli di voi che sono stati utenti di vecchia data di queste tradizionali applicazioni stack per lo sviluppo di WordPress e ora pensano che l'app non stia più affrontando i vostri progetti più ampi e complessi.
Forse hai letto da qualche parte che Vagrant è considerato un'ottima alternativa, ma non sai da dove cominciare e se Vagrant è lo strumento giusto per te. Quindi, prima di approfondire ulteriormente, delineeremo il nostro scenario di sviluppo del progetto in cui utilizzare VVV sarà appropriato.
Cominciamo.
Prima di tutto, abbiamo un team di sviluppatori che ci aiuta con questo progetto. Il nostro team è distribuito in tutto il mondo e ognuno ha le proprie preferenze: alcuni usano Windows, altri usano OS X. Adottiamo Vagrant e VVV in modo che tutti abbiano lo stesso ambiente e rendano l'output del test più pertinente.
Il nostro progetto è quello di creare un tema e un plugin che invieremo al loro rispettivo repository WordPress.org.
Il tema dovrebbe essere compatibile con alcuni plugin popolari come Jetpack, WooCommerce, EDD e BBPress. Testeremo il plug-in anche su numerosi altri plug-in, assicurando che non vi siano conflitti o bug quando sono attivi insieme.
Inoltre, il tema e il plugin dovrebbero anche essere compatibili con le ultime e due versioni precedenti di WordPress e dovrebbero essere pronti per le versioni future di WordPress testandole attraverso la versione Beta.
La tabella seguente mostra dove il nostro tema e il nostro plugin dovrebbero essere compatibili con le versioni di WordPress e con un numero di plugin.
| Compatibilità: | Acme-StoreFront (tema) | Acme-LocalCurrency (plugin) |
|---|---|---|
| WordPress 4.2 | √ | - |
| WordPress 4.3 | √ | - |
| WordPress Latest | √ | √ |
| WordPress Beta | √ | √ |
| jetpack | √ | - |
| bbPress | √ | - |
| Easy Digital Downloads (EDD) | √ | √ |
| WooCommerce | √ | √ |
Inoltre, potremmo avere un sito Web locale all'indirizzo jetpack.wordpress.dev che ospiterà i temi (o plugin) che dipendono da uno o più dei moduli Jetpack come Infinite Scroll e Sharing.
Per evitare possibili interferenze da altri plugin, i plugin attivi all'interno jetpack.wordpress.dev sono solo Jetpack, con alcune eccezioni per alcuni plugin di supporto per lo sviluppo come Query Monitor, VIP Scanner e Debug Bar.
Alla fine, potremmo anche creare woo.wordpress.dev, bbp.wordpress.dev, e così via per costruire e testare i nostri progetti attorno alle funzionalità di questi plugin.
Ora che abbiamo una vaga idea di cosa fare e di avere questi strumenti installati, procederemo ora a impostare VVV attivo e funzionante. Iniziamo!
Per prima cosa, abbiamo bisogno di una macchina virtuale (VM) per ospitare i nostri ambienti di sviluppo creati tramite Vagrant. In questo tutorial, optiamo per VirtualBox; è gratuito e funziona su più piattaforme. Un programma di installazione è disponibile per ogni piattaforma - Windows, OSX e un paio di distribuzioni Linux - nella pagina Download.
Avvia il programma di installazione e segui i passaggi fino alla fine del processo. In alternativa, gli utenti di OS X possono installare VirtualBox tramite Homebrew Cask, che consente di installare VirtualBox in modo più conveniente con una singola riga di comando come segue.
brew cask installa virtualbox
Una volta installato VirtualBox, che potrebbe richiedere un po 'di tempo, procederemo con l'installazione di Vagrant.
Allo stesso modo, un programma di installazione di Vagrant è disponibile per OS X, Windows e Linux. Scaricalo uno per la tua piattaforma e segui i passaggi. Gli utenti di OS X possono installarlo tramite Homebrew Cask con la seguente riga di comando.
brew cask installare vagabondo
Una volta installato, dovresti accedere a vagabondo CLI.
Recupera la versione di Vagrant installata nel terminale OSXL'installazione dei seguenti plug-in vagrant è facoltativa, ma generalmente è una buona idea installarli per semplificare il processo di creazione dell'ambiente di sviluppo VVV, inclusi i siti Web locali, attivo e funzionante.
Vagrant Host Updater: questo plugin consentirà a Vagrant di aggiornare il file padroni di casa file per registrare il nome di dominio per i siti Web locali. Altrimenti, dovremo aggiungerlo da soli, il che sembra un po 'scomodo.
Esegui il seguente comando per installare il plugin:
plugin vagrant installa vagrant-hostsupdater
Trigger Vagrant: questo plugin consentirà a VVV di automatizzare una serie di processi come il backup dei database. Per installarlo, esegui:
plug-in vagabondo installa trigger-vagabondi
I prerequisiti, VirtualBox e Vagrant insieme ai plug-in, sono impostati. Quindi possiamo iniziare a installare VVV.
Innanzitutto, clonare VVV dal repository GitHub in una directory locale.
git clone git: //github.com/Varying-Vagrant-Vagrants/VVV.git
Una volta che il clone è a posto, vai alla directory in cui si trova. Quindi farlo funzionare con la seguente riga di comando:
cd vvv; vagabondo
VVV scaricherà e installerà Ubuntu come sistema operativo virtuale che ospiterà i nostri siti Web locali. A un certo punto, potrebbe anche essere necessario inserire la password per consentire a Vagrant di scrivere il file hosts.
VVV inizializzato per la prima voltaTenete a mente, questa è la prima volta che impostiamo VVV attivo e funzionante. Il processo richiederà molto tempo; potrebbero essere necessari da 30 minuti a un'ora per completare. Fai una passeggiata, un caffè o riposati mentre il processo è in corso.
Quando VVV è attivo e funzionante, ci fornisce un paio di installazioni predefinite di WordPress, come segue:
Accentsconagua
Stai utilizzando una versione di sviluppo (4.5-RC1-37169) nel footer.Accedi a questi siti con Admin come nome utente e parola d'ordine come la password.
Ora che abbiamo VVV attivo e funzionante, possiamo dare il via ai nostri nuovi progetti. Stiamo per creare un tema e un plugin di esempio. Ed è sempre stata la mia preferenza iniziare un tema con Underscores e utilizzare WPPB per un plugin.
Aggiungiamo questi boilerplate nella loro rispettiva directory all'interno del / Wp-content / directory di local.wordpress.dev, situato in / Wp-content VVV-directory / www / wordpress-default /.
Procedi con lo sviluppo del tema e del plugin; aggiungi alcune funzionalità, aggiungi una pagina Impostazioni per il tema, aggiungi un'integrazione più profonda con il Customizer per il tema e infine rendili pronti per le prossime uscite di WordPress.
Envato Tuts + ha pubblicato numerose risorse che potrebbero rivelarsi utili durante lo sviluppo. I seguenti sono alcuni dei miei preferiti preferiti:
Come accennato in precedenza, creeremo alcuni altri siti Web locali in cui svilupperemo il tema e il plug-in per l'integrazione con diversi plug-in come Jetpack, WooCommerce, EDD e BBPress. Stiamo anche impostando un paio di siti web per testare i nostri progetti contro le versioni precedenti di WordPress, in questo caso 4.3 e 4.2. A questo punto, l'abbiamo avuto solo local.wordpress-trunk.dev up, che ospita la versione di WordPress nightly, beta o release-candidate (RC).
Generalmente la creazione e l'impostazione di un sito Web locale richiedono diversi passaggi. Per prima cosa, dovremo scaricare la copia di WordPress, estrarla e collocarla nella radice del nostro localhost, creare un database, eseguire l'installazione di WordPress e modificare il file hosts per registrare il nome del dominio. Se portiamo il processo alla creazione, ad esempio, di tre o più siti Web locali, troveremo presto il processo inefficiente in termini di tempo.
Con VVV e la sua estensione denominata VV, abbreviazione di VVV variabile, saremo in grado di essere più produttivi con meno sforzo. Diamo un'occhiata a come distribuire VV.
Poiché il processo di installazione di VV in OS X e Windows varia, questa sezione è suddivisa in due sezioni. Puoi saltare immediatamente alla sezione della piattaforma che stai attualmente utilizzando.
Il modo più semplice per installare VV in OSX è tramite Homebrew. Basta digitare il seguente comando.
brew install bradp / vv / vv
In Windows, dovrai prima clonare il repository VV, da qualche parte nella directory del tuo computer.
git clone https://github.com/bradp/vv.git vv
Quindi abbiamo bisogno di Windows per riconoscere il vv comando.
Per fare ciò, fare clic con il tasto destro del mouse su Risorse del computer o Questo PC e selezionare Proprietà… . Quindi, andare a Impostazioni di sistema avanzate> Variabili d'ambiente. Seleziona "Percorso" dall'elenco delle variabili di sistema e fai clic su Modificare… .
Aggiungi il vv percorso di directory che hai già clonato. Per esempio:C: \ Users \ thoriq \ Siti \ vv.
Una volta installato, dovremmo avere accesso a vv comando a livello globale. Il comando ci consentirà di impostare nuove installazioni di WordPress attive e funzionanti tra le altre cose, che puoi trovare nei dettagli attraverso vv --help comando.
In OS X: elenco dei comandi VV CLIIn Windows, la CLI è accessibile sia tramite il prompt dei comandi (cmd.exe) che il Bash Git.
VV ha reso l'installazione di un nuovo sito WordPress facile come digitare il seguente comando:
vv crea
Una volta eseguito, richiederà alcune domande lungo la strada per configurare il nuovo sito Web, vale a dire:
Per gli utenti MAMP, è simile alla creazione di una nuova cartella all'interno della radice del documento MAMP in / MAMP / htdocs /. Questa è la cartella in cui risiedono tutte le risorse del sito web. In questo passaggio, inserisci il nome della directory senza spazi, preferibilmente in lettere minuscole, ad esempio:
Imposta il dominio per il nostro nuovo sito web. Un dominio per un sito web locale finisce normalmente con entrambi .dev o .Locale. In questo caso, chiamerò il nostro 42.wordpress.dev. È un sottodominio con il numero 42, che si riferisce alla versione di WordPress, 4.2.x, che stiamo per installare.
Qui installeremo WordPress 4.2.8, che è l'ultima iterazione all'interno del ramo 4.2. L'elenco completo delle versioni di WordPress è disponibile nella pagina Archivio di rilascio.
Ci chiede se vogliamo attivare la modalità Multisito di WordPress. Selezioniamo N.
Per il momento, supportare WordPress Multisite per i nostri temi e plugin non è la priorità assoluta. Se avremo mai bisogno di costruire e testare progetti sotto l'ambiente Multisito, in seguito potremmo creare un altro sito con un nuovo dominio, ad es.. mu.wordpress.dev.
Il WordPress wp-content la directory di solito ospita un numero di sottodirectory, come le directory dei temi, dei plugin e degli upload. A volte posso anche creare alcune cartelle extra per memorizzare alcuni file arbitrari. Se si dispone di un contenuto preimpostato ospitato su un repository Git, è possibile inserire l'URL e consentire a VV clonare il repository.
Per ora, lo lasciamo vuoto.
Non abbiamo un database SQL da importare, quindi lasceremo questo prompt vuoto. Ma, se ne hai uno, specifica il percorso della directory in cui risiede il file SQL, ad esempio: /Sites/db/wp.sql.
WordPress viene fornito con i temi predefiniti (ad esempio TwentyFifteen, TwentySixteen, ecc.) E i plug-in (Akismet e Hello Dolly) che, spesso, non verranno utilizzati. In questo passaggio, potremmo passare y alla richiesta di comunicare a VV di rimuoverli del tutto.
Possiamo dire a VV di installare il contenuto di esempio da WPTest. È un ampio set di contenuti che include post, pagine e commenti. Questo contenuto sarà utile per trovare disallineamenti, problemi di compatibilità o bug all'interno dei nostri temi e plugin. Quindi tipo y.
Dovremo sicuramente abilitare WP_DEBUG per consentire a WordPress di stampare eventuali errori PHP durante lo sviluppo. Quindi tipo y al prompt.
Infine, conferma che tutte le configurazioni definite siano corrette prima che VV proceda con l'installazione. Se tutto sembra a posto, digita y procedere. Altrimenti, digita n per interrompere l'operazione e si può ripetere il vv crea dall'inizio.
Una volta terminato, VV mostrerà il sito e le credenziali-username e password-per accedere, come segue.
Ripetere questi passaggi per installare gli altri siti citati nella sezione "Project Briefing" di questo tutorial.
Ora abbiamo diversi siti con ambienti diversi per testare i nostri progetti, temi o plug-in. Il numero dei nostri siti crescerà nel tempo, fino al punto in cui copiare le directory dei progetti intorno a questi ambienti di test sarebbe un'impresa inopportuna.
Per questo motivo, avremmo bisogno di una singola cartella in cui potremmo trasmettere il nostro progetto a questi siti web contemporaneamente, rendendo il nostro flusso di lavoro più organizzato.
Vagrant ci consente di sincronizzare le directory con la macchina virtuale. In effetti, Vagrant distribuisce la sua caratteristica proprio sotto il cofano. Se guardiamo al Vagrantfile sotto la sezione "Drive Mapping", troveremo che sincronizza un numero di directory incluso il www / dove è ospitata l'installazione di tutti i nostri siti.
Per cominciare, dobbiamo prima creare due directory, rispettivamente per ospitare i nostri plugin e temi. Puoi posizionare queste directory ovunque sul tuo computer. Nel mio caso, ho una directory di nome dev che contiene tutti i miei progetti, come segue.
. └── dev └── library ├── plugin └── temi
Quindi, registreremo la mappa di queste directory. Abbiamo tre siti WordPress installati su local.wordpress.dev e local.wordpress-trunk.dev. Quindi, queste directory verranno mappate, puntando e sincronizzandosi su ciascuna delle / plugins / e il / themes / directory di questi siti nella Macchina Virtuale.
Tuttavia, la modifica del file di sistema predefinito dovrebbe sempre essere evitata. Quindi, invece di modificare il Vagrantfile, aggiungeremo la configurazione di mappatura in un file chiamato Customfile-esaminando il Vagrantfile, a circa la linea 241, lo troveremo caricato per applicare personalizzato o sovrascrivere le configurazioni predefinite.
Crea il Customfile file nella stessa posizione di Vagrantfile.
. └── vvv └── Vagrantfile ├── Customfile
Aggiungi le seguenti righe di codice, che sono sicuro siano abbastanza auto-esplicative, nel file.
## Plugin config.vm.synced_folder "/ Utenti / thoriq / Sites / dev / plugins /", "/ srv / www / wordpress-default / wp-content / plugins",: owner => "www-data",: mount_options => ["dmode = 775", "fmode = 774"] config.vm.synced_folder "/ Utenti / thoriq / Sites / dev / plugins /", "/ srv / www / wordpress-develop / wp-content / plugins ",: owner =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "] config.vm.synced_folder" / Utenti / thoriq / Sites / dev / plugins / "," / srv / www / wordpress-42 / htdocs / wp-content / plugins ",: owner =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "] ## Temi 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" / Utenti / thoriq / Sites / dev / themes / "," / srv / www / wordpress-trunk / wp-content / themes ",: owner => "www-data",: mount_options => ["dmode = 775", "fmode = 774"] config.vm.synced_folder "/ Utenti / thoriq / Sites / dev / themes /", "/ srv / www / wordpress- 42 / htdocs / wp-con tent / themes ",: owner =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "]
Ricarica Vagrant eseguendo ricarica vagabonda, altro vagabondo se non è attualmente in esecuzione. I nostri plugin e temi in / Dev / plugins / e / Dev / themes / dovrebbe ora essere elencato in tutti i siti.
A questo punto, abbiamo impostato Vagrant e VVV attivi e funzionanti. Ora siamo in grado di creare un nuovo sito Web locale in pochi minuti senza destreggiarsi nel caos di scaricare WordPress .cerniera lampo pacchetto, estraendo il pacchetto e modificando il file padroni di casa voci di file.
La maggior parte delle nostre operazioni fino a questo punto sono state eseguite tramite l'interfaccia della riga di comando. Comprensibilmente potrebbe essere un po 'intimidatorio per i principianti, specialmente per quelli che provengono da applicazioni di interfaccia grafica come MAMP o WAMP. Ci vuole tempo per abituarsi.
Tuttavia, alcune operazioni in Vagrant possono essere sostituite con una controparte GUI. Ci sono alcune estensioni disponibili che aggiungono piacevoli livelli GUI a Vagrant e VVV, rendendo alcune cose facili come un clic. Alcuni di essi includono:
The Vagrant Dashboard presso vvv.dev è forse un equivalente di MAMP localhost / MAMP / pagina, tranne che appare in bianco puro.
Fortunatamente, possiamo animarlo con un'estensione. Ci sono alcune scelte, e opterò per VVV Dashboard di dall'alto al basso. Per distribuire l'estensione, accedere a / Www / default / directory e tira il repository dell'estensione:
dashboard git clone https://github.com/topdown/VVV-Dashboard.git
Quindi copia /dashboard/dashboard-custom.php in / default /, come segue.
. ── dashboard ├── dashboard-custom.php (la dashboard personalizzata) ├── database-admin ├── index.php ├── memcached-admin ├── opcache-status ├── phpinfo └── webgrind
Non c'è bisogno di ricaricare Vagrant. Aggiorna semplicemente VVV Dashboard su vvv.dev. Ora dovresti trovare molti altri dettagli della configurazione di Vagrant sul dashboard, oltre a elencare semplicemente i siti installati.
Dashboard VVV personalizzato. Un'altra utility che è possibile installare è Vagrant Manager.
Vagrant Manager è simile a MAMP e WAMP dove, in questo caso, ci consente di eseguire, fermare e ricaricare Vagrant in pochi clic. Vagrant Manager è disponibile in OS X attraverso Homebrew Cask e il .dmg, e in Windows attraverso il .EXE pacchetto di installazione. Quindi l'installazione dell'applicazione dovrebbe essere un gioco da ragazzi.
Una volta installato e in esecuzione Vagrant Manager, è possibile trovare un elenco delle configurazioni di Vagrant e attualmente attivo.
Vagrant viene fornito con phpMyAdmin integrato, accessibile da vvv.dev/database-admin/. Tuttavia, non sono un fan di phpMyAdmin. A parte l'interfaccia non elegante, è lento elaborare una query in un enorme database. Questi sono i motivi per cui preferisco usare un'applicazione nativa come Sequel Pro o SQL Workbench per Windows. Tuttavia, dobbiamo prima collegare l'applicazione a MySQL.
Qui sto usando Sequel Pro per OS X. Tuttavia, le credenziali necessarie per connettersi a MySQL sono applicabili indipendentemente dalle applicazioni che stai utilizzando. Loro sono la stessa cosa.
127.0.0.1 radice radice local.wordpress.dev (applicabile anche con qualsiasi dominio registrato in VVV)vagabondo vagabondo Se vedi un avviso come mostrato di seguito, puoi ignorarlo e fare semplicemente clic su "Sì" o "OK" per procedere. Ci stiamo collegando solo a una macchina virtuale sul nostro computer, quindi non ci dovrebbe essere nulla di cui preoccuparsi.
Una volta connesso, possiamo vedere il database dei nostri siti. Ora, possiamo fare cose come importare ed esportare un database, o probabilmente eseguire alcune query SQL.
Come accennato, VVV è dotato di un pacchetto di strumenti incluso PHP CodeSniffer, che consente di eseguire il controllo del codice sui progetti in base agli standard di codifica WordPress. Questo è qualcosa che penso che dovresti fare, specialmente prima del lancio del progetto.
Tuttavia, dal momento che PHP CodeSniffer è qualcosa che va oltre lo scopo di questo tutorial, ho messo insieme un paio di riferimenti per aiutarti a iniziare sull'argomento.
Abbiamo fatto un lungo cammino per impostare VVV in funzione e migliorarlo con un numero di estensioni. In definitiva, semplifica il nostro flusso di lavoro quando si tratta di creare un nuovo sito locale o testare ambienti con WordPress, anche se potrebbe volerci del tempo per abituarsi.
WordPress ha un'economia incredibilmente attiva. Ci sono temi, plugin, librerie e molti altri prodotti che ti aiutano a costruire il tuo sito e progetto. La natura open source della piattaforma lo rende anche un'ottima opzione da cui puoi migliorare le tue capacità di programmazione. In ogni caso, puoi vedere tutto ciò che abbiamo a disposizione nel Marketplace Envato.
Spero che questo tutorial sia un utile riferimento per iniziare con Vagrant e VVV.
