Hoe voeg ik een volledige zoekschermen toe in WordPress

Onlangs vroeg een van onze lezers of we een zelfstudie konden schrijven over het toevoegen van een volledige zoekschermoverlay in WordPress. Je hebt dit waarschijnlijk gezien op populaire sites zoals Wired. Wanneer een gebruiker op het zoekpictogram klikt, wordt het zoekvak geopend en wordt het hele scherm bedekt, waardoor de gebruikerservaring op mobiele apparaten kan verbeteren. In dit artikel laten we u zien hoe u een volledige zoekschermoverlay kunt toevoegen in WordPress.

Het zoeken op volledig scherm wordt langzaam een ​​trend, omdat het de zoekervaring voor mobiele gebruikers drastisch verbetert. Omdat mobiele schermen erg klein zijn, kunt u het voor gebruikers gemakkelijk maken om op uw website te typen en te zoeken.

Toen we voor het eerst dit zelfstudie-verzoek kregen, wisten we dat dit enige code zou vereisen. Ons doel bij WPBeginner is om dingen zo eenvoudig mogelijk te maken.

Toen we klaar waren met het schrijven van de tutorial, realiseerden we ons dat het een te ingewikkeld proces was, en dat het eerder in een eenvoudige plug-in moest worden ingepakt.

Om het gemakkelijk te maken, hebben we een videozelfstudie gemaakt over het toevoegen van een zoekoverlay op volledig scherm die u hieronder kunt bekijken.

Als u echter alleen tekstinstructies wilt volgen, kunt u onze stapsgewijze zelfstudie volgen over het toevoegen van een overlay voor volledig scherm in WordPress..

Overlay voor volledig scherm toevoegen in WordPress

Het eerste wat u hoeft te doen is de plug-in voor WordPress op het volledige scherm installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

WordPress Volledige schermoverlay Zoekplug-in werkt standaard en er zijn geen instellingen die u kunt configureren.

U kunt eenvoudig uw website bezoeken en op het zoekvak klikken om de plug-in in actie te zien.

Merk op dat de plug-in werkt met de standaardzoekfunctie van WordPress. Het werkt ook prima met SearchWP, een premium-plug-in die de standaard WordPress-zoekopdracht aanzienlijk verbetert.

Helaas werkt deze plug-in niet met Google Aangepast zoeken.

Aanpassen van zoekschermen op volledig scherm aanpassen

De plug-in voor zoeken op volledig scherm van WordPress wordt geleverd met een eigen stylesheet. Om het uiterlijk van de zoek-overlay te veranderen, moet je het CSS-bestand van de plug-in bewerken of gebruiken! Belangrijk in CSS.

Eerst moet u verbinding maken met uw website met behulp van een FTP-client. Als u nog niet vertrouwd bent met het gebruik van FTP, bekijk dan onze handleiding over hoe u bestanden kunt uploaden naar WordPress met behulp van FTP.

Zodra je verbonden bent, moet je de CSS-map van de plug-in lokaliseren. U vindt het onder het volgende pad:

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

U zult een bestand vinden full-screen-search.css inside css folder. U moet dit bestand downloaden naar uw computer.

