WordPress utveckling med VVV

Japh har i sin tidigare artikel förklarat motiveringen - och så småningom övertygat oss - att ställa in vår utvecklingsmiljö så nära den fjärranslutna webbservern med hjälp av Vagrant. Artikeln är mer än två år gammal, men tanken är fortfarande relevant idag. Ännu mer har Vagrant nyligen fått dragkraft i WordPress-samhället med en speciell Vagrant-konfiguration med namnet VVV, kort för Varying Vagrant Vagrants.

VVV är en förinställd Vagrant-konfiguration som är inriktad mot WordPress-centrerade projekt som att utveckla ett tema, ett plugin eller bidra till WordPress Core. VVV är också förpackad med en handfull verktyg som WP-CLI, PHP Code Sniffer och Kompositör som supercharge våra utvecklings arbetsflöden.

Ändå har användningen av en applikation som MAMP, WAMP eller XAMPP tillhandahållit en tillräcklig bekvämlighet för många utvecklare. dessa verktyg kan ha tjänat dem så bra att det inte verkar nödvändigt att migrera till VVV.

Av den speciella orsaken riktar sig denna handledning till dig som har använt långsiktiga användare av dessa traditionella stackprogram för att utveckla WordPress och känner nu att appen inte längre klarar av dina mer omfattande och komplexa projekt.

Kanske läser du någonstans om Vagrant kallas ett bra alternativ, men du vet inte vart du ska börja och om Vagrant är det rätta verktyget för dig. Så innan vi dyker vidare kommer vi att beskriva vårt projektutvecklingsscenario där användandet av VVV kommer att vara lämpligt.

Låt oss börja.

Projekt Briefing

Först och främst har vi ett team utvecklare som hjälper oss med det här projektet. Vårt team är distribuerat över hela världen och alla har egna preferenser, vissa använder Windows medan andra använder OS X. Vi adopterar Vagrant och VVV så att alla har samma miljö och gör testutgången mer relevant.

Vårt projekt är att skapa ett tema och ett plugin som vi ska skicka till deras respektive WordPress.org-arkiv.

Temat bör vara kompatibelt med några populära plugins som Jetpack, WooCommerce, EDD och BBPress. Vi kommer också att testa pluginet mot ett antal andra plugins, vilket inte garanterar några konflikter eller buggar när de är aktiva tillsammans.

Dessutom bör temat och plugin vara kompatibelt med de senaste såväl som två tidigare versioner av WordPress och bör vara redo för framtida WordPress-utgåvor genom att testa dem via Beta-versionen.

Följande tabell visar var vårt tema och plugin ska vara kompatibelt med WordPress-versionerna och med ett antal plugins.

Kompatibilitet: Acme-StoreFront (tema) Acme-LocalCurrency (plugin)
WordPress 4.2 -
WordPress 4.3 -
WordPress Senaste
WordPress Beta
Ryggraket -
bbPress -
Easy Digital Downloads (EDD)
WooCommerce

Dessutom kan vi ha en lokal webbplats på jetpack.wordpress.dev som kommer att vara värd för teman (eller plugin) som är beroende av en eller flera av Jetpack-modulerna som oändlig bläddring och delning.

För att undvika eventuella störningar från andra plugins, aktiveras de aktiva pluggarna inom jetpack.wordpress.dev är bara Jetpack, med några undantag för några stödjande plugins för utveckling som Query Monitor, VIP Scanner och Debug Bar.

Till sist kan vi också skapa woo.wordpress.devbbp.wordpress.dev, och så vidare för att bygga och testa våra projekt kring dessa plugins funktioner.

Vad behöver du ha installerat?

  • Git: I denna handledning använder vi huvudsakligen Git för att klona ett förråd. Generellt bör du använda den för att spåra och hantera dina projektändringar.
  • Terminal: De flesta av våra operationer genom hela denna handledning kommer att ske i Terminal. Windows 10 Användarna kommer äntligen att kunna köra Bash-skript via Command Prompt. Windows 8 eller 7 Användare kan använda Bash Git, som är förinstallerad via Git installationsprogrammet, Cygwin. Cmder kan vara ett bra alternativ.
  • homebrew: för OSX-användare rekommenderar jag starkt att du installerar Homebrew och Homebrew Cask, vilket gör att du installerar några saker i denna handledning en bris. Här är en handledning från vår systersida, Computer Tuts +, Perfekta konfigurationer med Homebrew och Cask.

