Inspirația pentru acest tutorial provine dintr-un tweet pe care l-am primit cu feedback pentru tema RS12, care urmează să fie lansată.
Deși subsolul cu widget-uri nu a fost inclus în cele din urmă în lansarea temei RS12, am decis să scriu acest tutorial pentru a arăta cum se adaugă un subsol cu widget-uri în tema ta. În acest ghid, vei învăța:
- Codul HTML și CSS necesar pentru a produce subsolul cu widget-uri
- Cum să adaugi etichete de șabloane WordPress utilizate frecvent ca elemente de plasare
- Cum să transformi subsolul în unul cu widget-uri și să plasezi widget-uri în el
Va fi mult cod în această postare, așa că dacă ești pregătit, citește mai departe...
Voi folosi tema WordPress Green Rays ca exemplu în acest tutorial. În acest moment, subsolul are doar un mesaj standard de „drepturi de autor” și credite.
HTML-ul
Primul pas este adăugarea marcajului HTML. Să spunem că vom avea trei secțiuni diferite în subsolul cu widget-uri cu liste de Postări recente, Arhive lunare și Arhive zilnice. Vom plasa acest cod HTML deasupra liniei curente de „drepturi de autor”.
<div class="footer-item">
<h3>Postări recente</h3>
<ul>
<li><a href='#' title='Postare recomandată'>Postare recomandată</a></li>
<li><a href='#' title='Citate'>Citate</a></li>
<li><a href='#' title='Cum funcționează tag-ul „more”'>Cum funcționează tag-ul „more”</a></li>
<li><a href='#' title='Ordonare sau dezordonare'>Ordonare sau dezordonare</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Arhive lunare</h3>
<ul>
<li><a href='#' title='Martie 2008'>Martie 2008</a></li>
<li><a href='#' title='Februarie 2008'>Februarie 2008</a></li>
<li><a href='#' title='Ianuarie 2008'>Ianuarie 2008</a></li>
<li><a href='#' title='Decembrie 2007'>Decembrie 2007</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Arhive zilnice</h3>
<ul>
<li><a href='#' title='7 Martie 2008'>7 Martie 2008</a></li>
<li><a href='#' title='9 Februarie 2008'>9 Februarie 2008</a></li>
<li><a href='#' title='4 Ianuarie 2008'>4 Ianuarie 2008</a></li>
<li><a href='#' title='22 Decembrie 2007'>22 Decembrie 2007</a></li>
</ul>
</div>
<div class="clear"></div>
Practic, acest cod plasează fiecare „widget” într-un div. În interiorul fiecărui widget se află un titlu și o listă neordonată cu linkuri. Da, știu că linkurile nu duc nicăieri. Vom înlocui mai târziu acestea cu tag-uri de șablon WordPress. Iată ce avem până acum:
CSS-ul
După cum puteți vedea, nu arată prea bine fără nicio stilizare CSS. Adăugați următorul cod în foaia dvs. de stiluri.
.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}
Ceea ce face acest cod este să alinieze fiecare element din subsol la stânga, ceea ce înseamnă, practic, că pot fi unul lângă altul. Lățimea este setată la 33%, ceea ce oferă suficient spațiu pentru trei elemente din subsol pe un singur rând. Există, de asemenea, puțin spațiu adăugat sub fiecare element din subsol. A doua parte este doar spațierea listelor cu 15 pixeli spre stânga.
Acum puteți vedea că HTML-ul și CSS-ul încep să se îmbine. Iată ce ar trebui să aveți până acum:
Cod WordPress
În acest moment, avem o grămadă de linkuri HTML goale, fără cod WordPress real. Să înlocuim listele de sub Postări recente, Arhive lunare și Arhive zilnice cu echivalentele etichetelor de șablon WordPress. Înlocuiți ceea ce aveți în prezent cu următoarele:
<div class="footer-item">
<h3>Postări recente</h3>
<ul>
<?php wp_get_archives('type=postbypost&limit=4'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Arhive lunare</h3>
<ul>
<?php wp_get_archives('limit=4'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Arhive zilnice</h3>
<ul>
<?php wp_get_archives('type=daily&limit=4'); ?>
</ul>
</div>
Parametrii ar trebui să fie destul de clari, dar dacă nu sunteți sigur de vreunul dintre ei, încercați să căutați wp_get_archives în Instrumentul de căutare a etichetelor de șablon WordPress. Amintiți-vă, folosesc doar etichetele de șablon wp_get_archives() ca un substitut. Le vom înlocui mai târziu cu alte widgeturi WordPress, după ce vom transforma subsolul în widget.
Transformă-l în widget
Pentru această secțiune a tutorialului, voi împrumuta părți din tutorialul meu anterior despre transformarea temelor în widgeturi.
Primul pas este să înregistrați „barele laterale”. Pentru a face acest lucru, pur și simplu înlocuiți conținutul curent al fișierului functions.php cu următorul:
'Sidebar',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
?>
Acum vom intra în sidebar.php și vom înlocui eticheta condițională curentă pentru bara laterală dinamică cu aceasta:
Cu aceasta:
Acum vom intra în fișierul nostru footer.php și vom încadra elementele footer-ului în propria etichetă condițională de bară laterală respectivă. Chiar înainte de primul div „sidebar-item”, adăugați următorul.
Chiar după ultimul div de închidere „footer-item” (și deasupra div-ului „clear” pe care l-am adăugat mai devreme), vom adăuga următoarele:
<?php endif; ?>
Bun, acum bara laterală și subsolul ar trebui să fie widgetizate. Să testăm adăugând câteva widgeturi în subsol. Voi adăuga un widget Blogroll, un widget Comentarii recente și un widget text. Iată cum ar trebui să arate:
Concluzie
Ei bine, acestea sunt elementele de bază pentru adăugarea unui subsol widgetizat la tema ta. S-ar putea să dorești să adaugi reguli de stil separate pentru alte tipuri de widgeturi, cum ar fi calendarul sau caseta de căutare. Acest lucru probabil nu va funcționa cu orice temă, cum ar fi tema RS12, de exemplu, deoarece avea un subsol non-extensibil.
Dacă cineva dorește tema actualizată Green Rays, o poate descărca aici. Astfel, puteți vedea exact unde am adăugat codul. O puteți compara și cu tema originală.
Sper că v-a plăcut tutorialul. Veți adăuga un subsol widgetizat la tema dvs.? Există ceva în codul pe care l-am folosit mai sus pe care l-ați face diferit? Întrebările, comentariile, sugestiile și criticile sunt binevenite, așa că nu ezitați să vă exprimați în comentarii.
Am o eroare în timp ce adaug un widget personalizat în tema mea. Acesta este codul pe care l-am adăugat în functions.php.
function widget()
{
register_sidebar(array(
‘name’ => __(‘Bara laterală principală’, ‘wpb’),
‘id’ => ‘primary_sidebar’
‘description’ => ”,
‘class’ => ”,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
} add_action(‘widgets_init’, ‘widget’);
Ce mesaj de eroare primiți?
Muncă uimitoare la tutorialul dvs.!
O întrebare:
De ce ați avut nevoie să adăugați cod în fișierul sidebar.php când scopul tutorialului este adăugarea a trei zone widgetizate în footer?
Salut Mark, întrebare bună.
Acest tutorial presupune că aveți deja o zonă widgetizată în bara laterală. Când menționez fișierul
sidebar.php, practic recodez acea zonă widgetizată pentru a avea un nume unic (în acest caz, „Sidebar”) pentru a o diferenția de noua zonă widgetizată din footer pe care urmează să o creăm.Există mai multe informații despre codificarea zonelor multiple de widgeturi în tutorialul meu despre transformarea widgeturilor în temele WordPress.
Wow, chiar am reușit să fac asta să funcționeze! (Nu un comentariu despre codul tău, ci doar un comentariu despre abilitățile mele de codare). Mulțumesc!
Prima mea încercare de widgetizare și a funcționat absolut perfect. Mulțumesc! 🙂
Ai spus:
„Primul pas este să adăugați marcajul HTML.” și „Vom plasa acest cod HTML deasupra liniei curente de „drepturi de autor”.”
OK…. adaugă-l LA CE? Unde pun marcajul HTML? La ce îl adaug? Cum găsesc fișierul care conține linia „copyright”?
Încearcă să cauți în fișierul tău
footer.php.Ai putea să-mi oferi o scurtă prezentare a noului antet implicit al temei din 2012? Vreau să folosesc acest tutorial, dar antetul din 2012 este nefiresc de lung sau „Înalt”. Vreau să adaug 5 widgeturi text, și are un șablon fluid, aș dori să fie centrat. Poți să arunci și un pachet de chipsuri cu asta, dacă vrei 😛
Tutorialul este minunat, dar aș dori să știu cum să colorez fundalul unde stau widget-urile sau cum să adaug o imagine sub ele. Dacă ați putea răspunde la acest comentariu sau să-mi trimiteți un e-mail, ar fi grozav.
Încă o dată, tutorial excelent, a funcționat perfect pentru blogul temei mele și acum vreau doar să-l vopsesc puțin, dacă înțelegeți ce vreau să spun.
Cu stimă și aștept un răspuns din partea dumneavoastră! 🙂
Cred că căutați proprietatea de fundal CSS – http://www.w3schools.com/css/css_background.asp
Wow, chiar nu știam că ai fi putut face asta mai direct și mai simplu. Tutorial excelent despre un proces care ar fi putut fi mult mai dificil… 10 minute și sunt funcțional cu widgeturi noi în antet. Mulțumesc!
Mulțumesc mult că ți-ai făcut timp pentru asta! postare grozavă. Tema cu care lucrez a fost mult personalizată, așa că asta ar trebui să mă ajute să adaug antetul pe care îl doresc de ceva timp!
Mulțumesc pentru tutorialul grozav. Am o singură întrebare. Adăugarea widgeturilor nu este o problemă, dar cumva nu vrea să adauge un fundal pentru întregul antet. Partea unde sunt widgeturile rămâne albă la mine. Există vreo modalitate de a remedia asta?
http://blog.whenlovefalls.com/
Hmm…se pare că am uitat să menționez să pun
.clear { clear: both; }în foaia de stil.Asta ar trebui să rezolve problema.
Nu este o problemă să înlocuiești pur și simplu conținutul fișierului functions.php? Nu este acesta unul dintre fișierele pe care nu ar trebui să le ating?
De asemenea, ce apel de funcție aș avea nevoie pentru a obține o listă de pagini în fiecare secțiune a site-ului web? Vreau un fel de subsol "hartă a site-ului", dacă înțelegi ce vreau să spun (o listă orizontală de linkuri de nivel superior, fiecare cu subpaginile sale listate mai jos)
Poți să-l atingi dacă vrei, dar aș face o copie de rezervă înainte de a-l edita, deoarece dacă faci o greșeală, poate cauza probleme pentru restul site-ului tău.
Probabil căutați funcția wp_list_pages sau widgetul „Pagini”.
Acest post m-a salvat. Am încercat atâtea alte postări, aproape am renunțat și apoi am găsit-o pe a ta. Funcționează ca prin magie. Fiind un antrenor personal din San Diego, trebuie să pot oferi informații direct oamenilor. Mulțumesc din nou pentru ajutor. 2001 Iron
Scuze, am apăsat din greșeală butonul de trimitere. Bine, mulțumesc pentru postarea excelentă. Te superi dacă pun un link către ea. Mulțumesc
Campion la culturism Ironman 2001, Hank Butler
Mă bucur că ți-a plăcut postarea, Hank. Simte-te liber să faci un link către ea.
Pot înlocui acest subsol cu subsolul oricărei teme WordPress?
Aproape. Există unele designuri de subsol care nu sunt foarte flexibile și s-ar putea să nu funcționeze pe acelea.
Salut Leland,
Cum pot schimba astfel încât fundalul întregului subsol să aibă o culoare diferită față de restul paginii? Am încercat să folosesc background-color în secțiunea footer-item a foii de stil, dar aceasta va schimba doar fundalul zonelor ocupate de widget-uri, de exemplu, dacă widget-ul ocupă doar jumătate din zona widget-ului, fundalul va ocupa și el doar jumătate din zonă.
Probabil ar trebui să pui un alt div în jurul tuturor div-urilor footer-item și să setezi background-color la acel div. Asigură-te că div-urile footer-item sunt, de asemenea, curățate.
Mulțumesc Leland
M-am mai jucat puțin și am reușit să o fac. A trebuit să pun eticheta mea la începutul fișierului și să plasez stilul background-color în ea.
Mulțumesc pentru postare. Am încercat atâtea idei ale altor persoane despre cum să fac asta și practic mi-am petrecut cea mai mare parte a timpului reparând ce au stricat ei. Asta funcționează ca prin farmec și acum o am pe toate site-urile mele. Mulțumesc
Hank, mă bucur să aud că a funcționat pentru tine!
Mulțumesc foarte mult pentru acest tutorial frumos, Leland! 🙂
Crezi că m-ai putea ghida despre cum aș putea adăuga separatoare între fiecare bloc (div) de linkuri sau widget, așa cum este în subsolul acestei pagini?
@Saeed: Tot ce ar trebui să faci este să-ți schimbi CSS-ul.
Ai putea face ceva de genul:
.footer-item { border-right:1px solid #000; }
Sau ai putea aplica întotdeauna un fundal fiecărui element din subsol.
@Leland: Am dat peste acest post, încercând să fac ceva puțin mai extins și căutam sfaturi. Să zicem că utilizatorul dorește să adauge mai mult de 3 widget-uri (de exemplu) și lățimea containerului footer poate gestiona doar 3. Vreau ca următoarele 3 widget-uri să cadă direct dedesubt. Unde mă blochez este că atunci când sunt adăugate widget-urile 4 (și următoarele), acestea nu sunt aliniate vertical corespunzător... din cauza faptului că primele 3 widget-uri nu au o înălțime fixă. Dar nu vreau ca widget-urile să aibă o înălțime specifică, vreau să fie dinamică.
Singurul lucru la care mă pot gândi este să am o funcție care preia widget-urile pentru footer în grupuri divizibile cu 3 și le înfășoară într-un container div. Poți să mă ajuți cu asta? Dacă nu, ai alte sugestii despre cum aș putea aborda asta?
Mulțumesc,
Jeff
Jeff, eu aș face trei zone separate pentru widget-uri, câte una pentru fiecare coloană. Astfel, ai putea pune câte widget-uri dorești în fiecare coloană și acestea ar fi aliniate corespunzător.
Idee grozavă! Mulțumesc
Salut
Nu reușesc să trec de partea de widgetizare a tutorialului. Și acum site-ul meu este plin de erori. Am urmat pașii exact așa cum i-ai explicat.
Poți să-mi scrii înapoi ca să putem discuta ce a mers greșit?
Mulțumesc pentru acest tutorial. Abia aștept să funcționeze pentru site-ul meu. Este o idee bună.
Tutorial bun. Și eu sunt blocat la partea de widgetizare. Am mai multe bare laterale pe site-ul meu, deci am două fișiere sidebar.php. Am încercat să adaug HTML-ul barei laterale în fișierul meu „sibebar1.php”, dar acum primesc o eroare similară cu cea postată de alții.
ce fac greșit?
Articol excelent, în sfârșit a funcționat pentru mine, acum este implementat pe site-ul meu. M-a ajutat să proiectez tema existentă așa cum îmi place, în loc să caut o temă potrivită. Încă o dată, mulțumesc pentru asta.
Salut, Aș putea folosi asta cu Tema Thesis? Am cumpărat-o și încerc să învăț cum să folosesc toate caracteristicile sale, cum ar fi Thesis OpenHook. Anunță-mă.
Mulțumesc, Tam
[…] În: Pluginuri Wordpress 29 iul 2009 Mergi la Sursă […]
[…] Adăugați un subsol cu widget-uri temei dvs. WordPress Un tutorial care vă învață cum să vă creați propriul subsol cu widget-uri, inclusiv codul HTML, CSS și WordPress necesar. […]
[…] Adăugați un subsol cu widget-uri temei dvs. WordPress Un tutorial care vă învață cum să vă creați propriul subsol cu widget-uri, inclusiv codul HTML, CSS și WordPress necesar. […]
[…] Adăugați un subsol cu widget-uri temei dvs. WordPress Un tutorial care vă învață cum să vă creați propriul subsol cu widget-uri, inclusiv codul HTML, CSS și WordPress necesar. […]
Leland:
Mulțumesc pentru comentariul tău la postarea mea. Singura mea problemă cu acest tutorial este că nu știu unde merge marcajul inițial „HTML”. Este în functions.php?
[…] un subsol cu widget-uri pe o temă minimalistă Wordpress? Am încercat deja tutorialul de aici și câteva depanări aici. S-ar putea să încerc acesta […]