Cum se creează un șablon de pagină WordPress personalizat

Publicat: 2020-06-05

Un site web WordPress cu adevărat profesional va conține aproape sigur șabloane de pagină personalizate. Într-adevăr, multe dintre cele mai frecvente tipuri de site-uri web se vor baza pe șabloane. Un site web imobiliar va avea nevoie de un șablon pentru casele sale, un site web de comerț electronic pentru produsele sale, un site de membru pentru membrii săi etc.

Puteți utiliza Toolset cu Gutenberg pentru a crea șabloane de pagini WordPress pentru postările dvs. unice.

Un șablon definește aspectul paginilor și al postărilor în front-end. Este planul care spune cum și unde veți afișa tot conținutul pe fiecare postare. De exemplu, orice modificare pe care o faceți șablonului pentru rețete pe un site de gătit va afecta modul în care toate rețetele apar în front-end.

Există două tipuri de șabloane de pagini WordPress personalizate prin care voi trece:

  1. Un șablon pentru pagini obișnuite
  2. Un șablon pentru pagini de postare unică

De ce veți avea nevoie de un șablon WordPress personalizat pentru paginile obișnuite

Un șablon este o modalitate ușoară de a vă asigura că paginile similare urmează aceeași structură. În loc să creați aspectul individual pentru fiecare pagină, puteți crea șablonul o singură dată și îl puteți atribui oricăror pagini doriți. Aceste pagini vor urma apoi șablonul.

Să ne imaginăm un exemplu. Pe un site web de gătit s-ar putea să aveți mai multe pagini cu sfaturi despre gătit, cum ar fi „Cum să preparați pastele perfecte”, „Cum să gătiți ouă” și așa mai departe.

Am o carte electronică despre gătit pe care vreau să o afișez pe toate aceste pagini. În loc să editez fiecare pagină cu același conținut (ceea ce ar dura mult timp), pot crea un șablon o singură dată și pot atribui șablonul paginilor. În acest fel, fiecare pagină va conține un îndemn pentru a descărca cartea mea electronică.

Așa arată șablonul meu pentru pagini obișnuite în front-end.
Acesta este exact același șablon ca imaginea de mai sus. Observați cum structura este aceeași.

În ambele pagini de mai sus puteți vedea îndemnul meu în partea dreaptă. Asta pentru că am atribuit același șablon ambelor pagini.

Cele două moduri în care puteți crea un șablon de pagină WordPress personalizat

Există două moduri în care vă puteți crea șablonul de pagină WordPress personalizat:

  • Calea grea . Temele oferă automat fișiere PHP care definesc șabloane în WordPress. Când creați un tip de postare personalizată (cum ar fi rețetele), va trebui fie să editați aceste câmpuri PHP, fie să creați altele noi pentru a vă asigura că site-ul dvs. afișează postările dvs.
  • Calea ușoară. Puteți utiliza un plugin WordPress, cum ar fi Toolset, pentru a vă crea șabloanele. Toolset creează șabloane în câteva minute și fără nicio codare. Mai mult, cu Toolset Blocks puteți adăuga blocuri editorului WordPress Gutenberg cu conținut dinamic.
Toolset vă permite să creați site-uri web personalizate fără a utiliza codificare.

Mai jos vă voi arăta calea ușoară.

Mai întâi voi crea un șablon pentru paginile obișnuite care va conține un îndemn la partea dreaptă.

În al doilea rând, voi crea un șablon pentru rețetele mele tip post personalizat.

Cum se creează un șablon de pagină WordPress personalizat pentru pagini obișnuite

Pasul 1: Crearea structurii șablonului de conținut

Mai întâi trebuie să creați șablonul de conținut pentru paginile dvs. Cu Toolset instalat, puteți deschide un nou șablon de conținut și puteți începe să adăugați blocurile.

În primul rând, aranjez structura șablonului. Mai jos puteți vedea că am adăugat propriul bloc de grilă al Toolset, care îmi permite să împart șablonul în secțiuni. Am împărțit șablonul în două și am extins secțiunea din stânga, astfel încât să ocupe 75% din pagină.

Am adăugat blocul Grilă pentru a crea structura șablonului și am târât grila pentru a extinde secțiunea din stânga.

Pasul 2: adăugați conținut la șablonul dvs.

Acum, că am structura, trebuie să introduc blocurile cu conținutul pe care doresc să îl afișez. În stânga, adaug conținutul postării. Tot ce trebuie să fac este să introduc blocul de câmp unic Toolset, care îmi permite să selectez orice sursă îmi place pentru conținut.

Mai jos selectez conținutul postării din partea dreaptă ca sursă a blocului.

