Hur man utvecklar en Processwire-tema

I den här nybörjarens handledning lär du dig att skapa egna ProcessWire CMS-teman. Vi skapar en super enkel webbplats som täcker mallar, fält, tematruktur och PHP-variabler.

Glöm inte att få fart genom att följa den första av våra handledning Hur installerar och installerar ProcessWire CMS.

Var hittar du ditt ProcessWire-tema

Till skillnad från andra CMS-filer som WordPress, har ProcessWire inget temat urvalsprocess som en del av dess admin, där du kan byta teman på pressen av en väl märkt knapp. Detta är dock inte nödvändigtvis en dålig sak. ProcessWire har sitt eget system: mappen "site / templates" som innehåller alla filer som är associerade med ditt tema.

Skapa en tom tema

Det bästa sättet att skapa ett tomt tema är att välja plats tom profil när du installerar ProcessWire (PW). Site-blank innehåller den mest grundläggande webbplatsstrukturen i din "site / templates" -mapp - det här inkluderar mappar och filer 

  • / script
  • / stilar
  • / fel 
  • home.php
  • basic-page.php 
  • admin.php

Du kan skapa en ny mapp med "webbplats / mallar" med egna filer efter installation om du vill, istället för att starta med tomtprofilen, men se till att du åtminstone har de filer som anges ovan.

Processwire Tema Struktur

routing

Lär dig hur PW leder sina sidor hjälper oss att konstruera våra anpassade mallar senare.

När en PW-sida begärs (t.ex. www.benbyford.com/about) tittar PW på sidan inom CMS och kontrollerar vilken mall som tilldelats. i det här fallet har jag tilldelat mallen "grundläggande sida"; filen "basic-page.php" i "site / templates /" görs och den begärda HTML-filen skickas till användaren (PW tillåter också enkel användning av andra format som JSON eller XML).

Tips: Vanligtvis kallas mallar inom PW med samma namn som deras PHP-mallfil, men du kan ändra mallnamn och tillhörande fil när som helst efter skapandet inom PW admin.

Till exempel, lägg till lite HTML & PHP i vår "home.php" -fil:

   <?php echo $page->titel; ?>   

titel; ?>

Gå nu till din webbadress i webbläsaren och märka titel och h1 bör nu fyllas med titeln på din hemsida (som standard: Hem).

Inklusive andra PHP-filer

Att göra massor av mallar filer med mycket liknande HTML är inte särskilt effektiv, så låt oss göra ett par .inc PHP-filer som kan ingå i varje mall. Ett vanligt strukturmönster inom teman är att skapa "head.inc" och "foot.inc" -filer som används för att skapa en gemensam HTML-kod som vår , navigering, logotyp, sidfot och skript.

Låt oss redigera vår "home.php" -fil igen för att genomföra ovanstående:

 

titel; ?>

Lägg till vår head.inc:

   <?php echo $page->titel; ?>  

Och foot.inc:

 

Varför använda .inc-filtypen jag hör dig fråga? Tja, när du lägger till en ny mall i PW: s admin tittar systemet på webbplatsen / mallarna / mappen för alla nya .php-filer som ännu inte har använts av en mall. Genom att använda .inc filtyp istället för .php blir du inte förvirrad mellan mallfiler och filer du vill inkludera i din mall.

Associera nya mallar med CMS

Du kan skapa så många mallar som du vill för sidor på din PW-webbplats, gå vild! Till exempel, låt oss skapa en ny mall för en ny sida som heter "Kontakt". Jag börjar med: 

  • duplicera min "home.php"fil och ringa den nya filen ”kontakt-page.php”
  • i PW admin, navigera till setup> mallar> lägg till ny mall
  • välj din "kontakt-sida.php"från checklistan, välj "hem"från duplikatfältlistan, och klicka Lägg till mallar

CMS känner nu till din nya mallfil och det kommer nu att visas som ett mallalternativ när du skapar en ny sida. Försök skapa en ny sida under ditt hemsida, namnge det "Kontakt" och välj vår nya kontaktblankett. Du har nu minst två aktiva mallar på din webbplats: "hem" och ”kontaktsida”.

Fantastiskt! Vi kan nu skapa mallfiler, lägga till dem i PW och skapa sidor med våra nya mallar.

ProcessWire-variabler

Slutligen vill vi veta hur man gör innehåll till PW admin i våra mallar, och till och med använda vanilla PHP till vår webbplats. En av mina favorit saker om PW är att det ger temakoden direkt åtkomst till innehåll via variabler och en serie användbara funktioner för den enklaste funktionaliteten. Något som det inte har, kan du skriva i PHP själv utan att behöva oroa dig för vad systemet kan göra med din kod. Inte heller måste du följa strikta klassstrukturer eller krokar (jag tittar på dig Drupal). I andra ord: det ger dig en uppsättning verktyg, så blir din väg borta.

För en sammanfattad lista över alla variabler och funktioner inom PW kolla in Processwire API Cheatsheet och för ytterligare förklaring se PW-variabla dokument.

Låt oss snabbt exempel på några av de viktigaste variablerna för att göra våra mallar mer funktionella.

Redigera vår home.php igen, låt oss lägga till sidtitel, kropp och sidfält med hjälp av $ sida variabel. $ sidager dig tillgång till allt innehåll som laddas upp till den sidan i PW admin.

 
". $ page-> title.""; // output body copy echo $ page-> body;?>
sidofältet; ?>

Låt oss också lägga till en enkel navigering till vårt head.inc med hjälp av $ sidor variabel. $ sidor ger dig tillgång till andra sidor med din webbplats, som du sedan kan fråga om innehåll.

   <?php echo $page->titel; ?>   

Nästa steg

Nu vet du några av grunderna i teman i PW. Jag uppmanar dig att titta på några av de andra sajtprofilerna som finns med PW-nedladdningen för att se hur de struktureras. Enligt min mening kan experimentera och få feedback från samhället också vara mycket fördelaktigt.

Tips: Du hittar massor av moduler som kan hjälpa dig på din webbplats bygga på modulernas sida. Om du är en älskare av MINDER och skriptminskning rekommenderar jag AIOM-modulen.

Och, naturligtvis, se upp för framtida handledning här på Envato Tuts+.