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.
Leland,
Iată linkul pastebin pentru fișierul meu functions.php. L-am postat fără modificarea dvs. Ajutorul dvs. este apreciat.
http://pastebin.com/m40073591
„Și eu încerc să-mi fac footer-ul widgetizat folosind pasul dvs., dar când adaug codul în functions.php, primesc mereu același mesaj de eroare:
Eroare de analiză: eroare de sintaxă, ‘}’ neașteptat în /home/………..redacted………/functions.php pe linia 230
Sunt sigur că asta înseamnă că am un ‘}” deplasat, dar eliminarea lui nu pare să funcționeze. Ajutor?”
Întâmpin aceleași probleme. Ați putea oferi un sfat?
Mulțumesc,
Dave
ai reușit să rezolvi asta? Și eu am aceeași problemă, dar s-a întâmplat când am modificat codul fișierului sidebar.php.
cum ai rezolvat-o?
Rulez 2 sidebare, deci am 2 fișiere sidebar.php. Am încercat să revin la starea originală a codului, dar fără succes. Cred că va trebui să încarc fișierul meu php de backup, dar asta nu va rezolva problema, doar îmi va permite să continui să lucrez la site-ul meu.
dacă există vreun sfat, l-aș aprecia.
mulțumesc
Am dat peste asta din întâmplare – un tutorial grozav atât ca și conținut, cât și ca stil de scriere – bine făcut.
Acest tutorial îmi dă viață! Nu am văzut o explicație atât de amănunțită despre cum să fac asta. Sunt în proces de a crea un nou look pentru blogul meu și wow…exact asta îmi trebuia. Vă mulțumesc mult!!
[…] Adaugă un footer widgetizat la tema ta WordPress | Theme Lab (etichete: tutorial wordpress footer CSS) […]
@Lance: Ar depinde de temă, dar ar fi undeva în interiorul div-ului „footer” (oricum s-ar numi).
Se pare că subsolul site-ului tău are o înălțime fixă, așa că probabil ar trebui să remediezi asta înainte de a folosi acest cod.
Salut – Mulțumesc pentru acest tutorial, dar sunt confuz. Unde pun codul HTML pe care îl ai la început?
Am fișierele CSS și de subsol și știu că pot pune codul acolo. Dar unde merge codul HTML propriu-zis?
[…] casetă, șabloane personalizate pentru arhivă și căutare, o pagină de opțiuni și patru zone cu widget-uri (inclusiv un subsol cu widget-uri). Aceste caracteristici vor fi acoperite […]
@Terri: Nicio problemă! Un subsol cu widget-uri frumos, apropo. 🙂
daaa! Mulțumesc!
@Hannah: Da, asta înseamnă. Deși îmi este cam greu să diagnostichez problema dacă nu pot vedea codul exact. Ai putea, te rog, să postezi codul fișierului tău actual functions.php pe un fel de pastebin? Ceva de genul http://pastebin.com – mulțumesc!
Tutorial grozav! Încerc să-mi fac subsolul cu widget-uri folosind pasul tău, dar când adaug codul în functions.php, primesc în continuare mesajul de eroare:
Eroare de analiză: eroare de sintaxă, ‘}’ neașteptat în /home/………..redacted………/functions.php pe linia 230
Sunt sigur că asta înseamnă că am un „}” deplasat, dar eliminarea lui nu pare să funcționeze. Ajutor?
[…] am găsit un tutorial grozav despre cum să adăugați widgeturi în subsolul unei teme. Widgeturile nu sunt doar pentru bara laterală […]
@ezg: Ah… ei bine, mă bucur că a funcționat pentru tine.
@Jeffro: Mulțumesc, apreciez recomandarea și mă bucur că ți-a plăcut tutorialul.
Așteptam de mult timp un articol ca acesta. L-am descoperit singur, dar este întotdeauna frumos să ai o referință la care să te întorci. Am trimis acest articol pe StumbleUpon 🙂
[…] Adaugă un subsol cu widgeturi temei tale WordPress | Theme Lab (etichete: wordpress) […]
[…] domeniu ), am încărcat noua temă și am început să o modific. Cel mai important lucru pe care l-am făcut a fost să adaug un subsol masiv cu widgeturi. Poți face același lucru folosind tutorialul de la Leland de la Theme Lab. În principal, am vrut să fac […]
[…] Adaugă un subsol cu widgeturi temei tale WordPress – cine spune că widgeturile sunt doar pentru barele laterale? Le-am văzut folosite în multe alte locuri, inclusiv în subsoluri, ceea ce este exact ceea ce vei învăța să faci în acest tutorial. [Link] […]
[…] http://www.themelab.com/2009/04/25/add-a-widgetized-footer-to-your-wordpress-theme/ […]
Nu l-ai văzut, pentru că nu îl folosesc acum. Dar când l-am activat, arăta grozav. Mai târziu, când mă voi gândi ce widgeturi să folosesc, îl voi activa.
@ezg: Frumos! Mă întrebam doar, pe ce blog l-ai folosit? Am verificat URL-ul pe care l-ai folosit pentru a comenta aici, dar nu am văzut subsolul cu widgeturi.
Am folosit tutorialul tău pe blogul meu. Arată grozav.
Mulțumesc pentru lecție. 🙂
@sriganesh: Sună bine, anunță-mă cum îți merge.
Mulțumesc. Folosesc acum tema elegantă. Pe care am câștigat-o la un concurs. Vezi subsolul temei mele.. Mulțumesc mult. , am o mică problemă - am adăugat fotografiile mele flickr. dar sunt aranjate neregulat. ca alte site-uri profesionale cu bordură, nu le pot alinia. mă poți ajuta cu asta. în ultimele trei luni am încercat singur și am adăugat coduri, dar nimic nu s-a întâmplat.
[…] HTML sau pentru un sistem de gestionare a conținutului (CMS)? În funcție de abilitățile tale Adaugă un subsol cu widget-uri temei tale WordPress – themelab.com 25.04.2009 Inspirația pentru acest tutorial vine de la un tweet pe care l-am primit cu […]
tutorial drăguț, voi încerca asta, pentru că am nevoie de ceva de genul. vizitează site-ul meu. îmi place să am același lucru ca și cum este menționat aici.
Nu mă înțelege greșit, îmi place tutorialul și totul... dar ca să fiu complet sincer, simt că ne-ai cam păcălit... ca și cum am vrea să știm cum ai făcut TU antetul tău, știi? Nu este un atac personal, dar mă simt puțin înșelat primind un subsol banal și meschin....
Dacă ai putea, te rog, să ne spui cum ai făcut TU al tău, ar fi grozav. Și nu doar să arunci cu „pune imaginea ta în spatele lui...” Mă refer la cum ai făcut TU cu adevărat. Mulțumesc....
Am făcut tot ce ai spus și nu știu cum să „trag” widget-urile...? Nu văd unde să le trag....
Faci asta în panoul de administrare WordPress, pe pagina widget-urilor. Prin „tragere” mă refer doar la plasarea widget-urilor în diversele zone cu widget-uri.
Îmi pare rău că te simți „păcălit”, dar am vrut să scriu un tutorial care să se aplice aproape oricărui tip de temă.
FYI, nici măcar nu folosesc widget-uri WordPress în subsolul și antetul acestui site, sunt codificate direct.
Nu sunt sigur cât de detaliat ar fi putut fi. Dacă ești designer web și ai o idee despre ce este WordPress, atunci vei ști cum să realizezi restul. Tutorialul lui a fost perfect.