Sådan tilføjes en tilpasset rullepanel i WordPress

Hvis der er ét ord, du vil forbinde med WordPress, ville det være “tilpasning”. Det er, hvad alle kernefunktionerne, plugins og temaer er til – at forme udseendet og adfærden på din hjemmeside og få den til at passe til dine ønsker og behov. Det er derfor, du kommer til at gøre fantastiske ting som at tilpasse hjemmesidens farver, tilføje forskellige elementer som prislister og bare generelt bruge de ting, du skal bruge for at få hjemmesiden til at se ud og spille den rolle, du har i dit sind.

Der er selvfølgelig nogle tilpasselige elementer, folk har en tendens til at overse. Rullebjælken, den bjælke i din browser, der bevæger sig, mens du ruller en side og lader dig navigere hurtigere gennem lange sider, er en af ​​dem. Hvis du ønsker, at de personer, der besøger din hjemmeside, skal behandles med en rullepanel, der i det mindste matcher farveskemaet på din hjemmeside, kan du få det til at ske.

I denne artikel viser vi dig:

Hvad er dine muligheder for at tilføje en tilpasset rullepanel i WordPress?

Hvis du overvejer at tilføje en tilpasset rullepanel til dit WordPress-websted, de to vigtigste muligheder, du har, er at vælge et plugin eller at tilpasse rullepanelet ved hjælp af CSS. Begge disse muligheder har deres fordele og ulemper, som kan påvirke dit valg.

Hvis du bruger pluginnet til at tilføje en brugerdefineret rullepanel, vil du skabe en varig ændring – så længe pluginnet er installeret. Det er så enkelt som at installere et plugin og lege med indstillingerne, indtil du har fundet det, der fungerer bedst for dig.

Ulempen ved at bruge pluginnet er, at det kan gøre dit websted langsommere. Selvom det kun er millisekunder, har disse tendens til at stige, når du bruger nok af disse små og tilsyneladende ubetydelige plugins.

Du vil dog ikke have problemer med hastigheden, når du bruger CSS. Du skal ikke installere noget – du vil være i stand til at foretage alle ændringerne gennem udseendekunden på Udseende > Tilpas > Yderligere CSS. Koden er heller ikke så svær at lære. Customizeren viser dig ændringerne i realtid, hvilket er en pæn bonus.

Problemet med denne metode er dog, at du risikerer at miste dine tilpasninger med en temaopdatering. Det er derfor, det generelt anbefales at bruge et børnetema, når du laver disse typer ændringer.

Sådan tilføjes en tilpasset rullepanel i WordPress ved hjælp af et plugin

Der er et par gratis plugins, du kan bruge til at tilføje en tilpasset rullepanel til dit WordPress-websted. Vi vil bruge Scroll Styler plugin, da det giver dig mulighed for at indstille op til fire farver på din rullepanel. Gå over til Plugins > Tilføj nyt, søg efter “scroll styler”, og fortsæt derefter og installer og aktiver den på din hjemmeside.

Efter installation af plugin, skal du gå over til Indstillinger > Scroll Styler for at få adgang til plugin-mulighederne. De to øverste er rullebjælkens bredde og rullebjælkens sporpolstring. Den første af de to vil ændre, hvor bred din rullebjælke er i pixels. Den anden vil ændre polstringen rundt om rullebjælkens tommelfinger.

De næste fire muligheder giver dig mulighed for at indstille de forskellige farver til rullepanelet. Rullebjælkesporets baggrundsfarve er farven på rullebjælkesporet, og den ændrer sig ikke. Det gør farven på tommelfingeren dog. “Baggrundsfarve” er tommelfingerens farve, når den ikke er aktiv. Når du svæver over tommelfingeren med markøren, vil den ændre sin farve til “hover baggrundsfarve.” Når du trykker på tommelfingeren for at rulle siden, vil den ændre sin farve til “aktiv baggrundsfarve.”

Den sidste mulighed giver dig mulighed for at indstille rullebjælkens tommelfingerkantsradius. Dette giver dig effektivt mulighed for at runde tommelfingerens hjørner af.

Når du har valgt mulighederne, så glem ikke at gemme indstillingerne, og du vil se ændringen på din hjemmeside.

Selvom udvalget af muligheder, som plugin tilbyder, kan være en smule beskedent, kan det være mere end nok til at skabe en rullepanel, der passer til dit websteds farveskema.

Sådan tilpasser du rullepanelet ved hjælp af CSS

Din anden mulighed ville være at bruge tilpasset CSS til at ændre den måde, rullepanelet ser ud. Som vi nævnte før, skal du navigere til Udseende > Tilpas > Yderligere CSS at foretage eventuelle ændringer.

Måden at bruge tilpasset CSS til at ændre rullepanelet er ved at bruge pseudo-elementer til at tilpasse visse dele af rullepanelet. Du kan tilpasse:

Så når du vil oprette en brugerdefineret rullepanel, kan du bruge disse pseudo-elementer som dette:

::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #f6f6f4;
}
::-webkit-scrollbar-thumb {
background: #86af49;
} 
::-webkit-scrollbar-thumb:hover {
Background: #E5cdbc
}

Dette vil gøre den standard grå rullepanel til noget, der passer bedre til dette særlige tema.

Husk, at du kan tilføje skygger, ændre radius af elementerne og gøre yderligere ting for at gøre din tilpassede rullebjælke helt speciel. Du skal bruge mere avanceret viden om CSS for at få fuld fordel af denne metode til at tilpasse rullepanelet. Så igen, hvis du har nok tid på dine hænder og er villig til at lære gennem trial and error – er du forpligtet til at komme med nogle interessante kombinationer.

Lad os afslutte det!

Rullebjælken – et nyttigt element, der ofte overses, når det kommer til at tilpasse udseendet af dit websted. Hvis dette er en forkert, du sigter efter at rette op på, har du to måder at gøre det på – enten med et plugin eller ved at tilføje noget tilpasset CSS. Hver af de to har sine fordele og ulemper, så det kan være klogt at tjekke, hvilke browsere dit publikum bruger mest, før du træffer valget. Herefter er det bare at pille ved mulighederne eller koden, indtil du får tilfredsstillende resultater.