Dodajte Widgetized Footer v svojo WordPress temo

Navdih za to vadbo prihaja iz tvit sem prejel s povratnimi informacijami za kmalu izid Tema RS12.


odgovor zakmorris twitter

Čeprav se widgetized footer na koncu ni sprožil ob izdaji teme RS12, sem se odločil, da napišem to vadnico, da ljudem pokažem, kako natančno dodati widgetized footer v svojo temo. V tem priročniku boste izvedeli:

  • Koda HTML in CSS, potrebna za izdelavo spodnjega podnožja
  • Kako dodati običajno uporabljene oznake predloge WordPress kot nadomestke
  • Kako widgetizeti podnožje in vanj postaviti widgete

V tej objavi bo veliko kode, tako da, če ste pripravljeni, preberite dalje …

Uporabljal bom Zeleni žarki WordPress tema kot moj primer v tej vadnici. Trenutno ima podnožje samo standardno sporočilo o avtorskih pravicah in dobropise.

HTML

Prvi korak je dodati oznako HTML. Recimo, da bomo imeli tri različne odseke v spodnjem dnu s seznami najnovejših objav, mesečnih arhivov in dnevnih arhivov. To kodo HTML bomo postavili nad trenutno vrstico »avtorske pravice«.

Zadnje objave

Mesečni arhiv

Dnevni arhiv

V bistvu ta koda postavi vsak widget v div. Znotraj vsakega pripomočka sta naslov in neurejen seznam s povezavami. Da, vem, da povezave niso nikamor. Kasneje bomo to nadomestili z oznakami predloge WordPress. Tukaj je nekaj:

Spodnja stran zelenih žarkov 1

CSS

Kot lahko vidite, brez CSS-a ni videti tako dobro. V tabelo stilov dodajte naslednjo kodo.

.noga predloga {
plovec: levo;
širina: 33%;
oblazinjenje: 10px;
}
.footer-item ul {
oblazinjenje-levo: 15px;
}

Ta koda plava vsak element noge v levi, kar v bistvu pomeni, da so lahko drug ob drugem. Širina je nastavljena na 33%, kar daje dovolj prostora za tri elemente podnožja v eni vrsti. Pod vsakim elementom podnožja je dodano tudi nekaj oblazinjenja. Drugi del je lepi seznam 15 slikovnih pik na levi strani.

Zdaj lahko vidite, da se HTML in CSS začenjata združevati. Tukaj je nekaj, kar bi morali doseči:

Footer 2 Green Rays 2

WordPress koda

Trenutno imamo kup praznih povezav HTML, brez dejanske kode WordPress. Sezname pod nedavnimi objavami, mesečnimi arhivi in ​​dnevnimi arhivi zamenjamo z ustrezniki oznake predloge WordPress. To, kar trenutno imate, nadomestite z naslednjim:

Zadnje objave

    <?php wp_get_archives (‘type = postbypost&omejitev = 4 ‘); ?>

Mesečni arhiv

    <?php wp_get_archives (‘omejitev = 4’); ?>

Dnevni arhiv

    <?php wp_get_archives (‘vrsta = dnevno&omejitev = 4 ‘); ?>

Parametri bi morali biti precej samoumevni, če pa niste prepričani o nobenem od njih, poskusite poiskati wp_get_archives v Orodje za iskanje predloge za WordPress predloge. Ne pozabite, da kot rezerviralec uporabljam samo predloge wp_get_archives (). Z drugimi widgetti WordPress jih bomo kasneje izklopili, potem ko bomo spodnji del spodnjega stopala.

Widgetize It

V tem razdelku vadnice si bom izposodil dele iz svojega prejšnjega widgetizing teme vadnica.

Prvi korak je registracija “stranskih vrstic”. Če želite to narediti, preprosto zamenjajte trenutno vsebino datoteke function.php z naslednjim:

<?php
if (function_exists (‘register_sidebar’))
register_sidebar (matrika (
‘ime’ => “Stranska vrstica”,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘pred_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (matrika (
‘ime’ => ‘Footer’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘pred_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

Zdaj bomo prešli na sidebar.php in trenutno dinamično pogojno oznako stranske vrstice nadomestili s tem:

<?php if (! function_exists (‘dinamična_strana’) ||! dinamična_stranica ()): ?>

S tem:

<?php if (! function_exists (‘dinamična_strana’) ||! dinamična_stranica ("Stranska vrstica")): ?>

Zdaj bomo vstopili v našo footer.php datoteko in zavili elemente podnožja v svojo pogojno oznako stranske vrstice. Tik pred prvim dvom „stranske postavke“ dodajte naslednje.

<?php if (! function_exists (‘dinamična_strana’) ||! dinamična_stranica ("Spodnja noga")): ?>

Takoj po končnem zaključku div “element footer” (in nad “jasnim” div, ki smo ga dodali prej), bomo dodali naslednje:

<?php endif; ?>

Ok, zdaj bi morali našo stransko vrstico in nogo prebrisati. Preizkusimo jo tako, da v nogo dodamo nekaj pripomočkov. Dodala bom pripomoček Blogroll, pripomoček Zadnji komentarji in besedilni gradnik. Takole mora izgledati:

Zeleni žarki podnožje 3

Zaključek

No, to so osnove, kako dodati temo widgetized footer. Morda boste želeli dodati ločena pravila za oblikovanje drugih vrst pripomočkov, kot sta koledar ali iskalno polje. To verjetno ne bo delovalo z vsako temo, kot je na primer tema RS12, saj je imelo nerazširljivo podnožje.

Če si kdo zaželi posodobljene teme Green Rays, jo lahko prenese tukaj. Tako lahko vidite, kje točno sem dodal kodo. Lahko ga primerjate z izvirna tema tudi.

Upam, da vam je vadnica všeč. Ali boste svoji temi dodali widgetizirano podnožje? Ali v kodi, ki sem jo uporabil zgoraj, obstaja kaj drugače, bi naredili drugače? Vprašanja, komentarji, predlogi in kritike so dobrodošli, zato vas prosimo, da se oglasite v komentarjih.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map