Sep
30
2008

WordPress Tutorial: Footer Design mit Widgets

No Gravatar

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

Egal für welche Lösung Ihr Euch nun entschieden habt, wir brauchen jetzt noch ein wenig Layout um die Widgets gut aussehen zu lassen. Dabei ist Eurer Kreativität natürlich keine Grenzen gesetzt, hier mein CSS Code mit dem Ihr eine Basis für Euer Layout habt.
/******************************************
*   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;
}
Das war es dann auch schon mit diesem kleinen Tutorial. Ich hoffe, dass es für alle verständlich genug ist und Euch hilft Euren Blog mit dem eigenen coolen Footer aufzupeppen.
Es wäre schön, wenn Ihr Eure neuen Footer hier vorstellt. Wenn genügend zusammenkommen wäre es mir sogar einen eigenen Post wert.
Auf gehts, verpasst Eurem Blog einen neuen Footer!
Rock on…

WordPress Tutorial: Footer Design mit Widgets


Dienstag, September 30th, 2008, 12:22