WordPress Tutorial: Footer Design mit Widgets

Ein Artikel von Stefan    13 Kommentare

Diese ganzen schicken Footer der anderen Blogs hatten es mir unheimlich angetan. Ich wollte auch so einen hübschen Footer haben. Also habe ich gegoogelt und meine Bookmarks durchwühlt. Das Ergebnis war ernüchternd. Entweder ist es so einfach, dass es jeder kann und somit keiner Erklärung bedarf, oder es gibt da wirklich noch keine passende deutsche Anleitung für.

Also habe ich mein neues Footer Design erst einmal nach hinten verschoben und schreibe zuerst dieses Tutorial.

Vorbereitung

Diese Dinge werden benötigt:

• PHP Editor
• CSS Editor
• Schreibrechte auf Eurem WordPress Theme
• ein wenig Geduld
• Die Dateien footer.php, functions.php und die style.css aus Eurem Blog-Theme

Ich persönlich arbeite immer gerne mit 2 Dateien. Ich mache mir immer eine Kopie von der funktionierenden Datei und arbeite nur an der Kopie. So kann ich das Blog immer wieder schnell in den Originalzustand zurück versetzen.

1.) Die neuen Widgets anlegen in der functions.php

In der functions.php findet Ihr folgenden Code:

//Widgetized sidebar

if ( function_exists(‘register_sidebar’) )

register_sidebars((2),array(

‘before_widget’ => ‘<div class=”sidebar_widget”>’,

‘after_widget’ => ‘</div>’,

‘before_title’ => ‘<h3>’,

‘after_title’ => ‘</h3>’,    ));

Nach diesem Code legt Ihr mit dem nachfolgenden Code neue Widgets für Euren Footer an.

register_sidebar(array(

‘name’ => ‘footer_o_l’));

register_sidebar(array(

‘name’ => ‘footer_o_m’));

register_sidebar(array(

‘name’ => ‘footer_o_r’));

register_sidebar(array(

‘name’ => ‘footer_u_l’));

register_sidebar(array(

‘name’ => ‘footer_u_m’));

register_sidebar(array(

‘name’ => ‘footer_u_r’));

In diesem Beispiel habe ich diese 6 neue Widgets angelegt. Natürlich könnt Ihr das nach Eurem Bedarf anpassen, falls Ihr z.B. 12 oder mehr braucht.

• footer_o_l (für das Widget links oben im Footer)
• footer_o_m (für das mittlere Widget im oberen Footerteil)
• footer_o_r (ja, das ist für das rechte Widget)
• footer_u_l (unten links natürlich)
• footer_u_m (ist sicherlich klar jetzt)
• footer_u_r (unten rechts natürlich)

Die fertige Datei sollte dann ungefähr so aussehen:

2.) Die Widgets in den Footer einbauen

Die gerade frisch angelegten neuen Widgets sollen ja nun auch im Footer auftauchen, also betten wir sie schnell mal an der passenden Stelle ein. Dazu suchen wir in der footer.php die Stelle wo das Layout des Footers beginnt:

<div id=”footer”>

2.1) Widgets innerhalb des DIV Blocks

Nun haben wir zwei Möglichkeiten die Widgets einzufügen. Die erste Möglichkeit wäre den Code innerhalb von <div id=”footer”> und </div> zu platzieren.

<div class=”footer”>

Hier steht meistens der HTML Code mit den Links zum Autor des Themes

</div>

Das Ergebnis würde dann so aussehen:

<div class=”footer”>

<div class=”widget”><div class=”o_l”>

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

<?php endif; ?>

</div></div>

<div class=”widget”><div class=”o_m”>

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

<?php endif; ?>

</div></div>

<div class=”widget”><div class=”o_r”>

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

<?php endif; ?>

</div></div>

<div class=”widget”><div class=”u_l”>

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

<?php endif; ?>

</div></div>

<div class=”widget”><div class=”u_m”>

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

<?php endif; ?>

</div></div>

<div class=”widget”><div class=”u_r”>

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

<?php endif; ?>

</div></div>

</div>

2.2) Widgets vor dem DIV Block

Da die meisten Blogger aber nicht das Standard Theme installiert haben, halte ich die zweite Möglichkeit für besser. In diesem Fall platzieren wir den Code für die Widgets vor dem “div Block” und kopieren den kompletten DIV Block des Themes in die Zwischenablage. Am besten fügen wir den zwischengespeicherten Code in eine Text Datei und sichern sie kurzfristig. Der Vorteil dieser Lösung ist der, dass wir später einen schönen “aufgeräumten” Footer haben, und der Autor des Themes trotzdem nicht auf seinen Backlink verzichten muss. Den zwischengespeicherten Code fügen wir nämlich später einfach in ein Widget als HTML Code ein. Hier zur Verdeutlichung:

Ursprungscode des WordPress Default Themes:

<div class=”footer”>

Hier steht meistens der HTML Code mit den Links zum Autor des Themes

</div>

So wäre dann das Ergebnis:

<div id=”subfooter”>

<div class=”widget”><div class=”o_l”>

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

<?php endif; ?>

</div></div>

<div class=”widget”><div class=”o_m”>

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

<?php endif; ?>

</div></div>

<div class=”widget”><div class=”o_r”>

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

<?php endif; ?>

</div></div>

<div class=”widget”><div class=”u_l”>

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

<?php endif; ?>

</div></div>

<div class=”widget”><div class=”u_m”>

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

<?php endif; ?>

</div></div>

<div class=”widget”><div class=”u_r”>

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

<?php endif; ?>

</div></div>

</div>

</body>

</html>

3.) Das Footer Design durch CSS

/******************************************

*   Subfooter

******************************************/

#subfooter {

width:1000px;

margin:0 auto;

height:600px;

background-color:#d5d6d7;

clear:both;

}

#subfooter li {

list-style-type: none;

list-style-image: none;

}

#subfooter li ul {

padding-left:0px;

font-size:12px;

}

#subfooter a {

}

#subfooter a:hover {

background-color:#1a6198;

color:#FFFFFF;

}

#subfooter .widget {

width:320px;

height:300px;

float:left;

padding-left: 10px;

}

#subfooter .widget .o_l {

padding:10px;

}

#subfooter .widget .o_m {

padding:10px;

}

#subfooter .widget .o_r {

padding:10px;

}

#subfooter .widget .u_l {

padding:10px;

}

#subfooter .widget .u_m {

padding:10px;

}

#subfooter .widget .u_r {

padding:10px;

}

WordPress Tutorial: Footer Design mit Widgets