Lägg till en widgeterad sidfot till ditt WordPress-tema

Inspirationen till denna självstudie kommer från en tweet jag fick med feedback för den snart som ska släppas RS12 tema.


zakmorris twitter svar

Även om den widgeterade sidfoten inte så småningom gjorde det i utgivningen av RS12-temat, bestämde jag mig för att skriva denna handledning för att visa människor hur de exakt skulle lägga till en widgetad sidfot i ditt tema. I den här guiden lär du dig:

  • HTML- och CSS-koden som behövs för att producera den widgetiserade sidfoten
  • Hur man lägger till vanliga WordPress-mallar som platshållare
  • Hur du widgeterar sidfoten och placerar widgetar i den

Det kommer att finnas mycket kod i det här inlägget, så om du är redo för det, läs vidare …

Jag kommer att använda Gröna strålar WordPress-tema som mitt exempel i denna självstudie. För närvarande har sidfoten bara ett vanligt “copyright” -meddelande och krediter.

HTML

Det första steget är att lägga till HTML-markeringen. Låt oss säga att vi kommer att ha tre olika avsnitt i den widgetade sidfoten med listor över Senaste inlägg, Månadsarkiv och Dagliga arkiv. Vi kommer att placera den här HTML-koden ovanför den nuvarande “copyright” -raden.

Nya Inlägg

Månadsarkiv

Dagliga arkiv

I princip sätter denna kod varje “widget” i en div. Inuti varje widget finns en rubrik och en oordnad lista med länkar. Ja, jag vet att länkarna inte går någonstans. Vi kommer senare att ersätta detta med WordPress-malltaggar. Här är vad vi hittills har:

Grön strålfotfot 1

CSS

Som ni ser ser det inte så bra ut utan någon CSS-styling. Lägg till följande kod i ditt formatmall.

.sidfot-artikel {
flyta till vänster;
bredd: 33%;
polstring-botten: 10px;
}
.sidfot ul {
stoppning vänster: 15px;
}

Vad den här koden gör är att flytta varje sidfot till vänster, vilket i princip betyder att de kan vara sida vid sida. Bredden är inställd på 33%, vilket ger tillräckligt med utrymme för tre sidfotspår i en rad. Det läggs också lite stoppning under varje sidfot. Det andra stycket är bara att fylla listorna 15 pixlar till vänster.

Nu kan du se HTML och CSS börjar samlas. Här är vad du borde ha hittills:

Grön strålfotfot 2

WordPress-kod

För närvarande har vi ett gäng tomma HTML-länkar, utan någon verklig WordPress-kod. Låt oss ersätta listorna under Senaste inlägg, Månadsarkiv och Dagliga arkiv med WordPress-malltaggekvivalenter. Byt ut vad du för närvarande har med följande:

Nya Inlägg

    <?php wp_get_archives (‘type = postbypost&gräns = 4’ ); ?>

Månadsarkiv

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

Dagliga arkiv

    <?php wp_get_archives (‘typ = dagligen&gräns = 4’ ); ?>

Parametrarna bör vara ganska självförklarande, men om du inte är säker på någon av dem kan du försöka leta upp wp_get_archives i WordPress Mall Tag Lookup Tool. Kom ihåg att jag använder bara mallarna för wp_get_archives () som platshållare. Vi kommer att byta ut dessa med andra WordPress-widgets senare, efter att vi har widgetat i sidfoten.

Widgetize It

För det här avsnittet i lektionen kommer jag att låna delar från mitt tidigare widgetiserande teman handledning.

Det första steget är att registrera “sidofält.” För att göra detta, ersätt helt enkelt det aktuella innehållet i filen features.php med följande:

<?php
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘Sidebar’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘Sidfot’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

Nu går vi in ​​i sidfältet.php och ersätter den aktuella dynamiska sidfältets villkorade tagg med den här:

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ()): ?>

Med detta:

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("Sidebar")): ?>

Nu ska vi gå in i footer.php-filen och radera sidfotens artiklar i den egna respektive sidofältets villkorade tagg. Rätt innan det första avsnittet “sidofält-objekt” lägger du till följande.

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("sidfot")): ?>

Rätt efter den sista stängningen “footer-item” div (och ovanför den “clear” div som vi lagt till tidigare) lägger vi till följande:

<?php endif; ?>

Okej, nu ska vår sidfält och sidfot vara widgetiserad. Låt oss testa det genom att lägga till några widgetar i sidfoten. Jag lägger till en widget för Blogroll, widgeten för senaste kommentarer och en textwidget. Så här ska det se ut:

Grön strålfotfot 3

Slutsats

Det är grunderna i att lägga till en widget-sidfot till ditt tema. Du kanske vill lägga till separata stylingsregler för andra typer av widgetar, t.ex. kalendern eller sökrutan. Detta fungerar förmodligen inte med varje tema, till exempel RS12-temat, eftersom det hade en icke-utbyggbar sidfot.

Om någon vill ha det uppdaterade Green Rays-temat av någon slump kan du ladda ner det här. På det här sättet kan du se var exakt jag har lagt till koden. Du kan jämföra det med originaltema också.

Hoppas att du gillade självstudien. Kommer du att lägga till en widget-sidfot till ditt tema? Finns det något i koden jag använde ovan skulle du göra annorlunda? Frågor, kommentarer, förslag och kritik är alla välkomna, så ta gärna med dig i kommentarerna.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me