Inspirationen till denna handledning kommer från en tweet jag fick med feedback om det snart släppta RS12-temat.
Även om den widgetiserade sidfoten till slut inte kom till RS12-temansläppet, bestämde jag mig för att skriva den här handledningen för att visa folk exakt hur man lägger till en widgetiserad sidfot till deras tema. I den här guiden får du lära dig:
- HTML- och CSS-koden som behövs för att skapa den widgetiserade sidfoten.
- Hur man lägger till vanliga WordPress-malltaggar som platshållare
- Hur man widgetiserar sidfoten och placerar widgets i den
Det kommer att finnas mycket kod i det här inlägget, så om du är sugen på det, läs vidare…
Jag kommer att använda Green Rays WordPress-temat som mitt exempel i denna handledning. För tillfället har sidfoten bara ett standardmeddelande om upphovsrätt och krediter.
HTML
Det första steget är att lägga till HTML-uppmärkningen. Låt oss säga att vi kommer att ha tre olika sektioner i sidfoten med widgets som listar senaste inlägg, månadsarkiv och dagliga arkiv. Vi kommer att placera denna HTML-kod ovanför den aktuella “copyright”-raden.
I grund och botten placerar 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. Detta är vad vi har hittills:
CSS
Som du kan se ser detta inte lika bra ut utan någon CSS-styling. Lägg till följande kod i din stilmall.
.footer-item {
vänster flyta;
bredd: 33%;
vadderad bakgrund: 10px;
}
.footer-item ul {
padding-vänster: 15px;
}
Vad den här koden gör är att flytta varje sidfotselement till vänster, vilket i princip betyder att de kan vara bredvid varandra. Bredden är inställd på 33 %, vilket ger tillräckligt med utrymme för tre sidfotselement i en enda rad. En del stoppning läggs också till under varje sidfotselement. Den andra biten är att helt enkelt fylla listorna 15 pixlar till vänster.
Nu kan du se att HTML och CSS börjar gå ihop. Detta är vad du bör ha hittills:
WordPress kod
För tillfället har vi ett gäng tomma HTML-länkar, utan någon egentlig WordPress-kod. Låt oss ersätta listorna i Senaste inlägg, Månadsarkiv och Dagliga arkiv med motsvarande WordPress-malltaggar. Ersätt det du har för närvarande med följande:
Parametrarna bör vara ganska tydliga, men om du är osäker på någon av dem, försök att söka efter wp_get_archives i sökverktyget för WordPress malltaggar. Kom ihåg att jag bara använder wp_get_archives() malltaggar som platshållare. Vi kommer att ändra dem med andra WordPress-widgets senare, efter att vi lagt till sidfoten.
Widgetisera det
För den här delen av handledningen kommer jag att låna delar från min tidigare handledning för widgetteman.
Det första steget är att registrera “sidofälten”. För att göra detta, ersätt helt enkelt det nuvarande innehållet i filen functions.php med följande:
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘Sidofält’,
‘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 till sidebar.php och ersätter den nuvarande dynamiska sidofältsvillkorliga taggen med denna:
Med detta:
Nu ska vi gå in i vår footer.php-fil och linda in sidfotselementen i sina egna villkorliga sidofältstaggar. Precis innan det första “sidofältselementet” div, lägg till följande.
Strax efter den sista avslutande div “footer-item” (och ovanför den “clear” div vi lade till tidigare) lägger vi till följande:
Ok, nu bör sidofältets sidfot ha en widget. Låt oss prova det genom att lägga till några widgets i sidfoten. Jag lägger till en Blogroll-widget, en Senaste kommentarer-widget och en textwidget. Så här ska det se ut:
Slutsats
Tja, det är grunderna för att lägga till en widgetiserad sidfot till ditt tema. Du kanske vill lägga till separata stilregler för andra typer av widgets, till exempel kalender eller sökruta. Detta kommer förmodligen inte att fungera med alla teman, som RS12-temat till exempel, eftersom det hade en icke-expanderbar sidfot.
Om någon vill ha det uppdaterade Green Rays-temat av en slump kan de ladda ner det här. På så sätt kan du se exakt var jag lade till koden. Du kan också jämföra det med originaltemat.
Jag hoppas att du gillade handledningen. Kommer du att lägga till en widgetiserad sidfot till ditt tema? Finns det något i koden jag använde ovan som jag skulle göra annorlunda? Frågor, kommentarer, förslag och kritik är välkomna, så hör gärna av dig i kommentarerna.
