Nachdem ich heute letzte Woche gezeigt habe, wie man ein Theme um ein eigenes Menü erweitern kann, möchte ich euch heute zeigen, wie man eine eigene Sidebar definieren kann. Sollte also das Theme das ihr einsetzt keine Sidebar haben, oder vielleicht eine zusätzliche Sidebar im Header oder Footer fehlen, dann könnt ihr hoffentlich nach der Lektüre dieses Artikels selbst eine definieren.

Footer von TwentyFifteen um Sidebar erweitern

Wenn man von einer Sidebar spricht, denkt man oft einen Bereich „an der Seite“. Aber eine Sidebar ist technisch gesehen nur ein Bereich, den man mit Widgets füllen kann. Daher wird er auch oft als Widgetbereich bezeichnet. Auch für diesen Artikel soll und wieder das TwentyFifteen Theme als Beispiel dienen. Dieses hat ja einen sehr statischen Footer. Aber statt ihn wie im Beitrag von letzter Woche um ein eigenes Menü zu erweitern, wollen wir heute einen Widgetbereich definieren. Auch hierzu legen wir wieder ein Child-Theme an.

1. Den Widgetbereich registrieren

Zuerst einmal muss der neue Widgetbereich definiert werden. Hierzu verwenden wir die Funktion register_sidebar(), die im CODEX ausführlich beschrieben ist. Hier zu Beispiel mit den wichtigsten Argumenten:

function twentyfifteen_footer_sidebar_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Footer Sidebar', 'twentyfifteen-footer-sidebar' ),
		'id'            => 'footer-sidebar-1',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'twentyfifteen_footer_sidebar_widgets_init', 11 );

Neben dem Namen sollte jede Sidebar eine eindeutige ID bekommen. Diese wird benötigt, um sie später im Theme auszugeben. Die anderen vier Argumenten definieren den HTML-Code, der jeweils vor bzw. dem Inhalt der Sidebar-Widgets bzw. deren Titeln ausgegeben wird. Hier solltest ihr am besten die Werte des Parent-Themes verwenden. Welche das sind, könnt ihr meistens in der functions.php Datei des Parent-Themes rausfinden.

Wurde die neue Sidebar korrekt registriert, sollte sie im Backend verfügbar sein. Ihr könnt sie dann wie gewohnt mit Widgets befüllen:

2. Den Widgetbereich im Theme ausgeben

Zuerst einmal müssen wir wieder die footer.php Datei aus dem Parent-Theme kopieren. Hier verwenden wir dann die Funktion dynamic_sidebar() um die neu registrierte Sidebar auszugeben. Hierbei verwenden wir die zuvor angegebene ID der neuen Sidebar:

<footer id="colophon" class="site-footer" role="contentinfo">
	<div class="site-info">
		<?php
			/**
			 * Fires before the Twenty Fifteen footer text for footer customization.
			 *
			 * @since Twenty Fifteen 1.0
			 */
			do_action( 'twentyfifteen_credits' );
		?>
		<?php if ( is_active_sidebar( 'footer-sidebar-1' ) ) : ?>
			<div id="footer-sidebar" class="widget-area" role="complementary">
				<?php dynamic_sidebar( 'footer-sidebar-1' ); ?>
			</div><!-- #primary-sidebar -->
		<?php endif; ?>
	</div><!-- .site-info -->
</footer><!-- .site-footer -->

Wir könnten nun diesen neue Widgetbereich einfach nutzen, um hiermit ein Footer-Menü zu erstellen. Das würde dann genauso aussehen wie das Menü aus dem vorherigen Beitrag:

Da der Footer des TwentyFifteen Themes genügend Platz für zwei Sidebars bietet, habe können wir einfach noch eine weitere Sidebar definieren nach der Anleitung erstellen und ausgeben. Das Ergebnis könnte dann in etwa wie folgt aussehen:

Fazit

Ich hoffe ich konnte euch auch mit dem heutigen Beitrag wieder zeigen, wie einfach es ist ein Theme um eine fehlende Eigenschaft zu erweitern. Solltet ihr also auch in eurem Theme eine Sidebar bzw. einen Widgetbereich vermissen, dann es versucht doch einfach mal mit dieser Anleitung.

Selbstverständlich habe ich auch das Ergebnis dieses Artikels wieder in einem GIST bereitgestellt. Es enthält die Variante mit den zwei Widgetbereichen inkl. der notwendigen CSS-Optimierung für kleine Auflösungen.

Auch nächste Woche werde ich wieder ein Theme rund um Themes ausgreifen. Was es genau sein wird, kann ich aber noch nicht sagen. Mir schwirren aber schon ein paar Ideen im Kopf herum. Ihr könnt also gespannt sein 🙂