So fügen Sie eine Vollbild-Suchmaske in WordPress hinzu

Kürzlich fragte einer unserer Leser, ob wir ein Tutorial darüber schreiben könnten, wie man eine Vollbild-Such-Overlay in WordPress hinzufügt. Sie haben dies wahrscheinlich auf beliebten Websites wie Wired gesehen. Wenn ein Benutzer auf das Suchsymbol klickt, öffnet sich das Suchfeld und bedeckt den gesamten Bildschirm, was die Benutzererfahrung auf mobilen Geräten verbessern kann. In diesem Artikel zeigen wir Ihnen, wie Sie eine Vollbild-Such-Overlay in WordPress hinzufügen.

Die Vollbildsuche wird langsam zum Trend, da sie die Sucherfahrung für mobile Benutzer drastisch verbessert. Da mobile Bildschirme sehr klein sind, erleichtert ein Vollbild-Overlay den Benutzern das Tippen und Suchen auf Ihrer Website.

Als wir diese Tutorial-Anfrage erhielten, wussten wir, dass sie etwas Code erfordern würde. Unser Ziel bei WPBeginner ist es, die Dinge so einfach wie möglich zu machen.

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

Um es Ihnen leicht zu machen, haben wir ein Video-Tutorial erstellt, wie Sie ein Vollbild-Such-Overlay hinzufügen können, das Sie unten ansehen können.

Wenn Sie jedoch nur Textanweisungen befolgen möchten, können Sie unserer Schritt-für-Schritt-Anleitung folgen, wie Sie ein Vollbild-Such-Overlay in WordPress hinzufügen.

Vollbild-Such-Overlay in WordPress hinzufügen

Das erste, was Sie tun müssen, ist das WordPress Full Screen Search Overlay Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.

Das WordPress Full Screen Overlay Search Plugin funktioniert sofort, und es gibt keine Einstellungen, die Sie konfigurieren müssen.

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

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

Leider funktioniert dieses Plugin nicht mit Google Custom Search.

Vollbild-Such-Overlay anpassen

Das WordPress Full Screen Search Overlay Plugin wird mit einer eigenen Stylesheet geliefert. Um das Erscheinungsbild der Suchmaske zu ändern, müssen Sie die CSS-Datei des Plugins bearbeiten oder !important in CSS verwenden.

Zuerst müssen Sie sich mit einem FTP-Client mit Ihrer Website verbinden. Wenn Sie neu im Umgang mit FTP sind, lesen Sie unseren Leitfaden zum Thema Hochladen von Dateien nach WordPress mit FTP.

Sobald Sie verbunden sind, müssen Sie den CSS-Ordner des Plugins lokalisieren. Sie finden ihn 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 gerade heruntergeladene Datei in einem einfachen Texteditor wie Notepad. Sie können beliebige Änderungen an dieser Datei vornehmen. Wir wollten zum Beispiel die Hintergrund- und Schriftfarbe ändern, damit sie zu unserer Demowebsite passen.

/**
* 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 gut mit CSS umgehen können, können Sie gerne auch andere Stilregeln ändern.

Sobald Sie fertig sind, können Sie diese Datei mit FTP zurück in den CSS-Ordner des Plugins hochladen. Sie können Ihre Änderungen nun sehen, indem Sie Ihre Website besuchen.

Wichtiger Hinweis:

Wenn Sie dies in Ihrem eigenen Theme verwenden, ist es besser, !important-Tags zu verwenden, damit Plugin-Updates keine Änderungen überschreiben.

Für Entwickler und Berater können Sie das Plugin auch einfach umbenennen und als Teil Ihres Themes oder Ihrer Dienstleistungen 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, ein Vollbild-Such-Overlay zu Ihrer WordPress-Website hinzuzufügen. Möglicherweise möchten Sie auch unseren Leitfaden lesen, wie Sie einen Such-Toggle-Effekt in WordPress hinzufügen.

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