Hoe maak je een Multi-Column widgetized Footer voor Wordpress aanmaken

Hoe maak je een Multi-Column widgetized Footer voor Wordpress aanmaken


Terwijl WordPress ontworpen widgets - kleine programma's die u kunt slepen en neerzetten in plaats van de back-end - voor gebruik in blog sidebars, enkele thema's ook widgets gebruiken in hun voetteksten. Deze thema's plaatsen vaak drie of vier "widgetized" secties in de voettekst, die widgets zoals "Populaire Posten" en kan vasthouden "Recente reacties." U moet de HTML-code van de voettekst, de PHP in de "functions.php" bestand en de CSS (Cascading Style Sheet) code van de "style.css" bestand in uw thema om dezelfde functionaliteit in uw eigen thema's maken .

instructies

1 Navigeer naar "Appearance" van de zijbalk van uw WordPress dashboard. Dit is de backend u inlogt op de "wp-admin" directory van uw website. Klik op de "Editor" link die wordt weergegeven in de "Appearance" submenu.

2 Zoek de "footer.php" bestand vermeld onder "Templates" op het scherm "Thema's Edit" en klik op de link. Maak drie DIVs in uw footer en geef elk een unieke ID naam:

<Div id = "footer">

<Div id = "left">

</ Div>

<Div id = "center">

</ Div>

<Div id = "right">

</ Div>

</ Div>

3 Voeg deze code in elk van de drie voettekst DIV:

<? Php if (function_exists ( 'dynamic_sidebar') || dynamic_sidebar ( 'Sidebar')!):?>

<? Php endif; ?>

Verander de naam "zijbalk" in "dynamic_sidebar ()" functie voor elke van de drie DIV, waardoor ze allemaal uniek. Namen als 'Left Footer "werken goed. Klik op de blauwe "Update File" knop om uw werk op te slaan.

4 Ga naar de "functions.php" bestand in het scherm "Thema's bewerken". Voeg deze code boven de afsluitende PHP begrenzer tag ">? ':

if (function_exists ( 'register_sidebar'))

register_sidebar (array (

'name' => 'Left Footer',

'Before_widget' => '& lt; div id = "% 1 $ s" class = "widget% 2 $ s'> ',

'After_widget' => '& lt; / div>',

'Before_title' => '& lt; h3>',

'After_title' => '& lt; / h3>',

));

Verander de "naam" om de naam van uw eerste voettekst widget gebied aan te passen. Voeg deze code twee keer, zodat elke widget gebied heeft deze bijbehorende code. Elke keer dat u de code toevoegen, de "naam" een van uw footer widget gebieden aan te passen. Sla het bestand op.

5 Laad je "style.css" bestand in het scherm "Edit Thema's" en voeg deze code aan de bodem:

footer div {float: left; width: 33%; }

Deze code stemt elke widgetized sectie horizontaal over uw voettekst. Voeg eventueel andere stijlen als dat nodig is.

Hints

  • Een goed begrip van de CSS "box model" is zeer nuttig voor dit type voettekst lay-out. Als je niet het model weten, moet je het studeren en te leren over de effecten van de marges en opvulling in het bijzonder.
  • Back-up van uw thema voor het bewerken en re-upload het thema via FTP als je niet terug in WordPress kan te wijten aan een PHP fout.