Nu när vi har en grov uppfattning om vad vi ska göra och du har dessa verktyg installerade, kommer vi nu fortsätta att ställa in VVV igång. Låt oss börja!

Steg 1: Installera VirtualBox

Först och främst behöver vi en Virtual Machine (VM) som värd för våra utvecklingsmiljöer skapade genom Vagrant. I den här handledningen väljer vi VirtualBox; Det är gratis och fungerar på plattformen. Ett installationsprogram är tillgängligt för varje plattform, Windows, OSX och ett par Linux-distributioner - på hämtningssidan.

Starta installationsprogrammet och följ stegen ända fram till slutet av processen. Alternativt kan OS X-användare installera VirtualBox via Homebrew Cask, vilket gör att du kan installera VirtualBox mer bekvämt med en enda kommandorad som följer.

brew cask installera virtualbox

När VirtualBox har installerats, vilket kan ta ett tag, fortsätter vi att installera Vagrant.

Steg 2: Installera Vagrant

På liknande sätt finns en Vagrant installer tillgänglig för OS X, Windows och Linux. Hämta en för din plattform och följ stegen genom. OS X-användare kan installera det via Homebrew Cask med följande kommandorad.

brew cask install vagrant

När det är installerat, ska du få tillgång till luffare CLI.

Hämta installerad Vagrant-version i OSX-terminalen

Steg 3: Installera Vagrant Plugins

Installera följande vagrant plugins är valfritt, men det är generellt en bra idé att få dem installerade för att effektivisera processen för att få VVV-utvecklingsmiljön, inklusive de lokala webbplatserna, upp och igång.

Vagrant Hosts Updater: det här pluginet tillåter Vagrant att uppdatera värdar fil för att registrera domännamnet för de lokala webbplatserna. Annars måste vi lägga till det på egen hand, vilket låter lite obekvämt.

Kör följande kommando för att installera plugin:

vagrant plugin installera vagrant-hostsupdater

Vagrant Triggers: Med denna plugin kan VVV automatisera ett antal processer som säkerhetskopiering av databaser. För att installera det, kör:

vagrant plugin installera vagrant-triggers

Förutsättningarna-VirtualBox och Vagrant tillsammans med plugins-är inställda. Så vi kan börja installera VVV.

Steg 4: Installera VVV

Först klon VVV från GitHub-förvaret till en lokal katalog.

git klon git: //github.com/Varying-Vagrant-Vagrants/VVV.git

När klonen är på plats, navigerar du till katalogen där den är bosatt. Sedan få det igång med följande kommandorad:

cd vvv; vagrant upp

VVV kommer att ladda ner och installera Ubuntu som det virtuella operativsystemet som kommer att vara värd för våra lokala webbplatser. Vid något tillfälle kan du också behöva ange ditt lösenord för att låta Vagrant skriva din värdfil.

VVV initialiserades för första gången

Tänk på, det här är första gången vi ställer in VVV. Processen kommer att ta ganska lång tid; Det kan ta 30 minuter till en timme eller så att slutföra. Ta en promenad, en kopp kaffe eller ta dig vila medan processen är igång.

När VVV är igång, ger den oss ett par WordPress-standardinstallationer, enligt följande:

  • local.wordpress.dev: den senaste stabila versionen av WordPress.
  • local.wordpress-trunk.dev: Det är WordPress nattliga utgåvan som innehåller grovkanten. Om du loggar in på instrumentpanelen hittar du något i linje med Du använder en utvecklingsversion (4.5-RC1-37169) i sidfoten.

Logga in på dessa webbplatser med administration som användarnamn och Lösenord som lösenordet.

