Det kommer att finnas mycket kod i det h\u00e4r inl\u00e4gget, s\u00e5 om du \u00e4r sugen p\u00e5 det, l\u00e4s vidare…<\/p>\n
Jag kommer att anv\u00e4nda Green Rays WordPress-temat som mitt exempel i denna handledning. F\u00f6r tillf\u00e4llet har sidfoten bara ett standardmeddelande om upphovsr\u00e4tt och krediter.<\/p>\n
<\/span>HTML<\/span><\/h3>\nDet f\u00f6rsta steget \u00e4r att l\u00e4gga till HTML-uppm\u00e4rkningen. L\u00e5t oss s\u00e4ga att vi kommer att ha tre olika sektioner i sidfoten med widgets som listar senaste inl\u00e4gg, m\u00e5nadsarkiv och dagliga arkiv. Vi kommer att placera denna HTML-kod ovanf\u00f6r den aktuella “copyright”-raden.<\/p>\n
I grund och botten placerar denna kod varje widget i en div. Inuti varje widget finns en rubrik och en oordnad lista med l\u00e4nkar. Ja, jag vet att l\u00e4nkarna inte g\u00e5r n\u00e5gonstans. Vi kommer senare att ers\u00e4tta detta med WordPress-malltaggar. Detta \u00e4r vad vi har hittills:<\/p>\n
![\"Green](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/1639226290_212_Agregue-un-pie-de-pagina-con-widget-a-su-tema.png\")
<\/p>\n
<\/span>CSS<\/span><\/h3>\nSom du kan se ser detta inte lika bra ut utan n\u00e5gon CSS-styling. L\u00e4gg till f\u00f6ljande kod i din stilmall.<\/p>\n
.footer-item {
v\u00e4nster flyta;
bredd: 33%;
vadderad bakgrund: 10px;
}
.footer-item ul {
padding-v\u00e4nster: 15px;
}<\/p>\n
Vad den h\u00e4r koden g\u00f6r \u00e4r att flytta varje sidfotselement till v\u00e4nster, vilket i princip betyder att de kan vara bredvid varandra. Bredden \u00e4r inst\u00e4lld p\u00e5 33 %, vilket ger tillr\u00e4ckligt med utrymme f\u00f6r tre sidfotselement i en enda rad. En del stoppning l\u00e4ggs ocks\u00e5 till under varje sidfotselement. Den andra biten \u00e4r att helt enkelt fylla listorna 15 pixlar till v\u00e4nster. <\/p>\n
Nu kan du se att HTML och CSS b\u00f6rjar g\u00e5 ihop. Detta \u00e4r vad du b\u00f6r ha hittills:<\/p>\n
![\"Green](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/1639226290_366_Agregue-un-pie-de-pagina-con-widget-a-su-tema.png\")
<\/p>\n
<\/span>WordPress kod<\/span><\/h3>\nF\u00f6r tillf\u00e4llet har vi ett g\u00e4ng tomma HTML-l\u00e4nkar, utan n\u00e5gon egentlig WordPress-kod. L\u00e5t oss ers\u00e4tta listorna i Senaste inl\u00e4gg, M\u00e5nadsarkiv och Dagliga arkiv med motsvarande WordPress-malltaggar. Ers\u00e4tt det du har f\u00f6r n\u00e4rvarande med f\u00f6ljande:<\/p>\n
Parametrarna b\u00f6r vara ganska tydliga, men om du \u00e4r os\u00e4ker p\u00e5 n\u00e5gon av dem, f\u00f6rs\u00f6k att s\u00f6ka efter wp_get_archives i s\u00f6kverktyget f\u00f6r WordPress malltaggar. Kom ih\u00e5g att jag bara anv\u00e4nder wp_get_archives() malltaggar som platsh\u00e5llare. Vi kommer att \u00e4ndra dem med andra WordPress-widgets senare, efter att vi lagt till sidfoten.<\/p>\n
<\/span>Widgetisera det<\/span><\/h3>\nF\u00f6r den h\u00e4r delen av handledningen kommer jag att l\u00e5na delar fr\u00e5n min tidigare handledning f\u00f6r widgetteman.<\/p>\n
Det f\u00f6rsta steget \u00e4r att registrera “sidof\u00e4lten”. F\u00f6r att g\u00f6ra detta, ers\u00e4tt helt enkelt det nuvarande inneh\u00e5llet i filen functions.php med f\u00f6ljande:<\/p>\n
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘Sidof\u00e4lt’,
‘before_widget’ => ‘<\/p>\n
‘,
‘after_widget’ => ‘<\/p>\n
‘,
‘before_title’ => ‘<\/p>\n
<\/span>‘,
‘after_title’ => ‘<\/span><\/h3>\n‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘Sidfot’,
‘before_widget’ => ‘<\/p>\n
‘,
‘after_widget’ => ‘<\/p>\n
‘,
‘before_title’ => ‘<\/p>\n
<\/span>‘,
‘after_title’ => ‘<\/span><\/h3>\n‘,
));
?><\/p>\n
Nu g\u00e5r vi till sidebar.php och ers\u00e4tter den nuvarande dynamiska sidof\u00e4ltsvillkorliga taggen med denna:<\/p>\n
Med detta:<\/p>\n
Nu ska vi g\u00e5 in i v\u00e5r footer.php-fil och linda in sidfotselementen i sina egna villkorliga sidof\u00e4ltstaggar. Precis innan det f\u00f6rsta “sidof\u00e4ltselementet” div, l\u00e4gg till f\u00f6ljande.<\/p>\n
Strax efter den sista avslutande div “footer-item” (och ovanf\u00f6r den “clear” div vi lade till tidigare) l\u00e4gger vi till f\u00f6ljande:<\/p>\n
Ok, nu b\u00f6r sidof\u00e4ltets sidfot ha en widget. L\u00e5t oss prova det genom att l\u00e4gga till n\u00e5gra widgets i sidfoten. Jag l\u00e4gger till en Blogroll-widget, en Senaste kommentarer-widget och en textwidget. S\u00e5 h\u00e4r ska det se ut:<\/p>\n
![\"Green](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/1639226290_185_Agregue-un-pie-de-pagina-con-widget-a-su-tema.png\")
<\/p>\n
<\/span>Slutsats<\/span><\/h3>\nTja, det \u00e4r grunderna f\u00f6r att l\u00e4gga till en widgetiserad sidfot till ditt tema. Du kanske vill l\u00e4gga till separata stilregler f\u00f6r andra typer av widgets, till exempel kalender eller s\u00f6kruta. Detta kommer f\u00f6rmodligen inte att fungera med alla teman, som RS12-temat till exempel, eftersom det hade en icke-expanderbar sidfot.<\/p>\n
Om n\u00e5gon vill ha det uppdaterade Green Rays-temat av en slump kan de ladda ner det h\u00e4r. P\u00e5 s\u00e5 s\u00e4tt kan du se exakt var jag lade till koden. Du kan ocks\u00e5 j\u00e4mf\u00f6ra det med originaltemat.<\/p>\n
Jag hoppas att du gillade handledningen. Kommer du att l\u00e4gga till en widgetiserad sidfot till ditt tema? Finns det n\u00e5got i koden jag anv\u00e4nde ovan som jag skulle g\u00f6ra annorlunda? Fr\u00e5gor, kommentarer, f\u00f6rslag och kritik \u00e4r v\u00e4lkomna, s\u00e5 h\u00f6r g\u00e4rna av dig i kommentarerna.<\/p>\n
<\/p>\nSom du kan se ser detta inte lika bra ut utan n\u00e5gon CSS-styling. L\u00e4gg till f\u00f6ljande kod i din stilmall.<\/p>\n
.footer-item {
v\u00e4nster flyta;
bredd: 33%;
vadderad bakgrund: 10px;
}
.footer-item ul {
padding-v\u00e4nster: 15px;
}<\/p>\n
Vad den h\u00e4r koden g\u00f6r \u00e4r att flytta varje sidfotselement till v\u00e4nster, vilket i princip betyder att de kan vara bredvid varandra. Bredden \u00e4r inst\u00e4lld p\u00e5 33 %, vilket ger tillr\u00e4ckligt med utrymme f\u00f6r tre sidfotselement i en enda rad. En del stoppning l\u00e4ggs ocks\u00e5 till under varje sidfotselement. Den andra biten \u00e4r att helt enkelt fylla listorna 15 pixlar till v\u00e4nster. <\/p>\n
Nu kan du se att HTML och CSS b\u00f6rjar g\u00e5 ihop. Detta \u00e4r vad du b\u00f6r ha hittills:<\/p>\n
<\/p>\n
<\/span>WordPress kod<\/span><\/h3>\nF\u00f6r tillf\u00e4llet har vi ett g\u00e4ng tomma HTML-l\u00e4nkar, utan n\u00e5gon egentlig WordPress-kod. L\u00e5t oss ers\u00e4tta listorna i Senaste inl\u00e4gg, M\u00e5nadsarkiv och Dagliga arkiv med motsvarande WordPress-malltaggar. Ers\u00e4tt det du har f\u00f6r n\u00e4rvarande med f\u00f6ljande:<\/p>\n
Parametrarna b\u00f6r vara ganska tydliga, men om du \u00e4r os\u00e4ker p\u00e5 n\u00e5gon av dem, f\u00f6rs\u00f6k att s\u00f6ka efter wp_get_archives i s\u00f6kverktyget f\u00f6r WordPress malltaggar. Kom ih\u00e5g att jag bara anv\u00e4nder wp_get_archives() malltaggar som platsh\u00e5llare. Vi kommer att \u00e4ndra dem med andra WordPress-widgets senare, efter att vi lagt till sidfoten.<\/p>\n
<\/span>Widgetisera det<\/span><\/h3>\nF\u00f6r den h\u00e4r delen av handledningen kommer jag att l\u00e5na delar fr\u00e5n min tidigare handledning f\u00f6r widgetteman.<\/p>\n
Det f\u00f6rsta steget \u00e4r att registrera “sidof\u00e4lten”. F\u00f6r att g\u00f6ra detta, ers\u00e4tt helt enkelt det nuvarande inneh\u00e5llet i filen functions.php med f\u00f6ljande:<\/p>\n
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘Sidof\u00e4lt’,
‘before_widget’ => ‘<\/p>\n
‘,
‘after_widget’ => ‘<\/p>\n
‘,
‘before_title’ => ‘<\/p>\n
<\/span>‘,
‘after_title’ => ‘<\/span><\/h3>\n‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘Sidfot’,
‘before_widget’ => ‘<\/p>\n
‘,
‘after_widget’ => ‘<\/p>\n
‘,
‘before_title’ => ‘<\/p>\n
<\/span>‘,
‘after_title’ => ‘<\/span><\/h3>\n‘,
));
?><\/p>\n
Nu g\u00e5r vi till sidebar.php och ers\u00e4tter den nuvarande dynamiska sidof\u00e4ltsvillkorliga taggen med denna:<\/p>\n
Med detta:<\/p>\n
Nu ska vi g\u00e5 in i v\u00e5r footer.php-fil och linda in sidfotselementen i sina egna villkorliga sidof\u00e4ltstaggar. Precis innan det f\u00f6rsta “sidof\u00e4ltselementet” div, l\u00e4gg till f\u00f6ljande.<\/p>\n
Strax efter den sista avslutande div “footer-item” (och ovanf\u00f6r den “clear” div vi lade till tidigare) l\u00e4gger vi till f\u00f6ljande:<\/p>\n
Ok, nu b\u00f6r sidof\u00e4ltets sidfot ha en widget. L\u00e5t oss prova det genom att l\u00e4gga till n\u00e5gra widgets i sidfoten. Jag l\u00e4gger till en Blogroll-widget, en Senaste kommentarer-widget och en textwidget. S\u00e5 h\u00e4r ska det se ut:<\/p>\n
<\/p>\n
<\/span>Slutsats<\/span><\/h3>\nTja, det \u00e4r grunderna f\u00f6r att l\u00e4gga till en widgetiserad sidfot till ditt tema. Du kanske vill l\u00e4gga till separata stilregler f\u00f6r andra typer av widgets, till exempel kalender eller s\u00f6kruta. Detta kommer f\u00f6rmodligen inte att fungera med alla teman, som RS12-temat till exempel, eftersom det hade en icke-expanderbar sidfot.<\/p>\n
Om n\u00e5gon vill ha det uppdaterade Green Rays-temat av en slump kan de ladda ner det h\u00e4r. P\u00e5 s\u00e5 s\u00e4tt kan du se exakt var jag lade till koden. Du kan ocks\u00e5 j\u00e4mf\u00f6ra det med originaltemat.<\/p>\n
Jag hoppas att du gillade handledningen. Kommer du att l\u00e4gga till en widgetiserad sidfot till ditt tema? Finns det n\u00e5got i koden jag anv\u00e4nde ovan som jag skulle g\u00f6ra annorlunda? Fr\u00e5gor, kommentarer, f\u00f6rslag och kritik \u00e4r v\u00e4lkomna, s\u00e5 h\u00f6r g\u00e4rna av dig i kommentarerna.<\/p>\n
F\u00f6r den h\u00e4r delen av handledningen kommer jag att l\u00e5na delar fr\u00e5n min tidigare handledning f\u00f6r widgetteman.<\/p>\n
Det f\u00f6rsta steget \u00e4r att registrera “sidof\u00e4lten”. F\u00f6r att g\u00f6ra detta, ers\u00e4tt helt enkelt det nuvarande inneh\u00e5llet i filen functions.php med f\u00f6ljande:<\/p>\n
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘Sidof\u00e4lt’,
‘before_widget’ => ‘<\/p>\n
‘,
‘after_widget’ => ‘<\/p>\n
‘,
‘before_title’ => ‘<\/p>\n
<\/span>‘,
‘after_title’ => ‘<\/span><\/h3>\n‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘Sidfot’,
‘before_widget’ => ‘<\/p>\n
‘,
‘after_widget’ => ‘<\/p>\n
‘,
‘before_title’ => ‘<\/p>\n
<\/span>‘,
‘after_title’ => ‘<\/span><\/h3>\n‘,
));
?><\/p>\n
Nu g\u00e5r vi till sidebar.php och ers\u00e4tter den nuvarande dynamiska sidof\u00e4ltsvillkorliga taggen med denna:<\/p>\n
Med detta:<\/p>\n
Nu ska vi g\u00e5 in i v\u00e5r footer.php-fil och linda in sidfotselementen i sina egna villkorliga sidof\u00e4ltstaggar. Precis innan det f\u00f6rsta “sidof\u00e4ltselementet” div, l\u00e4gg till f\u00f6ljande.<\/p>\n
Strax efter den sista avslutande div “footer-item” (och ovanf\u00f6r den “clear” div vi lade till tidigare) l\u00e4gger vi till f\u00f6ljande:<\/p>\n
Ok, nu b\u00f6r sidof\u00e4ltets sidfot ha en widget. L\u00e5t oss prova det genom att l\u00e4gga till n\u00e5gra widgets i sidfoten. Jag l\u00e4gger till en Blogroll-widget, en Senaste kommentarer-widget och en textwidget. S\u00e5 h\u00e4r ska det se ut:<\/p>\n
<\/p>\n
<\/span>Slutsats<\/span><\/h3>\nTja, det \u00e4r grunderna f\u00f6r att l\u00e4gga till en widgetiserad sidfot till ditt tema. Du kanske vill l\u00e4gga till separata stilregler f\u00f6r andra typer av widgets, till exempel kalender eller s\u00f6kruta. Detta kommer f\u00f6rmodligen inte att fungera med alla teman, som RS12-temat till exempel, eftersom det hade en icke-expanderbar sidfot.<\/p>\n
Om n\u00e5gon vill ha det uppdaterade Green Rays-temat av en slump kan de ladda ner det h\u00e4r. P\u00e5 s\u00e5 s\u00e4tt kan du se exakt var jag lade till koden. Du kan ocks\u00e5 j\u00e4mf\u00f6ra det med originaltemat.<\/p>\n
Jag hoppas att du gillade handledningen. Kommer du att l\u00e4gga till en widgetiserad sidfot till ditt tema? Finns det n\u00e5got i koden jag anv\u00e4nde ovan som jag skulle g\u00f6ra annorlunda? Fr\u00e5gor, kommentarer, f\u00f6rslag och kritik \u00e4r v\u00e4lkomna, s\u00e5 h\u00f6r g\u00e4rna av dig i kommentarerna.<\/p>\n
));
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘Sidfot’,
‘before_widget’ => ‘<\/p>\n
‘after_widget’ => ‘<\/p>\n
‘before_title’ => ‘<\/p>\n
‘after_title’ => ‘<\/span><\/h3>\n
‘,
));
?><\/p>\n
Nu g\u00e5r vi till sidebar.php och ers\u00e4tter den nuvarande dynamiska sidof\u00e4ltsvillkorliga taggen med denna:<\/p>\n
Med detta:<\/p>\n
Nu ska vi g\u00e5 in i v\u00e5r footer.php-fil och linda in sidfotselementen i sina egna villkorliga sidof\u00e4ltstaggar. Precis innan det f\u00f6rsta “sidof\u00e4ltselementet” div, l\u00e4gg till f\u00f6ljande.<\/p>\n
Strax efter den sista avslutande div “footer-item” (och ovanf\u00f6r den “clear” div vi lade till tidigare) l\u00e4gger vi till f\u00f6ljande:<\/p>\n
Ok, nu b\u00f6r sidof\u00e4ltets sidfot ha en widget. L\u00e5t oss prova det genom att l\u00e4gga till n\u00e5gra widgets i sidfoten. Jag l\u00e4gger till en Blogroll-widget, en Senaste kommentarer-widget och en textwidget. S\u00e5 h\u00e4r ska det se ut:<\/p>\n
<\/p>\n