WP Search Widget: Suche im mobilen Menü (Secondary Menu)

Such-Box zum mobilen Menü hinzufügen: Das Search Widget von WordPress kann das und sieht gut aus (mit CSS, mit oder ohne GeneratePress)

Die gewünschte **Such-Box am Ende** des ausgeklappten Menüs in der mobilen Ansicht dieser Website

David vom GeneratePress Support hat mir schon x mal aus der Patsche geholfen. Heute war es mal wieder so weit. Auch wenn sein Tipp diesmal nicht vollständig zur Lösung geführt hat. Das CSS erforderte noch etwas Handarbeit 🙂

Das Problem: Ich möchte die Lupe im Header verschwinden lassen.

Das Icon, das GeneratePress standardmässig in der Kopfleiste anzeigt, wie z.B. auf dieser Website.

In der Desktop-Ansicht ist das für mich OK. Da ist genug Platz.

In der mobilen Ansicht stört es mich.

Links das Logo, rechts das "Hamburger" Menü, finde ich gut.

Wer diese Website besucht und mobil unterwegs ist, soll dennoch nicht auf die Suche verzichten müssen. Die soll über das "Hamburger" Menü erreichbar sein.

Das Ganze soll am Ende so aussehen, wie im folgenden Screenshot dargestellt.

Kompletter **Screenshot (Android)** mit ausgeklapptem Menü und aktiver Bildschirmtastatur

Das Secondary Menu (der "Off Canvas Burger") ist in GeneratePress so eingestellt, dass ein Touch auf das Hamburger-Menü oben rechts genügt, um das Menü auszuklappen ("Slide" von rechts).

Die Such-Box soll unterhalb der Menü-Optionen erscheinen. Aber genug Platz lassen, für die grosse Bildschirmtastatur (Android), wie im Screenshot gezeigt.

Stellt sich heraus, mit Davids Tipp, ist das passende WordPress-Widget schnell gefunden und zum mobilen Menü hinzugefügt:

Appearance > Widgets

Im deutschen WordPress-Backend:

Design > Widgets

(s. folgende Screenshots)

wp search widget 3 — **Widgets** im WordPress-Backend

Im Bereich Off Canvas Panel werden wir fündig. Hier

klicken wir auf [+]
suchen nach "se"
und wählen den "Search" Block

Ja genau. Das ist der mit der Lupe 🙂

wp search widget 4 — **Off Canvas Panel** ist das richtige Widget. Hier klicken wir den *Search-Block* rein.

Und schon haben wir einen ordentlichen Gutenberg-Block. Dem wir noch ein paar Feinheiten verpassen dürfen.

Ich entscheide mich vor allem dafür, das Label umzubenennen in "suchen:"

Den Button rechts vom Eingabefeld ignorieren wir noch. Der schreit nach CSS (siehe weiter unten).

wp search widget 5 — **Search-Block** im Off Canvas Panel Widget einstellen

Rechts, in den Block-Einstellungen können wir wählen, wie breit die Suchbox dargestellt werden soll.

Da wir später sowieso noch CSS benötigen, können wir das hier auch weglassen.

wp search widget 6 — **Search-Block** Einstellungen via *GeneratePress* (Seitenleiste rechts)

Und dann sind wir auch schon beim CSS.

Wahlweise via

Design > Customizer > Zusätzliches CSS
oder gleich styles.css im Theme-Datei-Editor

Letzteres setzt voraus, es ist ein Child-Theme installiert.

Beides funktioniert mit demselben Code, wie in der folgenden Box dargestellt.

/* Mobiles Menu: Such-Widget */
@media(max-width: 768px) {
  .main-nav { 
    margin-bottom: 0 !important; 
  }
  .wp-block-search__inside-wrapper { 
    width: 90% !important;
  }
  button.wp-block-search__button { 
    display: none !important; 
  }
}

@media … beschränkt das Ganze auf die mobile Ansicht
.main-nav … minimiert den Abstand zwischen Menü und Such-Box
.wp-block_search … reduziert die Breite des Eingabefeldes
button … blendet die [Submit] Schaltfläche aus

Zusätzlich müssen wir noch dafür sorgen, dass unser Theme GeneratePress die Such-Lupe nicht mehr anzeigt, in der mobilen Ansicht. Das erledigt das folgende CSS-Snippet:

/* Header Such-Button: mobil ohne */
@media(max-width: 768px) {
  span.gp-icon.icon-search {
    display: none;
  }
}

Diese letzte Einstellung ist abhängig vom installierten Theme.

Die sonstigen Einstellungen sind natürlich Geschmacksache.

So passt es für mich.

Vor allem ist der [Submit] Button in der mobilen Ansicht meiner Meinung nach wirklich komplett überflüssig. Weil die Suche ja direkt über die Bildschirmtastatur ausgelöst wird.

Fazit für heute: Es gibt sie noch, die guten Widgets!

Ehrlich: Seit ich mich für GeneratePress entschieden habe, vor ein paar Jahren, das sollte jetzt für immer mein Standard-Theme sein, für alle meine WordPress-Websites – seitdem habe ich Widgets fast vollständig ignoriert.

Ich erinnere mich aber noch an "früher".

Da waren die WordPress-Widgets noch "heiss" und man konnte richtig zaubern damit, um die Website designmässig auf Vordermann und Vorderfrau zu bringen.

Die richtig guten Themes wie GeneratePress haben diesen Widgets dann nach und nach den Garaus gemacht. Aber, wie hier in diesem Post beschrieben: Es gibt immer noch Situationen, da ist das passende WordPress-Widget einfach die schnellste, beste und einfachste Lösung.

Der entscheidende Tipp kam mal wieder von David aus dem Support-Team für GeneratePress und GenerateBlocks. Und dabei hat die Lösung nichts mit GeneratePress oder GenerateBlocks zu tun. Sie sollte mit jedem beliebigen WordPress-Theme gleich gut funktionieren.

In diesem Sinne:

Viel Spass mit dem mobilen Suchbox Widget!

🙂