Hur man gör en Sticky Header i WordPress
Innan vi går in på hur vi kan skapa en sticky header i WordPress, låt oss först förstå vad de är och varför vi kanske vill använda dem. Sticky element, eller fasta element, är speciella typer av element som alltid förblir synliga och inte ändrar sin position när användaren rullar upp eller ner. Dessa element kan nås när som helst på grund av deras placering och är därför mycket användbara för menyer eller andra navigeringsalternativ.
Du vill ge dina användare så många praktiska alternativ som möjligt, för att göra ditt innehåll lättillgängligt och för att minska användarens frustration. Med hjälp av de klibbiga elementen kan användarna snabbt byta från en sida på din webbplats till nästa och hitta exakt vad de behöver. All denna komfort och användarvänlighet gör att din användarupplevelse blir mycket bättre och att du kommer att behålla fler användare.
Nu kommer vi att ta itu med en av huvudtyperna av klibbiga element, den klibbiga rubriken och ett fantastiskt verktyg som kan hjälpa oss att enkelt skapa och anpassa dessa element. Verktyget i fråga heter WP Sticky.
Det finns många olika sätt att skapa klibbiga rubriker förutom WP Sticky. Du kan till och med skapa dessa klibbiga element med ren HTML- och CSS-kod, men det kräver lite teknisk kunskap och är en tidskrävande process. Denna plugin är en mycket enklare lösning på problemet och är extremt nybörjarvänlig.
Innan vi kan börja använda WP Sticky måste vi först ladda ner det och installera insticksprogrammet. Eftersom detta är en mycket enkel process kommer vi inte att slösa bort någon tid på det. Låt oss istället gå direkt till att skapa vår allra första sticky header.
Det första vi behöver göra är att gå in i plugins-sektionen i vår WordPress adminpanel; därifrån väljer du WP Sticky Pro och klickar sedan på Inställningar.
Vi kommer att hälsas med dessa alternativ där vi måste välja Lägg till nytt klibbigt element.
När det är gjort kommer vi att se en ny post under fliken Dina klibbiga element som heter Sticky Element #1. Grattis, du har skapat ditt första klibbiga element, men det finns mycket mer att göra innan vi har en funktionell klibbig rubrik. Som du kan se finns det få olika inställningskategorier för vårt klibbiga element.
Låt oss kolla in dem mer i detalj.
Det är här vi kommer att namnge vårt element och välja exakt vad vi vill göra klibbigt.
För det första måste vi ge vårt klibbiga element ett namn; i det här fallet blir det Sticky Header.
Därefter måste vi hitta och välja ett element som vi vill göra klibbigt. Det finns två sätt vi kan uppnå detta.
Visuell plockare
Detta är det bekvämare och enklare alternativet. Gå bara in i Basic-sektionen och välj alternativet Välj element.
När du har gjort det kommer din webbplats att öppnas tillsammans med WP Sticky-menyn högst upp, vilket signalerar att du har gått in i den visuella väljaren. Om du håller pekaren över några av elementen kommer du att märka en gulaktig bruten linje rektangel, som visualiserar området du har valt. Klicka på den med vänsterklick för att välja den.
Detta tar dig tillbaka till inställningssidan för WP Sticky, där du kommer att se den unika identifieraren för det valda elementet. I vårt fall ser det ut ungefär så här.
Klicka sedan på knappen Spara ändringar i det övre högra hörnet, och vi är klara.
Att skriva den unika identifieraren
Om du föredrar och är bekant med det unika ID:t för elementet du vill göra klibbigt, istället för att visuellt välja det, kan du helt enkelt skriva ner dess unika ID.
Visuella alternativ
När vi är klara med att namnge och välja vårt element är det dags att göra det till en rubrik och anpassa det. WP Sticky ger oss en hel del alternativ att göra det.
Eftersom vi vill skapa en rubrik kommer vi att lämna det här alternativet i dess standardläge, vilket är Top. Om du ändrar dig eller om kraven ändras kan du också välja alternativet Nedre.
Mellanslag mellan toppen av sidan och Sticky Element
Ibland kan våra klibbiga element komma för nära toppen av sidan. Vi kan korrigera detta manuellt genom att skriva in antalet pixlar mellan toppen av sidan och vårt angivna sticky element.
Som standard är det här alternativet inte inställt eftersom de flesta av elementen kommer att placeras korrekt automatiskt.
Sök efter Admin Toolbar
Om din webbplats har ett specialiserat administratörsverktygsfält kan det hindra din klibbiga rubrik. Om så är fallet är allt du behöver göra att markera det här alternativet, så kommer problemet att lösas. WP Sticky kommer automatiskt att känna igen storleken på verktygsfältet och reagera därefter.
Ibland vill du ha olika beteenden beroende på vilken enhet dina besökare använder för att se din webbplats. Du kanske inte vill ha en sticky header på mobila enheter. WP Sticky ger dig möjlighet att välja vilka enhetskategorier som ska ha det klibbiga beteendet. I vårt fall kommer vi att välja bort små och medelstora enheter.
Ett annat fall som kan kräva viss manuell anpassning är om det finns element som visas över din klibbiga rubrik. För att förhindra att detta händer måste du öka Z-indexet för din klibbiga rubrik.
Om du är osäker på Z-indexvärdena för de element som överlappar din rubrik, skriv in maxvärdet, 99999, så löser detta problemet.
Det finns två effektinställningar du kan använda. Tona in och glid ner. Vilken du kommer att använda beror helt på dina personliga preferenser och det önskade utseendet på webbplatsen. Experimentera tills du bestämmer dig.
Ytterligare en visuell anpassning av det klibbiga elementet. Beroende på resten av webbplatsen, med hjälp av reglaget, kan vi göra det klibbiga elementet mer eller mindre transparent.
Vad händer om du inte vill att vissa delar av din webbplats ska ha den klibbiga rubriken? Tja, det här reglaget låter dig anpassa startpunkten och slutpunkten där din klibbiga rubrik kommer att visas på din webbplats när du fortsätter att rulla.
Bakgrundsfärg
Tänk om vårt klibbiga element inte syns så tydligt? Pluginet kommer med möjligheten att få det att sticka ut genom att ge det en bakgrundsfärg. För att göra detta, klicka på knappen som visas nedan och välj önskad bakgrundsfärg. Det är så enkelt.
Om du vill göra ännu fler ändringar i ditt klibbiga element som inte täcks av de ovan nämnda alternativen, finns det ett fält där du kan lägga till anpassning genom CSS. En viktig sak att tänka på i det här fallet är att det inte finns något behov av att slå in stilar i väljare. Du behöver inte skriva .classname{color:#FFF;}, istället är allt du behöver skriva color:#FFF;
Vi lämnar det här tomt eftersom det inte längre finns något behov av att anpassa vår sticky demo header.
Efter att ha ändrat alla önskade inställningar, glöm inte att spara ändringarna. Efter att ha gjort detta kan vi gå vidare och klicka på knappen Förhandsgranska Sticky i det övre högra hörnet för att förhandsgranska ändringarna vi har gjort hittills.
Sammanfattningsvis
WP Sticky är ett utmärkt tillägg till vilken webbplats som helst, och det gör utvecklarens jobb mycket enklare. Så enkel att använda, men erbjuder sach detaljerade och djupa anpassningsalternativ, detta plugin kommer garanterat att hjälpa dig att göra den perfekta klibbiga rubriken för din webbplats. Detta är goda nyheter eftersom en klibbig rubrik kan öka webbplatsomvandlingarna avsevärt .
WP Sticky har en Pro-version, som inkluderar alla ovan nämnda alternativ och kostar $5,99 per månad eller $39 för en livstidslicens. Flera olika prisplaner erbjuds också för team och byråer.
Vallery Henings
Vallery Henings är en copywriter och innehållsskribent som specialiserat sig på spökbloggning, e-postmarknadsföringskampanjer och försäljningssidor. Hon är också en älskare av roadtrips, jordnötssmörkakor och ett hundnamn Mimy.