Crearea unei teme WordPress din HTML static - Adăugarea de widget-uri

În această serie, ați învățat cum să convertiți un fișier HTML static într-o temă WordPress și să modificați fișierul antet.

Până acum ai:

a pregătit marcajul pentru WordPress
a transformat codul HTML în PHP și a împărțit fișierul în fișiere șablon
a editat foaia de stil și a încărcat tema în WordPress
a adăugat o buclă la fișierul index
metaetichetele adăugate, wp_head cârlig și titlul și descrierea site-ului în fișierul cu antet
adăugat un meniu de navigare.

În acest tutorial, vă vom arăta cum să înregistrați zonele widget în tema dvs. și să le afișați în diferite locații. Veți adăuga o zonă widget în antetul detaliilor de contact (sau orice doriți) și în bara laterală pentru widget-urile barei laterale.

Ce ai nevoie

editorul de cod de alegere
un browser pentru testarea muncii tale
o instalare WordPress, fie locală, fie la distanță
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. Înregistrarea de widgeturi

Pentru a înregistra zonele widget, utilizați register_sidebar () funcţie. Veți crea o funcție în fișierul de funcții pentru a include toate barele laterale pe care trebuie să le înregistrați și apoi veți activa acest lucru prin intermediul widgets_init cârlig de acțiune.

Notă: deși această funcție include cuvântul "sidebar" în numele său, aceasta nu înseamnă că zonele dvs. widget ar trebui să fie doar în bara laterală - aceasta este o mahmureală din primele zile ale WordPress ca o platformă de blogging când widget-urile erau doar în bara laterală.

Deschide-ți functions.php fișier, apoi adăugați următorul cod înainte de linia de la capătul care citește ?>:

 funcția wptutsplus_widgets_init () // În zona widget-ului antet, situat în partea dreaptă a antetului, lângă titlul și descrierea site-ului. Golire implicită. "id =" 'in-header-widget-area ",' description '=>' O zonă widget situată în partea dreaptă a antetului, lângă titlul și descrierea site-ului. ',' before_widget '=>'',' după_widget '=>'
',' anterior_title '=>'',' după_title '=>'
',)); // zona widget-ului lateral, amplasată în bara laterală. Golire implicită. register_sidebar (array ('name' => 'Bara laterală a zonei widgetului', 'id' => 'sidebar-widget-area', 'description' =>',' după_widget '=>'
',' anterior_title '=>'',' după_title '=>'
',));  add_action ('widgets_init', 'wptutsplus_widgets_init'); ?>

Aceasta înregistrează două zone widget: una în antet și una în bara laterală însăși. Parametrii register_sidebar () sunteți:

Nume - un nume unic pentru zona widget care va fi afișat pe ecranul adminului Widgets.
id - un cod unic pentru zona widgetului pe care îl veți utiliza în scurt timp pentru a adăuga zona dvs. widget la locația corectă din temă.
Descriere - o descriere care să fie afișată în ecranul de administrare Widgets.
before_widget - marcajul pentru a precede fiecare widget în zona widget. Acest lucru vă ajută cu stilul.
after_widget - marcajul care urmează să respecte fiecare zonă widget. Asigurați-vă că închideți toate elementele pe care le-ați deschis utilizând before_widget parametru
before_title - markup pentru a precede titlul fiecare widget - am adăugat un h3 element cu o clasă care ajută la styling.
after_title - marcajul pentru a închide toate elementele pe care le-ați deschis înainte de titlul widgetului.

Salvați acum fișierele cu funcții.

Dacă deschideți administratorul site-ului dvs., veți vedea că acum aveți acces la Widget-uri admin, care are cele două zone widget adăugate:

Cu toate acestea, orice widget-uri pe care le adăugați aici nu se va afișa încă în tema dvs., deoarece este necesar să le adăugați în fișierele șablonului.

2. Adăugarea de zone widget la fișierele dvs. de șablon

Mai întâi, voi adăuga zona widget pentru antet și apoi pentru bara laterală.

Adăugarea unei zone widget la antet

Deschide-ți header.php fișier și localizați următorul cod:

   Aceasta va fi o zonă widget în antet - detaliile adresei (sau orice altceva doriți) intră aici.

Înlocuiți-l cu acesta:

Salvați fișierul.

Adăugarea zonei Widget Sidebar

Deschideți acum tema sidebar.php și găsiți acest cod:

Înlocuiți-l cu următoarele:

În cele din urmă, salvați fișierul.

3. Adăugarea de widget-uri prin administratorul Widgets

Etapa finală este adăugarea unor widgeturi prin intermediul ecranului de administrare a widgeturilor. Voi adăuga două widget-uri în zona widget-ului antetului:

un widget text cu detalii de contact
o casetă de căutare

Și voi adăuga două widgeturi în bara laterală:

widgetul "Postări recente"
widgetul "Meta"

Odată ce am făcut acest lucru, ecranul de admin "Widgets" meu arată astfel:

În cele din urmă, dacă deschid site-ul în browser-ul meu, văd widget-urile populate în temă:

Unele lucruri sunt încă necesare în ceea ce privește stilul - bara de căutare este puțin mai largă, de exemplu, dar conținutul este acolo. Acum aveți zone widget în tema dvs.!

rezumat

În acest tutorial, v-am arătat cum să înregistrați zonele widget și să le adăugați în două locuri din tema dvs.: antetul și bara laterală. Puteți adăuga domenii widget oriunde doriți în tema dvs. - acestea pot fi foarte utile pentru adăugarea de conținut pe paginile sau postările dvs. prin widget-uri.

Exemplele includ:

o zonă widget înainte și după conținut, poate pentru afișarea de postări similare sau cu butoanele social media share sau cu un buton de apel la acțiune
o zonă widget înainte sau după navigare
zonele widget în subsolul dvs. - le veți adăuga la această temă în următorul tutorial
domenii widget doar pentru un tip de conținut - în Partea 11 din acest tutorial Vă voi arăta cum să creați un șablon de arhivă personalizat și veți vedea cât de diferite șabloane pentru diferite tipuri de conținut pot fi combinate cu mai multe zone widget pentru a varia barele laterale în Site-ul tău.

În tutorialul următor, veți termina footer.php fișier în temă, adăugând mai multe zone widget într - un "subsol gras", plus un colofon pentru informații privind drepturile de autor și wp_footer cârlig de acțiune.

Resurse

API Widgets
Funcția register_sidebar ()

Cod