Steg 5: Lägg till ett nytt WordPress-projekt i VVV

Nu när vi har VVV igång kan vi sparka av våra nya projekt. Vi ska skapa ett provtema och plugin. Och det har alltid varit min önskan att starta ett tema med Underscores och att använda WPPB för ett plugin.

Vi lägger till dessa pannplattor i deras respektive katalog inom / Wp-innehåll / katalog över local.wordpress.dev, belägen vid Vvv-katalogen / www / wordpress-default / wp-innehåll /.

Fortsätt med att utveckla temat och plugin; lägg till några funktioner, lägg till en inställningssida för temat, lägg till djupare integration med Customizer för temat och slutligen göra dem redo för WordPress nästa utgåvor.

Envato Tuts + har publicerat många resurser som kan komma till nytta under utvecklingen. Följande är ett urval av mina favoriter:

  • Bygga ett WordPress-tema på 60 sekunder
  • En snabbguide till WordPress Customizer-gränssnittet
  • Tuts + Guide till Mall Taggar
  • Nybörjarens guide till WordPress-taxonomier
  • Introduktion till att skapa din första WordPress Widget
  • Tips för bästa praxis i WordPress Development

Skapa en ny lokal webbplats med VV

Som vi nämnde tidigare kommer vi att skapa några fler lokala webbplatser där vi utvecklar vårt tema och plugin för integration med flera plugins som Jetpack, WooCommerce, EDD och BBPress. Vi kommer också att ställa in ett par webbplatser för att testa våra projekt mot tidigare versioner av WordPress, i det här fallet 4.3 och 4.2. Vid denna tidpunkt har vi bara haft local.wordpress-trunk.dev up, som är värd för WordPress nattlig, beta eller release-kandidat (RC) -version.

Att skapa och konfigurera en lokal webbplats tar vanligtvis flera steg. Först måste vi ladda ner WordPress-kopian, extrahera och placera den i vårens rot lokal värd, skapa en databas, kör WordPress-installationen och ändra värdfilen för att registrera domännamnet. Om vi ​​tar processen till att skapa, säg tre eller flera lokala webbplatser, kommer vi snart att hitta processen ineffektivt tidskrävande.

Med VVV och dess förlängning med namnet VV, kort för Variabel VVV, Vi kommer att kunna vara mer produktiva med mindre ansträngning. Låt oss ta en titt på hur man distribuerar VV.

Installera VV

Eftersom processen med att installera VV i OS X och Windows varierar, är detta avsnitt uppdelat i två sektioner. Du kan hoppa direkt till den del av plattformen du använder för närvarande.

Installera VV i OS X

Det enklaste sättet att installera VV i OSX är genom Homebrew. Skriv bara följande kommando.

brygg installation bradp / vv / vv

Installera VV i Windows

I Windows måste du först klona VV-förvaret, någonstans i din datorkatalog.

git klon https://github.com/bradp/vv.git vv

Då behöver vi Windows för att känna igen vv kommando.

För att göra det, högerklicka på Den här datorn eller den här datorn och välj Egenskaper… . Gå sedan till Avancerade systeminställningar> Miljövariabler. Välj "Path" från listan Systemvariabel och klicka på Redigera… .

Lägg till vv katalogväg som du klonat tidigare. Till exempel:C: \ Users \ thoriq \ platser \ vv.

En gång installerad borde vi få tillgång till vv kommando globalt. Kommandot kommer att tillåta oss att ställa in nya WordPress-installationer, bland annat, som du kan hitta detaljerna i genom vv - hjälp kommando.

I OS X: VV CLI-lista med kommandon

I Windows är CLI tillgängligt både genom Kommandotolken (cmd.exe) och Bash Git.

Skapa en ny WordPress-webbplats

VV har gjort det enklare att installera en ny WordPress-webbplats som att skriva följande kommando:

vv skapa

När den är genomförd kommer den att ställa några frågor längs vägen för att konfigurera den nya webbplatsen, nämligen:

1. Namn på sajtkatalogen

