Accentsconagua

Kick-Start WordPress utveckling med twig Komma igång

Koda
Share

Nu förstår vi att Twig-tillsammans med WordPress-plugin Timber-kan hjälpa utvecklare att skriva modulär kod samtidigt som de utvecklar WordPress-teman. Med ett sådant modulärt tillvägagångssätt kan du hantera logiken och visningsskiktet för din webbapplikation separat. Låt oss hoppa till lite mer tekniska saker: skapa Twig-mallar, konvertera HTML till Twig-filer, och hur man gör logiken eller data med kvistmallar.

Installera timmer

Först och främst kommer jag att installera Timber, vilket är ett WordPress-plugin som hjälper till att integrera Twig-templerande motor med WP. Så, låt oss göra det.

  • Logga in på din WordPress dashboard.
  • Gå till Plugins> Lägg till nytt.
  • Sök efter Timber plugin.
  • Installera och aktivera plugin.

När Timber är installerat kan du nu börja dela dina mallfiler i data och se filer.

Skapa en kvistmall

Innan vi börjar skapa Twig-mallar antar jag att du har någon form av lokal WordPress-inställning. För denna speciella handledning är min inställning:

  • En localhost WP installering (jag använder DesktopServer av ServerPress).
  • Timmerplugin installerat och aktiverat.
  • Valfritt: Varje bas / starttema (jag använder min egen, dvs snygg).

UpStatement har också byggt en Timber Starter Theme.

Låt oss börja. Jag vill visa ett välkomstmeddelande längst upp på min hemsida. Hur skulle jag göra det utan Twig? Förmodligen skulle jag inkludera HTML-kod i PHP-filen och echo välkomstmeddelandet, som jag gjorde i kodexemplet nedan. Min index.php filen ser något ut så här.

Nu visar hemsidan för min lokala WordPress-installation ett välkomstmeddelande högst uppe. Här är skärmdumpen.

Problem

Problemet med detta tillvägagångssätt är att vi blandar data / logik med sikte. Ju mer komplexa den här filen blir, desto svårare är det att behålla än mindre förstå, till exempel om du lägger till WordPress-loopen efter den här koden med några argument och sedan filtrera och paginera efter det. Lägg till det där, PHP inuti HTML ser inte bra ut när du hamnar med lite av logiken.

Modular Approach

För att göra det mer modulärt kan vi tänka på vårt innehåll på hemsidan i form av block eller komponenter. Det kan vara två komplett som standard, dvs Inlägg från The_Loop och pagination. Sedan nu vill vi lägga till en annan komponent överst, dvs välkomstmeddelandet, låt oss skapa en Twig-fil för den komponenten. 

Öppna en ny tom fil i redigeraren och kopiera klistra in följande rad kod.

 
 
Välkommen till min hemsida!

Skapa en ny mapp i ditt temas rot som heter visningar och spara den här filen med  .kvist förlängning. Till exempel sparade jag filen som welcome.twig.

Återgivning av kvistmallen

Timber ger oss några användbara funktioner, varav en är gjordfunktionen. Du kan kalla det så här:

Timmer :: render ();

Den här funktionen kan ta upp till fyra argument. Eftersom det inte går under denna artikel kan du läsa om det i Timber docs. Vi kan skicka namnet på någon Twig-fil som är närvarande i visningar mapp på ditt tema till den här funktionen.

Låt oss göra välkomstmeddelandet i index.php fil.

Timmer gör welcome.twig fil, laddar HTML och visar det nya modifierade visningsskiktet i fronten så här: 
De göra() funktionen tar welcome.twig som argument, men det läser automatiskt den här filen så länge som kvistmallarna ligger i den namngivna mappen visningar. 
Om du vill använda ett anpassat namn / sökväg för mappen måste du ange sökvägen för den mappen. Till exempel skapade jag en kvistmapp i mitt temas rot och lade den till renderfunktionens argument.
Den officiella lastningsordern
Timmer ser först ut i barntemat och faller sedan tillbaka till modertemat (samma som WordPress-logik). Den officiella lastordern är:
     
  1. Användardefinierade platser
    2.  
  2. Katalog för att ringa PHP-skript (men inte tema)
    3.  
  3. Barntema
    4.  
  4. Föräldrarnas tema
    5.  
  5. Katalog över att ringa PHP-skript (inklusive temat)
    6.  
Objekt 2 är infört ovanför andra så att om du använder Timber i ett plugin kommer det att använda twig-filerna i plugins katalogen.
Så, nu har index.php-filen ingen HTML inuti den, och det gör en Twig-mall.
Låt oss nu skicka några dynamiska data från index.php till welcome.twig fil och gör det med Timber.
Sänder data via Timber to Twig Files
För att skicka data från PHP-filen till Twig-filen måste du definiera en kontextmatris. Återställningsfunktionen tar en mängd data för att ge Twig-mallar med något slags sammanhang. Låt oss ringa upp arrayen  $ sammanhang, vilken är en associativ grupp, dvs det tar upp nyckelvärdesparen. 
Låt oss lägga till ett nyckelvärdespar som skulle vara ett dynamiskt välkomstmeddelande, som vår PHP-fil skulle skicka till Twig-filen.
Data fil
Min index.php filen ser ut så här nu.
Så, inuti index.php fil, definierade jag en tom $ sammanhang array vid rad # 8. Sedan på rad # 11 har jag skapat en variabel $ var med värdet "Dynamiskt meddelande". På rad # 14 har jag skapat en nyckel budskapet vilket är lika med $ var.
På rad # 17 kallade jag renderfunktionen med welcome.twig fil, men den här gången tar det ytterligare ett argument, dvs $ sammanhang array. Detta nya argument har faktiskt de data som Timber skickar från PHP-filen till Twig-filen.
Så vi definierade kontextmatrisen och lagt till ett dynamiskt meddelande (Du kan visa ett annat meddelande till olika användare genom att lägga till en slags logik på den, som att visa den aktuella användarens förnamn). 
Mallfil
Nu behöver vi använda dessa data, dvs. budskapet, i Twig-filen. Vi kan echo en variabel inuti vår Twig-mall genom att lägga dubbla hängslen runt den. Till exempel, för att echo $ var i en kvistfil, kan vi skriva var. Det var precis vad jag gjorde.
 
 
 budskapet 
 
 
Värdet av budskapet kommer att skrivas ut inom h2-taggarna. Jag vet, det är bara så enkelt, och koden ser ganska ren ut. 
Det är allt! Spara koden och visa det dynamiska välkomstmeddelandet i fronten. Här är den sista skärmdumpen.
Slutsats
För att sammanfatta kan du nu använda PHP-filen för att koda logiken och tillhandahålla data till en Twig-mall som innehåller HTML och gör Twig-variablerna eller funktionerna i dubbelhäftarna.
Detta modulära tillvägagångssätt kan leda till en separat mallfil för varje komponent i ditt WordPress-tema. Tänk på att ha en message.twig-komponent som du kan använda var som helst i temat för att visa vilket meddelande du vill, vilket antal gånger som helst. 
Detta var en grundläggande implementering av Twig med Timber. Men i de följande två artiklarna kommer jag att skriva om Timber WordPress Cheatsheet, hantera bilder med Timber, och skapa menyer utan att använda den galna walkerfunktionen.
Om du har några frågor, skicka in dem i kommentarerna nedan eller ta reda på Twitter. Du kan också ta en titt på min temakod på denna GitHub repo.





	
	
			
	   
	







Koda
×