Hvis det er ett ord du vil assosiere med WordPress, ville det være «tilpassbarhet.» Det er det alle kjernefunksjonene, pluginene og temaene er for – for å forme utseendet og oppførselen til nettstedet ditt og få det til å passe dine ønsker og behov. Det er derfor du kan gjøre fantastiske ting som å tilpasse nettsidefarger, legge til forskjellige elementer som prislister, og bare generelt bruke de tingene du trenger for å få nettstedet til å se ut og spille den rollen du har i tankene dine for det.
Det er selvfølgelig noen tilpassbare elementer folk har en tendens til å overse. Rullefeltet, den linjen i nettleseren din som beveger seg mens du ruller en side og lar deg navigere raskere gjennom lange sider, er en av dem. Hvis du vil at folk som besøker nettstedet ditt skal behandles med en rullefelt som i det minste samsvarer med fargeskjemaet til nettstedet ditt, kan du få det til.
I denne artikkelen viser vi deg:
Hvis du tenker på å legge til et tilpasset rullefelt på WordPress-nettstedet ditt, de to hovedalternativene du har er å velge en plugin eller å tilpasse rullefeltet ved hjelp av CSS. Begge disse alternativene har sine fordeler og ulemper som kan påvirke valget ditt.
Hvis du bruker plugin-en til å legge til en egendefinert rullefelt, vil du skape en varig endring – så lenge plugin-en er installert. Det er så enkelt som å installere en plugin og leke med innstillingene til du har funnet det som fungerer best for deg.
Ulempen med å bruke plugin er at det kan redusere hastigheten på nettstedet ditt. Selv om det bare er millisekunder, har disse en tendens til å øke når du bruker nok av disse små og tilsynelatende ubetydelige pluginene.
Du vil imidlertid ikke ha hastighetsproblemer når du bruker CSS. Du trenger ikke å installere noe – du vil kunne gjøre alle endringene gjennom utseendekunden på Utseende > Tilpass > Ekstra CSS. Koden er heller ikke så vanskelig å lære. Tilpasseren vil vise deg endringene i sanntid, noe som er en fin bonus.
Problemet med denne metoden er imidlertid at du risikerer å miste tilpasningene dine med en temaoppdatering. Dette er grunnen til at det generelt anbefales å bruke et undertema når du gjør slike endringer.
Det er et par gratis plugins du kan bruke for å legge til en tilpasset rullefelt på WordPress-nettstedet ditt. Vi vil bruke Scroll Styler plugin, da den lar deg sette opptil fire farger på rullefeltet. Gå over til Plugins > Legg til ny, søk etter «scroll styler», og fortsett og installer og aktiver den på nettstedet ditt.
Etter å ha installert plugin, gå over til Innstillinger > Scroll Styler for å få tilgang til plugin-alternativene. De to øverste er rullefeltbredde og rullefeltsporutfylling. Den første av de to vil endre hvor bred rullefeltet er, i piksler. Den andre vil endre polstringen rundt tommelen på rullefeltet.
De neste fire alternativene lar deg angi de forskjellige fargene for rullefeltet. Bakgrunnsfargen for rullefeltsporet er fargen på rullefeltsporet, og den endres ikke. Det gjør imidlertid fargen på tommelen. «Bakgrunnsfarge» er tommelens farge når den ikke er aktiv. Når du holder musepekeren over tommelen med markøren, vil den endre fargen til «svevebakgrunnsfarge.» Når du trykker på tommelen for å rulle siden, vil den endre fargen til «aktiv bakgrunnsfarge.»
Det siste alternativet lar deg angi rullefeltets tommelkantradius. Dette lar deg effektivt runde av tommelens hjørner.
Når du har valgt alternativene, ikke glem å lagre innstillingene og du vil se endringen på nettstedet ditt.
Selv om utvalget av alternativer som tilbys av pluginet kan være litt beskjedne, kan det være mer enn nok til å lage en rullefelt som passer til nettstedets fargevalg.
Det andre alternativet ditt ville være å bruke tilpasset CSS for å endre hvordan rullefeltet ser ut. Som vi nevnte før, må du navigere til Utseende > Tilpass > Ekstra CSS for å gjøre endringer.
Måten å bruke tilpasset CSS for å endre rullefeltet er ved å bruke pseudo-elementer for å tilpasse visse deler av rullefeltet. Du kan tilpasse:
Så når du vil lage et tilpasset rullefelt, kan du bruke disse pseudo-elementene som dette:
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #f6f6f4;
}
::-webkit-scrollbar-thumb {
background: #86af49;
}
::-webkit-scrollbar-thumb:hover {
Background: #E5cdbc
}
Dette vil gjøre standard grå rullefelt til noe som passer bedre for dette temaet.
Husk at du kan legge til skygger, endre radiusen til elementene og gjøre flere ting for å gjøre din egendefinerte rullelinje virkelig spesiell. Du trenger mer avansert kunnskap om CSS for å dra full nytte av denne metoden for å tilpasse rullefeltet. Så igjen, hvis du har nok tid på hendene og er villig til å lære gjennom prøving og feiling – kommer du garantert til å finne noen interessante kombinasjoner.
La oss avslutte det!
Rullefeltet – et nyttig element som ofte blir oversett når det gjelder å tilpasse utseendet til nettstedet ditt. Hvis dette er en feil du ønsker å rette, har du to måter å gjøre det på – enten med en plugin eller ved å legge til en egendefinert CSS. Hver av de to har sine fordeler og ulemper, så det kan være fornuftig å sjekke hvilke nettlesere publikum bruker mest før du velger. Etter det er det bare å tukle med alternativene eller koden til du får tilfredsstillende resultater.
Støtt vårt arbeid ❤️
Hvis du likte denne artikkelen, vurder å gi en tips for å hjelpe oss med å fortsette å publisere kvalitetsinnhold.