För MAMP-användare liknar det att skapa en ny mapp i MAMP-dokumentets rot på / MAMP / htdocs /. Det här är den mapp där alla webbplatsens tillgångar är bosatta. I detta steg anger du namnet katalogen utan mellanslag, helst i små bokstäver, till exempel:

2. Namn på domänen

Ange domänen för vår nya hemsida. En domän för en lokal webbplats slutar ofta med antingen .dev eller .lokal. I det här fallet kommer jag att namnge vårt 42.wordpress.dev. Det är en deldomän med numret 42, som hänvisar till WordPress versionen, 4.2.x, som vi ska installera.

3. Ställ in WordPress-versionen

Här installerar vi WordPress 4.2.8, vilket är den senaste iterationen inom 4,2-avdelningen. Den kompletta listan över WordPress-utgåvor finns på sidan Release Archive.

4. Aktivera multisite

Det frågar oss om vi vill aktivera WordPress Multisite-läge. Vi väljer N.

För närvarande stöder WordPress Multisite för våra teman och plugins inte högsta prioritet. Om vi ​​någonsin kommer att behöva bygga och testa projekt inom multisite-miljön, kan vi senare skapa en annan webbplats under en ny domän, t.ex.. mu.wordpress.dev.

5. WP-innehålls tillgångar

WordPress wp-innehåll katalogen brukar vara värd för ett antal underkataloger, till exempel teman, plugins och uppladdningsbara kataloger. Ibland kan jag också skapa några extra mappar för att lagra några godtyckliga filer. Om du har ett förinställt innehåll som är värd på ett Git-arkiv kan du ange webbadressen och låta VV klona förvaret.

För tillfället lämnar vi den tom.

6. Importera SQL

Vi har inte en SQL-databas att importera, så vi lämnar också den här prompten tom. Men om du har en anger du katalogvägen där SQL-filen finns, till exempel: /Sites/db/wp.sql.

7. Standardteman och plugins

WordPress levereras med standard teman (t ex Tjugofiften, TjugoSixteen etc.) och plugins (Akismet och Hello Dolly) som vi ofta inte kommer att använda. I det här steget kan vi passera y till prompten att berätta för VV att ta bort dem helt och hållet.

8. Dummy Content

Vi kan berätta för VV att installera provinnehåll från WPTest. Det är en omfattande uppsättning innehåll som innehåller inlägg, sidor och kommentarer. Det här innehållet kommer att vara användbart för att hitta felanpassningar, kompatibilitetsproblem eller fel i våra teman och plugins. Skriv därför y.

9. WP_DEBUG

Vi ska definitivt aktivera WP_DEBUG för att låta WordPress skriva ut några PHP-fel under utveckling. Skriv därför y i snabb takt.

10. Bekräftelse

Slutligen bekräfta att alla definierade konfigurationer är korrekta innan VV fortsätter med installationen. Om allt ser bra ut, skriv y att fortsätta. I annat fall, skriv n att avbryta operationen och du kan upprepa vv skapa från början.

När en gång är klar visar VV webbplatsen samt referens-användarnamnet och lösenordet för att logga in, enligt följande.

Upprepa dessa steg för att installera de andra ovan nämnda platserna i avsnittet "Projekt Briefing" i denna handledning.

Organisera och synkronisera projekt

Vi har nu flera webbplatser med olika miljöer för att testa våra projekt-teman eller plugins. Antalet av våra sajter kommer att växa över tiden, fram till den punkt där kopiering av projektkataloger runt om i dessa testmiljöer skulle vara ett obekvämt åtagande.

Av den anledningen skulle vi behöva en enda mapp där vi kunde kasta vårt projekt på dessa webbplatser på en gång och slutligen göra vårt arbetsflöde mer organiserat.

En kortfattad diskutbildning

Vagrant tillåter oss att synkronisera kataloger till den virtuella maskinen. Faktum är att Vagrant använder sin egen funktion under huven. Om vi ​​tittar på Vagrantfile Under avsnittet "Drive Mapping" hittar vi det synkroniserar ett antal kataloger inklusive www / där alla våra webbplatsers installation är värd.

