Kann ich ein Widget woanders platzieren?

Frage: Ich nutze das frei erhältliche Theme Fruitful. Das Theme gefällt mir ganz gut, aber ich möchte keine Seitenleiste und würde das Widget für das Suchformular gerne im Header unterbringen. Geht das überhaupt?

Ui, da hast du dir was vorgenommen. Hast du schon ein bisschen Erfahrungen mit Programmierung? Mit reinem Drag & Drop oder der Auswahl von Theme-Optionen kommst du hier leider nicht weit; das gibt das Theme nicht her.

Wenn du bisher wenig Erfahrung mit eigenem Code hast, solltest du dir erst einmal eine eigene Entwicklungsumgebung einrichten, um Sachen in Ruhe austesten zu können. Du bekommst dann auch nicht gleich Panik, wenn etwas nicht auf Anhieb klappt oder eine Fehlermeldung dich aussperrt.

Da Änderungen im Theme beim nächsten Update überschrieben werden, fängst du am besten damit an, ein Child Theme anzulegen. Dabei handelt es sich um eine Ergänzung deines Themes Fruitful, in der du aber nur die Templates hinzufügst, die du ändern möchtest. Wie du ein Child Theme erstellst, habe ich schon hier beschrieben).

Damit du möglichst wenig am Theme änderst, würde ich dann erst einmal einen eigenen Widget-Bereich definieren. Vielleicht kommst du ja doch irgendwann auf die Idee, die Sidebar zu nutzen und dann wäre es ja schade, wenn wir das unnötigerweise geändert hätten.

Um den eigenen Widgetbereich zu definieren, legst du in deinem Child Theme eine Datei functions.php an und fügst dort folgendes hinzu:

<?php
add_action( 'widgets_init', 'meine_header_sidebar' );

function meine_header_sidebar() {
    register_sidebar( array(
      'name' => 'Header',
      'id' => 'header-sidebar',
      'description' => 'Widgetbereich im Header',
      'before_widget' => '<aside id="%1$s" class="widget %2$s">',
      'after_widget' => '</aside>',
      'before_title' => '<h3 class="widget-title">',
      'after_title' => '</h3>',
    ) );
}

Das Ergebnis sollte sein, dass du im Menü Design > Widgets einen neuen Widgetbereich „Header“ findest. Du brauchst dort aber noch kein Widget zu platzieren – es würde eh nicht angezeigt, weil wir bisher nicht definiert haben, wo das im Theme erscheinen soll.

Um das festzulegen, müssen wir eine „dynamic sidebar“ anlegen. (Der Begriff „sidebar“ ist hier etwas irreführend. Er wurde gewählt, weil üblicherweise Widgets in einer Sidebar angezeigt werden, auch wenn wir das jetzt im Header platzieren möchten.)

Da wir den Code an zwei verschiedenen Stellen benötigen werden (mehr dazu später), packen wir ihn in eine weitere Funktion in der Datei functions.php:

function mein_header_widgetbereich() {
  if ( is_active_sidebar( 'header-sidebar' ) ) {
    echo '<div id="header-sidebar" class="widget-area">';
    dynamic_sidebar( 'header-sidebar' );
    echo '</div><!-- #header-sidebar -->';
  } else {
  echo '<h2>Hier sollen die Widgets hin!</h2>';
  }
}

Einfacher ausgedrückt besagt dieser Code „Wenn der Widgetbereich header-sidebar bereits genutzt wird, dann zeige seine Widgets an, sonst zeige erst einmal nur den Text Hier sollen die Widgets hin! an.

Diese Funktion müssen wir jetzt an geeigneter Stelle unterbringen. Dazu kopieren wir aus dem Parent-Theme Fruitful das Template header.php und werfen einen Blick hinein. Oh je, der Header ist leider ein wenig komplizierter als üblich. Die verschiedenen Theme-Optionen (Darstellung responsive oder fix?) müssen schließlich abgebildet werden. Der Code für das Navigationsmenü ist deshalb in ein if-Statement verschachtelt, dass mit if ( !$is_responsive || ( $is_responsive && … anfängt. Hier suchst du die Stelle heraus, an der das Navigationsmenü und der Header enden:

    <nav role="navigation" class="site-navigation main-navigation">
      <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav><!-- .site-navigation .main-navigation -->
  </div>
</header><!-- #masthead .site-header -->

An den beiden Stellen (!) fügen wir nun unsere Funktion ein:

    <nav role="navigation" class="site-navigation main-navigation">
      <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav><!-- .site-navigation .main-navigation -->
  </div>
<?php mein_header_widgetbereich(); ?>
</header><!-- #masthead .site-header -->

Wenn bis hier alles geklappt hat, solltest du in deiner Website unterhalb des Headers den Hinweis Hier sollen die Widgets hin! sehen. Nun brauchst du eigentlich nur noch unter Design > Widgets das Widget Suche in den neuen Widget-Bereich Header ziehen. Als Ergebnis siehst du jetzt im Header das Suchformular. Es steht allerdings nicht gerade an der optimalen Stelle.

Um das auch noch in den Griff zu bekommen, fügen wir in unserem Child Theme dem Stylesheet style.css noch zwei Regeln hinzu:

div#header-sidebar {
    clear: both;
    text-align: center;
    padding: 20px 0 0 0;
}


#header-sidebar #searchform:after {
    top: auto;
    font-size: 15px;
    border: none;
    position: relative;
}

Jetzt sollte alles anständig aussehen. 👍

Wenn du dann alles getestet hast, überträgst du per FTP dein Child Theme auf deinen Webserver und aktivierst es im Backend. Da wir ein Child Theme verwendet haben, sind die Änderungen auch leichter nachvollziehbar. Wenn etwas schief gehen sollte, löschst du das Child Theme wieder per FTP.

Die Antwort ist diesmal etwas länger ausgefallen, aber vielleicht hilft es dir ja weiter – oder du entscheidest dich für ein ganz anderes Theme, das deinen Vorstellungen mehr entspricht und sich auch ohne Programmierung an deine Wünsche anpassen lässt. Keiner erwartet, dass jeder WordPress-Nutzer programmieren kann. Dafür gibt es schließlich fertige Themes.

Viel Erfolg.