En utfällbar sökknapp kan ge din WordPress-webbplats ett renare, mer modernt utseende. Istället för att visa ett fullständigt sökfält i din sidhuvud eller dölja sökningen helt, håller en knapp layouten ren samtidigt som sökningen är lättillgänglig.
Denna typ av designval hjälper till att minska visuell röra samtidigt som en viktig funktion finns inom räckhåll, vilket är särskilt användbart på mindre skärmar eller minimalistiska layouter.
Ännu bättre, det finns enkla och effektiva sätt att lägga till denna funktion i WordPress.
I den här handledningen visar vi dig hur du lägger till en smidig, utfällbar sökknappseffekt till din WordPress-webbplats. Oavsett om du driver en blogg, en företagswebbplats eller en onlinebutik, kan denna lilla uppgradering förbättra användbarheten samtidigt som din design hålls ren och konsekvent.
Vad är sökväxlingseffekten i WordPress?
Sökknappseffekten är en webbdesignteknik som låter dig visa en sökikon istället för ett sökformulär. När en användare klickar på den fälls sökformuläret ut med en animation.
Standardformuläret för sökning i WordPress ser inte särskilt bra ut. Många topp WordPress-teman ersätter redan standardformuläret med sina egna stilar.
Om ditt tema dock fortfarande använder ett statiskt, enkelt sökformulär, kan du använda den här handledningen för att göra det mer användarvänligt.
Med detta i åtanke visar vi dig hur du enkelt lägger till sökningens växlingseffekt i WordPress och gör din webbplats mer interaktiv. Här är en snabb översikt över alla ämnen vi kommer att täcka i den här guiden:
💡 Insidertips: Även om den här handledningen involverar att lägga till ett anpassat kodavsnitt, behöver du inte vara expert. Vi guidar dig genom att kopiera och klistra in nödvändig CSS-kod steg för steg.
Låt oss börja.
Lägga till en sökknappseffekt i WordPress
För att lägga till en sökknappseffekt i WordPress måste du placera ett block för sökformulär eller en widget på din webbplats och sedan lägga till lite anpassad CSS-kod.
Låt oss först se till att du har ett sökformulär på din webbplats.
Lägga till ett sökformulär i ett blocktema med Full Site Editing
Om du använder ett WordPress-block tema med funktionen för fullständig webbplatsredigering, så här lägger du till sökformuläret på din webbplats.
Besök helt enkelt Utseende » Redigerare från din WordPress-instrumentpanel. På redigeringsskärmen vill du lägga till blocket 'Sök' där du vill visa sökformuläret.
Glöm sedan inte att klicka på knappen 'Spara' för att spara dina ändringar.
Lägga till ett sökformulär i klassiska WordPress-teman
För WordPress-teman utan funktionen för fullständig webbplatsredigering kan du lägga till sökblocket eller widgeten i din sidofält eller något widget-redo område.
För att göra detta vill du gå till Utseende » Widgets från din WordPress-instrumentpanel. Sedan kan du lägga till blocket/widgeten 'Sök' i sidofältet där du vill visa sökformuläret.
Låt oss sedan hitta en transparent bild för sökikonen.
För den här handledningen använder vi den här bilden eftersom den är lämplig för mörka bakgrunder (använd den gärna på din webbplats).
Om du behöver skapa en egen sökikon är det bäst att använda en transparent PNG med dimensioner som inte är större än 50×50 pixlar.
Nästa steg är att ladda upp ikonen till din webbplats. Gå helt enkelt till Media » Lägg till ny och klicka på 'Välj filer' för att ladda upp din sökikonsbild.
När den har laddats upp klickar du på knappen ‘Kopiera URL till urklipp’ och klistrar sedan in URL:en i en textredigerare som Anteckningar eller Textredigerare.
Nu när allt är på plats behöver du lägga till lite anpassad CSS på din WordPress-webbplats. Vi rekommenderar att du använder WPCode, det bästa pluginet för kodavsnitt, för att spara din anpassade CSS.
WPCode låter dig enkelt lägga till anpassade kodavsnitt i WordPress. Det är lätt att använda, och din kod kommer inte att påverkas av temauppdateringar eller när du byter till ett annat tema.
Vissa av våra partner varumärken använder det för att lägga till och hantera sina anpassade kodavsnitt. Det har fungerat exceptionellt bra för dem, och du kan lära dig mer om det i vår detaljerade WPCode-recension.
💡 Proffstips: Vi använder den kostnadsfria versionen av WPCode, eftersom den fungerar utmärkt för de flesta webbplatser. Om du senare lägger till många anpassade kodavsnitt kan du vilja uppgradera till WPCode Pro för extrafunktioner som schemalagda kodavsnitt, versionshistorik och mer avancerade kontroller.
Så, låt oss installera och aktivera WPCode-pluginet.
Från din WordPress-instrumentpanel, gå till Plugins » Lägg till nytt plugin.
På nästa skärm använder du sökfältet för att leta efter WPCode.
När du hittar det i resultaten klickar du på knappen ‘Installera nu’ och sedan ‘Aktivera’ för att slå på det.
Om du behöver hjälp kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering besöker du sidan Kodavsnitt » + Lägg till avsnitt i din administratörspanel för att öppna WPCode Snippet Library.
Håll muspekaren över alternativet ‘Lägg till din anpassade kod (nytt avsnitt)’ och klicka på knappen ‘+ Lägg till anpassat avsnitt’ när den visas.
Därefter visas en lista med kodtyper på skärmen.
För den här handledningen, låt oss välja alternativet ‘HTML Snippet’. Detta beror på att du kommer att ladda in den anpassade CSS:en i webbplatsens sidhuvud med hjälp av HTML.
Därifrån måste du ange en titel för detta kodavsnitt.
Det kan vara vad som helst som hjälper dig att identifiera utdraget.
Nu kan du klistra in följande kod i rutan 'Code Preview':
<style>
.wp-block-search__inside-wrapper .wp-block-search__input {
background-color: transparent;
background-image: url('/url/to/search-icon.png'); /* replace with real icon URL */
background-position: 8px center;
background-repeat: no-repeat;
background-size: 18px 18px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding-left: 34px;
box-sizing: border-box;
transition: width 400ms ease, background-color 400ms ease;
width: 0;
min-width: 0;
overflow: hidden;
}
.wp-block-search__inside-wrapper .wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: none;
width: 230px;
}
.wp-block-search__inside-wrapper .wp-block-search__input::placeholder {
opacity: 0;
}
.search-form .search-submit,
.wp-block-search__button {
display: none;
}
</style>
⚠️ Viktigt: Glöm inte att ersätta /url/to/search-icon.png med den bild-URL du kopierade tidigare. Se till att du behåller enkla citationstecken ‘ ‘ runt URL:en.
Därefter måste du växla omkopplaren 'Inaktiv' till 'Aktiv'.
Glöm sedan inte att klicka på knappen 'Spara avsnitt'.
Och det var allt!
Om du besöker din WordPress-webbplats kan du se växlingseffekten i praktiken på ditt sökformulär.
Felsökning av sökformulärets växlingseffekt
Ovanstående metod skulle fungera med de flesta moderna WordPress-teman som använder widgetblock. För vissa teman kanske den här metoden dock inte fungerar.
Detta kan hända om sökformuläret i ditt WordPress-tema inte har klasserna wp-block-search__inside-wrapper och wp-block-search__input .
I så fall måste du använda Inspektera-verktyget för att ta reda på vilka CSS-klasser som används av ditt WordPress-tema.
Till exempel, i skärmdumpen nedan, använder vårt demo-tema dessa CSS-klasser för sökformuläret.
Om det första kodavsnittet inte fungerade för dig kan du ta bort det och prova följande kod istället.
Den här versionen använder de specifika CSS-klasserna som finns i exemplet ovan. Men du bör ersätta dem med klasserna från ditt eget tema:
<style>
.search-wrap input.s {
background-color: transparent;
background-image: url('/url/to/search-icon.png'); /* replace with real icon URL */
background-position: 8px center;
background-repeat: no-repeat;
background-size: 18px 18px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding-left: 34px;
box-sizing: border-box;
transition: width 400ms ease, background-color 400ms ease;
width: 0;
min-width: 0;
overflow: hidden;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: none;
width: 230px;
}
.search-form .search-submit {
display: none;
}
</style>
⚠️ Viktigt: Kom ihåg att ersätta background-image: url('/url/to/search-icon.png'); med den faktiska URL:en till din ikon. Se till att du behåller enkla citationstecken ‘ ‘ runt URL:en.
Så här såg det ut på vår testwebbplats:
Bonustips: Lägg till en bättre WordPress-sökning för din webbplats
Vissa effekter för växlingsknappen gör bara att ditt WordPress-sökformulär ser snyggt ut. Det påverkar inte kvaliteten på din webbplats sökresultat.
WordPress levereras som standard med en mycket grundläggande sökfunktion. Den här funktionen är ofta långsam, felaktig och kan visa tomma resultat.
Det är här SearchWP, den bästa WordPress-sökpluginen, kommer in. Den låter dig enkelt ersätta standard sökfunktionen med en kraftfull sökmotor.
Vi har testat det för att utforska alla dess funktioner, och du kan se vår fullständiga SearchWP-recension för att lära dig mer.
SearchWP ersätter automatiskt sökformulär, så du behöver inte redigera några temafiler. Den letar efter matchningar överallt på din webbplats och förbättrar drastiskt kvaliteten på sökresultaten.
Den levereras också med en live-sökning-tillägg som omedelbart visar resultat när användare skriver sina sökfrågor. Dessutom har den fullt stöd för e-handel, vilket gör att du kan skapa en smart WooCommerce-sökning-upplevelse i din onlinebutik.
För steg-för-steg-instruktioner, kolla gärna vår guide om hur man förbättrar WordPress-sökning med SearchWP.
FAQ: Lägga till en sökknappseffekt i WordPress
Har du frågor om hur sökfunktionen fungerar eller hur du anpassar den på din WordPress-webbplats? Här är några vanliga frågor vi får, med tydliga svar som hjälper dig.
Behöver jag kunna koda för att lägga till en sökknappseffekt?
Inte riktigt. Även om en grundläggande förståelse för HTML eller CSS kan hjälpa, kan du följa stegen i den här guiden utan någon kodningserfarenhet.
Vad händer om mitt tema inte visar växlingseffekten ordentligt?
Vissa teman kan behöva extra justeringar. Om växlingsknappen inte visas korrekt kan du använda webbläsarens Inspektera-verktyg för att hitta ditt temas CSS-klasser och justera den anpassade CSS:en som visas i handledningen.
Kommer den här sökknappen att fungera på mobila enheter?
Ja! Växlingseffekten är responsiv och bör fungera bra på både datorer och mobiler. Se bara till att testa den på olika skärmstorlekar för att bekräfta att allt ser bra ut.
Kan jag använda vilken bild som helst för sökikonen?
Ja, men det är bäst att använda en transparent PNG-ikon som sticker ut mot din webbplats bakgrund. Vi rekommenderar att hålla den under 50×50 pixlar så att den ser skarp ut och laddas snabbt.
Fler guider för att förbättra din WordPress-sökning
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en växlingsknappseffekt i WordPress. Därefter kan du ha nytta av dessa guider:
- Hur man söker efter kategori i WordPress
- Hur man lägger till flerspråkig sökning i WordPress
- Hur man inkluderar anpassade inläggstyper i WordPress-sökresultat
- Hur man exkluderar sidor från WordPress-sökresultat
- Hur man lägger till röstsökningsfunktion till din WordPress-webbplats
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Prad
Tack för detta.
Standardgränssnittet för Sök-blocket är ganska trist. Jag gillar den här implementeringen. Men när 'Endast knapp' är valt, när användaren klickar på sökikonen, visas sökfältet till vänster och flyttar menyn, vilket förstör användargränssnittet. Finns det ett sätt att få sökfältet att visas under sökknappen, som på många webbplatser? Det tillvägagångssättet verkar mycket renare enligt min mening.
Tack.
WPBeginner Support
That can be a little more complex depending on the implementation but we may look into something like that for a possible future update to the article
Admin
Dennis Muthomi
Jag har denna effekt på en klientwebbplats.
En sak som du bör tänka på när du implementerar den här funktionen är mobilupplevelsen.
På mindre skärmar kan det vara fördelaktigt att justera CSS:en för att säkerställa att den utökade sökfältet inte överlappar med andra element.
Jiří Vaněk
Jag letade efter ett sätt att spara utrymme i min huvudmeny, där sökrutan tog upp ganska mycket plats. Ärligt talat kunde jag inte komma på hur jag skulle spara utrymme eftersom menyn var ganska lång. Så jag försökte minska storleken på sökrutan. Efter att ha läst den här artikeln tillämpade jag din lösning och det är precis vad jag letade efter. Sökning på min webbplats används inte så ofta, och detta är en elegant lösning för att ge utrymme åt huvudmenyn och minska sökrutan till bara nödvändig storlek. Bra jobbat.
WPBeginner Support
Kul att du fann det hjälpsamt!
Admin
James Burns
Tack så mycket. Precis den information jag behövde, presenterad på ett lättförståeligt sätt.
WPBeginner Support
You’re welcome, glad you found our content helpful
Admin
Osh
Hej,
Jag använder ett barn-tema, ska jag lägga dessa koder i föräldratemats filer?
Jag försökte göra det och det fungerar inte, snälla hjälp!!!
Tack
WPBeginner Support
Du vill lägga till koden i ditt barn-tema
Admin
Benjamin Rutledge
Är det möjligt att implementera detta endast på mobilen? Mitt tema har en fin animerad sökfunktion på datorn, men bara en växling för att visa/dölja sökfältet istället för min logotyp på mobilen.
Beth Terry
Hej. Tack så mycket för den här koden. Jag var tvungen att experimentera lite med positioneringen för att få sökknappen att visas där jag vill ha den, och eftersom jag bara ville att den skulle visas i mobilversionen lade jag också till CSS i mediafrågan för skärmar över 800px för att visa hela sökfältet istället för ikonen. Jag fick det att fungera utmärkt, men jag tycker att det är lite komplicerat för personer som bara vill ha något som i princip är "plug and play".
Du kan se resultaten här:
Till alla som tvivlar, JavaScript behövs definitivt inte.
Beth Terry
Dessutom vill jag lägga till att jag använder ett child theme för Twenty Twelve, som kommer med HTML4-sök koden. Att lägga till HTML5-stödet till functions.php löste det inte, så jag kopierade och klistrade in HTML5-sök koden som du postade ovan i mitt tema-header där jag ville att sökrutan skulle vara.
Emily G
Hej där – jag implementerar detta på en webbplats och skulle vilja använda FontAwesome istället för en bild. Jag får inte ikonen att visas, dock. Har du några tips? Jag lägger till typsnittet och ikonens font-family: FontAwesome;
content: “\f002″; till .search-form input[type=”search”]
Tack!
Bradley
Prova detta:
font: normal normal normal 1em/1 FontAwesome;
Steve
Jag hoppades verkligen att detta skulle fungera för mig. Jag klistrade in koden i området Ytterligare CSS i mitt tema (twentytwelvechild), lade till search-icon.png i min temamapp med FTM och lade till add_theme_support(‘html5’, array(‘search-form’)); till min temas functions.php-fil. Jag ser ingen förändring och undrar vad jag har missat. Jag hoppas att någon kan ge mig en ledtråd. tack.
Harmandeep Singh
Det fungerar inte.
Crowd
Tack så mycket, fungerar som en charm.
Tror du att det finns ett sätt att få sökfältet att visas från höger till vänster (till skillnad från från vänster till höger som nu)?
Marimar
Justera texten till höger
text-align: right;
Den glider till andra sidan.
Tony López
Tack! Det fungerar perfekt.
Cato
Ja… precis som jag trodde, det här fungerar inte alls. Hur är det tänkt att det ska fungera utan JS ändå?
Cato
Hmmm, det här är lite gammalt men... ingen javascript krävs egentligen? vilken sorts mörk magi är detta?
WPBeginner Support
Istället för JS använder den här tekniken CSS.
Admin
SiRetu
Tack för koden... Är den responsiv? Jag menar, jag vill att sökfältet ska visas helt på mobilen. Är det möjligt?
Panfi
Not working for me and wonder why
Cassy
Jag fick detta att fungera på Genesis men mitt sökformulär är i min navigeringsmeny, och när skärmbredden är relativt liten flyttas sökformuläret ner.
Sohan
Det fungerar!
Tack så jättemycket!
Anur
Jag tror inte att detta fungerar på Genesis
Cassy
Jag fick det att fungera på Genesis. Du måste flytta search-icon.png till din child theme-bildmapp för Genesis. Sedan, beroende på var du placerar ditt sökformulär, mitt är i navigeringsfältet så det är lite annorlunda, justerar du CSS-stilen efter dina önskemål. Jag var tvungen att modifiera klassen “.genesis-nav-menu .search input” för att få det att fungera.
Laura
Hej Cassy, Kan du ge lite mer information om hur du modifierade .genesis-nav-menu .search input-klassen? Jag verkar inte få det att fungera. Tack!
Maria
Hej! Jag använder Genesis och jag får inte den här effekten att fungera. Några tips om varför?
Anur
ja samma problem jag är på genesis med enteprise pro tema fungerar inte.
Någon som har en lösning för att få detta att fungera på genesis..
Roy
detta är verkligen bra! Är det möjligt att få ikonen att sitta statiskt till höger medan formuläret glider ut åt vänster? Jag kan inte lista ut det!
Joshua Farr
Hälsningar – Tack för denna utmärkta kod. Jag har försökt infoga den på en klients webbplats som jag arbetar med, med hjälp av HTML5-versionen av koden. Jag placerade den extra delen i functions.php och lade till all CSS. Jag lade till en sökikon och fick formuläret att visas som jag vill på webbplatsen – det kommer till och med att utföra alla önskade växlingseffekter – men när jag anger text som jag vill söka efter för att testa det, kan jag inte skicka sökningen för att se sökresultaten. Vi använder ett woocommerce-tema, “Mystile”, som har ett standard sökformulär (som fungerar när det anges) men jag föredrar utseendet och funktionaliteten hos formuläret som nämns på den här sidan.
Vi försökte placera woocommerce-sökformulärskoden sida vid sida med koden du gav ovan, försökte byta ut delar för att 'slå ihop' de två... men utan framgång.
Alla rekommendationer skulle vara oerhört hjälpsamma.
Tack!
-Josh
WPBeginner Support
Det kan finnas många saker som orsakar detta, det är inte möjligt för oss att hjälpa till med kompatibilitetsproblem med teman.
Admin
Rajeesh Nair
Nu är det intressant grejer där. Även om jag bara är nybörjare och faktiskt använder sökfunktionen som följer med bloggtemat som är som en popup (inte exakt en popup dock då dess CSS och inte javascript) och visar en sökfält.
Men vad jag exakt letar efter är hur man visar Google Sök tillsammans med Bloggsökning som finns i populära bloggar som ListVerse och andra. Vänligen guida mig genom detta!
WPBeginner Support
Ta en titt på vår guide om hur du lägger till Google-sökning i WordPress.
Admin
adolf witzeling
Ännu en bra handledning. Jag kommer att lägga till detta på min webbplats – bara för att det är coolt.
alexisnicholson
Koden ser fantastisk ut, jag uppskattar dina ansträngningar, kommer säkert att prova detta för mitt WordPress-projekt.
Codingbrains
Shahraar Khan
En demo skulle vara till hjälp.. Vad innebär användningen av attributet role=\"search\" i form-taggen, vad används attributet \"role\" till?
Susan Silver
Jag har letat efter en enkel handledning om detta. Tack! Har du redan gjort en om glidande menyer som de i Facebooks mobilapp? Dessa menyer blir allt populärare, även för datorappar.
WPBeginner Support
Faktiskt har vi det, kolla hur du lägger till en skjutpanelmeny i WordPress.
Admin