Crearea unei teme WordPress din HTML static Adăugarea unei buclă

Î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.


Ce ai nevoie

  • Editorul de cod de alegere
  • Un browser pentru testarea muncii tale
  • Software de imagine pentru salvarea imaginii de ecran în dimensiunile corecte
  • O instalare WordPress, locala sau remote
  • Dacă lucrați la nivel local, veți avea nevoie de MAMP, WAMP sau LAMP pentru a permite WordPress să ruleze
  • Dacă lucrați de la distanță, veți avea nevoie de acces FTP la site-ul dvs., plus un cont de administrator în instalarea dvs. WordPress

1. Adăugarea unei pagini în WordPress

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.


2. Adăugarea unei buclă

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.


3. Clase și ID-uri pentru articol

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 altele

Deci, 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.


4. Adăugarea titlului de pagină sau de post în buclă

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:

  • Un link către postarea sau pagina în sine (folosind 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ării
  • Titlul postului sau al paginii, care va fi automat populate de WordPress

5. Adăugarea de metadate postare

Primul 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 la care postul a fost publicat, folosind data()
  • Autorul postului, folosind autorul()

6. Adăugarea postului de conținut

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:

 

7. Mai multe metadate postați

Î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.

  • Linia de deschidere verifică numărul de categorii atribuite postului utilizând dacă și dacă aceasta este mai mare decât zero, rulează restul codului.
  • Apoi deschide a 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.
  • În cele din urmă 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:

  • Titlul paginii
  • Data și autorul
  • Conținutul paginii
  • Lista de categorii nu este afișată, deoarece aceasta este o pagină, nu o postare, iar categoriile nu se aplică în mod implicit paginilor. Veți vedea un exemplu cu lista de categorii afișată mai târziu în serie
Rețineți că imaginea recomandată nu este afișată încă - veți remedia problema în Partea 10 din această serie.

rezumat

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.


Resurse

  • Buclă (pagina Codex)
  • Ghidul începătorului pentru buclă WordPress (tutorial)
  • Etichete șablon (pagina Codex)
  • Funcția the_date () (pagina Codex)
  • Funcția the_author () (pagina Codex)
  • Funcția get_the_category_list () (pagina Codex)
  • Anatomia unei teme WordPress (post de blog de Yoast)
  • WordPress Tema Dezvoltare Ghidul incepatorului de Tessa Blakeley Silver si Rachel McCollin (da, eu!)
Cod