[Resolved] Beschriftung Lupe-Icon für Suche

[Oliver]

Hi,

ist es denkbar, mit einem Snippet die Beschriftung der Lupe bei dem Lupe-Icon Suche anzufügen?
Ähnlich wie bei dem Hamburger Menü könnte es hilfreich sein, diese Beschriftung vorzunehmen.
Vielleicht ist das auch ein Thema für eure Entwickler, diese Funktion direkt im Theme mit einzubauen?!

Danke für ein kurzes Feedback mit einem passenden Snippet.

[David]

Hi there,

are you wanting to add a <label> element to the Navigation search field ?

[Oliver]

Hi,

ich hatte den Email-Reminder deaktiviert. Daher die späte Antwort. Sorry!
Denkbar ist, dass bei dem Icon im mobilen Menü der Text (Suche) darunter steht.
Das Gleiche wäre auch schön, wenn in der Hauptnavigation die Lupe und das Label Suche erscheint.
Es geht dabei um die User Experience und Accessibility. So ist sichergestellt, dass auch User ohne Kenntnis der Lupenfunktion wissen, welche Reaktion erfolgt. Auch immer mehr mobile Apps wie zum Beispiel Spotify haben dies berücksichtigt.
Außerdem wäre ein Platzhalter-Text schön, wenn der Cursor blinkt. Kann ich diesen Platzhalter ohne Code hinzufügen? Ist dafür ein CSS Snippet erforderlich?

[David]

You can make these changes but it will require PHP Snippets.
This doc explains how to add PHP:

https://docs.generatepress.com/article/adding-php/

For example – Adding a Placeholder:

add_filter( 'generate_search_placeholder', function() {
    return 'Search';
} );

For the Search icon – do you want to see the word “search” before the Icon ?

[Oliver]

Ja, es könnte ähnlich wie bei dem Hamburger Icon als Wort daneben oder darunter stehen.
Es sollte ähnlich wie bei dem Menü-Button in der mobilen Ansicht funktionieren.
Das würde ich gern für das eigene und Projekt von Kunden umsetzen.

[David]

You can use this snippet to add your HTML for the Search label, that switches to Close when the search is open:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'search' === $icon ) {
        $label = '<span class="search-icon-label">Search</span><span class="close-search-label">Close</span>';
        $output = $label . $output;
    }

    return $output;
}, 15, 2 );

then a little CSS:

.search-icon-label,
.close-search-label {
    margin-right: 15px;
}

.search-item.active .search-icon-label,
.close-search-label {
    display: none;
}

.search-item.active .close-search-label {
    display: inline;
}

[Oliver]

Hi,

danke, dass du mich mit diesen Snippets unterstützt hast. Ich werde das Problem damit zukünftig lösen können.
Ich kann bei unserem eigenen Projekt noch keine finale Lösung damit finden die in allen Ansichten gut dargestellt wird,
aber das Ticket ist dennoch final bearbeitet. Danke vielmals!

[David]

You’re welcome

[Author]

Posts