Crearea de șabloane personalizate ale paginilor

Paginile sunt extrem de utile atunci când folosiți WordPress ca un CMS și când faceți un site web, nu este neobișnuit ca două pagini să aibă dispuneri complet diferite. Uneori o declarație if va face truc; dacă nu, veți avea nevoie de un șablon de pagină personalizat.


De ce să utilizați un șablon de pagină personalizat?

Un șablon de pagină personalizat este un fișier situat în directorul tematic. Prin aceasta, puteți schimba aspectul unei pagini sau puteți afișa conținut diferit de șablonul de pagină standard (page.php). Puteți avea un număr nelimitat de șabloane de pagini și alegerea șablonului pe care doriți să îl utilizați pentru o anumită pagină este la fel de ușor ca selectarea unui șablon existent dintr-un drop-down în editorul de pagini WordPress.

Uneori este posibil să nu fie necesar să creați un șablon de pagină personalizat. De exemplu, spuneți că fișierul page.php, care este folosit pentru a reda toate paginile de pe site-ul dvs. Web, are un apel de funcții care arată pictogramele de rețele sociale, cum ar fi:

 

Spuneți că ați avut o pagină "Contact" pe acest site web și pe pagina "Contact" nu ați dorit să afișați icoanele de rețele sociale. S-ar putea, desigur, să creați un șablon de pagini personalizat numit "Pagină de contact" și să nu includeți apelul pe funcția de iconițe de rețea socială. Cu toate acestea, o metodă mai simplă ar fi pur și simplu să înfășurați apelul funcției într-o instrucțiune if care arăta pictogramele dacă pagina pe care ați fost pe nu pagina "Contact", după cum urmează:

 

De multe ori merită să vă gândiți dacă funcționalitatea pe care o doriți ar fi mai ușor de realizat utilizând câteva declarații dacă.

Un exemplu perfect de utilizare populară pentru un șablon de pagină personalizat este o pagină cu "întreaga lățime". O mare parte din șabloanele WordPress au două sau trei coloane: o coloană "conținut principal" în care este ținut conținutul post / pagină și unul sau două bare laterale care afișează widget-uri și apeluri la acțiune. Uneori un utilizator va dori să profite de întreaga lățime a containerului în care sunt stocate aceste coloane și alege să omite coloanele din bara laterală în favoarea creșterii dimensiunii coloanei "conținut principal". Paginile care conțin media, cum ar fi galerii de imagini sau videoclipuri, vor beneficia adesea de acest tip de șablon de pagină personalizat.

Crearea unui șablon de pagină personalizat poate fi o operație simplă sau dificilă, în funcție de funcționalitatea pe care intenționați să o atingeți. Având o temă bine codificată ajută; Elementele HTML sunt deseori deschise într-un singur fișier și închise în altul și dacă codul nu este structurat sau organizat bine, atunci utilizarea șabloanelor personalizate ale paginilor poate deveni în mod eficient o sarcină grueling!


Cum să creați un șablon de pagină personalizat

Rețineți că aceste modificări vor afecta aspectul paginii dvs., prin urmare, efectuarea acestor modificări pe un site web live ar putea determina utilizatorii să vadă erori și anomalii. Cel mai bine este să exersați aceste modificări pe un site web privat sau după ce plasați site-ul într-un mod de întreținere. Este întotdeauna recomandată copierea de rezervă a datelor "doar pentru caz".

Toate șabloanele de pagini personalizate trebuie sa începeți cu următorul cod. Spune WordPress că fișierul este un șablon de pagină personalizat și stabilește numele șablonului.

 

Desigur, "Șablonul personalizat al paginii mele" poate fi modificat în orice nume doriți!

Convenția de numire a fișierelor

Ca o excepție, este cea mai bună practică să denumiți fișierele personalizate ale șablonului de pagină cu prefixul 'page_' ('page_contact.php', 'page_fullwidth.php'). Grupează toate șabloanele de pagină împreună în directorul tematic.

