Voeg een Widgetized-voettekst toe aan uw WordPress-thema

De inspiratie voor deze tutorial komt van een tweet die ik heb ontvangen met feedback voor de binnenkort uit te brengen RS12-thema.


zakmorris twitter antwoord

Hoewel de widgeted-footer het uiteindelijk niet heeft gehaald in de release van het RS12-thema, besloot ik deze tutorial te schrijven om mensen te laten zien hoe ze precies een widgetized-footer in je thema kunnen toevoegen. In deze gids leert u:

  • De HTML- en CSS-code die nodig is om de widgeted footer te produceren
  • Hoe veelgebruikte WordPress-sjabloontags als tijdelijke aanduidingen toe te voegen
  • Hoe de voettekst te widgetiseren en widgets erin te plaatsen

Er zal veel code in dit bericht staan, dus als je er zin in hebt, lees dan verder …

Ik gebruik de Groene stralen WordPress-thema als mijn voorbeeld in deze tutorial. Op dit moment heeft de voettekst alleen een standaard “copyright” -bericht en credits.

De HTML

De eerste stap is het toevoegen van de HTML-opmaak. Laten we zeggen dat we drie verschillende secties hebben in de widgetvoet met lijsten met meest recente berichten, maandelijkse archieven en dagelijkse archieven. We plaatsen deze HTML-code boven de huidige regel ‘copyright’.

recente berichten

Maandelijkse archieven

dagelijkse archieven

In principe plaatst deze code elke “widget” in een div. Binnen elke widget is een kop en een ongeordende lijst met links. Ja, ik weet dat de links nergens heen gaan. We zullen dit later vervangen door WordPress-sjabloontags. Dit is wat we tot nu toe hebben:

Voettekst Groene Stralen 1

De CSS

Zoals je kunt zien, ziet dit er niet zo goed uit zonder enige CSS-styling. Voeg de volgende code toe aan je stylesheet.

.footer-item {
drijven: links;
breedte: 33%;
opvulling-onderkant: 10px;
}
.footer-item ul {
padding-left: 15px;
}

Wat deze code doet, is elk voettekstitem naar links zweven, wat in feite betekent dat ze naast elkaar kunnen staan. De breedte is ingesteld op 33%, wat voldoende ruimte biedt voor drie voettekstitems op één rij. Er is ook een beetje opvulling toegevoegd onder elk voettekstitem. Het tweede stuk vult de lijsten slechts 15 pixels naar links op.

Nu kun je zien dat de HTML en CSS beginnen samen te komen. Dit is wat je tot nu toe zou moeten hebben:

Voettekst Groene Stralen 2

WordPress-code

Op dit moment hebben we een heleboel lege HTML-links, zonder echte WordPress-code. Laten we de lijsten onder Recente berichten, Maandelijkse archieven en Dagelijkse archieven vervangen door de equivalenten van de WordPress-sjabloontag. Vervang wat je momenteel hebt door het volgende:

recente berichten

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

Maandelijkse archieven

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

dagelijkse archieven

    <?php wp_get_archives (‘type = dagelijks&limiet = 4 ‘); ?>

De parameters moeten vrij duidelijk zijn, maar als je er niet zeker van bent, zoek dan naar wp_get_archives in de WordPress Template Tag Lookup Tool. Onthoud dat ik alleen de wp_get_archives () sjabloontags gebruik als tijdelijke aanduiding. We schakelen deze later uit met andere WordPress-widgets, nadat we de voettekst hebben widgetized.

Widgetize het

Voor dit gedeelte van de tutorial leen ik delen van mijn vorige widgetizing thema’s tutorial.

De eerste stap is het registreren van de ‘zijbalken’. Om dit te doen, vervangt u eenvoudig de huidige inhoud van het bestand functions.php door het volgende:

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

‘,
‘after_title’ => ‘

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

‘,
‘after_title’ => ‘

‘,
));
?>

Nu gaan we naar sidebar.php en vervangen we de huidige dynamische voorwaardelijke tag in de zijbalk door deze:

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

Hiermee:

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

Nu gaan we naar ons footer.php-bestand en wikkelen de footer-items in zijn eigen respectieve voorwaardelijke tag in de zijbalk. Voeg vlak voor de eerste divisie “sidebar-item” het volgende toe.

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

Direct na de laatste afsluitende “footer-item” div (en boven de “clear” div die we eerder hebben toegevoegd), voegen we het volgende toe:

<?php endif; ?>

Oké, nu zou onze zijbalk en voettekst moeten worden widgetized. Laten we het uittesten door een paar widgets in de voettekst toe te voegen. Ik voeg een Blogroll-widget, een widget voor recente opmerkingen en een tekstwidget toe. Zo zou het eruit moeten zien:

Voettekst Groene Stralen 3

Conclusie

Dat is de basis van het toevoegen van een widgeted footer aan je thema. Mogelijk wilt u afzonderlijke stijlregels toevoegen voor andere typen widgets, zoals de kalender of het zoekvak. Dit werkt waarschijnlijk niet met elk thema, zoals het RS12-thema, omdat het een niet-uitbreidbare voettekst had.

Als iemand het bijgewerkte Green Rays-thema toevallig wil, kun je het downloaden hier. Op deze manier kun je zien waar ik de code precies heb toegevoegd. Je kunt het vergelijken met de origineel thema ook.

Ik hoop dat je de tutorial leuk vond. Voegt u een widgetized voettekst toe aan uw thema? Is er iets in de code dat ik hierboven heb gebruikt, zou je het anders doen? Vragen, opmerkingen, suggesties en kritiek zijn allemaal welkom, dus voel je vrij om te klinken in de opmerkingen.

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