Share
Japh heeft in zijn vorige artikel de grondgedachte uiteengezet - en ons uiteindelijk overtuigd - om onze ontwikkelomgeving met Vagrant zo dicht mogelijk bij de externe webserver te plaatsen. Het artikel is meer dan twee jaar oud, maar het idee is nog steeds relevant vandaag. Meer zelfs, Vagrant heeft recentelijk tractie bereikt in de WordPress-gemeenschap met een speciale Vagrant-configuratie met de naam VVV, afkorting van Varying Vagrant Vagrants.
VVV is een voorinstelling van de Vagrant-configuratie die is gericht op WordPress-gerichte projecten, zoals het ontwikkelen van een thema, een plug-in of bijdragen aan WordPress Core. VVV zit ook vol met een handvol tools zoals WP-CLI, PHP Code Sniffer en Composer die onze ontwikkelingsworkflows verbeteren.
Desalniettemin biedt het gebruik van een applicatie zoals MAMP, WAMP of XAMPP een voldoende mate van gemak voor veel ontwikkelaars; deze tools hebben hun misschien zo goed gedaan dat migratie naar VVV niet nodig lijkt.
Om die reden is deze tutorial bedoeld voor diegenen onder u die al jarenlang gebruik maken van deze traditionele stack-applicaties voor het ontwikkelen van WordPress, en nu denken dat de app niet langer omgaat met uw meer uitgebreide en complexe projecten.
Misschien lees je ergens dat Vagrant een geweldig alternatief wordt genoemd, maar je weet niet waar te beginnen en of Vagrant de juiste tool voor je is. Dus voordat we verder duiken, zullen we ons projectontwikkelingsscenario beschrijven waarin het gebruik van VVV geschikt is.
Laten we beginnen.
Allereerst hebben we een team van ontwikkelaars die ons helpen met dit project. Ons team is verspreid over de hele wereld en iedereen heeft zijn eigen voorkeuren, sommigen gebruiken Windows, terwijl anderen OS X gebruiken. We gebruiken Vagrant en VVV zodat iedereen dezelfde omgeving heeft en de testoutput relevanter maakt.
Ons project is om een thema en een plug-in te maken die we inleveren bij hun respectieve WordPress.org-repository.
Het thema moet compatibel zijn met een paar populaire plug-ins, zoals Jetpack, WooCommerce, EDD en BBPress. We zullen de plug-in ook testen met een aantal andere plug-ins, zodat er geen conflicten of bugs zijn wanneer ze samen actief zijn.
Bovendien moeten het thema en de plug-in ook compatibel zijn met de nieuwste en twee eerdere versies van WordPress en moeten ze klaar zijn voor toekomstige WordPress-releases door ze te testen via de bètaversie.
De volgende tabel laat zien waar ons thema en onze plug-in compatibel moeten zijn met WordPress-versies en met een aantal plug-ins.
| Compatibiliteit: | Acme-StoreFront (thema) | Acme-LocalCurrency (plugin) |
|---|---|---|
| WordPress 4.2 | √ | - |
| WordPress 4.3 | √ | - |
| WordPress nieuwste | √ | √ |
| WordPress Beta | √ | √ |
| Jetpack | √ | - |
| BBPress | √ | - |
| Gemakkelijke digitale downloads (EDD) | √ | √ |
| WooCommerce | √ | √ |
Verder hebben we misschien een lokale website op jetpack.wordpress.dev die de thema's (of plug-ins) host die afhankelijk zijn van een of meer van de Jetpack-modules zoals Infinite Scroll and Sharing.
Om mogelijke interferenties van andere plug-ins te voorkomen, de actieve plug-ins in jetpack.wordpress.dev zijn alleen Jetpack, met enkele uitzonderingen voor een paar ondersteunende plug-ins voor ontwikkeling zoals Query Monitor, VIP Scanner en Debug Bar.
Uiteindelijk kunnen we ook creëren woo.wordpress.dev, bbp.wordpress.dev, en zo verder om onze projecten rond de functionaliteiten van deze plug-ins te bouwen en te testen.
Nu we een idee hebben van wat we gaan doen en deze tools hebben geïnstalleerd, gaan we nu door met het instellen van VVV. Laten we beginnen!
Eerst en vooral moeten we een virtuele machine (VM) hebben om onze ontwikkelingsomgevingen te ondersteunen die we met Vagrant hebben gecreëerd. In deze tutorial kiezen we voor VirtualBox; het is gratis en werkt platformonafhankelijk. Er is een installatieprogramma beschikbaar voor elk platform (Windows, OSX en een aantal Linux-distributies) op de downloadpagina.
Start het installatieprogramma en volg de stappen tot het einde van het proces. Als alternatief kunnen OS X-gebruikers VirtualBox installeren via Homebrew Cask, waarmee u VirtualBox eenvoudiger kunt installeren met één opdrachtregel als volgt.
brouw vat installeer virtualbox
Nadat VirtualBox is geïnstalleerd, wat even kan duren, gaan we verder met het installeren van Vagrant.
Evenzo is een Vagrant-installatieprogramma beschikbaar voor OS X, Windows en Linux. Download er een voor uw platform en volg de stappen tot en met. OS X-gebruikers kunnen het via Homebrew Cask installeren met de volgende opdrachtregel.
brouwt vat installeer dweper
Als het eenmaal is geïnstalleerd, zou u toegang moeten krijgen tot de zwerver CLI.
Haal de geïnstalleerde Vagrant-versie op in OSX TerminalHet installeren van de volgende vagrant-plug-ins is optioneel, maar het is over het algemeen een goed idee om ze te laten installeren om het proces van het opstarten van de VVV-ontwikkelomgeving, inclusief de lokale websites, te stroomlijnen..
Vagrant Hosts Updater: met deze plug-in kan Vagrant het hosts bestand om de domeinnaam voor de lokale websites te registreren. Anders zullen we het alleen moeten toevoegen, wat een beetje onhandig klinkt.
Voer de volgende opdracht uit om de plug-in te installeren:
vagrant plugin installeer vagrant-hostsupdater
Vagrant Triggers: met deze plug-in kan VVV een aantal processen automatiseren, zoals back-up van databases. Om het te installeren, voer:
vagrant plugin installeert vagrant-triggers
De vereisten - VirtualBox en Vagrant samen met de plug-ins - zijn ingesteld. Dus we kunnen beginnen met het installeren van VVV.
Eerst kloon VVV vanuit de GitHub-repository naar een lokale directory.
git clone git: //github.com/Varying-Vagrant-Vagrants/VVV.git
Zodra de kloon op zijn plaats is, navigeert u naar de map waar deze zich bevindt. Voer het vervolgens uit met de volgende opdrachtregel:
cd vvv; zwervend op
VVV zal Ubuntu downloaden en installeren als het virtuele besturingssysteem dat onze lokale websites host. Op een gegeven moment moet u mogelijk ook uw wachtwoord invoeren om Vagrant uw hosts-bestand te laten schrijven.
VVV voor de eerste keer geïnitialiseerdHoud in gedachten dat dit de eerste keer is dat we VVV in gebruik nemen. Het proces zal vrij lang duren; het kan 30 minuten tot een uur duren om te voltooien. Maak een wandeling, koffie of rust uit terwijl het proces aan de gang is.
Wanneer VVV operationeel is, biedt dit ons een aantal standaard WordPress-installaties, zoals:
Accentsconagua
U gebruikt een ontwikkelingsversie (4.5-RC1-37169) in de voettekst.Log in op deze sites met beheerder als de gebruikersnaam en wachtwoord als het wachtwoord.
Nu we VVV operationeel hebben, kunnen we onze nieuwe projecten starten. We gaan een voorbeeldthema en plug-in maken. En het is altijd mijn voorkeur geweest om een thema te beginnen met Underscores en WPPB als plug-in te gebruiken.
We voegen deze boilerplaten toe aan hun respectieve directory binnen de / Wp-content / map van local.wordpress.dev, gevestigd in Vvv-directory / www / wordpress-default / wp-content /.
Doorgaan met het ontwikkelen van het thema en plug-in; voeg een aantal functies toe, voeg een instellingenpagina toe voor het thema, voeg een diepere integratie toe met de Customizer voor het thema en maak ze eindelijk klaar voor de volgende WordPress-releases.
Envato Tuts + heeft een groot aantal bronnen gepubliceerd die nuttig kunnen zijn tijdens de ontwikkeling. De volgende zijn een select aantal van mijn favorieten:
Zoals we eerder al zeiden, gaan we een paar meer lokale websites maken waar we ons thema en onze plug-in zullen ontwikkelen voor integratie met verschillende plug-ins, zoals Jetpack, WooCommerce, EDD en BBPress. We gaan ook een aantal websites instellen om onze projecten te testen tegen eerdere versies van WordPress, in dit geval 4.3 en 4.2. Op dit punt hebben we alleen gehad local.wordpress-trunk.dev up, waar de WordPress night, beta of release-candidate (RC) -versie wordt gehost.
Het maken en instellen van een lokale website neemt meestal meerdere stappen. Eerst moeten we de WordPress-kopie downloaden, uitpakken en in de root van onze plaatsen localhost, maak een database aan, voer de WordPress-installatie uit en wijzig het hosts-bestand om de domeinnaam te registreren. Als we het proces omzetten naar bijvoorbeeld drie of meer lokale websites, zullen we het proces snel inefficiënt tijdrovend vinden.
Met VVV en zijn extensie genaamd VV, afkorting voor Variabele VVV, we zullen productiever kunnen zijn met minder inspanning. Laten we een kijkje nemen hoe VV te implementeren.
Aangezien het proces van installeren van VV in OS X en Windows varieert, is deze sectie verdeeld in twee secties. U kunt onmiddellijk naar het gedeelte van het platform springen dat u momenteel gebruikt.
De eenvoudigste manier om VV in OSX te installeren, is via Homebrew. Typ gewoon de volgende opdracht.
brouw installatie bradp / vv / vv
In Windows moet je eerst de VV-repository klonen, ergens in je computerdirectory.
git clone https://github.com/bradp/vv.git vv
Dan moeten we Windows herkennen vv commando.
Hiertoe klikt u met de rechtermuisknop op Deze computer of Deze pc en selecteert u Eigenschappen ... . Ga dan naar Geavanceerde systeeminstellingen> Omgevingsvariabelen. Selecteer "Pad" in de lijst Systeemvariabele en klik op Bewerk… .
Voeg de toe vv mappad dat je eerder hebt gekloond. Bijvoorbeeld:C: \ Users \ thoriq \ Sites \ vv.
Eenmaal geïnstalleerd, moeten we toegang krijgen tot de vv bevel wereldwijd. De opdracht stelt ons in staat om onder andere nieuwe WordPress-installaties in te stellen en uit te voeren, waar u de details van kunt vinden via de vv --help commando.
In OS X: VV CLI-lijst met opdrachtenIn Windows is de CLI toegankelijk via de opdrachtprompt (cmd.exe) en de Bash Git.
VV heeft het installeren van een nieuwe WordPress-site net zo gemakkelijk gemaakt als het typen van de volgende opdracht:
vv maken
Als het eenmaal is uitgevoerd, vraagt het onderweg een paar vragen om de nieuwe website te configureren, namelijk:
Voor MAMP-gebruikers lijkt het op het maken van een nieuwe map in de MAMP-documentroot op / MAMP / htdocs /. Dit is de map waar alle websiteactiva zich bevinden. Voer in deze stap de naam van de map in zonder spaties, bij voorkeur in kleine letters, bijvoorbeeld:
Stel het domein in voor onze nieuwe website. Een domein voor een lokale website eindigt gewoonlijk met een van beide .dev of .lokaal. In dit geval zal ik de onze noemen 42.wordpress.dev. Het is een subdomein met het nummer 42, wat verwijst naar de WordPress-versie, 4.2.x, die we gaan installeren.
Hier zullen we WordPress 4.2.8 installeren, de laatste iteratie binnen de 4.2-tak. De volledige lijst van WordPress-releases is te vinden op de pagina Release-archief.
Het vraagt ons of we de WordPress Multisite-modus willen activeren. We selecteren N.
Voorlopig is de ondersteuning van WordPress Multisite voor onze thema's en plug-ins niet de hoogste prioriteit. Als we ooit projecten in de Multisite-omgeving zullen moeten bouwen en testen, kunnen we later een andere site onder een nieuw domein maken, bijvoorbeeld. mu.wordpress.dev.
De WordPress wp-content directory bevat meestal een aantal submappen, zoals de directory's themes, plugins en uploads. Soms maak ik ook een paar extra mappen om enkele willekeurige bestanden op te slaan. Als u een vooraf ingestelde inhoud hebt die wordt gehost op een Git-repository, kunt u de URL invoeren en VV de repository laten klonen.
Voorlopig laten we het leeg.
We hebben geen SQL-database om te importeren, dus we laten deze prompt ook leeg. Maar als u er een hebt, geeft u het mappad op waar het SQL-bestand zich bevindt, bijvoorbeeld: /Sites/db/wp.sql.
WordPress wordt geleverd met de standaardthema's (bijvoorbeeld TwentyFifteen, TwentySixteen, etc.) en plug-ins (Akismet en Hello Dolly) die we vaak niet zullen gebruiken. In deze stap kunnen we slagen Y om aan VV te vragen om ze allemaal te verwijderen.
We kunnen VV vertellen om voorbeeldinhoud van WPTest te installeren. Het is een uitgebreide set inhoud die berichten, pagina's en opmerkingen bevat. Deze inhoud komt van pas om onvolkomenheden, compatibiliteitsproblemen of fouten in onze thema's en plug-ins te vinden. Vandaar type Y.
We zullen zeker WP_DEBUG inschakelen om WordPress tijdens de ontwikkeling eventuele PHP-fouten te laten afdrukken. Vandaar type Y op de vraag.
Bevestig ten slotte dat alle gedefinieerde configuraties correct zijn voordat VV doorgaat met de installatie. Als alles er goed uitziet, typ je Y verder gaan. Anders typt u n om de bewerking af te breken en kunt u het herhalen vv maken vanaf het begin.
Zodra dit is voltooid, geeft VV de site weer, evenals de gebruikersnaam en het wachtwoord om als volgt in te loggen.
Herhaal deze stappen om de andere bovengenoemde sites te installeren in het gedeelte 'Project Briefing' van deze zelfstudie.
We hebben nu verschillende sites met verschillende omgevingen om onze projecten-thema's of plug-ins te testen. Het aantal van onze sites zal in de loop van de tijd toenemen, tot het punt waarop het kopiëren van projectmappen rondom deze testomgevingen een ongemakkelijke onderneming zou zijn.
Om die reden zouden we een enkele map nodig hebben waar we ons project tegelijk naar deze websites kunnen casten, waardoor onze workflow uiteindelijk beter georganiseerd wordt.
Met Vagrant kunnen we mappen synchroniseren met de virtuele machine. In feite zet Vagrant zijn eigen functie onder de motorkap in. Als we naar de Vagrantfile onder de sectie "Drive Mapping", zullen we zien dat het een aantal directories synchroniseert, inclusief de www / waar de installatie van al onze sites wordt gehost.
Om te beginnen moeten we eerst twee mappen maken, respectievelijk om onze plug-ins en thema's te hosten. U kunt deze mappen overal op uw computer plaatsen. In mijn geval heb ik een map met de naam dev die al mijn projecten bevat, als volgt.
. └── dev └── bibliotheek ├── plugins └── thema's
Vervolgens registreren we de kaart van deze mappen. We hebben drie WordPress-sites geïnstalleerd op local.wordpress.dev en local.wordpress-trunk.dev. Deze mappen worden dus toegewezen aan, gericht op en gesynchroniseerd met elk van de / Plugins / en de /thema's/ directory van deze sites in de virtuele machine.
Het wijzigen van het standaard systeembestand moet echter altijd worden vermeden. Vandaar dat in plaats van het wijzigen van de Vagrantfile, we zullen de toewijzingconfiguratie toevoegen aan een bestand met de naam Aangepast bestand-kijken naar de Vagrantfile, op lijn 241 zullen we zien dat het geladen is om aangepast te zijn of de standaardconfiguraties te overschrijven.
Maak het Aangepast bestand bestand op dezelfde locatie als Vagrantfile.
. └── vvv └── Vagrantfile ├── Customfile
Voeg de volgende coderegels toe, waarvan ik zeker ben dat ze voor zichzelf spreken, in het bestand.
## 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 / plug-ins ",: 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 "] ## Thema's 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 tent / themes ",: owner =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "]
Herlaad Vagrant door te rennen vagrant herladen, anders zwervend op als het niet actief is. Onze plug-ins en thema's in / Dev / plugins / en / Dev / themes / moet nu in alle sites worden vermeld.
Op dit punt hebben we Vagrant en VVV in gebruik genomen. We zijn nu in staat om binnen enkele minuten een nieuwe lokale website te maken zonder de rommel van het downloaden van de WordPress te jongleren .ritssluiting pakket, het pakket uitpakken en het bewerken hosts bestandsvermeldingen.
De meeste van onze operaties tot nu toe zijn uitgevoerd via de opdrachtregelinterface. Het is begrijpelijkerwijs een beetje intimiderend voor first-timers, vooral voor degenen die afkomstig zijn van grafische interface-applicaties zoals MAMP of WAMP. Het kost tijd om eraan te wennen.
Sommige bewerkingen in Vagrant kunnen echter worden vervangen door een GUI-tegenpool. Er zijn een aantal uitbreidingen beschikbaar die mooie GUI-lagen toevoegen aan Vagrant en VVV, waardoor je dingen eenvoudig kunt doen. Sommigen van hen omvatten:
The Vagrant Dashboard at vvv.dev is misschien een equivalent van MAMP's localhost / MAMP / pagina, behalve als deze in gewoon wit wordt weergegeven.
Gelukkig kunnen we het verlevendigen met een extensie. Er zijn een paar keuzes en ik zal kiezen voor VVV Dashboard van ondersteboven. Als u de extensie wilt implementeren, navigeert u naar de / Www / default / map en trek de extensie repository:
git clone https://github.com/topdown/VVV-Dashboard.git dashboard
Kopieer dan /dashboard/dashboard-custom.php in / Defaults /, als volgt.
. ── dashboard ├── dashboard-custom.php (het aangepaste dashboard) ├── database-admin ├── index.php ├── memcached-admin ├── opcache-status ├── phpinfo └── webgrind
Het is niet nodig om Vagrant opnieuw te laden. Vernieuw eenvoudig het VVV-dashboard bij vvv.dev. U zou nu veel andere details van onze Vagrant-configuratie op het dashboard moeten vinden, afgezien van het alleen weergeven van de geïnstalleerde sites.
Aangepast VVV-dashboard. Een ander hulpprogramma dat u kunt installeren, is de Vagrant-manager.
Vagrant Manager is verwant aan MAMP en WAMP, waar het in dit geval ons in staat stelt Vagrant in enkele klikken uit te voeren, te stoppen en opnieuw te laden. Vagrant Manager is beschikbaar in OS X via Homebrew Cask en de .dmg, en in Windows via de .exe installatiepakket. Vandaar dat het installeren van de applicatie een no-brainer zou moeten zijn.
Nadat Vagrant Manager is geïnstalleerd en actief is, kunt u een lijst met uw Vagrant-configuraties vinden die momenteel actief is.
Vagrant wordt ook geleverd met phpMyAdmin ingebouwd, toegankelijk via vvv.dev/database-admin/. Ik ben echter geen fan van phpMyAdmin. Afgezien van de unlovely interface, is het traag om een query in een enorme database te verwerken. Dit zijn juist de redenen waarom ik liever een native applicatie gebruik, zoals Sequel Pro, of SQL Workbench voor Windows. We moeten echter eerst de applicatie verbinden met MySQL.
Hier gebruik ik Sequel Pro voor OS X. Toch zijn de referenties die vereist zijn om verbinding te maken met MySQL van toepassing, ongeacht de applicaties die u gebruikt. Ze zijn hetzelfde.
127.0.0.1 wortel wortel local.wordpress.dev (ook van toepassing op elk domein geregistreerd in VVV)zwerver zwerver Als u een waarschuwing ziet zoals hieronder getoond, kunt u deze negeren en eenvoudig op "Ja" of "OK" klikken om door te gaan. We verbinden alleen met een virtuele machine op onze eigen computer, dus er hoeft niets te zijn om ons zorgen over te maken.
Eenmaal verbonden, zien we de database van onze sites. Nu kunnen we een aantal dingen doen, zoals het importeren en exporteren van een database, of waarschijnlijk sommige SQL-query's uitvoeren.
Zoals eerder vermeld, wordt VVV geleverd met een pakket hulpprogramma's, waaronder PHP CodeSniffer, waarmee u codecontrole op uw projecten kunt uitvoeren met de coderingsstandaarden van WordPress. Dat is iets wat ik denk dat je moet doen, vooral voorafgaand aan de projectlancering.
Aangezien PHP CodeSniffer iets is dat buiten het bestek van deze tutorial valt, heb ik een aantal referenties samengesteld om u te helpen aan de slag te gaan met het onderwerp.
We hebben een lange weg afgelegd om VVV in gebruik te nemen en te verbeteren met een aantal uitbreidingen. Uiteindelijk stroomlijnt het onze workflow als het gaat om het creëren van een nieuwe lokale site of testomgevingen met WordPress, hoewel het even kan duren om er aan te wennen.
WordPress heeft een ongelooflijk actieve economie. Er zijn thema's, plug-ins, bibliotheken en vele andere producten die u helpen uw site en project uit te bouwen. De open-source aard van het platform maakt het ook een geweldige optie van waaruit je je programmeervaardigheden kunt verbeteren. Hoe het ook zij, u kunt alles zien wat we beschikbaar hebben in de Envato Marketplace.
Ik hoop dat je deze tutorial een handige referentie vindt om aan de slag te gaan met Vagrant en VVV.
