Hinzufügen einer Vollbild-Suchüberlagerung in WordPress

Vor kurzem fragte einer unserer Leser, ob wir ein Tutorial zum Hinzufügen einer Vollbild-Suchoberfläche in WordPress schreiben könnten. Sie haben dies wahrscheinlich auf beliebten Websites wie Wired gesehen. Wenn ein Benutzer auf das Suchsymbol klickt, wird das Suchfeld geöffnet und deckt den gesamten Bildschirm ab, wodurch die Benutzererfahrung auf mobilen Geräten verbessert werden kann. In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress eine Vollbild-Suchüberlagerung hinzufügen.

Die Vollbild-Suche entwickelt sich langsam zu einem Trend, da sie das Sucherlebnis für mobile Benutzer drastisch verbessert. Da mobile Bildschirme sehr klein sind, können Sie mit dem Vollbild-Overlay Benutzern das Eingeben und Suchen auf Ihrer Website erleichtern.

Als wir diese Tutorialanfrage zum ersten Mal erhielten, wussten wir, dass dafür etwas Code benötigt wird. Unser Ziel bei WPBeginner ist es, die Dinge so einfach wie möglich zu gestalten.

Nachdem wir das Tutorial fertig geschrieben hatten, stellten wir fest, dass der Prozess zu kompliziert war und eher in ein einfaches Plugin eingebettet werden sollte.

Zur Vereinfachung haben wir ein Video-Tutorial erstellt, in dem beschrieben wird, wie Sie eine Vollbild-Suchmaske hinzufügen, die Sie unten ansehen können.

Wenn Sie jedoch nur den Textanweisungen folgen möchten, können Sie unserem Schritt-für-Schritt-Tutorial folgen, wie Sie eine Vollbild-Suchüberlagerung in WordPress hinzufügen.

Hinzufügen einer Vollbild-Suchüberlagerung in WordPress

Zuerst müssen Sie das WordPress-Vollbild-Such-Overlay-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Das WordPress-Vollbild-Overlay-Such-Plugin ist sofort einsatzbereit, und Sie müssen keine Einstellungen konfigurieren.

Sie können einfach Ihre Website besuchen und auf das Suchfeld klicken, um das Plugin in Aktion zu sehen.

Bitte beachten Sie, dass das Plugin mit der Standard-Suchfunktion von WordPress arbeitet. Es funktioniert auch hervorragend mit SearchWP, einem Premium-Plugin, das die standardmäßige WordPress-Suche erheblich verbessert.

Leider funktioniert dieses Plugin nicht mit der benutzerdefinierten Google-Suche.

Anpassen der Vollbild-Suchüberlagerung

Das WordPress-Vollbild-Such-Overlay-Plugin wird mit einem eigenen Stylesheet geliefert. Um das Erscheinungsbild der Suchüberlagerung zu ändern, müssen Sie die CSS-Datei des Plugins bearbeiten oder!!! In CSS verwenden.

Zunächst müssen Sie über einen FTP-Client eine Verbindung zu Ihrer Website herstellen. Wenn Sie mit FTP noch nicht vertraut sind, werfen Sie einen Blick auf unsere Anleitung zum Hochladen von Dateien mit Word nach WordPress.

Sobald Sie verbunden sind, müssen Sie den CSS-Ordner des Plugins suchen. Sie finden es unter folgendem Pfad:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Sie finden eine Datei Vollbild-Suche.css im CSS-Ordner. Sie müssen diese Datei auf Ihren Computer herunterladen.

