Wie kann ich Widgets im Footerbereich einrichten? Wer googelt, der findet. Da die Suche allerdings recht lange gedauert hat, stelle ich euch die Lösung zur obigen Frage hier vor. Ziel ist es Platz für 4 neue Widgets zu schaffen, wobei einer der vieren über die gesamte Breite verläuft, während die anderen drei darunter aufgeteilt sind. Das Tutorial ist in 3 Schritte aufgeteilt:
1. Schritt: footer.php:
Zwischen “content” und “footer” müsst ihr einen neuen Bereich namens “downer” erstellen, in welchen ebenfalls neue Widget-Bereiche eingefügt werden:
<div id="footer">
<div id="downer">
<div class="downer_widget1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('downer1_sidebar') ) : ?>
<p>Downer-Widget 1</p>
<?php endif; ?>
</div>
<div class="downer_widget2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('downer2_sidebar') ) : ?>
<p>Downer-Widget 2</p>
<?php endif; ?>
</div>
<div class="downer_widget3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('downer3_sidebar') ) : ?>
<p>Downer-Widget 3</p>
<?php endif; ?>
</div>
</div>
Wichtig ist hierbei die korrekte Angabe der entsprechenden Sidebar (downer_widget1-4 und downer1-4_sidebar).
2. Schritt: functions.php:
Jetzt müsst ihr die vier neuen Arrays noch registrieren, was dank Copy & Paste relativ einfach ist:
/** widgets */
if( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'downer1_sidebar',
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'downer2_sidebar',
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'downer3_sidebar',
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
Wie auch im ersten Schritt ist hier die Nomenklatur wichtig, damit das Ganze am Ende auch funktioniert.
3. Schritt: style.css:
Damit die korrekte Darstellung gewährleistet wird, müsst ihr noch die betreffenden Bereiche definieren:
#downer {
background-color: #222;
margin: 20px auto;
width: 960px;
overflow: hidden;
color:#999;
}
#downer h3 {
font-size: 14px;
font-weight: bold;
text-decoration: none;
color:#fff;
}
#downer li {
list-style: none outside none;
}
#downer ul li {
border-bottom:1px solid #333 !important;
}
#downer .widget {
margin-bottom:15px;
}
#downer .wp-post-image {
border:1px solid #444444;
box-shadow:none;
}
#downer .kjgrcGravatar {
border:none;
box-shadow:none;
}
#downer .downer_widget1 {
float: left;
padding: 15px 15px 15px 28px;
text-align: justify;
margin: 5px;
width:38%;
}
#downer .downer_widget2 {
float: left;
padding: 15px;
text-align: justify;
margin: 5px;
width:28%;
}
#downer .downer_widget3 {
float: left;
padding: 15px;
text-align: justify;
margin: 5px;
width:20%;
}
Es ist klar, dass dieses Tutorial abgeändert werden muss, wenn ihr ein anderes Theme verwendet.
