Slik legger du til en fullskjermsøkoverlegg i WordPress

Nylig spurte en av våre lesere om vi kunne skrive en veiledning om hvordan du legger til et fullskjermsøkeoverlegg i WordPress. Du har sikkert sett dette på populære nettsteder som Wired. Når en bruker klikker på søkeikonet, åpnes søkefeltet og dekker hele skjermen som kan forbedre brukeropplevelsen på mobilenheter. I denne artikkelen vil vi vise deg hvordan du legger til et overlegg i fullskjerm i WordPress.

Fullskjermsøket blir langsomt en trend fordi det forbedrer søkeopplevelsen drastisk for mobilbrukere. Siden mobilskjermene er svært små, gjør du det enkelt for brukere å skrive og søke på nettstedet ditt ved å tilby et fullstendig skjermoverlegg.

Da vi først fikk denne opplæringsforespørselen, visste vi at det ville kreve noe kode. Vårt mål på WPBeginner er å gjøre ting så enkelt som mulig.

Når vi var ferdige med å skrive opplæringen, innså vi at det var for komplisert av en prosess, og det bør heller pakkes inn i en enkel plugin.

For å gjøre det enkelt, har vi laget en videoopplæring om hvordan du legger til et overlegg for fullskjermsøk som du kan se nedenfor.

Men hvis du bare vil følge tekstinstruksjoner, kan du følge vår trinnvise veiledning om hvordan du legger til et fullskjermsøkoverlegg i WordPress.

Legge til overlegg i fullskjerm i WordPress

Første du trenger å gjøre er å installere og aktivere WordPress Full Screen Search Overlay-plugin. For mer informasjon, se vår trinnvise veiledning om hvordan du installerer et WordPress-plugin.

WordPress Full Screen Overlay Search plugin virker ut av boksen, og det er ingen innstillinger for deg å konfigurere.

Du kan ganske enkelt besøke nettstedet ditt og klikke på søkefeltet for å se pluginet i handling.

Vær oppmerksom på at pluginet fungerer med standard WordPress-søkefunksjonen. Det fungerer også bra med SearchWP, som er et premium-plugin som forbedrer standardversjonen av WordPress.

Dessverre virker dette plugin ikke med Google Custom Search.

Tilpasse overlegg av fullskjermsøk

WordPress Full Screen Search Overlay-plugin leveres med eget stilark. For å endre utseendet på søkeoverlegget, må du redigere pluginens CSS-fil eller bruk! Viktig i CSS.

Først må du koble til nettstedet ditt ved hjelp av en FTP-klient. Hvis du er ny til å bruke FTP, så ta en titt på vår guide for hvordan du laster opp filer til WordPress ved hjelp av FTP.

Når du er koblet til, må du finne pluginens CSS-mappe. Du finner den under følgende sti:

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

Du finner en fil fullskjerm-search.css inne css mappe. Du må laste ned denne filen til datamaskinen din.

Åpne filen, du lastet bare ned i et vanlig tekstredigeringsprogram som Notisblokk. Du kan gjøre noen endringer i denne filen. For eksempel ønsket vi å endre bakgrunns- og skriftfarge for å matche vår demo-nettside.

 / ** * Tilbakestill * - Forhindrer at Temaer og andre pluginprogrammer bruker sine egne stiler til vårt fullskjermsøk * / # fullskjermsøk, # fullskjermsøkeknapp, # fullskjermsøkknapp. Lukk, # fullskjermsøk-skjema, # fullskjermsøkingsform div, # fullskjermsøkingsform divinngang, # fullskjermsøkingsform div input.search font-familie: Arial, sans-serif; bakgrunn: none; grense: 0 ingen; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; float: none; font-size: 100%; height: auto; bokstav-spacing: normal; list-style: none; skissere: none; stilling: statisk; text-decoration: none; tekst-strekpunkt: 0; text-shadow: none; text-transform: none; bredde: automatisk; synlighet: synlig; overløp: synlig; margin: 0; padding: 0; linje-høyde: 1; box-sizing: border-box; -webkit-box-sizing: border-boksen; -moz-box-sizing: border-boksen; -webkit-box-shadow: none; -moz-box-shadow: none; -MS-box-shadow: none; -o-box-shadow: none; box-shadow: none; -webkit-utseende: none; overgang: ingen; -webkit-overgang: ingen; -moz-overgang: ingen; -Overgang: ingen; -ms-overgang: ingen;  / ** * Bakgrunn * / # fullskjermsøk synlighet: skjult; opasitet: 0; z-indeks: 999998; topp: 0; venstre: 0; bredde: 100%; høyde: 100%; bakgrunn: # 1bc69e; / ** * Legg til noen CSS3 overganger for å vise Full Screen Search * / overgang: opacity 0.5s lineær;  / ** * Vis fullskjermsøk når Open * / # full-screen-search.open / ** * Fordi vi bruker synlighet og opasitet for CSS overgangsstøtte, * definerer vi posisjon: fast; her slik at Fullskjermsøk ikke blokkerer * de underliggende HTML-elementene når de ikke er åpne * / posisjon: fast; synlighet: synlig; opasitet: 1;  / ** * Søkeformular * / # fullskjermsøkformular posisjon: relative; bredde: 100%; høyde: 100%;  / ** * Lukk knapp * / # fullskjerm-søk-knappen. Lukk posisjon: absolutt; z-indeks: 999999; topp: 20px; høyre: 20px; skriftstørrelse: 30px; font-weight: 300; farge: # 999; markør: pointer;  / ** * Søkeform Div * / # fullskjermsøk form div posisjon: absolutt; bredde: 50%; høyde: 100px; topp: 50%; venstre: 50%; margin: -50px 0 0 -25%;  / ** * Søkeform Input Plassholder Farge * / # fullskjermsøk skjema div input: - webkit-input-plassholder font-family: Arial, sans-serif; farge: #ccc;  # fullskjermsøk form div input: -moz-placeholder font-family: Arial, sans-serif; farge: #ccc;  # fullskjermsøk form div input :: - moz-placeholder font-family: Arial, sans-serif; farge: #ccc;  # fullskjermsøk-skjema div-inngang: -ms-input-placeholder font-family: Arial, sans-serif; farge: #ccc;  / ** * Søkeform Input * / # fullskjermsøk skjema div input width: 100%; høyde: 100px; bakgrunn: #eee; polstring: 20px; skriftstørrelse: 40px; linjehøyde: 60px; / * Vi har lagt til vår egen skriftfarge her * / farge: # 50B0A6;  

I denne koden har vi bare endret bakgrunnsfarge på linje 62, og lagt til skrifttypefarge på linje 150. Hvis du er god med CSS, kan du også endre andre stilregler også.

Når du er ferdig, kan du laste opp denne filen tilbake til pluginens CSS-mappe ved hjelp av FTP. Du kan nå se endringene dine ved å besøke nettstedet ditt.

Viktig notat:

Hvis du bruker dette i ditt eget tema, så er det bedre å bruke! Viktige koder, slik at plugin-oppdateringene ikke ville overstyre eventuelle endringer.

For utviklere og konsulenter kan du også omdøpe pluginet og pakke det som en del av temaet eller tjenestene dine.

Vi opprettet bare dette pluginet fordi alle andre måter å skrive denne opplæringen på, ville vært for kompliserte for nybegynnere.

Vi håper denne artikkelen hjalp deg med å legge til fullskjermsøkeoverlegg på ditt WordPress-nettsted. Du vil kanskje også se vår veiledning om hvordan du legger til en søkekrypseffekt i WordPress

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.