Öffnen Sie die soeben heruntergeladene Datei in einem einfachen Texteditor wie Notepad. Sie können Änderungen an dieser Datei vornehmen. Zum Beispiel wollten wir den Hintergrund und die Schriftfarbe an unsere Demo-Website anpassen.

 / ** * Reset * - Verhindert, dass Designs und andere Plugins ihre eigenen Stile auf unsere Vollbildsuche anwenden. * / # Vollbild-Suche, # Vollbild-Suchschaltfläche, # Vollbild-Suchschaltfläche.close, # Vollbild-Suchformular, # Vollbild-Suchformular div, # Vollbild-Suchformular div-Eingabe, # Vollbild-Suchformular div input.search font-family: Arial, sans-serif; Hintergrund: keine; Grenze: 0 keine; Grenzradius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; Float: keine; Schriftgröße: 100%; Höhe: Auto; Buchstabenabstand: normal; Listenstil: keine; Umriss: keine; Position: statisch; Textdekoration: keine; Text-Gedankenstrich: 0; Text-Schatten: keiner; Text-Transformation: keine; Breite: Auto; Sichtbarkeit: sichtbar; Überlauf: sichtbar; Marge: 0; Polsterung: 0; Zeilenhöhe: 1; Box-Dimensionierung: Border-Box; -webkit-box-dimensionierung: border-box; -moz-box-dimensionierung: border-box; -webkit-box-shadow: keiner; -Moz-Box-Schatten: keine; -ms-box-shadow: keiner; -o-box-Schatten: keiner; Box-Schatten: keine; -webkit-erscheinung: keine; Übergang: keine; -webkit-Übergang: keine; -Moz-Übergang: keine; -o-Übergang: keine; -ms-Übergang: keine;  / ** * Hintergrund * / # Vollbild-Suche Sichtbarkeit: ausgeblendet; Deckkraft: 0; z-Index: 999998; oben: 0; links: 0; Breite: 100%; Höhe: 100%; Hintergrund: # 1bc69e; / ** * Fügen Sie einige CSS3-Übergänge hinzu, um die Vollbild-Suche anzuzeigen * / Übergang: Deckkraft 0,5 s linear;  / ** * Vollbildsuche beim Öffnen anzeigen * / # full-screen-search.open / ** * Da wir Sichtbarkeit und Deckkraft für die Unterstützung von CSS-Transitionen verwenden, definieren wir * Position: fixed; hier, damit die Vollbildsuche * die darunter liegenden HTML-Elemente nicht blockiert, wenn sie nicht geöffnet sind * / position: fixed; Sichtbarkeit: sichtbar; Deckkraft: 1;  / ** * Suchformular * / # Vollbild-Suchformular position: relative; Breite: 100%; Höhe: 100%;  / ** * Close Button * / # Vollbild-Suche Button.close Position: absolut; z-Index: 999999; oben: 20px; rechts: 20px; Schriftgröße: 30px; Schriftgewicht: 300; Farbe: # 999; Cursor: Zeiger;  / ** * Suchformular Div * / # Vollbild-Suchformular Div Position: absolut; Breite: 50%; Höhe: 100px; Spitze: 50%; links: 50%; Marge: -50px 0 0 -25%;  / ** * Suchformular Eingabe Platzhalterfarbe * / # Vollbild-Suchformular div Eingabe :: - webkit-input-placeholder font-family: Arial, sans-serif; Farbe: #ccc;  # Vollbild-Suchformular div Eingabe: -moz-Platzhalter font-family: Arial, sans-serif; Farbe: #ccc;  # Vollbild-Suchformular div input :: - moz-placeholder font-family: Arial, sans-serif; Farbe: #ccc;  # Vollbild-Suchformular div Eingabe: -ms-input-placeholder font-family: Arial, sans-serif; Farbe: #ccc;  / ** * Suchformular-Eingabe * / # Vollbild-Suchformular-Eingabedatei width: 100%; Höhe: 100px; Hintergrund: #eee; Polsterung: 20px; Schriftgröße: 40px; Zeilenhöhe: 60px; / * Wir haben hier unsere eigene Schriftfarbe hinzugefügt * / color: # 50B0A6;  

In diesem Code haben wir nur die Hintergrundfarbe in Zeile 62 geändert und die Schriftfarbe in Zeile 150 hinzugefügt. Wenn Sie mit CSS vertraut sind, können Sie auch andere Stilregeln ändern.

Wenn Sie fertig sind, können Sie diese Datei per FTP in den CSS-Ordner des Plugins hochladen. Sie können jetzt Ihre Änderungen sehen, indem Sie Ihre Website besuchen.

Wichtige Notiz:

Wenn Sie dies in Ihrem eigenen Design verwenden, sollten Sie! Wichtige Tags verwenden, damit die Plugin-Updates keine Änderungen überschreiben.

Für Entwickler und Berater können Sie das Plugin auch einfach umbenennen und als Teil Ihres Designs oder Ihrer Dienste bündeln.

Wir haben dieses Plugin nur erstellt, weil alle anderen Schreibweisen dieses Tutorials für Anfänger zu kompliziert gewesen wären.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Ihre WordPress-Site mit einer Vollbild-Suchüberlagerung zu versehen. Vielleicht möchten Sie auch unseren Leitfaden zum Hinzufügen eines Suchumschalteffekts in WordPress sehen

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.