Pentru a alege conținutul care apare în bloc, trebuie să selectați sursa.

Pentru partea dreaptă a șablonului, voi adăuga îndemnul la acțiune. Tot ce trebuie să fac este să selectez orice blocuri doresc, în funcție de conținut. Mai jos am folosit blocul de titlu și blocul de butoane Toolset. Pentru blocul de butoane, includ și un link către carte.

Puteți adăuga un link pentru a vă duce utilizatorul la pagina corectă atunci când face clic pe buton.

Pasul 3: Stilează blocurile

Când combinați WordPress cu Toolset, puteți stiliza blocurile pe care le adăugați șablonului. Dacă ați ales să creați blocuri „The hard way”, atunci ar trebui să vă bazați pe abilitățile dvs. de codare pentru un stil bun.

Când faceți clic pe un bloc, veți vedea în partea dreaptă o serie de opțiuni pentru a vă stiliza și îmbunătăți șablonul.

Sub „Tipografie” puteți schimba următoarele:

  • Font
  • Marimea fontului
  • Spațiere
  • Stil
  • Culoarea textului
În bara laterală dreaptă pot edita tipografia blocului.

Asta nu e tot. În „Setări stil” puteți schimba, de asemenea, următoarele:

  • Culoare de fundal
  • Marjă / căptușeală
  • Frontieră
  • Umbra cutiei

Mai jos am adăugat o nouă culoare de fundal pentru îndemnul la acțiune. Rețineți că nu trebuie să codificați nicio modificare, ci mai degrabă selectați pur și simplu culorile și orice alt stil dorit.

De asemenea, puteți schimba culoarea de fundal, umplutura și multe altele din bara laterală dreaptă.

Pasul 4: Ajustați șablonul pentru diferite dimensiuni de ecran

Cel mai probabil vă construiți șablonul pe un laptop sau desktop, dar este important să vă amintiți că este posibil ca utilizatorii dvs. să nu vizualizeze site-ul web pe aceeași dimensiune a ecranului. De fapt, o majoritate din ce în ce mai mare va fi pe tableta sau dispozitivul mobil.

Prin urmare, poate fi necesar să ajustați șablonul pentru fiecare dimensiune a ecranului. Acest lucru este suficient de ușor de făcut cu Toolset și WordPress.

În bara laterală din dreapta de lângă fiecare element de stil, există o opțiune pentru a comuta între desktop, tabletă și mobil.

În timp ce editați blocul, puteți comuta între dimensiunile ecranului.

După cum puteți vedea, când comut între opțiuni, șablonul se reglează singur, astfel încât să puteți verifica cum va arăta șablonul pe fiecare dispozitiv.

De asemenea, puteți comuta între dimensiunile ecranului din partea de sus a paginii.

Pasul 5: Alocați șablonul paginilor dvs.

Acum, că am un șablon, trebuie doar să îl atribuiesc paginilor corecte. După ce am făcut acest lucru, fiecare pagină va afișa același șablon.

Tot ce trebuie să fac este să editez fiecare pagină și să selectez șablonul de conținut corect.

În bara laterală dreaptă pot atribui un șablon.

În front-end, voi vedea acum șablonul pe oricare pagină pe care l-am atribuit.

Acesta este șablonul din partea frontală.

De ce veți avea nevoie de un șablon de pagină WordPress personalizat pentru postări individuale

Pe lângă crearea de șabloane pentru postări obișnuite, cel mai probabil veți avea nevoie și de șabloane pentru fiecare dintre postările dintr-un tip de postare personalizată.

Pentru site-ul meu de gătit am creat un tip de postare personalizat pentru rețetele mele. Mai jos puteți vedea una dintre rețetele mele pe back-end. Observați toate câmpurile personalizate pe care le-am creat, cum ar fi timpul de pregătire, timpul de gătit și imaginea rețetei.

Puteți vedea toate câmpurile personalizate pe care le-am creat pentru postările mele.

Încă nu am atribuit un șablon rețetelor mele. Vedeți ce se întâmplă atunci când aruncăm o privire la rețetă fără un șablon pe front-end.

Fără un șablon, niciunul dintre câmpurile personalizate nu va apărea pe front-end.

După cum puteți vedea, niciunul dintre câmpurile personalizate nu apare pe front-end. De fapt, tot ce puteți vedea este conținutul principal al postării, cum ar fi titlul postului și corpul postării. Acesta este motivul pentru care un șablon este atât de important pentru postările dvs. individuale, deoarece vă permite să afișați tot conținutul, inclusiv câmpurile personalizate.

Mai jos puteți vedea două dintre rețetele mele pe front-end. Acum puteți vedea câmpurile personalizate, deoarece le-am atribuit un șablon.