Kartläggning av en anpassad katalog

Till att börja med måste vi först skapa två kataloger, respektive för att vara värd för våra plugins och teman. Du kan placera dessa kataloger var som helst på din dator. I mitt fall har jag en katalog som heter dev som innehåller alla mina projekt, enligt följande.

. └── dev └── library ├── plugins └── teman 

Då registrerar vi kartan över dessa kataloger. Vi har tre WordPress-webbplatser installerade på local.wordpress.dev och local.wordpress-trunk.dev. Så kommer dessa kataloger att kartläggas, peka och synkronisera till var och en av / plugins / och den / teman / katalog över dessa webbplatser i den virtuella maskinen.

Ändring av standardfilen bör dock alltid undvikas. Därför istället för att modifiera Vagrantfile, Vi lägger till mappkonfigurationen i en fil med namnet Customfile-tittar på Vagrantfile, vid ungefär linje 241, hittar vi den laddad för att tillämpa anpassade eller åsidosätta standardkonfigurationerna.

Skapa Customfile filen på samma plats som Vagrantfile.

. └──vvv └── Vagrantfile ├── Customfile 

Lägg till följande rader av kod, vilket jag är säker på är ganska självförklarande, i filen.

## Plugins config.vm.synced_folder "/ Användare / Thoriq / Sites / dev / plugins /", "/ srv / www / wordpress-default / wp-content / plugins",: ägare => "www-data" mount_options => ["dmode = 775", "fmode = 774"] config.vm.synced_folder "/ Användare / thoriq / Sites / dev / plugins /", "/ srv / www / wordpress-develop / wp-content / plugins ",: owner =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "] config.vm.synced_folder" / Användare / Thoriq / Sites / dev / plugins / "," / srv / www / wordpress-42 / htdocs / wp-content / plugins ",: ägare =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "] ## Teman config.vm .synced_folder "/ Användare / Thoriq / Sites / dev / themes /", "/ srv / www / wordpress-default / wp-content / themes",: ägare => "www-data",: mount_options => ["dmode = 775 "," fmode = 774 "] config.vm.synced_folder" / Användare / Thoriq / Sites / dev / teman / "," / srv / www / wordpress-trunk / wp-content / themes " "www-data",: mount_options => ["dmode = 775", "fmode = 774"] config.vm.synced_folder "/ Användare / Thoriq / Sites / dev / themes /", "/ srv / www / wordpress- 42 / htdocs / wp-con tält / teman ",: ägare =>" www-data ",: mount_options => [" dmode = 775 "," fmode = 774 "] 

Uppdatera Vagrant genom att springa vagrant reload, annan vagrant upp om det inte körs för närvarande. Våra plugins och teman i / Dev / insticksmoduler / och / Dev / teman / bör nu listas på alla webbplatser.

Lägga till GUI-skiktet

Vid denna tidpunkt har vi satt Vagrant och VVV igång. Vi kan nu skapa en ny lokal webbplats på några minuter utan att jonglera roten att ladda ner WordPress .blixtlås paket, extrahera paketet och redigera värdar fil poster.

De flesta av våra operationer till denna punkt har gjorts via kommandoradsgränssnittet. Det kan förstås vara lite skrämmande för första timers, speciellt för dem som kommer från grafiska applikationer som MAMP eller WAMP. Det tar tid att vänja sig vid det.

En del operationer i Vagrant kan dock ersättas med en GUI-motsvarighet. Det finns några tillägg som lägger till trevliga GUI-skikt till Vagrant och VVV, vilket gör att du gör några saker så enkelt som ett klick. Några av dem är:

Vagrant Dashboard

Vagrant Dashboard på vvv.dev är kanske en ekvivalent med MAMPs localhost / MAMP / sidan, förutom att den visas i vanligt vitt.

Lyckligtvis kan vi uppleva det med en förlängning. Det finns några val, och jag väljer VVV Dashboard av topdown. För att distribuera förlängningen navigerar du till / Www / default / katalog och dra förlängningsförvaret:

