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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Carl says
Will this plugin in the WordPress Repository be updated to work with the latest version of WordPress? also, I am using the Divi theme from elegant Themes, and this does not seem to work at all. Nothing happens when clicking on the search button
Jasper says
Hi There,
Does this plugin work with woo commerce? I need a full screen search function that just searches my site for woo commerce products.
Any help would be much appreciated!!
Sameer Choudhary says
I want to make a submit button below search box , when a full screen overlay search appears. I have tried adding normal input button and button tags as well in the full-screen-search.php, but it doesn’t work. How to accomplish it.
Sameer Choudhary says
I want to add a Submit Button below search box, when the Full Screen Search overlay Appears. Please help me
Viraj Patel says
Thanks for this amazing post but I am trying to integrate this full screen search with the google custom search just like wpbeginner search. How can I do that?
Waseem Safdar says
There appears a ‘light-colored empty space’ below the footer menu in my website InstaTix.pk , I contacted the theme developer and this is what he replied:
”This empty space is added by “Full Screen Search Overlay” plugin.
I tried to test with default WordPress Theme (TwentyTwelve) and I can also see additional empty space on the bottom.
It is better if you can report this specific issue to the plugin developer.”
Oliver Drummond says
Great Plugin! Any chance of adding an option for using ”Esc” key to close the search?
Thanks
Oliver Drummond says
Great post and very good plugin! Thank you!!
Is it possible to add a functionality that makes the fullscreen search box closes when we press the ”Esc” key?
Thank you!
Michael says
Hello, does anyone know how I can overlay a website on my own webpage. I am searching for a plugin but have found none. I would like to overlay a client website on my own when he rents a page on my site. So when the page is visited they see the client website not my original content. Thanks
John Ullyatt says
This is awesome. Very straightforward. How can I make the overlay only a percentage of the screen, rather than the whole thing?
Axel B says
Hello,
I’d like to add a search engine on the help pages of my WP, which are accessible for members only. Can you tell me how to make a restriction for the search engine to the help pages, and not for the whole website please?
Patricia Reszetylo says
Now all we need is a ”child theme” plugin that works with plugins rather than themes….
Jhon says
Nice Post. I am just searching this from the last some time.
Anselm Urban says
Looks great! The only problem I have is that a margin appears below the footer.
Jason says
I’ve got the same problem. Did you ever find a fix?
Stu says
Same here! Any update by chance?
Amben Gran says
Same problem here. Margin appears below the footer. Any update?
Viraj Patel says
you can solve it by some major change in plugin css. I have solved it
Devin says
Ok, so… Care to share?
Jekesh Kumar Oad says
sir i want to know that how we can make the different posts with the same url and different catagory . ex
example . com / games / gta
example . com / computer / gta