Wie aufklappendes Sucheingabefeld?

  • Hallo,

    ich benutze das WP-Standarttheme Twenty Twenty-Four (TT4) und suche ein Plugin oder eine Möglichkeit für ein ausklapbares, sich veränderndes Suchfeld in der (Header-)Navigationsleiste: Wenn man auf das Lupensymbol (einem Morphing Icon) klickt, verwandelt es sich in eine Suchleiste in voller Größe. Durch erneutes Klicken auf das „X“ wird es wieder auf eine Lupe verkleinert.

    Hier dazu ein Beispiel (oben rechts):

    https://haurand.com/

    Jedoch es es in dem hier verwendeten Theme „Generatepress“ wohl bereits integriert?


    Im voraus herzlichen Dank.

    ~~~~~~~~~~~~~
    Irren ist menschlich. Aber wer richtigen Mist bauen will, braucht einen Computer.
    (Unbekannt)

    6 Mal editiert, zuletzt von Rezeptesammler (25. Dezember 2023 um 12:41)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren


  • Hier dazu ein Beispiel (oben rechts):

    https://haurand.com/

    Ich habe mir jetzt nicht angesehen, wie dies hier umgesetzt wurde. Der Webdesigner wird dir dies sicherlich eben einbauen können.

    • Füge einen Event-Listener für das Lupensymbol hinzu, der die Suchleiste ein- und ausblendet, wenn das Symbol angeklickt wird. Du kannst dafür die jQuery-Funktionen toggle oder slideToggle verwenden.
    • Optional kannst du auch einen Event-Listener für die Suchleiste hinzufügen, der die Suchfunktion auslöst, wenn die Eingabetaste gedrückt wird. du kannst dafür die jQuery-Funktion keypress verwenden und die Taste mit event.which überprüfen.

    KI-generierter Code. Überprüfen und sorgfältig verwenden

    Code
    <i class="fa fa-search" id="search-icon"></i>
    <input type="search" id="search-bar" placeholder="Suchen...">
    Code
    #search-bar {
      display: none;
    }

    Mit offenen Augen träumen

  • Selbstantwort:

    Habe es gefunden. Es ist bereits im Gutenbergeditor integriert! Man muss nur im FSE-Block "Suche" entsprechend in den Optionen konfigurieren — siehe

    ~~~~~~~~~~~~~
    Irren ist menschlich. Aber wer richtigen Mist bauen will, braucht einen Computer.
    (Unbekannt)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!