Theme Layout in WordPress automatisch anpassen, falls keine Sidebar Widgets vorhanden sind

Veröffentlicht am von / Lesezeit: 3 Minuten

In diesem Tutorial möchte ich einen kleinen Code Schnipsel vorstellen, mit dem du das Theme Layout automatisch anpassen kannst, wenn die Sidebar keine Widgets hat. Anstatt bei fehlenden Widgets weiterhin ein zweispaltiges Layout mit leerer Sidebar anzuzeigen, kann so zu einem einspaltigen Layout gewechselt werden.

WordPress Theme Layout ohne Sidebar

Viele Themes verwenden ein zweispaltiges Layout mit rechter Sidebar. Manchmal werden jedoch Widgets nicht benötigt und Nutzer möchten den Content auf der ganzen Seite – ohne Sidebar – darstellen. Dafür gibt es verschiedene technische Möglichkeiten.

Vor einigen Wochen habe ich bereits über die Implementierung einer Theme Option zum Wechseln der Sidebar Position im Customizer geschrieben. Diese Theme Einstellung kann auch genutzt werden, um ein Layout ohne Sidebar anzubieten. Der größte Nachteil davon ist, dass damit das Layout für alle Seiten des Themes konfiguriert wird.

Sehr beliebt ist deshalb das Anbieten eines Full Width Page Templates, mit dem nur bestimmte, statische Seiten für ein Layout ohne Sidebar konfiguriert werden können. Mit WordPress 4.7 kommen zudem Templates für andere Post Types in den Core, wodurch Full Width Templates auch für normale Beiträge und Custom Post Types möglich werden.

Theme Layout abhängig von vorhandenen Widgets gestalten

In diesem Beitrag möchte ich aber auf eine andere technische Lösung für ein Full Width Layout ohne Sidebar eingehen. Bei dieser Methode entscheidet das Theme selbst, ob es mit ein- oder zweispaltigen Layout angezeigt wird. Die Entscheidung wird einfach daran getroffen, ob überhaupt Widgets in der Sidebar vorhanden sind.

Dadurch wird die Benutzerfreundlichkeit des Themes erhöht. Werden beispielsweise alle Widgets entfernt, bleibt keine leere Sidebar zurück. Im Gegensatz zu den anderen Methoden müssen nicht noch die Theme Optionen oder Seiten-Templates neu konfiguriert werden, um das Layout in voller Breite zu zeigen.

Ein weiterer Vorteil ist, dass die Methode super im Einklang mit den diversen „Conditional Widgets“ Plugins steht. Diese Plugins wie zum Beispiel Jetpacks Widget Visibility Modul, Widget Logic oder Display Widgets erlauben dir die Eingabe von Bedingungen für die Anzeige von Widgets. Damit können Widgets auf bestimmten Seiten, Beiträgen, Archiven oder Kategorien gezielt angezeigt oder versteckt werden.

Falls mithilfe dieser Plugins die Widgets nur auf manchen Beiträge, Seiten oder Archiven dargestellt werden, wird auf den Seiten ohne Widgets auf ein einspaltiges Layout zurückgegriffen. Ganz ohne Optionen, Templates oder ähnlichem.

Die Idee dafür stammt übrigens nicht von mir, sondern den Theme User Experience Requirements  von WordPress.com.

Dort ist folgende Regel festgehalten:

If a layout normally has two columns or more with widgets, the layout should adjust to a single column if a user has not added widgets to the sidebar, without displaying an empty column. Reason: This gives users flexibility to have a single-column layout without needing a page template or theme option.

Im Folgenden beschreibe ich die technische Umsetzung mit Code Beispielen.

Klasse im body hinzufügen, wenn keine Widgets vorhanden sind

Die Umsetzung der Methode ist unkompliziert. Mit der Funktion is_active_sidebar() kannst du überprüfen, ob sich Widgets in der Sidebar befinden. Falls dies nicht zutrifft, kann mit dem body_class Filter eine extra Klasse no-sidebar hinzuzufügt werden. Mit dieser Klasse kannst du das Layout dann in der style.css anpassen.

/**
 * Adds custom classes to the array of body classes.
 *
 * @param array $classes Classes for the body element.
 * @return array
 */
function theme_slug_body_classes( $classes ) {

    // Add no-sidebar class.
    if ( ! is_active_sidebar( 'sidebar' ) ) {
        $classes[] = 'no-sidebar';
    }

    return $classes;
}
add_filter( 'body_class', 'theme_slug_body_classes' );

Der CSS Code könnte in etwa so aussehen:

.content-area {
    float: left;
    box-sizing: border-box;
    padding-right: 2em;
    width: 70%;
}

.sidebar {
    float: right;
    width: 30%;
}

.no-sidebar .content-area {
    float: none;
    padding: 0;
    width: 100%;
}

Anstatt den Content Bereich auf 70% der Breite zu begrenzen, wird ohne aktive Sidebar Widgets das Layout so auf die volle Breite ausgedehnt.

Vorstellbar ist auch eine Zentrierung des Content Bereichs und Definition einer maximalen Breite, um die Lesbarkeit durch kürzere Zeilen zu erhöhen.

Erstellung der sidebar.php

Die sidebar.php sollte so gestaltet werden, dass der Sidebar Container ebenfalls nur ausgegeben wird, falls Widgets vorhanden sind. Dies gelingt mit diesem Code:

<?php
// Check if Sidebar has widgets.
if ( is_active_sidebar( 'sidebar' ) ) :
?>

    <section id="secondary" class="sidebar widget-area clearfix" role="complementary">

        <?php dynamic_sidebar( 'sidebar' ); ?>

    </section><!-- #secondary -->

<?php endif; ?>

Fazit

Mit einer kleinen Funktion und minimalen CSS kann so die Usability des Themes verbessert werden. Es macht schließlich keinen Sinn, extra Platz im Layout für eine leere Sidebar vorzuhalten.