Sidebar oder Footer-Widget in Wordpress erstellen

wp_logoMöchte man seine Wordpress-Webseite neu gestalten und eine zweite Sidebar hinzufügen oder sogar die Widget-Funktionen im Top-Menü verwenden, müssen Änderungen im Theme vorgenommen werden. Eine Sidebar oder ein Footer-Menü erstellen geht mit ein paar einfachen Schritten. Dazu werden die Befehle register_sidebar und dynamic_sidebar benutzt. In dieser Anleitung werden alle einzelnen Schritte beschrieben.

 

Wenn mehr als nur eine Sidebar verwendet wird, müssen alle Sidebars mit einer eindeutigen ID versehen werden, Es können Namen oder fortlaufende Nummern verwendet werden. Unterstrich und Bindestrich sind erlaubt, Leerzeichen dürfen nicht benutzt werden. Zur besseren Übersicht, sollten die Sidebars einen eindeutigen Namen haben. Hier im Beispiel “Left Sidebar”.

 

Als erstes wird eine neue PHP-Datei erstellt:

Die Datei beginnt mit dem Namen sidebar, gefolgt von der eindeutigen Identifizierung.

 

sidebar-left.php

<?php 
if ( is_active_sidebar( 'left-sidebar' ) ) : ?>
    <div id="left-sidebar" class="widget-area">
            <ul class="sidebar">
<?php dynamic_sidebar( 'left-sidebar' ); ?>
            </ul>
        </div>
<?php endif; ?>

 

  • “is_active_sidebar” bewirkt, dass die Sidebar nicht erscheint, wenn keine Widgets für die Sidebar ausgewählt wurden.

 

  • Hier sind einige Klassen und ID angegeben, um die Sidebar optimal in der CSS-Datei definieren zu können.

 

  • Mit “dynamic_sidebar('left-sidebar')” wird die Sidebar aufgerufen.

 

 

Die Sidebar muss in der functions.php mit dem gleichen Namen registriert werden.

 

functions.php

  register_sidebar( array(    
    'id'          => 'left-sidebar',
    'name'        => __( 'Left Sidebar', $text_domain ),
    'description' => __( 'This is the left sidebar.', $text_domain ),

    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>',

) );

 

  • 'id': Die eindeutige ID der Sidebar muss angegeben werden.
  • 'name': Der Name erscheint im Benutzermenü Widgets von Wordpress.
  • 'description': Eine Beschreibung für die Sidebar im Benutzermenü.
  • 'before_widget': HTML vor jedem Widget. Im Beispiel ist eine Klasse(class) und eine Liste(li) definiert.
  • 'after_widget': HTML nach jedem Widget.
  • 'before_title': HTML vor jedem Widget-Titel. Im Beispiel ist die Schriftgröße “h2” und die Klasse “widgettitle” definiert.
  • 'after_title': HTML nach jedem Widget-Titel.

 

Die Angaben sind optional, es ist aber zu empfehlen, diese zu benutzen, um eine optimale Gestaltung in der CSS-Datei zu ermöglichen.

 

2 Sidebars in der functions.php

function firsttec_widgets_init() {
register_sidebar( array(
    'id'          => 'left-sidebar',
    'name'        => __( 'Left Sidebar', $text_domain ),
    'description' => __( 'This is the left sidebar.', $text_domain ),

    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>',

) );
register_sidebar( array(
    'id'          => 'right-sidebar',
    'name'        => __( 'Right Sidebar', $text_domain ),
    'description' => __( 'This is the right sidebar.', $text_domain ),

    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>',

) );

}
add_action( 'widgets_init', 'firsttec_widgets_init' );

Die Registrierung wird in einer Funktion zusammengefasst und mit "add_action" an Wordpress geschickt.

 

 

Die Sidebar ist jetzt bereits im Admin unter Widgets ersichtlich und kann bestückt werden.

 

left-widget

 

 

Jetzt kann die Sidebar im Theme positioniert werden.

Mit dem Befehl get_sidebar('left') wird die Sidebar an der gewünschten Stelle in den einzelnen PHP-Dateien(index.php, page.php, single.php etc.) aufgerufen.

 

