Î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.
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.
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
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.
Î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":
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ă).
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:
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..
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:
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.
Î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.
titlu; ?>
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+.