Hur man lägger till ett helskärmssököverlägg i WordPress

Nyligen frågade en av våra läsare om vi kunde skriva en handledning om hur man lägger till en helskärmssökningsöverlägg i WordPress. Du har förmodligen sett detta på populära webbplatser som Wired. När en användare klickar på sökikonen öppnas sökrutan och täcker hela skärmen, vilket kan förbättra användarupplevelsen på mobila enheter. I den här artikeln visar vi dig hur du lägger till ett helskärmssökningsöverlägg i WordPress.

Helskärmssökningen blir långsamt en trend eftersom den drastiskt förbättrar sökupplevelsen för mobilanvändare. Eftersom mobilskärmar är mycket små, genom att erbjuda ett helskärmsöverlägg, gör du det enkelt för användare att skriva och söka på din webbplats.

När vi först fick den här handledningsförfrågan visste vi att den skulle kräva lite kod. Vårt mål på WPBeginner är att göra saker så enkla som möjligt.

När vi hade skrivit klart guiden insåg vi att det var en alltför komplicerad process, och att den snarare borde paketeras i ett enkelt plugin.

För att göra det enkelt har vi skapat en videoguide om hur du lägger till ett helskärmssökningsöverlägg som du kan se nedan.

Men om du bara vill följa textinstruktioner kan du följa vår steg-för-steg-handledning om hur du lägger till ett helskärmssökningsöverlägg i WordPress.

Lägga till en helskärmssökningsöverlägg i WordPress

Det första du behöver göra är att installera och aktivera pluginet WordPress Full Screen Search Overlay. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

WordPress Full Screen Overlay Search-plugin fungerar direkt ur lådan, och det finns inga inställningar för dig att konfigurera.

Du kan helt enkelt besöka din webbplats och klicka på sökrutan för att se pluginet i aktion.

Observera att pluginet fungerar med standardfunktionen för WordPress-sökning. Det fungerar också utmärkt med SearchWP, som är ett premium-plugin som kraftigt förbättrar standard-WordPress-sökningen.

Tyvärr fungerar inte detta plugin med Google Custom Search.

Anpassa helskärmssökningsöverlägg

WordPress-pluginet för helskärmssököverlägg levereras med sin egen stilmall. För att ändra utseendet på sököverlägget måste du redigera pluginets CSS-fil eller använda !important i CSS.

Först måste du ansluta till din webbplats med en FTP-klient. Om du är nybörjare på att använda FTP, ta en titt på vår guide om hur man laddar upp filer till WordPress med FTP.

När du är ansluten måste du lokalisera pluginens CSS-mapp. Du hittar den under följande sökväg:

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

Du hittar en fil full-screen-search.css inuti CSS-mappen. Du behöver ladda ner den här filen till din dator.

Öppna filen du precis laddade ner i en enkel textredigerare som Anteckningar. Du kan göra vilka ändringar som helst i den här filen. Vi ville till exempel ändra bakgrunds- och teckensnittsfärgen så att den matchar vår demonstrationswebbplats.

/**
* 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; 
}

I den här koden har vi bara ändrat bakgrundsfärgen på rad 62 och lagt till teckensnittsfärg på rad 150. Om du är bra på CSS, ändra gärna andra stilregler också.

När du är klar kan du ladda upp filen tillbaka till pluginens CSS-mapp med FTP. Du kan nu se dina ändringar genom att besöka din webbplats.

Viktig anmärkning:

Om du använder detta i ditt eget tema är det bättre att använda !important-taggar så att pluginuppdateringar inte skriver över några ändringar.

För utvecklare och konsulter kan du också bara byta namn på pluginet och bunta ihop det som en del av ditt tema eller dina tjänster.

Vi skapade bara det här pluginet eftersom alla andra sätt att skriva den här handledningen skulle ha varit för komplicerade för nybörjare.

Vi hoppas att den här artikeln hjälpte dig att lägga till ett helskärmssökningsöverlägg på din WordPress-webbplats. Du kanske också vill se vår guide om hur man lägger till en sökomkopplareffekt i WordPress

Om du gillade den här artikeln, vänligen prenumerera på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.