rss
9

Widget Footer im WordPress Blog anlegen

Dieser Artikel ist eine Anleitung, wie man einen CSS Widget Footer in einem WordPress Blog anlegt!

Wer wissen will, wie ein aus 3 Spalten bestehender Footer in einem WordPress Theme angelegt wird, sollte weiterlesen!

Anleitung: Einrichtung eines 3 spaltigen CSS Widet fähigen Footers in einem WordPress Blog

Diesen Code in den Footer Bereich der style.css klatschen:

.footerinside {
width:295px;
padding:10px;
float:left;
margin:10px 10px 10px 0;
background:#fff;
height:250px;
list-style:square;
}
.footerinside p {
font-style:italic;
color:#555;
font-size:80%;
}
.footerinside li {
margin-left:20px;
padding:5px 0;
list-style:square;
}
.footerinsideright {
padding:10px;
float:left;
margin:10px 0 10px 0;
background:#fff;
list-style:square;
}
.footerinsideright p {
font-style:italic;
color:#555;
font-size:80%;
}
.footerinsideright li {
margin-left:20px;
padding:5px 0;
}

Anschließend die footer.php erweitern:

<div class=“footerinside“>
<?php if ( !function_exists(‚dynamic_sidebar‘) || !dynamic_sidebar(‚Footer Left‘) ) : ?>
<h3>Widget Bereich</h3>
<p>Footer Links</p>
<?php endif; ?>
</div><!– end footer left –>
<div class=“footerinside“>
<?php if ( !function_exists(‚dynamic_sidebar‘) || !dynamic_sidebar(‚Footer Center‘) ) : ?>
<h3>Best of <?php bloginfo(’name‘); ?></h3>
<p><b>The best of <?php bloginfo(’name‘); ?></b> – the most commented posts.</p>
<p>Footer Mitte</p>
<?php endif; ?>
</div><!– end footer central –>
<div class=“footerinsideright“>
<?php if ( !function_exists(‚dynamic_sidebar‘) || !dynamic_sidebar(‚Footer Right‘) ) : ?>
<h3>Widget Bereich</h3>
<p>Footer Right</p>
<?php endif; ?>
</div><!– end footer right –>

Danach muss noch die Funktion in der functions.php erweitert werden:

if ( function_exists(‚register_sidebar‘) )
register_sidebar(array(
’name‘ => ‚Footer Left‘,
‚before_widget‘ => “,
‚after_widget‘ => “,
‚before_title‘ => ‚<h3>‘,
‚after_title‘ => ‚</h3>‘,
));
if ( function_exists(‚register_sidebar‘) )
register_sidebar(array(
’name‘ => ‚Footer Center‘,
‚before_title‘ => ‚<h3>‘,
‚after_title‘ => ‚</h3>‘,
));
if ( function_exists(‚register_sidebar‘) )
register_sidebar(array(
’name‘ => ‚Footer Right‘,
‚before_title‘ => ‚<h3>‘,
‚after_title‘ => ‚</h3>‘,
));

Das war’s schon! Bei mir hat das prima funktioniert. Wie sieht es bei euch aus?

Jetzt bestellen: WordPress – Das Praxisbuch

Mehr über den Autor

Andreas ist Senior Projektmanager in einem der weltweit größten Softwareunternehmen. Nebenbei ist er freier Dozent und lehrt an Fachhochschulen die Themen "Internationales Projektmanagement" und "Softwarearchitektur". Hier im Weblog-ABC gibt Andreas regelmäßig Webmaster, Affiliate und SEO Tipps. Mehr über Andreas und Weblog-ABC.

Social Media - Den Artikel empfehlen!

Kommentare und Trackbacks (9)

