Cum de a dezvolta o temă Processwire

În acest tutorial al începătorului veți afla despre crearea propriilor teme CMS ProcessWire. Vom crea un site foarte simplu, care să includă șabloane, câmpuri, structura temelor și variabilele PHP.

Nu uitați să vă ridicați la viteză urmând prima dintre tutorialele noastre Cum se instalează și se instalează ProcessWire CMS.

Unde să găsiți tema ProcessWire

Spre deosebire de alte CMS-uri, cum ar fi WordPress, ProcessWire nu are un proces de selecție a temelor ca parte a administratorului său, unde puteți schimba temele la apăsarea unui buton bine etichetat. Cu toate acestea, acest lucru nu este neapărat un lucru rău. ProcessWire are propriul sistem: folderul "site / templates" care conține toate fișierele asociate temei.

Crearea unei teme libere

Cea mai bună modalitate de a crea o temă necompletată este să selectați Site-martor profil în timp ce instalați ProcessWire (PW). Site-ul gol conține structura de bază a site-ului din folderul "site-uri / șabloane" - aceasta include dosare și fișiere 

  • / script-uri
  • / stiluri
  • / erori 
  • home.php
  • basic-page.php 
  • admin.php

Puteți crea un nou dosar "site / șabloane" cu propriile fișiere după instalare, dacă doriți, în loc să începeți cu profilul gol al site-ului, dar asigurați-vă că aveți cel puțin fișierele enumerate mai sus.

Structura Temei de Structură

Routing

Învățarea modului în care paginile PW ale paginilor sale vor ajuta să construim șabloanele personalizate mai târziu.

Atunci când se solicită o pagină PW (de exemplu, www.benbyford.com/about), PW examinează pagina din CMS și verifică ce șablon este atribuit; în acest caz, am atribuit șablonul "pagină de bază"; fișierul "basic-page.php" din "site / templates /" este redat și HTML-ul solicitat este trimis utilizatorului (PW permite, de asemenea, utilizarea ușoară a altor formate precum JSON sau XML).

Bacsis: în mod prestabilit, șabloanele sunt menționate în cadrul PW cu același nume ca fișierul de șablon PHP, cu toate acestea puteți schimba numele șablonului și fișierul asociat oricând după crearea în cadrul administratorului PW.

De exemplu, să adăugăm niște cod HTML și PHP în fișierul "home.php":

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

titlu; ?>

Acum mergeți la adresa URL a site-ului dvs. în browser și observați titlu și h1 ar trebui acum completat cu titlul paginii dvs. de pornire (implicit: Acasă).

Inclusiv alte fișiere PHP

A face o mulțime de fișiere de șabloane cu HTML foarte asemănătoare nu este foarte eficientă, așa că hai să facem câteva fișiere .inc PHP care pot fi incluse în fiecare șablon. Un model comun de structură în tematică este crearea fișierelor "head.inc" și "foot.inc" care sunt folosite pentru a construi un cod HTML comun ca , navigare, logo, footer și scripturi.

Să redăm fișierul "home.php" din nou pentru a implementa cele de mai sus:

 

titlu; ?>

Adăugați capul nostru:

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

Și foot.inc:

 

De ce să folosiți tipul de fișier .inc. Am auzit că întrebați. Când adăugați un nou șablon în administratorul PW, sistemul examinează site-ul / șabloanele / folderul pentru orice fișiere noi .php care nu au fost încă utilizate de un șablon. Prin utilizarea tipului de fișier .inc în loc de .php, nu veți confundați fișierele șablon și fișierele pe care doriți să le faceți include în șablonul dvs..

Asocierea noilor șabloane cu CMS

Puteți face cât mai multe șabloane pe care le doriți pentru paginile din site-ul dvs. PW, fii salbatic! De exemplu, să facem un nou șablon pentru o nouă pagină numită "Contact". Încep cu: 

  • duplicarea "home.php"fișier și apelați noul fișier „de contact-page.php“
  • în Administratorul PW, navigați la setare> șabloane> adăugați un nou șablon
  • selectați "contact-page.php"din lista de verificare, selectați "acasă"din lista de câmpuri duplicat, și faceți clic pe Adăugați șabloane

CMS-ul știe acum despre noul dosar șablon și se va afișa acum ca opțiune pentru șablon atunci când creează o pagină nouă. Încercați să creați o pagină nouă în casa dvs.pagină, denumiți-o "Contact" și selectați noul nostru șablon de pagină de contact. Acum aveți cel puțin două șabloane active pe site-ul dvs.: "acasă" și „contact de pagini“.

Uimitor! Acum știm cum să creăm fișiere șablon, să le adăugăm în PW și să creăm pagini cu noile șabloane.

Procesoare variabile

În cele din urmă, vrem să știm cum să redați conținutul adăugat administratorului PW în șabloanele noastre și chiar să folosim PHP-ul vanilla pe site-ul nostru. Unul dintre lucrurile mele preferate despre PW este că oferă coder-ului temei acces instantaneu la conținut prin variabile și o suită de funcții utile pentru funcționalitatea cea mai simplă. Orice nu are, puteți scrie în PHP fără să vă faceți griji cu privire la ce ar putea face sistemul cu codul dvs. Nici nu trebuie să urmați structuri de clasă stricte sau cârlige (vă uit la Drupal). În alte cuvinte: vă oferă un set de instrumente, apoi iese din calea voastră.

Pentru o listă rezumată a tuturor variabilelor și funcțiilor din cadrul PW, verificați Cheatsheet API Processwire, iar pentru explicații suplimentare, consultați documentele variabilelor PW.

Să exemplificăm rapid câteva dintre variabilele principale pentru a face șabloanele noastre mai funcționale.

Editarea din nou a home.php, să adăugăm titlul paginii, corpul și conținutul barei laterale folosind pagina $ variabil. pagina $vă oferă acces la tot conținutul încărcat pe acea pagină în cadrul administratorului PW.

 
"$ page-> title.""; // ieșire corp echo $ page-> body;?>
bara laterală; ?>

Să adăugăm, de asemenea, o simplă navigare la capul nostru $ pagini variabil. $ pagini vă oferă acces la alte pagini cu site-ul dvs., pe care apoi puteți căuta conținut.

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

Pasii urmatori

Acum știți unele dintre elementele de bază ale temelor în PW Vă invit să vă uitați la unele dintre celelalte profile ale site-ului conținute cu descărcarea PW pentru a vedea cum sunt structurate. În opinia mea, experimentarea și obținerea de feedback de la comunitate pot fi, de asemenea, extrem de benefice.

Bacsis: veți găsi o mulțime de module care vă pot ajuta în crearea site-ului dvs. pe pagina modulelor. Dacă sunteți iubitor de minime și scripturi minime, recomandăm modulul AIOM.

Și, bineînțeles, căutați aici tutoriale viitoare la Envato Tuts+.