Så här add to ett överlägg för search i helskärm i WordPress

Nyligen frågade en av våra läsare om vi kunde skriva en tutorial om hur man lägger till ett överlägg för search på helskärm i WordPress. Du har förmodligen sett detta på populära webbplatser som gillar Wired. När en användare klickar på search-iconen öppnas sökboxen och täcker hela vyn vilket kan förbättra användarupplevelsen på mobila enheter. I den här artikeln visar vi you hur du add to ett överlägg för fullskärms search i WordPress.

Fullskärms-sökning håller långsamt på att bli en trend eftersom det drastiskt förbättrar sökupplevelsen för mobila användare. Eftersom mobilskärmar är mycket små gör du det enkelt för användare att skriva och göra search på din website genom att erbjuda ett överlägg för helskärm.

När vi först fick denna tutorial request visste vi att det skulle krävas en del kod. Vårt mål på WPBeginner är att göra saker så enkla som möjligt.

När vi hade slutfört att skriva tutorialen insåg vi att det var en alltför komplicerad process, och att den snarare borde omslutas av ett enkelt plugin.

För att göra det enkelt har vi skapat en tutorial video om hur du lägger till ett överlägg för search i helskärm som du kan titta på under.

Om du bara vill följa textinstruktioner kan du följa vår steg-för-steg tutorial om hur du lägger till ett överlägg för fullskärms search i WordPress.

Lägga till överlägg för search i helskärm i WordPress

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

WordPress Full Screen Overlay Search plugin fungerar direkt från boxen, och det finns inga Settings för dig att konfigurera.

Du kan helt enkelt besöka din website och click på search boxen för att se pluginet i action.

Vänligen obs/observera, att detta plugin fungerar med den utvalda standard WordPress funktionen. Det fungerar också bra med SearchWP, som är ett premium plugin som kraftigt förbättrar standard WordPress search.

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

Customize överlägg för search på helskärm

Tillägget WordPress Full Screen Search Overlay kommer med sin egen stylesheet. För att ändra utseendet på överlägget för search måste du editera pluginets CSS-fil eller använda !important i CSS.

Först måste du ansluta till din website med hjälp av en FTP-klient. Om du inte är van vid att använda FTP kan du ta en titt på vår guide om hur du uppladdar filer till WordPress med FTP.

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

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

You will find a file full-screen-search.css inside css folder. Du måste downloada den här filen till din dator.

Öppna filen som du just har downloadat i en plain text editor som gillar Notepad. Du kan göra några ändringar i den här filen. Till exempel ville vi ändra bakgrundsfärgen och fonten för att matcha vår demo website.

/**
* 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ärg på rad 62 och lagt till font-färg på rad 150. Om du är duktig på CSS får du gärna ändra andra stilregler också.

När du är klar kan du uploada den här filen tillbaka till plugins CSS folder med hjälp av FTP. Du kan nu se dina ändringar genom att besöka din website.

Viktig obs/observera:

Om du använder detta i ditt eget theme, är det bättre att använda !important tags så att plugin-uppdateringarna inte åsidosätter 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 detta plugin eftersom alla andra sätt att skriva denna tutorial skulle ha varit för komplicerade för nybörjare användare.

Vi hoppas att den här artikeln hjälpte dig att add to full screen search overlay till din WordPress site. Du kanske också vill se vår guide om hur du lägger till en search toggle-effekt i WordPress

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