În primele trei părți ale acestei serii, ați învățat cum să pregătiți cod HTML static pentru WordPress și să creați o temă prin împărțirea fișierului dvs. HTML într-un set de fișiere șablon și editarea foii de stil. Apoi, ați încărcat tema în WordPress și l-ați activat.
Tema încă nu afișează niciun conținut adăugat prin intermediul administratorului WordPress cu toate acestea; pentru a face acest lucru trebuie să adăugați o buclă la fișierele șablonului.
În momentul de față, tema dvs. are doar un fișier șablon principal - index.php - astfel încât să adăugați o buclă la asta.
Voi presupune că deja știți cum să utilizați administratorul WordPress pentru a adăuga o pagină. Voi crea o pagină numită "Acasă', adăugați un conținut fictiv la acesta și apoi editați'Citirea setărilor"în WordPress, astfel încât aceasta să fie pagina de pornire, mai degrabă decât listare post blog.
Voi folosi conținutul din site-ul meu static ca conținut pentru noua mea pagină, cu excepția faptului că nu voi adăuga prima imagine cu dimensiunea completă în conținut - veți învăța cum să adăugați o imagine ca aceasta temei ca o imagine prezentată în partea 10 a acestei serii.
Deci, mergeți mai departe și creați o pagină, includeți câteva imagini dacă doriți și editați "Citirea setărilor", astfel încât noua dvs. pagină să fie pagina de pornire.
După ce ați creat noua pagină, vizitați din nou pagina de pornire a site-ului dvs. Veți găsi că nimic nu sa schimbat - WordPress nu afișează conținutul paginii dvs. Asta pentru că trebuie să adăugați o buclă să-i spunem să facă acest lucru. Buclă va trage în conținutul paginii din baza de date și este ceea ce face WordPress de lucru.
Deschide-ți index.php fişier. După deschiderea .conţinut
div și înainte de deschidere tag, adăugați următoarele:
Acum, după închidere etichetă, adăugați:
Prima bucată de cod pe care ați adăugat-o inițiază bucla. Acesta verifică dacă există un mesaj sau o pagină care să fie afișată și apoi deschide prima pagină sau o pagină.
Dacă vă aflați într-o pagină de arhivă, aceasta trece prin toate postările relevante, fie cele mai recente postări din pagina principală de blog, fie postările dintr-o anumită categorie dintr-o pagină de categorii.
A doua parte a codului încheie bucla astfel încât WordPress să poată trece la afișarea conținutului, cum ar fi bara laterală și subsolul.
Deschiderea tag-ul poate avea clase și un ID care sunt generate automat de WordPress. Apoi, puteți utiliza aceste date la o dată ulterioară pentru a viza CSS în acel post sau pagină dacă doriți să faceți acest lucru.
Găsiți deschiderea etichetă:
Editați-l astfel:
Cele două funcții pe care le-ați adăugat sunt:
the_ID ()
- aceasta adaugă o clasă la articol
element care reprezintă referința unică ID pentru postarea sau pagina care este afișatăpost_class
- aceasta adaugă o serie de clase la articol
inclusiv categoria post, tipul de post și multe alteleDeci, puteți utiliza ID-ul pentru a viza o anumită postare cu CSS și clasa pentru a modela toate postările dintr-o anumită categorie în același mod, de exemplu.
Următorul lucru pe care să-l afișați pe post sau pagină este titlul. În codul existent, acesta este un titlu static în interiorul unui etichetă. Găsiți linia de cod care citește:
Acesta este titlul unui post sau al unei pagini
Editați-l astfel încât acesta să citească acum:
"href =""rel =" marcaj ">
Acest lucru adaugă două lucruri:
the_permalink ()
). Acest lucru este util în paginile de arhivare pentru a permite utilizatorilor să facă clic pe un link către pagina proprie a postăriiPrimul secțiune
elementul din buclă este pentru post-metadatele - în special data și autorul postului.
Găsiți această linie de cod (sau întregul cod din interiorul primei secțiune
element: poate fi diferit în tema dvs.):
Postat pe 5 noiembrie de Rachel McCollin
Înlocuiți-l cu:
postat pe de
Ați adăugat două etichete șablon:
data()
autorul()
Cel mai important lucru este să vă asigurați că mesajul sau conținutul paginii este afișat și faceți acest lucru utilizând o simplă etichetă șablon - continutul()
.
Găsiți secțiunea cu clasa .intrare conținut
și ștergeți conținutul acestuia. Înlocuiți-le cu continutul()
etichetați astfel încât întreaga secțiune să arate astfel:
În designul meu, există mai multe metadate după postare sau conținutul paginii. Acest lucru este opțional, dar aici îl voi folosi pentru a afișa o listă de categorii asociate postării. Puteți alege să pierdeți acest lucru din tema dvs., în funcție de designul dvs. și de utilizarea de categorii sau etichete.
Ștergeți conținutul secțiunii finale cu .intrare-meta
clasa și înlocuiți-le astfel încât întreaga secțiune citește:
Categorii:
Merită să faceți un moment pentru a lucra prin acest cod, deoarece este cel mai lung fragment din PHP pe care l-ați adăugat până acum.
dacă
și dacă aceasta este mai mare decât zero, rulează restul codului.deschidere
element și listează categoriile post în interiorul acestuia, folosind echo get_the_catgeory_list ()
. ecou
este important ca și fără aceasta get_the_category_list ()
funcția nu ar afișa de fapt lista, ea ar accesa doar lista și nu face nimic cu ea.endif
declarația închide dacă
astfel încât WordPress să poată trece la următoarea bucată de cod.În cele din urmă, salvați-vă index.php
fișier, reveniți la browserul dvs. și actualizați ecranul de pornire. Acest lucru ar fi trebuit să se schimbe ușor, după cum se arată mai jos:
După cum puteți vedea, sunt afișate următoarele elemente:
Tema dvs. este acum pe drumul spre o temă pe deplin funcțională. Are o buclă în loc pentru a afișa conținut adăugat prin intermediul administratorului WordPress, precum și un set de fișiere șablon. Următorul pas este să editați header.php fișier pentru a include un cârlig de acțiune esențial și câteva etichete șablon.