Springe zum Hauptinhalt

Wie eine Vollbild-Suchmaschine auf Wordpress hinzufügen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Beliebte Websites wie Wired verwenden Vollbild-Suchmaschinen. Wenn ein Benutzer auf das Suchsymbol klickt, wird die Suchmaschine geöffnet und deckt den gesamten Bildschirm ab, wodurch die Benutzererfahrung auf Mobilgeräten verbessert werden kann. In diesem Artikel zeigen wir Ihnen, wie Sie WordPress eine Vollbild-Suchmaschine hinzufügen.

fullscreensearch

Die Vollbild-Suchmaschine ist ein Trend, da sie das Sucherlebnis für mobile Benutzer erheblich verbessert. Da mobile Bildschirme sehr klein sind, erleichtert das Anbieten einer Vollbild-Überlagerung den Benutzern das Schreiben und Durchsuchen Ihrer Website.

Das Erstellen einer Engine im Vollbildmodus zu üben, kann etwas schwierig sein, da Code erforderlich ist. Aus diesem Grund wurde der Prozess durch ein einfaches Plugin vereinfacht.

Hinzufügen einer Vollbild-Suchmaschine zu WordPress

Als erstes müssen Sie das Plugin installieren und aktivieren Wordpress Full Screen Search Overlay. Das Plugin Wordpress Full Screen Overlay Searh funktioniert ohne Konfiguration und hat keine Konfigurationsparameter. Sie müssen nur Ihre Site besuchen und auf das Suchfeld klicken, um das Plugin in Aktion zu sehen.

fullscreensearchoverlay

Es ist wichtig zu beachten, dass dieses Plugin mit den Standardsuchfunktionen von WordPress kompatibel ist. Es funktioniert auch gut mit SearchWPDies ist ein Premium-Plugin, das die WordPress-Standardsuche verbessert.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Leider funktioniert das Plugin nicht funktionieren Google Custom Search.

Anpassen der Suchmaschine im Vollbildmodus

Le-Plugin WordPress-Vollbild-Suchüberlagerung kommt mit einem eigenen Stylesheet. Um das Aussehen der Suchmaschine zu ändern, müssen Sie die CSS-Datei des Plugins bearbeiten oder! Wichtig in der CSS-Sprache verwenden.

Zunächst müssen Sie über einen FTP-Client eine Verbindung zu Ihrer Website herstellen. Sobald Sie angemeldet sind, müssen Sie den CSS-Ordner des Plugins suchen. Sie finden es auf folgendem Weg:

http://votresite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Hier finden Sie eine Datei finden Vollbild-search.css im Ordner von " css". Laden Sie dann die Datei auf Ihren Computer herunter.

Nachdem Sie die Datei geöffnet haben, können Sie Änderungen daran vornehmen. Zum Beispiel wollten wir den Hintergrund und die Schriftart für unsere Demo-Site ändern.

/**
* 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 gerade die Hintergrundfarbe in Zeile 62 geändert und die Schriftfarbe in Zeile 150 hinzugefügt. Wenn Sie mit CSS gut umgehen können, können Sie sie jederzeit ändern. andere Einstellungen nach Belieben.

Sobald Sie fertig sind, können Sie die Datei per FTP aus dem CSS-Ordner hochladen. Sie können die Änderungen jetzt auf Ihrer Website anzeigen.

fullscreensearchwp

Wichtiger Hinweis:

Wenn Sie in Ihrem eigenen Design verwenden, verwenden Sie am besten die! Important-Tags, damit Aktualisierungen des Plugins Änderungen nicht rückgängig machen.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Laut den Entwicklern und Beratern können Sie das Plugin auch umbenennen und als Teil Ihres Themas betrachten.

Das ist alles ! Wir hoffen, dieser Artikel hilft Ihnen dabei, Ihrer WordPress-Site eine Vollbild-Suchmaschine hinzuzufügen. Sie werden gebeten, Ihre Kommentare und Vorschläge in dem dafür vorgesehenen Bereich zu hinterlassen.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren