Slik utvikler du et Processwire-tema

I denne nybegynners opplæringen lærer du om å lage dine egne ProcessWire CMS temaer. Vi lager et super enkelt nettsted som dekker maler, felt, tema struktur og PHP variabler.

Ikke glem å komme opp til fart ved å følge den første av våre veiledninger Slik installerer og installerer du ProcessWire CMS.

Hvor finner du ProcessWire-temaet ditt

I motsetning til andre CMSer som WordPress, har ProcessWire ikke et temavalgsprosess som en del av admin, hvor du kan bytte temaer ved trykk på en velmerket knapp. Dette er imidlertid ikke nødvendigvis en dårlig ting. ProcessWire har sitt eget system: mappen "site / templates" som inneholder alle filene som er knyttet til temaet ditt.

Opprette et tomt tema

Den beste måten å lage et tomt tema på er å velge site-blank profil mens du installerer ProcessWire (PW). Site-blank inneholder den mest grunnleggende sidestrukturen i mappen "site / templates" - dette inkluderer mapper og filer 

  • / scripts
  • / stiler
  • / feil 
  • home.php
  • basic-page.php 
  • admin.php

Du kan opprette en ny mappe med "nettsted / maler" med egne filer etter installasjon hvis du ønsker det, i stedet for å starte med tomt profil, men sørg for at du i det minste har filene som er oppført ovenfor.

Processwire Theme Structure

routing

Lære hvordan PW ruter sine sider, vil hjelpe oss med å konstruere våre tilpassede maler senere.

Når en PW-side blir forespurt (for eksempel www.benbyford.com/about), ser PW på siden i CMS og sjekker hvilken mal som er tildelt. i dette tilfellet har jeg tildelt malen "grunnleggende side"; filen "basic-page.php" i "site / templates /" blir gjengitt og den forespurte HTML-filen sendes til brukeren (PW tillater også enkel bruk av andre formater som JSON eller XML).

Tips: Som standard er maler referert til innenfor PW med samme navn som deres PHP-malfil, men du kan endre malnavnet og tilhørende fil når som helst etter opprettelsen i PW admin.

For eksempel, la oss legge til noen HTML & PHP i vår "home.php" -fil:

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

tittel; ?>

Gå nå til webområdet ditt i nettleseren og legg merke til tittel og h1 bør nå fylles med tittelen på hjemmesiden din (som standard: Hjem).

Inkludert andre PHP-filer

Å lage mange maler filer med svært lignende HTML er ikke veldig effektiv, så la oss lage et par .inc PHP-filer som kan inkluderes i hver mal. Et vanlig strukturmønster innenfor temaer er å lage "head.inc" og "foot.inc" -filer som brukes til å lage vanlig HTML-kode som vår , navigasjon, logo, bunntekst og skript.

La oss redigere vår "home.php" -fil igjen for å implementere ovenstående:

 

tittel; ?>

Legg til head.inc:

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

Og foot.inc:

 

Hvorfor bruke .inc filtype jeg hører deg spørre! Vel, når du legger til en ny mal i PWs admin, ser systemet på nettstedet / maler / mappen for eventuelle nye .php-filer som ikke har blitt brukt av en mal ennå. Ved å bruke .inc filtype i stedet for .php vil du ikke bli forvirret mellom malfiler og filer du vil inkludere i malen din.

Tilknytte nye maler med CMS

Du kan lage så mange maler som du liker for sider i ditt PW-nettsted, bli gal! For eksempel, la oss lage en ny mal for en ny side som heter "Kontakt". Jeg begynner med: 

  • duplisere min "home.php"fil og ringe den nye filen “kontakt-page.php”
  • i PW admin, naviger til oppsett> maler> legg til ny mal
  • velg din "kontakt-side.php"fra sjekklisten, velg "hjemme"fra duplikatfeltlisten, og klikk Legg til maler

CMS vet nå om din nye malfil, og den vises nå som et malalternativ når du oppretter en ny side. Prøv å opprette en ny side under ditt hjemside, gi det navnet "Kontakt" og velg vår nye kontakt-side mal. Du har nå minst to aktive maler på nettstedet ditt: "hjemme" og “kontakt-siden”.

Fantastisk! Vi vet nå hvordan du lager malfiler, legger dem til PW, og lager sider med våre nye maler.

ProcessWire-variabler

Til slutt vil vi vite hvordan å gjøre innhold lagt til PW admin i våre maler, og til og med bruke vanilla PHP til vårt nettsted. En av mine favoritt ting om PW er at den gir temakoden direkte tilgang til innhold via variabler og en serie nyttige funksjoner for den mest enkle funksjonaliteten. Alt det ikke har, kan du skrive i PHP selv uten å bekymre deg for hva systemet kan gjøre med koden din. Du må heller ikke følge strenge klassestrukturer eller kroker (jeg ser på deg Drupal). I andre ord: det gir deg et sett med verktøy, så kommer du ut av veien.

For en oppsummert liste over alle variablene og funksjonene i PW sjekk ut Processwire API Cheatsheet, og for ytterligere forklaring se PW-variabelen docs.

La oss raskt vise noen av de viktigste variablene for å gjøre våre maler mer funksjonelle.

Redigerer vår home.php igjen, la oss legge til sidetittel, kropp og sidebar innhold ved hjelp av $ side variabel. $ sidegir deg tilgang til alt innholdet lastet opp til den siden i PW admin.

 
". $ side-> tittel.""; // output body copy echo $ side-> body;?>
sidebar; ?>

La oss også legge til en enkel navigasjon til vårt head.inc ved hjelp av $ sider variabel. $ sider gir deg tilgang til andre sider med nettstedet ditt, som du deretter kan spørre etter innhold.

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

Neste skritt

Nå vet du noen av grunnleggende temaene i PW. Jeg vil oppfordre deg til å se på noen av de andre sideprofilene som finnes med PW-nedlastingen for å se hvordan de er strukturert. Etter min mening kan det også være svært gunstig å eksperimentere og få tilbakemelding fra samfunnet.

Tips: Du finner mange moduler som kan hjelpe deg på nettstedet ditt, bygg på modulsiden. Hvis du er en elsker av MINDER og skriptreduksjon, anbefaler jeg AIOM-modulen.

Og selvfølgelig, se etter fremtidige opplæringsprogrammer her hos Envato Tuts+.