Så här lägger du till en fullskärms Search Overlay i WordPress

Nyligen frågade en av våra läsare om vi kunde skriva en handledning om hur man lägger till en fullskärmssökning i WordPress. Du har nog sett det här på populära webbplatser som Wired. När en användare klickar på sökikonen öppnas sökrutan och täcker hela skärmen som kan förbättra användarupplevelsen på mobila enheter. I den här artikeln kommer vi att visa dig hur du lägger till en fullskärmssökning i WordPress.

Fullskärmssökningen blir långsamt en trend eftersom det förbättrar sökupplevelsen drastiskt för mobila användare. Eftersom mobila skärmar är väldigt små, 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 handledningen begärde vi att det skulle kräva lite kod. Vårt mål hos WPBeginner är att göra saker så enkla som möjligt.

När vi var färdiga med att skriva handledningen så insåg vi att det var för komplicerat av en process, och det skulle snarare vara inslaget i en enkel plugin.

För att göra det enkelt, har vi skapat en videohandledning om hur du lägger till ett överlägg för fullskärmsökning som du kan titta nedan.

Men om du bara vill följa textinstruktionerna kan du följa våra stegvisa handledning om hur du lägger till en fullskärmssökning i WordPress.

Lägga till överlägg i Full Screen Search i WordPress

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

WordPress Full Screen Overlay Sök plugin fungerar utanför rutan, 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 plugin in action.

Observera att plugin fungerar med standard WordPress-sökfunktionen. Det fungerar också bra med SearchWP, vilket är ett premium plugin som förbättrar den vanliga WordPress-sökningen.

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

Anpassa överlägg över hela skärmen

WordPress Full Screen Search Overlay-plugin levereras med sitt eget stilark. För att ändra utseendet på sököverlägget måste du redigera plugins CSS-fil eller använda! Viktigt i CSS.

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

När du är ansluten måste du hitta pluginens CSS-mapp. Du hittar den på följande sätt:

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

Du hittar en fil full-screen-search.css inuti css-mappen. Du måste ladda ner den här filen till din dator.

Öppna filen, du laddade bara ned i en vanlig textredigerare som Anteckningsblock. Du kan göra några ändringar i den här filen. Vi ville till exempel ändra bakgrunds- och teckensfärgen för att matcha vår demo-webbplats.

 / ** * Återställ * - Förhindrar teman och andra pluginprogram från att använda egna stilar till vår fullständiga skärm sökning * / # helskärms-sökning, # helskärmssök-knappen, # helskärmssök-knappen.close, # fullskärms-sökformulär, # fullskärms-sökform div, # fullskärms-sökform div-inmatning, # fullskärms-sökformulär div input.search font-family: Arial, sans-serif; bakgrund: none; gränsen: 0 ingen; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; float: none; font-size: 100%; höjd: auto; knipning: normal; list-style: none; beskriva: none; positioner: statisk; text-decoration: none; text-indent: 0; text-shadow: none; text-trans: none; bredd: auto; synlighet: synliga; overflow: synliga; marginal: 0; padding: 0; line-height: 1; box-limning: border-box; -webkit-box-storlek: border-box; -moz-box-storlek: border-box; -webkit-box-shadow: none; -moz-box-shadow: none; -MS-box-shadow: none; -o-box-shadow: none; box-shadow: none; -webkit-utseende: ingen; övergång: ingen; -webkit-övergång: ingen; -moz-övergång: ingen; -o-övergång: ingen; -ms-övergång: ingen;  / ** * Bakgrund * / # helskärms-sökning synlighet: dold; opacitet: 0; z-index: 999998; topp: 0; vänster: 0; bredd: 100%; höjd: 100%; bakgrund: # 1bc69e; / ** * Lägg till några CSS3-övergångar för att visa Full Screen Search * / övergång: opacity 0.5s linear;  / ** * Visa Full Screen Search när Open * / # full-screen-search.open / ** * Eftersom vi använder synlighet och opacitet för CSS övergångsstöd, * definierar vi position: fixed; här så att Full Screen Search inte blockerar * de underliggande HTML-elementen när de inte är öppna * / position: fixed; synlighet: synlig opacitet: 1;  / ** * Sökformulär * / # fullskärms-sökformulär position: relativ; bredd: 100%; höjd: 100%;  / ** * Stäng knapp * / # helskärms-sök-knappen. Nära position: absolut; z-index: 999999; topp: 20px; höger: 20px; typsnittstorlek: 30px; typsnitt: 300; färg: # 999; markör: pekare;  / ** * Sökformulär Div * / # fullskärms-sökform div position: absolute; bredd: 50%; höjd: 100px; topp: 50%; vänster: 50%; marginal: -50px 0 0 -25%;  / ** * Sökformulär Inmatning Platshållare Färg * / # fullskärms-sökform div-inmatning :: - webkit-input-placeholder font-family: Arial, sans-serif; färg: #ccc;  # fullskärms-sökformulär div-inmatning: -moz-placeholder font-family: Arial, sans-serif; färg: #ccc;  # fullskärms-sökformulär div-inmatning :: - moz-placeholder font-family: Arial, sans-serif; färg: #ccc;  # fullskärms-sökformulär div-inmatning: -ms-input-placeholder font-family: Arial, sans-serif; färg: #ccc;  / ** * Sökformulär Inmatning * / # helskärms-sökformulär div-inmatning bredd: 100%; höjd: 100px; bakgrund: #eee; vaddering: 20px; typsnittstorlek: 40px; linjehöjd: 60px; / * Vi har lagt till vår egen typsnitt färg här * / färg: # 50B0A6;  

I den här koden har vi bara ändrat bakgrundsfärg på rad 62 och lagt till teckensnittfärg vid rad 150. Om du är bra med CSS, var god och ändra även andra stilregler.

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

Viktig notering:

Om du använder det här i ditt eget tema, är det bättre att använda! Viktiga taggar så att pluginuppdateringarna inte skulle åsidosätta några ändringar.

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

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

Vi hoppas att den här artikeln hjälpte till att du lägger till överlägg för fullskärmsökning på din WordPress-webbplats. Du kanske också vill se vår guide om hur du lägger till en sökväxlande effekt i WordPress

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