Twenty Twenty-Four: Suche mit der Lupe in der Navigation anpassen

Twenty Twenty-Four: Suche mit der Lupe in der Navigation anpassen
Beitragsdatum: 15.01.2024 | Letztes Update: 06.05.2024

Karl vom WordPress Meetup in Dresden hat schon seit einiger Zeit eine Möglichkeit gesucht, die Suche mit der Lupe bei einem Block Theme wie Twenty Twenty-Four (TT4) anders (oder schöner) zu gestalten und ist dabei auf eine interessante Option gestoßen. Die von Karl angesprochene Lösung habe ich dann als Grundlage verwendet, um die Suche noch ein wenig aufzupimpen.

Damit ihr eine Vorstellung davon habt, wie ich die Suche mit dem Lupen-Icon bei Twenty Twenty-Four eingebaut habe, findet ihr die geänderte Navigation mit der Lupe auf der Website des WordPress Meetups Südsauerland.

Header bei Twenty Twenty-Four bearbeiten

Zunächst schauen wir uns mal die einzelnen Optionen bei dem Block „Suchen“ an. Dazu muss man den Header im Website-Editor aufrufen. In den Header gelangt man über Design > Website-Editor. In dem folgenden kurzen Video sieht man, wie man zur Bearbeitung des Headers gelangt.

Header bearbeiten bei dem Block Theme Twenty Twenty-Four
Header bearbeiten bei dem Block Theme Twenty Twenty-Four

Die Suche mit der Lupe bei Twenty Twenty-Four

Schauen wir uns die einzelnen Eigenschaften im Menü für die Suche an:

Suche mit oder ohne Beschriftung
Suche mit oder ohne Beschriftung
Suche mit oder ohne Icon (Lupe)
Suche mit oder ohne Icon (Lupe)

In der linken Grafik sieht man die Möglichkeit, über der Suche eine Beschriftung (Label) einzurichten. Diese Option funktioniert im Grunde wie ein Lichtschalter: Die individuelle Beschriftung kann ein- und ausgeschaltet werden. In der rechten Grafik kann das Icon mit der Lupe ein- und ausgeschaltet werden.

Interessanter sind die Optionen unter „Buttonposition ändern“:

Buttonposition bei der Suche ändern
Buttonposition bei der Suche ändern

Hier besteht die Möglichkeit, Button außen oder innen bzw. keinen Button anzeigen zu lassen. Sehr gut gefallen hat mir die Option „Nur Button“, wobei das Lupen-Icon eigenschaltet ist. In dem Fall wird ein animiertes Eingabefeld für die Such geöffnet. Abgesehen davon, dass der Effekt wirklich schick ist, wird in der Navigation auch nicht viel Platz dafür benötigt.

Ein Bug bei der Bearbeitung?

Bei einer WordPress-Instanz hatte ich das Problem, von dem mir übrigens Karl ebenfalls berichtet hat, dass die Bearbeitung der Eigenschaften nicht möglich war, solange die Suche im Navigationsmenü untergebracht war. Erst nach Verschieben vor dem Navigationsblock war eine Bearbeitung möglich. Nach der Festlegung der Eigenschaften musste natürlich die Suche wieder an die gewünschte Stelle verschoben werden. Dieser Workaround hat so funktioniert. Bei einer anderen WordPress-Instanz hatte ich das Problem nicht. Zur Verdeutlichung hier ein kurzes Video:

Ein Bug bei der Bearbeitung der Suche?
Ein Bug bei der Bearbeitung der Suche?

Mit etwas CSS die Suche mit der Lupe in der Navigation aufpimpen

Mit ein wenig CSS unter „Zusätzliches CSS“ bei Design > Website-Editor habe ich die Suche bei TT4 ein wenig angepasst. Die Lupe „hing“ etwas weiter unten im Vergleich zu den Menüoptionen:

Custom CSS bei WordPress und Block Themes wie Twenty Twenty-Four
Custom CSS bei WordPress und Block Themes wie Twenty Twenty-Four
/* Anpassung Suche in Navigation */
button.wp-block-search__button.has-background.has-custom-gelb-background-color.has-border-color.has-custom-gelb-border-color.has-icon.wp-element-button {
    margin-bottom: 20px;
    padding-right: 40px;
}
input#wp-block-search__input-1 {
    margin-bottom: 20px;
}

Fazit

Weitere Beiträge zum Thema

Wir freuen uns über eine Kontaktaufnahme

Telefon Haurand

02722-6577725

0241 9551861

self-Logo

info@haurand.com

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

  • Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
  • Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.

Beitrags-Kategorien

Allgemein (108) Anleitung (77) Block-Editor (46) CSS (10) Full Site Editing (39) Keine Anzeige (2) Plugins (28) Short News (1) Theme (31) Tipps (72) Veranstaltungen (3) WordPress (122)

8 Gedanken zu „Twenty Twenty-Four: Suche mit der Lupe in der Navigation anpassen“

  2. Moin
    ja , das habe ich auch schon alles so gemacht
    (nächste Mal stelle ich das auch hier rein)
    https://moin-emsland.de

    was mich noch stört, dass die Lupe nach rechts auswandert
    besser wäre, die Lupe wäre ganz rechts und das Textfeld würde nach links aufrollen

    ausserdem ist die Lupte in der responsive Ansicht noch unschön, da sie eine eigene kpl. Zeile braucht

    fair winds
    Norbert

    Antworten

    • was mich noch stört, dass die Lupe nach rechts auswandert

      Naja, wenn du die Navigation entsprechend gestaltest, ist das eigentlich kein Problem, siehe hier: https://wpmeetup-suedsauerland.de/.
      Du musst halt dafür sorgen, dass weniger Abstand zwischen Menü und Suche berücksichtigt wird.
      Die komplette Zeile für die Suche beim mobilen Menü stört mich ehrlich gesagt nicht.

      Antworten

  3. ist schon nicht schlecht und auch den Gutenberg finde ich klasse, da man das kpl. Theme im Zugriff hat und direkt gestalten kann

    wünschenswert wäre ein netteres/schickeres Hamburger Menu
    dies sind auf den mobiles ziemlich trist aus

    außerdem wäre es generell super, wenn die Erstellung/Entwicklung von Blöcken etwas smarter ginge

    VG
    Norbert

    Antworten

Schreibe einen Kommentar