Așa arată șablonul meu în front-end.
Acesta este același șablon ca imaginea de mai sus, dar cu o rețetă diferită.

Mai jos vă voi arăta cum am creat acest șablon pentru rețetele mele.

Pasul 1: Crearea șablonului

Primul lucru pe care trebuie să-l fac este să creez șablonul în care îmi voi adăuga conținutul. Pot face acest lucru din tabloul de bord Toolset de pe back-end-ul WordPress.

Prin crearea unui șablon pentru rețetele mele din Tabloul de bord Toolset, toate postările de rețete vor fi atribuite automat șablonului.

Selectând șablonul în acest fel, atribuiesc automat șablonul tuturor rețetelor pe care le-am creat. Prin urmare, nu trebuie să mă întorc la fiecare rețetă și să aloc manual șablonul.

Pasul 2: Adăugarea conținutului la șablon

Acum, pe șablonul de conținut, pot începe să adaug și să structurez conținutul așa cum am făcut pentru șablonul anterior pentru postările mele obișnuite.

Încă o dată, pot adăuga blocul Toolset Grid pentru a crea structura șablonului.

Cu blocul Grid pot alege ce tip de aspect doresc.

Acum pot începe să adaug blocurile mele pentru conținutul meu. De exemplu, pe rețetele mele, am o imagine în coloana din stânga. Din setul de blocuri ale lui Gutenberg pot adăuga blocul de imagine Toolset. Am nevoie de versiunea Toolset a blocului, deoarece îmi permite să adaug conținut dinamic.

Pentru a adăuga un bloc cu conținut dinamic, trebuie să folosesc blocul Toolset, mai degrabă decât versiunea implicită.

Conținutul dinamic înseamnă că puteți crea un element, cum ar fi o imagine, iar pentru fiecare dintre postări, acesta va atrage conținutul corect pentru respectivul post. De exemplu, conținutul dinamic înseamnă că rețeta mea de prăjituri cu banane va afișa, ați ghicit, o prăjitură cu banane. În caz contrar, conținutul ar fi static și, în loc de un tort cu banane, ați vedea orice imagine am inserat când l-am creat în șablon.

Folosind Toolset și WordPress, pot selecta sursa dinamică pentru fiecare dintre blocurile mele pentru a-i spune ce să afișeze.

De exemplu, am creat un bloc nou pentru a adăuga unul dintre câmpurile mele personalizate, Prep Time. Odată ce am adăugat blocul, pot selecta câmpul Prep Time ca sursă pentru blocul din partea dreaptă. Acest bloc este, de asemenea, dinamic, deoarece timpul de pregătire va varia în funcție de cerințele rețetei.

Pentru a vă face blocul dinamic, puteți selecta câmpul pe care doriți să îl afișați în bara laterală din dreapta.

Există o serie de tipuri diferite de blocuri pe care le puteți adăuga, inclusiv un bloc de câmp care se repetă pentru a adăuga mai multe elemente (cum ar fi mai multe linii pentru o rețetă), un bloc glisant de imagine, bloc YouTube și multe altele.

Pasul 3: Stilează-ți blocurile

La fel ca în cazul primului șablon pentru postările obișnuite, pot stiliza fiecare dintre blocurile mele.

Pasul 4: Ajustați șablonul pentru diferite dimensiuni de ecran

Din nou, similar cu șablonul anterior, pot regla structura pentru diferite dimensiuni ale ecranului.

Pentru a regla șablonul pentru diferite dimensiuni de ecran, puteți comuta între desktop, tabletă și ecranele mobile.

Pasul 5: verificați cum arată șablonul cu fiecare dintre postările dvs.

În cele din urmă, puteți alege, de asemenea, ce rețetă vizualizați pe șablonul dvs., astfel încât să puteți vedea dacă se potrivește tuturor. Utilizați meniul derulant din partea de sus a paginii pentru a comuta între postări.

Folosind meniul derulant, pot vedea cum arată fiecare dintre rețetele mele cu șablonul.

Odată ce sunteți gata, puteți verifica șablonul pe front-end.

Fiecare dintre rețetele mele va avea acum același șablon.

Și exact așa, am un șablon pentru rețetele mele. Acum, când creez o rețetă nouă, va urma imediat structura șablonului.

Începeți să vă construiți propriul șablon de pagină WordPress astăzi

Acum este rândul tău să vezi cât de ușor este să îți construiești propriul șablon de pagină WordPress. Tot ce trebuie să faceți este să descărcați Toolset și apoi să consultați documentația acestuia pentru a vedea cât de repede puteți crea un șablon pentru postările dvs. fără codificare.