Legg til en widgetert bunntekst til ditt WordPress-tema

Inspirasjonen til denne opplæringen kommer fra a tweet jeg fikk med tilbakemeldinger for den snart som skal slippes RS12 tema.


zakmorris twitter respons

Selv om den widgetiserte bunnteksten ikke til slutt gjorde det i utgivelsen av RS12-temaet, bestemte jeg meg for å skrive denne opplæringen for å vise folk hvordan de nøyaktig kunne legge til en widgetert bunntekst i temaet ditt. I denne guiden lærer du:

  • HTML- og CSS-koden som er nødvendig for å produsere den widgetiserte bunnteksten
  • Slik legger du til vanlige WordPress-maletiketter som plassholdere
  • Slik widgeter du bunnteksten og plasser widgets inni den

Det kommer til å være mye kode i dette innlegget, så hvis du er opptatt av det, kan du lese videre …

Jeg bruker Grønne stråler WordPress-tema som mitt eksempel i denne opplæringen. For øyeblikket har bunnteksten bare en standard “copyright” -melding og studiepoeng.

HTML

Det første trinnet er å legge til HTML-markeringen. La oss si at vi kommer til å ha tre forskjellige seksjoner i den widgetiserte bunnteksten med lister over siste innlegg, månedlige arkiver og daglige arkiver. Vi plasserer denne HTML-koden over den gjeldende “copyright” -linjen.

Siste innlegg

Månedlig arkiv

Daglig arkiv

I utgangspunktet setter denne koden hver “widget” i en div. Inne i hver widget er en overskrift og en uordnet liste med lenker. Ja, jeg vet at koblingene ikke kommer noe sted. Vi erstatter dette senere med WordPress-maletiketter. Dette er hva vi har så langt:

Green Rays Footer 1

CSS

Som du ser ser dette ikke så bra ut uten CSS-styling. Legg til følgende kode i stilarket.

.bunntekst-vare {
flyte: venstre;
bredde: 33%;
polstring-bunn: 10px;
}
.bunntekst ul {
polstring-venstre: 15px;
}

Hva denne koden gjør er å flytte hver bunntekst til venstre, noe som i utgangspunktet betyr at de kan være side om side. Bredden er satt til 33%, noe som gir nok plass til tre bunntekstartikler i en enkelt rad. Det er også lagt til litt polstring under hver bunntekstvare. Det andre stykket er bare å polstere listene 15 piksler til venstre.

Nå kan du se HTML og CSS begynner å komme sammen. Dette er hva du burde ha så langt:

Green Rays Footer 2

WordPress-kode

For øyeblikket har vi en haug med tomme HTML-koblinger, uten egentlig WordPress-kode. La oss erstatte listene under Nylige innlegg, Månedlig arkiv og Daglig arkiv med WordPress malekvivalenter. Erstatt hva du har for øyeblikket med følgende:

Siste innlegg

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

Månedlig arkiv

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

Daglig arkiv

    <?php wp_get_archives (‘type = daglig&grense = 4’ ); ?>

Parametrene skal være ganske selvforklarende, men hvis du ikke er sikker på noen av dem, kan du prøve å slå opp wp_get_archives i WordPress Template Tag Lookup Tool. Husk at jeg bare bruker wp_get_archives () maletaggene som plassholder. Vi vil bytte ut disse med andre WordPress-moduler senere, etter at vi har widgetert bunnteksten.

Widgetize Det

For denne delen av opplæringen får jeg låne deler fra min forrige widgetiserende temaer opplæringen.

Det første trinnet er å registrere sidelinjene. For å gjøre dette, bytter du bare ut gjeldende innhold i filen funksjoner.php med følgende:

<?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’ => ‘Bunntekst’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

Nå går vi inn i sidefeltet.php og erstatter den nåværende dynamiske sidefeltets betingede tagg med denne:

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

Med dette:

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

Nå går vi inn på footer.php-filen vår og pakker bunntekstartiklene i den respektive sidebarens betingede taggen. Rett før den første divisjonen “sidefelt-element” legger du til følgende.

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

Rett etter den avsluttende “footer-item” div (og over den “clear” div som vi la til tidligere) legger vi til følgende:

<?php endif; ?>

OK, nå skal sidelinjen og bunnteksten være widgetert. La oss teste det ved å legge til noen små widgeter i bunnteksten. Jeg legger til en widget for Blogroll, widgeten for nylige kommentarer og en tekstwidget. Slik skal det se ut:

Green Rays Footer 3

Konklusjon

Det er det grunnleggende å legge til en widgetert bunntekst til temaet ditt. Det kan være lurt å legge til separate stylingsregler for andre typer widgets, for eksempel kalenderen eller søkefeltet. Dette vil sannsynligvis ikke fungere med alle temaer, for eksempel RS12-temaet, for det hadde en ikke-utvidbar bunntekst.

Hvis noen vil ha det oppdaterte Green Rays-temaet av en tilfeldighet, kan du laste det ned her. På denne måten kan du se hvor nøyaktig jeg la til koden. Du kan sammenligne det med originalt tema også.

Håper du likte opplæringen. Vil du legge til en widgetert bunntekst til temaet ditt? Er det noe i koden jeg brukte ovenfor du ville gjort annerledes? Spørsmål, kommentarer, forslag og kritikk er alle velkomne, så ta gjerne av i kommentarene.

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