Widgetize mit WordPress tema – Hvordan?

Hvis du har et WordPress tema der ikke understøtter widgets, så kan du selv “widgetize” den med denne enkle guide. Jeg har forklaret med billeder og tekst, så det skulle ikke være særlig svært. Smid endelig en kommentar hvis du er i tvivl om noget, eller har et spørgsmål til mit indlæg – så hjælpes vi ad.

Det første du skal overveje når du vil “widgetize” dit WordPress tema er “hvor vil jeg have mine widgets?”
Det er nemt nok bare at smide en kode ind i dit WordPress tema, og så forvente at det hele bare kører fra første øjeblik du smider en widget over i området – nul og niks! 

Derfor, overvej grundigt hvor du vil have dine widgets, og sørg for at der er plads til dem.
Du kan altid rette dem til med din style.css fil bagefter.

Hvilke filer skal jeg bruge for at widgetize mit WordPress tema?

Her kommer det så an på hvor du vil have dine widgets hen.
Vil du have dem i din header, skal du, logisk nok, bruge header.php. Sidebaren, så er det sidebar.php osv.
Den anden fil der er vigtig for at du kan få widgets i dit WordPress tema er functions.php

Findes functions.php ikke, skal du selv oprette den, og uploade den til din tema-mappe.
Du opretter bare en ganske almindelig php-fil, og tilføjer det indhold jeg viser dig om lidt, ikke andet.

Nu har jeg fundet functions.php og sidebar.php – hvad nu?

Når du har fundet ud af hvor du vil have dine widgets, skal vi nu til at kode lidt.
Du kan jo bare nøjes med copy/paste, jeg skal nok levere den kode du skal kopiere.

Vi starter med din functions.php fil – i den skal du indsætte følgende kode:

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Widgetized Area',
		'id'   => 'widgetized-area',
		'description'   => 'This is a widgetized area.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

HUSK at tilføje <?php før “if (function), og ?> efter det sidste “}”, hvis du ikke havde en functions.php fil i forvejen. Hvis du har en functions.php fil i forvejen, skal du indsætte denne kode mellem de to oventående php-tags. Lad mig nu dele koden lidt op, og forklare den for dig.

name – Navnet på dit widget-område, som vises i dit Admin-panel
id – Brug et unikt slug her, så du ikke mikser det op med evt. flere widgets områder
description – En beskrivelse af dit widget-område
before_widget – Det CSS-tag der skal “dække din widget” ind
after_widget – Afslutningen på dit CSS div-tag (typisk </div>)
before_title – Et CSS-tag til din titel på din widget
after_title – Igen, afslutningen på det CSS-tag (typisk </div>)

Som der står forklaret overfor, så skal du udfylde de “informationer”.
Det kunne være at jeg ville have et widget-område i min header.php, så vil det være en god ide at udfylde det med info noget lignende det her:

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Header Widget',
		'id'   => 'header-widget',
		'description'   => 'Denne widget vises i headeren.',
		'before_widget' => '<div id="header-widget">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

Læg mærke til, hvor præcist jeg udfylder informationerne.
Dette er vigtigt, da det er dig selv der skal kunne kende forskel på dem når de skal bruges.
Derfor udfyld det så du selv ved hvilke widget-områder der er tale om.

Det var functions.php – Hvad skal jeg så indsætte i sidebar.php?

Sidebar.php’s kode er meget enkel, i forhold til det der skal indsættes i functions.
Du skal nu finde ud af, HVOR i din sidebar du vil have vist dine widgets – det er kun dig der ved det.
Når du har fundet ud af det, så skal du indsætte følgende stykke kode (igen imellem de to php-tags (<?php og ?>) – hvis der er FLERE php-tags, skal du oprette en ny, og indsætte dem hvor der ikke er PHP-tags i forvejen)

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header-widget')) : else : ?>

Du kan se der står “header-widget” næsten sidst i koden.
Denne kode skal du ændre til det id du har valgt til dit widget-område.

Som du kan se, er denne kode meget mere simpel.
Husk, at efter denne kode kan din “normale sidebar” komme.
Altså det indhold du havde vist i din sidebar i forvejen.
Spørg endelig hvis du støder på problemer undervejs, så skal jeg nok gøre ALT for at hjælpe dig på rette spor igen. Man kommer ingen vegne hvis ikke man spørger – og tro mig, jeg har selv spurgt MANGE gange!