widget-uri face WordPress foarte flexibil. Adăugând zone de widget la temele dvs., permiteți utilizatorilor să introducă propriul conținut personalizat fără a fi nevoie să scrie o linie de cod.
sunt cele mai frecvente în barele laterale și subsoluri, unde sunt adesea folosite pentru a ține widget-uri precum widgetul de căutare, widgetul ultimele postări sau poate un meniu personalizat. Dar dacă le adăugați la pagina dvs. și postați șabloane, le faceți și mai puternice.
puteți adăuga zone widget la orice fișier șablon doriți. Îmi place să adaug o mulțime de ele la Temele mele, în locuri precum antetul, înainte și după navigarea principală și înainte și după conținut. Puteți fie să le adăugați la o parte șablon (cum ar fi antetul) care este utilizat de fiecare pagină din site-ul dvs., sau puteți fi mai specific și doar să le adăugați la fișierele șablon pentru un anumit tip de conținut.
în această postare, vă voi arăta cum să faceți exact asta. Voi crea o temă copil a temei implicite Twenty Seventeen și apoi în cadrul acelei teme copil, voi crea câteva fișiere șablon noi: un fișier șablon de pagină personalizat, un fișier arhivă de categorii și un singur fișier șablon de postare.
în fiecare dintre acestea voi adăuga o zonă de widget specifică acelui tip de conținut, astfel încât utilizatorii o vor vedea doar atunci când vizualizează o pagină folosind șablonul de pagină, o arhivă de categorii sau, respectiv, o singură postare.
deci, să începem!
notă: Am adăugat codul pentru această postare la GitHub, astfel încât să îl puteți verifica dacă lucrați împreună cu acest tutorial.
Configurarea temei copil
voi folosi un copil al temei douăzeci și șaptesprezece: dacă lucrați cu propria temă, o puteți edita direct în loc să creați o temă copil. Dar dacă utilizați o temă terță parte, trebuie să creați o temă copil. Acest lucru se datorează faptului că atunci când actualizați tema, Orice modificări pe care le faceți vor fi pierdute.
deci, în folderul wp-content/themes, creați un folder nou cu numele temei. Îi sun pe ai mei WPMU-template-widgets. În acest sens, adăugați un stil.fișier css și adăugați acest lucru:
amintiți-vă, dacă lucrați cu propria temă, puteți sări peste acest pas. Și dacă utilizați o temă părinte diferită, va trebui să editați foaia de stil pentru a reflecta acest lucru. Dacă nu sunteți sigur, consultați postarea noastră despre crearea temelor pentru copii.
înregistrarea zonelor Widget
înainte de a putea adăuga zonele widget la fișierele șablon, trebuie să le înregistrăm în fișierul funcțiilor temei. Deschideți fișierul funcții dacă tema dvs. are deja una sau dacă este o temă copil nouă, creați un fișier numit funcții.php.
să începem prin adăugarea funcției goale pentru a înregistra widget-urile și a o conecta la cârligul widgets_init. Adăugați acest lucru la fișierul dvs. de funcții:
în cadrul acestei funcții, vom înregistra patru zone de widget: una din fiecare dintre șabloanele de arhivă de postări și categorii și două pentru șablonul de pagină personalizat.
începeți prin înregistrarea primului widget:
aceasta utilizează funcția register_sidebar(), cu o serie de parametri după cum urmează:
- numele zonei widget, care va apărea în ecranul widget admin și Customizer. Am făcut acest lucru traductibil.
- un ID unic pentru zona widget.
- marcare pentru înainte de widget, care utilizează substituenți pentru internaționalizare.
- marcare pentru după widget.
- marcaj pentru înainte și după titlul widgetului, care este inclus într-un element
h3.
deci asta e prima. Acum, încă în interiorul funcției, adăugați celelalte trei:
deci, avem acum patru widget-uri:
- unul după conținutul pe posturi unice.
- unul înainte de conținutul unei arhive de categorii.
- unul înainte și unul după conținutul de pe șablonul nostru de pagină widgetized.
dacă doriți să mutați zonele widgetului (de exemplu, plasarea arhivei categoriei una după conținut sau a postării unice înainte de conținut), ar trebui să le redenumiți în mod corespunzător. Acest lucru este astfel încât să știți ce se întâmplă atunci când vin pentru a edita codul în viitor, și utilizatorii știu unde zonele widget va fi de ieșire atunci când se adaugă widget-uri pentru a le prin intermediul ecranului widget admin. Amintiți-vă că, dacă modificați acest lucru, va trebui să plasați codul pentru a scoate widget-urile în locul corect în Fișierele șablon în pasul următor, care ar putea fi diferit de locul în care îl pun pe al meu.
acum, dacă deschideți pagina de administrare Widgets, veți vedea zonele widget, gata pentru widget-uri:
dar dacă adăugați widget-uri în noile dvs. zone de widget, acestea nu vor apărea în partea frontală a site-ului dvs. Ei încă mai trebuie să fie codificate în Fișierele șablon.
adăugarea zonelor dvs. Widget la Fișierele șablon
acum adăugăm codul pentru a scoate zonele widget. Dacă lucrați cu propria temă, poate fi necesar doar să editați fișierele șablon tematice existente. Dacă lucrați cu o temă copil (sau tema dvs. nu are deja fișierele șablon relevante), va trebui să creați fișiere noi.
să începem cu fișierul șablon de pagină widgetized, ca tema nu va avea ca nici un fel.
în folderul temă, creați un fișier nou. O sun pe a mea page_widgetized.php. Deschideți acel fișier și adăugați-l la acesta:
aceasta spune WordPress că este un șablon de pagină personalizat. Dacă doriți să aflați mai multe despre ele, consultați ghidul nostru detaliat.
Notă: Nu utilizați page-widgetized ca nume de fișier. Acest lucru se datorează faptului că page – este un sufix rezervat în WordPress. Utilizați un subliniere în loc de o liniuță sau pur și simplu evitați să utilizați pagina la început, dacă preferați.
acum, sub textul comentat, copiați totul din pagina temei dvs. (sau a temei părinte).fișier php. O alternativă este să faceți o copie a fișierului și să adăugați textul comentat, depinde de dvs.
acum veți putea selecta acest șablon atunci când editați o pagină în site-ul dvs:
selectați-l pentru una dintre paginile dvs., astfel încât să puteți încerca widget-urile. Iată pagina mea:
nu pare foarte interesant acum, deoarece nu am adăugat zonele widget în fișierul șablon. Să facem asta.
în fișierul șablon, adăugați acest cod imediat deasupra conținutului paginii, pentru zona widgetului de conținut de mai sus:
aceasta verifică dacă zona widgetului a fost populată, utilizând ID-ul unic pe care l-ați creat pentru zona widgetului atunci când l-ați înregistrat în fișierul funcții. În cazul în care a fost populat, acesta emite conținutul zonei widget.
Acum adăugați zona widget sub Conținut. După conținutul dvs. (și în interiorul oricărui element de închidere), adăugați acest lucru:
salvați fișierul șablon de pagină.
Iată codul complet al fișierului meu șablon de pagină, astfel încât să puteți vedea unde zonele widget înainte și după bucla:
acum pentru a testa. Am adăugat un widget pentru fiecare dintre noile zone widget:
și iată cum arată pe pagina mea:
deci, acesta este șablonul de pagină personalizat configurat. Acum trebuie să editați celelalte două fișiere șablon de pagină (sau să le creați, dacă este necesar). Urmați acești pași:
- dacă lucrați cu o temă copil, creați un fișier numit Categorie.php. Copiați conținutul categoriei.fișier php din tema părinte (dacă are unul) sau arhiva.fișier php (sau index.php dacă nu are asta).
- dacă nu lucrați cu o temă copil, dar tema dvs. nu are o categorie.fișier php, faceți unul copiind arhiva.fișier php (sau dacă nu aveți unul dintre acestea, indexul.fișier php).
- adăugați zona widget deasupra conținutului din fișierul dvs. de arhivă de categorii – din nou, imediat înainte de buclă.
iată codul pentru zona widget:
acum repetați acest lucru pentru șablonul unic:
- creați un singur post.fișier php dacă tema dvs. nu are una (sau utilizați o temă copil). Copiați conținutul din single-post tema părinte lui.fișier php în ea, sau din următorul fișier șablon în ierarhia șablon (singur.php, singular.php sau index.php).
- din nou, adăugați zona widget – de data aceasta după conținut.
Iată codul:
acum, dacă adăugați widget-uri, acestea vor apărea pe site-ul dvs. Iată a mea care arată o listă de postări recente după o singură postare:
adăugarea zonelor Widget la șabloane vă oferă flexibilitate
zonele Widget permit utilizatorilor temei dvs. să adauge conținut suplimentar fără a fi nevoie să scrie cod. Dar nu sunt doar pentru bara laterală. Adăugarea de zone widget suplimentare la fișierele șablon vă oferă zone vizate în site-ul dvs. pe care le puteți adăuga widget-uri la, cu un control fin asupra în cazul în care acestea vor apărea.
puteți lua aceste exemple mai departe, dacă doriți, adăugând zone widget la toate fișierele, sau chiar folosind diferite versiuni ale barei laterale.fișier php pentru diferite tipuri de conținut. Lumea este stridie ta!