Open het bestand dat je zojuist hebt gedownload in een gewone teksteditor zoals Kladblok. U kunt eventuele wijzigingen in dit bestand aanbrengen. We wilden bijvoorbeeld de achtergrond en de letterkleur aanpassen aan onze demowebsite.

 / ** * Reset * - Voorkomt dat thema's en andere plug-ins hun eigen stijlen toepassen op onze zoekfunctie op volledig scherm * / # schermvullend zoeken, # schermvullend zoeken-knop, # schermvullende zoekknop. Close, # zoekformulier op volledig scherm, # schermvullend zoekformulier div, # schermvullend zoekformulier div input, # schermvullend zoekformulier div input.search font-family: Arial, sans-serif; background: none; rand: 0 geen; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; float: none; font-size: 100%; height: auto; letter-spacing: normaal; list-style: none; schetsen: none; positie: statisch; text-decoration: none; text-indent: 0; text-shadow: none; text-transform: none; width: auto; zichtbaarheid: zichtbaar; overflow: zichtbaar; 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-verschijning: none; overgang: geen; -webkit-overgang: geen; -moz-overgang: geen; -o-overgang: geen; -ms-overgang: geen;  / ** * Achtergrond * / # schermvullend zoeken visibility: hidden; dekking: 0; z-index: 999998; boven: 0; links: 0; breedte: 100%; hoogte: 100%; achtergrond: # 1bc69e; / ** * Enkele CSS3-overgangen toevoegen voor het weergeven van de zoekfunctie op volledig scherm * / overgang: lineaire dekking 0.5s;  / ** * Schermvullende zoekopdracht wanneer Open * / # volledig scherm-doorzoeken.open / ** * Omdat we zichtbaarheid en transparantie voor CSS-overgangsondersteuning gebruiken, * definiëren we positie: vast; hier zodat de zoekfunctie op volledig scherm * de onderliggende HTML-elementen niet blokkeert wanneer deze niet zijn geopend * / position: fixed; zichtbaarheid: zichtbaar; dekking: 1;  / ** * Zoekformulier * / # schermvullend zoekformulier positie: relatief; breedte: 100%; hoogte: 100%;  / ** * Knop Sluiten * / # schermvullend zoeken. Close positie: absoluut; z-index: 999999; top: 20px; rechts: 20px; lettertypegrootte: 30px; font-gewicht: 300; kleur: # 999; cursor: pointer;  / ** * Zoekformulier Div * / # schermvullend zoekformulier div position: absolute; breedte: 50%; hoogte: 100 px; top: 50%; links: 50%; marge: -50px 0 0 -25%;  / ** * Zoekformulier Invoer Tijdelijke aanduiding kleur * / # schermvullende zoekmodus div input :: - webkit-invoer-placeholder font-family: Arial, sans-serif; kleur: #ccc;  # full-screen-zoekformulier div input: -moz-placeholder font-family: Arial, sans-serif; kleur: #ccc;  # schermvullend zoekformulier div input :: - moz-placeholder font-family: Arial, sans-serif; kleur: #ccc;  # schermvullend zoekformulier div input: -ms-input-placeholder font-family: Arial, sans-serif; kleur: #ccc;  / ** * Zoekformulier Invoer * / # schermvullend zoekformulier div input width: 100%; hoogte: 100 px; achtergrond: #eee; opvulling: 20px; lettertypegrootte: 40px; regelhoogte: 60px; / * We hebben hier onze eigen letterkleur toegevoegd * / color: # 50B0A6;  

In deze code hebben we alleen de achtergrondkleur gewijzigd op regel 62 en letterkleur toegevoegd op regel 150. Als je goed bent met CSS, kun je ook andere stijlregels wijzigen..

Als u klaar bent, kunt u dit bestand via FTP uploaden naar de CSS-map van de invoegtoepassing. U kunt nu uw wijzigingen bekijken door uw website te bezoeken.

Belangrijke notitie:

Als u dit in uw eigen thema gebruikt, is het beter om belangrijke tags te gebruiken, zodat de updates van de plug-in geen wijzigingen opheffen..

Voor ontwikkelaars en consultants kunt u de plug-in ook gewoon hernoemen en bundelen als onderdeel van uw thema of services.

We hebben deze plug-in alleen gemaakt omdat alle andere manieren om deze tutorial te schrijven te ingewikkeld zouden zijn voor beginnende gebruikers.

We hopen dat dit artikel u heeft geholpen bij het toevoegen van overlay op volledig scherm naar uw WordPress-site. U kunt ook onze handleiding over het toevoegen van een zoekschakeleffect in WordPress bekijken

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.