Trackback URL | Kommentare RSS Feed

  1. jens sagt:

    aaaalter schwede. ich habe jetzt stunden danach gesucht, wie ich einem theme, welches GAR KEINE sidebar nutzt, genau das hinzufügen kann, was du hier gepostet hast. und was soll ich sagen?

    DAS GEEEEEHT! danke dir. ;)

  2. Sylvi sagt:

    Super Beschreibung! Die Möglichkeit Widgets im Footer-Bereich anzulegen fehlte nämlich in meinem Theme. Ich musste nur noch ein bisschen das CSS ummodeln, damit es passt. Bei mir ragten die Widgets ein Stück über den linken Rand des Contents-Bereichs hinaus. Jetzt überlege ich, mit welchen Funktionen ich den Footerbereich bestücke ;-)

  3. Jenny sagt:

    wow erstmal vielen lieben dank für dein Tut :)
    bei mir hat es auf Anhieb sofort geklappt.
    Ich habe nur das Problem mit der rechten Spalte unten!
    Im Firefox Browser habe ich rechts unten noch einen grossen Spalt und im IE Browser sieht es fast identisch aus.
    Ich möchte so gerne alle Spalten gleich gross haben und die Höhe auch :( gibt es da irgendwie eine Möglichkeit?
    Also die ganz rechte Spalte sollte genauso hoch und am rechten Rand passend sein wie die in der Mitte und der linken, wäre lieb wenn du eine Lösung für mich hättest und mir helfen könntest.
    lg Jenny

  4. Jenny sagt:

    hier nochmal der Link von meiner Seite
    http://littlemomentsphotography.de/blog/
    und was ich noch vergessen habe zu sagen, ich habe alle drei spalten zusammengelegt ohne das ich jeweils eine Lücke zwischen den Spalten habe.

  5. Andreas sagt:

    Hallo Jenny,
    bitte ändere „.footerinside { width:295px;“ auf „.footerinside { width:200px;“. Momentan sind die 3 Spalten zusammen 3*295px = 885px breit. So breit ist nur leider Dein Theme nicht eingestellt, daher wird bei der letzten Spalte der Rest von den 295px abgeschnitten. Ich weiß nicht, wie viele Pixel Dein Theme breit ist. Vielleicht geht auch ein bisschen mehr als 200px. Probiere es am besten aus.
    Gruß Andreas

  6. Per sagt:

    Hi Andreas,

    ich finde ebenfalls, dass es das beste Tutorial bisher ist, leider klappt es bei mir nicht ganz.

    Beim Einfügen des Codes in die functions.php gibt es immer

    Parse error: syntax error, unexpected T_STRING, expecting ‚)

    Line 16 laut Notepad ++ ist das hier (der ganz Block von 16-22)

    if ( function_exists(‘register_sidebar’) )
    register_sidebar(array(
    ‘name’ => ‘Footer Left’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ‘’,
    ‘after_title’ => ‘’,
    ));

    Ist sicher nur eine Kleinigkeit, wäre toll, wenn du mir hier nochmal helfen könntest.

  7. Andreas sagt:

    Hi Per,

    welches WordPress Theme nutzt Du denn?

    Gruß Andreas

  8. Mark sagt:

    hallo. habe dasselbe problem wie peter.

    Parse error: syntax error, unexpected T_STRING, expecting ‘)

    nutze das theme „drain“. muss man den code im footer.php an einer ganz bestimmten stellen einfügen?

    würde mich riesig über deine antwort freuen.

  9. Ralph sagt:

    Moin moin,

    ich finde die Idee nett, aber dieses Tut nicht gelungen, da es nichts aussagt, auf welchem Theme es aufsetzt, bzw. an welche Stellen die Snippets müssen.

    1. Bei der functions.php gibt es bei mir auch besagten Parse error

    2. Bei der footer.php verschwindet der Footer ganz. Wo soll man denn da oben stehenden Code einsetzen? En bloc glaube ich dürfte das nicht gehen. Das Tut wäre klasse, wenn es zu diesen Stolpersteinen eine Antwort geben könnte:

    Copyright – Alle Rechte vorbehalten

    < !– queries. seconds. –>

    < ?php next_posts_link('’) ?>< ?php previous_posts_link('’) ?>

    /*Load jQuery if not already loaded*/ if(typeof jQuery == ‘undefined’){ document.write(“”); var __noconflict = true; }
    var IE6UPDATE_OPTIONS = {
    icons_path: “http://static.ie6update.com/hosted/ie6update/images/”
    }