Kürzlich fragte einer unserer Leser, ob wir ein Tutorial zum Hinzufügen eines Vollbild-Such-Overlays in WordPress schreiben könnten. Sie haben dies wahrscheinlich auf beliebten Websites wie Wired gesehen. Wenn ein Benutzer auf das Suchsymbol klickt, öffnet sich das Suchfeld und deckt den gesamten Bildschirm ab, was die Benutzererfahrung auf mobilen Geräten verbessern kann. In diesem Artikel zeigen wir Ihnen, wie Sie ein Vollbild-Such-Overlay in WordPress hinzufügen.
Die Vollbildsuche entwickelt sich langsam zum Trend, da sie das Sucherlebnis für mobile Nutzer drastisch verbessert. Da mobile Bildschirme sehr klein sind, erleichtern Sie den Benutzern durch das Anbieten eines Vollbild-Overlays die Eingabe und Suche auf Ihrer Website.
Als wir diese Tutorial-Anfrage zum ersten Mal erhielten, wussten wir, dass dafür etwas Code erforderlich wäre. Unser Ziel bei Themelocal ist es, die Dinge so einfach wie möglich zu machen.
Als wir das Tutorial fertig geschrieben hatten, stellten wir fest, dass es ein zu komplizierter Prozess war und es eher in ein einfaches Plugin verpackt werden sollte.
Um es Ihnen leicht zu machen, haben wir ein Video-Tutorial zum Hinzufügen eines Vollbild-Such-Overlays erstellt, das Sie unten ansehen können.
Wenn Sie jedoch nur den Textanweisungen folgen möchten, können Sie unserer Schritt-für-Schritt-Anleitung zum Hinzufügen eines Vollbild-Such-Overlays in WordPress folgen.
Hinzufügen von Vollbild-Such-Overlay in WordPress
Als erstes müssen Sie die installieren und aktivieren WordPress-Vollbildsuch-Overlay Plugin. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Das WordPress-Plugin für die Vollbild-Overlay-Suche funktioniert sofort 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 beachte, dass das Plugin mit der standardmäßigen WordPress-Suchfunktion funktioniert. 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 Suche von Google.
Anpassen der Vollbild-Suchüberlagerung
Das WordPress Full Screen Search Overlay-Plugin wird mit einem eigenen Stylesheet geliefert. Um das Aussehen des Such-Overlays zu ändern, müssen Sie die CSS-Datei des Plugins bearbeiten oder !important in CSS verwenden.
Zuerst müssen Sie sich über einen FTP-Client mit Ihrer Website verbinden. Wenn Sie zum ersten Mal mit FTP arbeiten, werfen Sie einen Blick auf unsere Anleitung zum Hochladen von Dateien auf WordPress mit FTP.
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 full-screen-search.css
im CSS-Ordner. Sie müssen diese Datei auf Ihren Computer herunterladen.
Öffnen Sie die Datei, die Sie gerade heruntergeladen haben, in einem Nur-Text-Editor wie Notepad. Sie können an dieser Datei beliebige Änderungen vornehmen. Wir wollten beispielsweise den Hintergrund und die Schriftfarbe an unsere Demo-Website anpassen.
/** * Reset * - Prevents Themes and other Plugins from applying their own styles to our full screen search */ #full-screen-search, #full-screen-search button, #full-screen-search button.close, #full-screen-search form, #full-screen-search form div, #full-screen-search form div input, #full-screen-search form div input.search { font-family: Arial, sans-serif; background:none; border:0 none; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; float:none; font-size:100%; height:auto; letter-spacing:normal; list-style:none; outline:none; position:static; text-decoration:none; text-indent:0; text-shadow:none; text-transform:none; width:auto; visibility:visible; overflow:visible; margin:0; padding:0; line-height:1; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none; -webkit-appearance:none; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; } /** * Background */ #full-screen-search { visibility: hidden; opacity: 0; z-index: 999998; top: 0; left: 0; width: 100%; height: 100%; background: #1bc69e; /** * Add some CSS3 transitions for showing the Full Screen Search */ transition: opacity 0.5s linear; } /** * Display Full Screen Search when Open */ #full-screen-search.open { /** * Because we're using visibility and opacity for CSS transition support, * we define position: fixed; here so that the Full Screen Search doesn't block * the underlying HTML elements when not open */ position: fixed; visibility: visible; opacity: 1; } /** * Search Form */ #full-screen-search form { position: relative; width: 100%; height: 100%; } /** * Close Button */ #full-screen-search button.close { position: absolute; z-index: 999999; top: 20px; right: 20px; font-size: 30px; font-weight: 300; color: #999; cursor: pointer; } /** * Search Form Div */ #full-screen-search form div { position: absolute; width: 50%; height: 100px; top: 50%; left: 50%; margin: -50px 0 0 -25%; } /** * Search Form Input Placeholder Color */ #full-screen-search form div input::-webkit-input-placeholder { font-family: Arial, sans-serif; color: #ccc; } #full-screen-search form div input:-moz-placeholder { font-family: Arial, sans-serif; color: #ccc; } #full-screen-search form div input::-moz-placeholder { font-family: Arial, sans-serif; color: #ccc; } #full-screen-search form div input:-ms-input-placeholder { font-family: Arial, sans-serif; color: #ccc; } /** * Search Form Input */ #full-screen-search form div input { width: 100%; height: 100px; background: #eee; padding: 20px; font-size: 40px; line-height: 60px; /* We have added our own font color here */ 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 gut sind, können Sie auch andere Stilregeln ändern.
Sobald Sie fertig sind, können Sie diese Datei per FTP zurück in den CSS-Ordner des Plugins hochladen. Sie können jetzt Ihre Änderungen sehen, indem Sie Ihre Website besuchen.
Wichtiger Hinweis:
Wenn Sie dies in Ihrem eigenen Theme verwenden, ist es besser, !important-Tags zu 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 Themas oder Ihrer Dienste bündeln.
Wir haben dieses Plugin nur erstellt, weil alle anderen Möglichkeiten, dieses Tutorial zu schreiben, für Anfänger zu kompliziert gewesen wären.
Wir hoffen, dieser Artikel hat Ihnen geholfen, Ihrer WordPress-Site ein Vollbild-Such-Overlay hinzuzufügen. Vielleicht möchten Sie auch unsere Anleitung zum Hinzufügen eines Suchumschalteffekts in WordPress lesen