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