Share
Șabloanele de pagini WordPress sunt o modalitate foarte bună de a schimba complet modul în care sunt afișate anumite pagini web. Puteți să le utilizați pentru a adăuga o gamă largă de funcționalități site-ului dvs..
Cu toate acestea, ele au o limitare în sensul că sunt șabloane "statice". Nu le puteți personaliza și nu le puteți afecta în vreun fel comportamentul. Puteți alege dacă să activați sau nu un șablon de pagină. Implicit, un șablon de pagină va efectua pur și simplu o funcție fixă, de ex. afișați o hartă site sau eliminați bara laterală pentru a afișa o pagină cu lățime întreagă.
În această serie de tutori, mă voi uita la modul în care puteți extinde șabloanele de pagină pentru a fi mai flexibile, îmbunătățind foarte mult funcționalitatea acestora. Voi începe prin a introduce modul de creare a unui șablon standard de pagină prin intermediul unei teme copil, înainte de a trece la o abordare mai flexibilă în care voi crea un șablon de pagină dinamic general.
În cele din urmă, vă voi arăta trei exemple din lumea reală de șabloane de pagini dinamice care funcționează pe deplin. Voi acoperi, de asemenea, subiecte avansate, cum ar fi cum să atribuiți șabloanelor de pagini tipurilor personalizate de postări.
Pentru a urmări împreună cu această serie de tutorial, veți avea nevoie de un site WordPress cu acces de administrator. Cea mai ușoară modalitate de a face acest lucru este folosirea unui mediu de dezvoltare locală. Un editor de text dedicat este, de asemenea, util dar nu esențial.
Dacă se întâmplă să se dezvolte cu WordPress printr-un server la distanță, atunci va trebui să puteți edita fișiere tematice prin intermediul administratorului WordPress sau să editați fișiere local și să utilizați software FTP pentru a le transfera înapoi la server. Din motive de simplitate, presupun că lucrați cu WordPress local pe tot parcursul acestui tutorial.
Pentru a implementa șabloanele noastre de pagini, voi folosi o temă copilă pe baza temei părintelui Twenty Seventeen, care (la momentul redactării) este cea mai recentă temă WordPress implicită. Deci, dacă urmăriți, este o idee bună să instalați acest lucru înainte de a vă deplasa.
Aveți posibilitatea să utilizați o temă copil bazată pe altă temă părinte, dacă preferați, dar va trebui să modificați o parte din cod pentru al face să funcționeze fără probleme cu tema dvs. particulară. Metoda de bază, totuși, este aproape aceeași pentru orice temă a copilului.
Înainte de a învăța cum să faceți șabloanele de pagini mai flexibile, hai să vedem câteva detalii de bază.
WordPress utilizează o ierarhie de șabloane pentru a decide care șablon redă pagina curentă. Șablonul folosit în majoritatea scenariilor pentru pagini este page.php dar poate fi diferit dacă vizionați o pagină cu un anumit cod sau un anumit conținut. Cu toate acestea, dacă selectați un șablon de pagină pentru o anumită pagină, acesta va fi întotdeauna utilizat în preferință, ceea ce face foarte ușor să personalizați orice pagină utilizând un șablon de pagină.
Iată câteva exemple tipice de șabloane de pagini WordPress folosite frecvent:
Pot continua, dar ai idee. Șabloanele de pagină sunt reci! Le puteți folosi pentru aproape orice.
Dacă ați folosit WordPress pentru orice perioadă de timp, este foarte probabil că ați întâlnit deja unul sau mai multe din exemplele de mai sus. Cele mai multe teme includ șabloane de pagini pentru a completa funcționalitatea temei și puteți adăuga cu ușurință propria dvs. prin tema copilului. Voi face o scurtă prezentare.
Șabloanele de pagină sunt atât de utile, deoarece vă oferă un control complet asupra întregii pagini. Puteți să lăsați antetul, subsolul și / sau barele laterale, dacă doriți. Acesta este unul dintre motivele pentru care șabloanele de pagini cu o lățime întreagă sunt atât de frecvente, deoarece este foarte ușor să manipuleze barele laterale printr-un șablon de pagină.
Pentru a vedea toate șabloanele de pagini disponibile în prezent, accesați editorul de pagini WordPress și accesați-l Format drop down prin Șabloane de pagină meta cutie. Pur și simplu selectați șablonul de pagină dorit și, odată ce pagina a fost actualizată, va fi vizibilă data viitoare când pagina este vizualizată.
Așa cum am menționat mai sus, vom folosi o temă personalizată WordPress pentru a implementa toate șabloanele de pagini de-a lungul acestui tutorial. Voi începe cu o temă de bază pentru copii și un șablon de pagină, și apoi să adăugați o complexitate mai mult la ea, pe măsură ce mergem împreună.
Întregul proces va fi acoperit pas cu pas, așa că nu vă faceți griji dacă nu sunteți familiarizați cu temele copilului și / sau cu șabloanele de pagină. Veți fi la sfârșitul tutorialului!
Ideea de bază din spatele temelor copilului este aceea că vă permit să personalizați aspectul temei curente (numit temă parentală) într-un mod care nu va fi afectat atunci când tema părinte este actualizată.
Dacă se adaugă cod direct la tema părinte, atunci toate personalizările vor fi suprascrise și pierdute în timpul unei actualizări tematice programate. Acesta este un aspect important, deoarece orice temă bine întreținută va fi actualizată periodic. Pentru a afla mai multe despre temele copiilor, aș recomanda să aruncați o privire la documentația oficială.
Este interesant să rețineți că este posibil din punct de vedere tehnic să utilizați un plugin WordPress pentru a adăuga șabloane de pagini, dar este mult mai simplu să folosiți o temă pentru copii. Nu vreau să complic lucrurile în mod inutil cu codul străin, așa că voi fi lipit de temele copilului pentru implementarea șablonului de pagină.
Ok, teoria suficientă - să ne creăm șablonul de pagină inițial! Acesta va fi localizat într-o temă personalizată Twenty Seventeen, care va acționa ca container pentru șablonul de pagină, așa că trebuie să creați mai întâi tema copilului.
Deschideți dosarul tematic și creați un folder nou pentru tema copilului tău. În conformitate cu cele mai bune practici WordPress, este recomandat să denumiți folderul tematic pentru copii la fel ca tema părinte pe care se bazează, modificată cu "-child". Fișierul de temă părinte este denumit twentyseventeen, denumiți dosarul tematic pentru copii twentyseventeen-copil. În acest director nou, creați un singur fișier numit style.css și adăugați următorul bloc de comentarii în partea de sus.
/ * Denumirea temei: Twenty Seventeen Child Descriere: Douăzeci și șaptezeci de temă pentru copii Autor: David Gwyer Format: twentyseventeen Versiune: 0.1 Licență: GNU General Public License v2 sau mai recent URI de licență: http://www.gnu.org/licenses/gpl- 2.0.html Domeniul text: twenty-seventeen-child * /
Acum trebuie să menționăm toate stilurile din tema părintelui Twenty Seventeen. Dacă ați mai lucrat vreodată cu teme pentru copii, atunci ați putea fi obișnuiți să adăugați un CSS @import declarație direct sub blocul de comentarii. Acest lucru nu mai este considerat o bună practică WordPress din cauza preocupărilor legate de viteză. În schimb, vom enumera stilurile tematice părinte, care vor fi mai eficiente.
În interiorul directorului rădăcină temă copil, creați un functions.php fișier și adăugați următorul cod pentru a configura un container de clasă goală. Vom folosi această clasă pentru codul nostru de configurare.
init ();
Notă: Declarația de închidere PHP nu este necesară, dar o puteți adăuga dacă preferați.
Acum, adăugați un cârlig și o invitație de apel invers pentru a încorpora stilurile de tematică Twenty Seventeen, mai degrabă decât să le importați direct în fișierul style.css. Faceți acest lucru adăugând două metode noi de clasă.
Salvați modificările și activați tema copilului. Aveți acum o temă de lucru pe deplin funcțională, deși simplă. Pentru a testa dacă funcționează corect, adăugați o linie de CSS personalizat
style.css.* culoare: roșu! important;Dacă totul este bine, atunci ar trebui să vedeți tot textul site-ului dvs. acum colorat un frumos roșu garish!
Nu uitați să ștergeți testul CSS înainte de a porni. Acum că tema copilului este activă, putem începe să implementăm șablonul de prima pagină.
Adăugând șablonul pentru prima noastră pagină
Un lucru merită menționat și despre locul în care stocați șabloanele de pagini în interiorul temei copilului. Puteți stoca șabloanele de pagini fie direct în interiorul directorului tematic rădăcină copil, fie într-un dosar de nivel superior. Nu contează ce alegeți; fie locația este bine.
Cu toate acestea, dacă aveți mai multe șabloane de pagini, puteți decide să le stocați într-un dosar în scopuri organizaționale. Numele dosarului este neimportant, dar trebuie să fie localizat direct în interiorul directorului tematic rădăcină copil, altfel WordPress nu va recunoaște șabloanele de pagină. Pentru acest tutorial, voi folosi un dosar numit
page-șabloane.Să adăugăm acum un nou șablon de pagină temei copilului. Modul standard de a face acest lucru este de a face o copie a temei părinte
page.phptemă și adăugați-o la tema copilului tău. Puteți numi fișierul tot ce vă place, dar aș recomanda să includeți ceva care face ca acesta să fie recunoscut ca un șablon de pagină. Mă ductest page-template.php.Odată ce ați copiat
page.php(și a redenumit-o) lapage-șabloanedosar, structura temei copilului dvs. ar trebui să arate astfel:Deschide
test page-template.phpși înlocuiți blocul de comentarii din partea de sus a fișierului cu următoarele.Acest pas este foarte important, deoarece blocul de comentarii spune WordPress să recunoască fișierul ca șablon de pagină și îl va adăuga în lista șabloanelor de pagini disponibile pe ecranul editorului de pagini.
Codul complet al șablonului de pagină ar trebui să arate acum.
Să testați șablonul de pagină. Du-te la administratorul WordPress și editați orice pagină existentă sau creați una nouă. În ecranul editorului de pagini, selectați Format drop-down de la Atribute de pagină pentru a aloca șablonul de pagină pentru pagina curentă.
Pentru că am copiat pur și simplu tema părintelui
page.phpșablon de șablon, șablonul de pagină personalizat nu face nimic altceva decât trimiterea paginii curente, ceea ce nu este foarte util. De asemenea, nu vom fi nevoiți să scoatem conținutul editorului sau comentariile, eliminându-le astfel din șablonul de paginăin timp ceși adăugați un mesaj personalizat. Modificați conținutulin timp cebucla la următoarele.Acesta este șablonul de pagină personalizat!"; în cele din urmă; // Sfârșitul buclei.Salvați acest lucru și vizualizați pagina de pe capătul din față.
Notă: dacă nu puteți vedea mesajul personalizat, asigurați-vă că ați selectat șablonul de pagină personalizat din editorul de pagini și l-ați salvat pentru actualizarea setărilor.
Să facem șablonul de pagină personalizat puțin mai util. Înlocuiți mesajul pe care l-am adăugat mai sus cu următorul cod pentru a afișa o hartă site a tuturor paginilor publicate.
Harta site-ului"ecou"
Aceasta va duce la următoarea ieșire.
Este ușor să vezi cât de utile sunt șabloanele de pagină. Dar putem face chiar mai bine!
Până acum, am creat o temă pentru copii și am folosit-o pentru a implementa șablonul de pagină standard. În tutorialul următor, vă voi arăta pas cu pas cum să extindeți acest lucru, demonstrând modul în care șabloanele de pagină pot fi făcute mai flexibile.
Mai specific, vom crea un șablon de pagină dinamic general, prin adăugarea de comenzi personalizate în ecranul editorului de pagini. Logica de control va fi apoi adăugată în șablonul de pagină pentru a ne permite să personalizăm direct modul în care este redat șablonul de pagină.
WordPress are o economie incredibil de activă. Există teme, pluginuri, biblioteci și multe alte produse care vă ajută să vă construiți site-ul și proiectul. Natura open source a platformei o face de asemenea o opțiune excelentă din care vă puteți îmbunătăți abilitățile de programare. Indiferent de situație, puteți vedea ce avem la dispoziție în piața Envato Marketplace.
Acesta este primul meu tutorial (să fie blând!), Deci vă rugăm să vă simțiți liberi să lăsați orice feedback pe care îl puteți avea în Feed Feed de mai jos. Voi face tot posibilul pentru a răspunde la fiecare întrebare.
Accentsconagua