Cred că cea mai rapidă modalitate de a rămâne blocată în șabloanele personalizate ale paginilor este să copiați pur și simplu codul din fișierul standard page.php într-un fișier nou și să creați noului fișier un șablon de pagină personalizat. În acest fel, puteți modifica și șterge codul și puteți vedea impactul pe care îl are asupra unei pagini. Să facem asta acum!

  1. În editorul de coduri, creați un fișier nou în directorul temei pe care o utilizați în prezent. Sunați-l "page_test.php".
  2. În partea de sus a fișierului, introduceți următorul cod:
     
  3. Deschideți fișierul page.php existent în tema pe care o utilizați în prezent.
  4. Selectați tot codul și copiați-l în clipboard.
  5. Lipiți codul copiat sub codul introdus
  6. Salvați fișierul. Încărcați-l în directorul dvs. temă, dacă este cazul.
  7. Conectați-vă la WordPress și editați pagina pe care doriți să o utilizați pentru a încerca noul dvs. șablon de pagină (aceasta poate fi întotdeauna returnată și nu vom modifica conținutul paginii în sine, astfel încât să nu pierdeți niciun fel de date salvate pe pagina).
  8. Sub "atributele paginii" (de obicei găsite în partea dreaptă a editorului), selectați "Test" din meniul derulant "Șablon".
  9. Actualizați / publicați pagina.

Acum când vă vedeți pagina, ar trebui să arate exact la fel! Asta pentru că nu am făcut nimic pentru a personaliza șablonul de pagină personalizat încă! Dar este bine să vedem că pagina încă funcționează. Dacă apare o eroare, asigurați-vă că ați copiat corect codul.

Pentru a confirma faptul că pagina dvs. utilizează noul fișier "page_test.php", nu "page.php", ștergeți orice bucată de cod de la "page_test.php" ("the_content ();" este, de obicei, un bit bun de șters) apoi salvați (și încărcați). Actualizați pagina pe site-ul dvs. web, iar bitul pe care l-ați șters ar trebui să lipsească. Dacă noi suntem, anulați modificarea pe care ați făcut-o și salvați (și încărcați) din nou. Dacă nu, verificați dacă ați copiat corect codul din acest tutorial și fișierul page.php.

De aici esti deschis spre o lume de posibilitati! Atâta timp cât codul "Șablon nume:" rămâne în partea de sus a fișierului, poți să faci ceea ce îți place! Șablonul de pagină nu trebuie să utilizeze sintaxa WordPress, ar putea fi pur și simplu un șablon HTML static - tot ce vă place!


Crearea unui șablon de pagină personalizat "în întregime"

Ca un bonus, voi acoperi comun pași implicați în crearea unui șablon de pagină personalizat cu o lățime completă. Este posibil ca acești pași să nu fie corecți în funcție de codul din tema dvs., dar ar trebui să aveți posibilitatea să obțineți conținutul acestuia.

Începeți prin crearea unui nou fișier numit "page_fullwidth.php". Adăugați codul de mai jos la început, apoi copiați și inserați codul din fișierul "page.php" de sub acesta, ca și înainte.

 

O să presupun că undeva în cadrul codului din fișier este următorul:

 get_sidebar ();

Dacă este așa, eliminați - fiecare instanță a acesteia, dacă este necesar. Dacă este conținut în orice elemente, cum ar fi divs, care pot afecta aspectul paginii - ștergeți și ele. O cantitate de încercare și de eroare este adesea implicată în aceste lucruri, dacă nu ați creat singur tema.

De asemenea, voi presupune că conținutul HTML al paginii începe cu o div care are o declarație CSS care stabilește lățimea și poate plutește la stânga sau la dreapta. În temele pe care le creez, de obicei aș avea un div cu un id de "pagecontent". "stânga", "conținut" sau "post" sunt alternative populare, dar va trebui să investiga! Pentru div, adăugați clasa "fullwidth". Salvați (și încărcați) fișierul. Nu uitați să setați și una dintre paginile dvs. în WordPress pentru a utiliza șablonul.

Deschideți fișierul 'style.css' din tema dvs. Preferabil într-un loc logic, dar nu contează (atâta timp cât nu interferează cu alte declarații), adăugați următorul cod:

 .fullwidth lățime: 100%;

Salvați (și încărcați) "style.css", apoi încărcați pagina la care ați alocat șablonul "Lățime completă". Puteți să vă întoarceți și să ajustați declarația CSS dacă este necesar, dar sperăm că coloana care conține conținutul paginii va fi extinsă pentru a umple un spațiu mai mare. Dacă nu, este în întregime în funcție de modul în care a fost scrisă tema. Dacă utilizați o temă premium, este posibil să verificați documentația sau să contactați dezvoltatorul. În caz contrar, nu ezitați să postați întrebări de depanare în comentariile de mai jos și voi face tot posibilul pentru a vă oferi sfaturi.

Cod