git klon https://github.com/topdown/VVV-Dashboard.git instrumentpanelen

Kopiera sedan /dashboard/dashboard-custom.php in i / defaults /, som följer.

. ─ - instrumentpanel ├── dashboard-custom.php (den anpassade instrumentpanelen) ├── database-admin ├── index.php ├── memcached-admin ├── opcache-status ├── phpinfo └── webgrind 

Inget behov av att ladda om Vagrant. Uppdatera bara VVV Dashboard på vvv.dev. Du bör nu hitta många andra detaljer om vår Vagrant-konfiguration på instrumentbrädan, förutom att bara lista de installerade sidorna.

Anpassad VVV Dashboard. 

Vagrant Manager

Ett annat verktyg du kan installera är Vagrant Manager.

Vagrant Manager är relaterat till MAMP och WAMP där det i det här fallet tillåter oss att springa, stoppa och ladda om Vagrant med några klick. Vagrant Manager finns i OS X genom Homebrew Cask och .dmg, och i Windows genom .exe installationsprogrammet. Därför bör installationen vara en no-brainer.

När Vagrant Manager installeras och körs kan du hitta en lista över dina Vagrant-konfigurationer och som för närvarande är aktiv.

phpMyAdmin

Vagrant kommer också med phpMyAdmin inbyggd, tillgänglig på vvv.dev/database-admin/. Jag är dock inte ett fan av phpMyAdmin. Bortsett från det otroliga gränssnittet är det trögt att bearbeta en fråga i en stor databas. Det här är anledningen till att jag föredrar att använda en inbyggd applikation som Sequel Pro eller SQL Workbench for Windows. Vi måste emellertid först ansluta programmet till MySQL.

Anslut till MySQL med inbyggd applikation

Här använder jag Sequel Pro för OS X. Ändå är de uppgifter som krävs för att ansluta till MySQL tillämpliga oavsett vilka applikationer du använder. De är likadana.

  • MySQL Host127.0.0.1
  • MySQL Användarnamnrot
  • MySQL lösenordrot
  • SSH-värdlocal.wordpress.dev (gäller även för alla domäner registrerade i VVV)
  • SSH-användareluffare
  • SSH-lösenordluffare

Om du ser en varning som visas nedan kan du ignorera det och helt enkelt klicka på "Ja" eller "OK" för att fortsätta. Vi ansluter bara till en virtuell maskin på vår egen dator, så det borde inte vara något att oroa sig för.

När vi är anslutna kan vi se databasen på våra webbplatser. Nu kan vi göra vissa saker som att importera och exportera en databas, eller förmodligen utföra vissa SQL-frågor.

Vad kommer härnäst?

Som nämnts kommer VVV med ett paket verktyg inklusive PHP CodeSniffer, som låter dig utföra kodrevision på dina projekt mot WordPress Coding Standards. Det är något jag tycker att du borde göra, särskilt före projektets lansering.

Men eftersom PHP CodeSniffer är något utanför omfattningen av denna handledning har jag sammanställt ett par referenser för att hjälpa dig att komma igång med ämnet.

  • WordPress Coding Standard Series
  • PHP CodeSniffer Officiell Wiki

Avslutar

Vi har kommit långt för att ställa VVV upp och springa och förbättra den med ett antal förlängningar. I slutändan rationaliserar vi vårt arbetsflöde när det gäller att skapa en ny lokal webbplats eller testmiljöer med WordPress, men det kan ta lite tid att vänja sig på det. 

WordPress har en oerhört aktiv ekonomi. Det finns teman, plugins, bibliotek och många andra produkter som hjälper dig att bygga upp din webbplats och ditt projekt. Plattformens öppen källkod gör det också till ett bra alternativ som du kan förbättra dina programmeringsförmåga. Oavsett fall kan du se allt vi har tillgängliga på Envato Marketplace.

Jag hoppas att du hittar den här handledningen en användbar referens för att komma igång med Vagrant och VVV.