Beispiel:

<?php

get_header();
get_sidebar( 'left' ); ?>

<div id="container">
.....
</div>
<?php get_sidebar(); // für eine bereits vorhandene sidebar.php.
get_footer(); ?>

 

style.css

In diesem Beispiel sind genügend Definitionen vorhanden um die Sidebar optimal in der CSS-Datei gestalten zu können.

 

 

Weitere Themen:

Sidebar nur für bestimmte Seiten

Theme selbst erstellen

Child-Theme erstellen

Navigationsmenü einbauen

Formatvorlagen

Kommentare   

0 #11 Manni 2015-03-08 14:39
Wie man die Sidebar setzt ist oben beschrieben, mit "get_sidebar()".
Die genaue Position ist je nach Theme unterschiedlich . Meist gibt es eine "footer.php", setze dort die Funktion "get-sidebar()" und Du siehst wo die Sidebar auf Deiner Seite erscheint. Danach kannst Du das Design per CSS anpassen.
0 #10 modewunsch.de 2015-03-08 09:45
kannst du vllt. noch beschreiben wie man die sidebar genau platziert. ich will nämlich einen footer bereich und versteh nicht genau wo ich das einstelle, dass die unten auf meiner aeite erscheint
+1 #9 Wooky 2012-10-28 16:14
Ah na klar, danke Dir!!
Also es passt nun alles, ich werde nur am Design ncoh etwas rumspielen...
Vielen lieben Dank!!!
+2 #8 Manni 2012-10-28 15:14
Hallo Wooky,

das Design für die Sidebar wird in der Regel in der style.css konfiguriert.
Grundkenntnisse in CSS sollten vorhanden sein.
Beispiel:
#left-sidebar {
width:200px;
}
0 #7 Wooky 2012-10-28 10:41
Hi,
Das Tutorial ist super, vielen Dank!
Eine ganz kleine Frage habe ich allerdings noch:
Habe die Sidebar links eingebunden, hat alles ohne Probleem geklappt, allerdings geht die Breite der Sidebar nun über die gesamte Pagebreite, und schiebt somit den content in der Mitte nach unten.
Wie und wo kann ich die Breite der Sidebar auf einen begrenzten Wert (z.B. 200px oder sowas) festlegen?!

Wenn ich diese Kleinigkeit noch hinbekomme passt alles perfekt :roll:

Vielen Dank schonmal!
Grüße
0 #6 Manni 2012-10-24 01:03
Hallo Peter,

solche Arbeiten können über das Kontakt-Formula r in Auftrag gegeben werden.
0 #5 Peter 2012-10-23 02:04
hallo deine Anleitung ist sehr gut DICKEN DANK, habe aber leider ein Problem ich benutze Shuttershot als theme. rechte Sidebar ist da, footer auch ganz unten (kleiner streifen schwarz) die rechte Sidebar ist schön in das Theme integriert wollte das unten auch haben wen es geht drei spaltig, also links unten mitte unten und rechs unten, nur wen es geht :) bekomme es leider nicht hin. also sidebar hab ich schon dank dir hinbekommen. aber leider nicht da wo sie sein sollte. ich glaube es liegt an der css datei kenne mich da leider nicht aus. kannst du dir das Theme mal anschauen. Danke schonmal
0 #4 Manni 2012-03-14 20:05
Mit dem Befehl "get_sidebar()" wird eine Funktion aufgerufen, die die Datei "sidebar.php" einbindet.

Durch den Zusatz 'left' wird dann die "sidebar-left.p hp aufgerufen.
Bei der Funktion "get_sidebar('f ooter')", würde die Datei "sidebar-footer .php" eingebunden.
0 #3 Christian 2012-03-14 13:33
Kann es sein, dass der Funktionsaufruf
get_sidebar( 'left' );
nicht funktioniert, weil überall im Beispiel der Name 'sidebar-left' benutzt wird?
0 #2 Manni 2012-03-10 11:28
Der Code "get_sidebar('l eft')" muss genau an die Position, wo die Sidebar erscheinen soll.