Jos on yksi sana, jonka yhdistäisit WordPressiin, se olisi ”muokattavuus”. Sitä varten kaikki ydinominaisuudet, laajennukset ja teemat on tarkoitettu – muokkaamaan verkkosivustosi ulkoasua ja käyttäytymistä ja tekemään siitä toiveidesi ja tarpeidesi mukainen. Siksi voit tehdä mahtavia asioita, kuten mukauttaa verkkosivuston värejä, lisätä erilaisia elementtejä, kuten hintaluetteloita, ja yleensä käyttää asioita, joita tarvitset saadaksesi verkkosivuston näyttämään ja näyttelemään sitä mitä ajattelet.
Tietysti on joitain muokattavissa olevia elementtejä, jotka ihmiset yleensä jättävät huomiotta. Vierityspalkki, selaimesi palkki, joka liikkuu vierittäessäsi sivua ja jonka avulla voit selata pitkiä sivuja nopeammin, on yksi niistä. Jos haluat, että verkkosivustollasi vierailevia ihmisiä kohdellaan vierityspalkin kanssa, joka vastaa vähintään verkkosivustosi värimaailmaa, voit toteuttaa sen.
Tässä artikkelissa näytämme sinulle:
Jos harkitset mukautetun vierityspalkin lisäämistä WordPress-verkkosivustollesi, kaksi päävaihtoehtoa ovat valita laajennus tai mukauttaa vierityspalkki CSS:n avulla. Molemmilla vaihtoehdoilla on hyvät ja huonot puolensa, jotka voivat vaikuttaa valintaasi.
Jos käytät laajennusta mukautetun vierityspalkin lisäämiseen, luot pysyvän muutoksen – niin kauan kuin laajennus on asennettuna. Se on yhtä helppoa kuin asentaa laajennuksen ja leikkiä asetuksilla, kunnes löydät itsellesi parhaiten sopivan.
Laajennuksen käytön haittapuoli on, että se saattaa hidastaa verkkosivustoasi. Vaikka se olisikin vain millisekunteja, ne yleensä lisääntyvät, kun käytät tarpeeksi näitä pieniä ja merkityksettömältä vaikuttavia laajennuksia.
Sinulla ei kuitenkaan ole nopeusongelmia käytettäessä CSS:ää. Sinun ei tarvitse asentaa mitään – voit tehdä kaikki muutokset asiakkaan ulkoasun kautta osoitteessa Ulkoasu > Mukauta > Lisä-CSS. Koodi ei myöskään ole liian vaikea oppia. Muokkaus näyttää muutokset reaaliajassa, mikä on hieno bonus.
Tämän menetelmän ongelmana on kuitenkin se, että saatat menettää mukautukset teemapäivityksen myötä. Tästä syystä on yleensä suositeltavaa käyttää lapsiteemaa, kun teet tämäntyyppisiä muutoksia.
On olemassa muutamia ilmaisia laajennuksia, joiden avulla voit lisätä mukautetun vierityspalkin WordPress-verkkosivustollesi. Käytämme Vieritä Styler laajennus, koska sen avulla voit määrittää vierityspalkkiin enintään neljä väriä. Suuntaa kohti Plugins > Lisää uusi, etsi ”scroll styler” ja sitten asenna ja aktivoi se verkkosivustollesi.
Kun olet asentanut laajennuksen, siirry kohtaan Asetukset > Scroll Styler päästäksesi laajennusvaihtoehtoihin. Kaksi ylintä ovat vierityspalkin leveys ja vierityspalkin raidan pehmusteet. Ensimmäinen näistä kahdesta muuttaa vierityspalkin leveyden pikseleinä. Toinen muuttaa täyttöä vierityspalkin peukalon ympärillä.
Seuraavat neljä vaihtoehtoa antavat sinun määrittää vierityspalkin eri värit. Vierityspalkin raidan taustaväri on vierityspalkin raidan väri, eikä se muutu. Peukalon väri kuitenkin tekee. ”Taustaväri” on peukalon väri, kun se ei ole aktiivinen. Kun siirrät osoittimen peukalon päälle, se muuttaa värinsä ”hover background color” -väriksi. Kun painat peukaloa vierittääksesi sivua, sen väri muuttuu aktiiviseksi taustaväriksi.
Viimeisen vaihtoehdon avulla voit asettaa vierityspalkin peukalon reunan säteen. Tämän avulla voit pyöristää peukalon kulmat tehokkaasti.
Kun olet valinnut vaihtoehdot, älä unohda tallentaa asetuksia, niin näet muutoksen verkkosivustollasi.
Vaikka laajennuksen tarjoamien vaihtoehtojen valikoima saattaa olla hieman vaatimaton, se voi olla enemmän kuin tarpeeksi luomaan vierityspalkki, joka sopii verkkosivustosi värimaailmaan.
Toinen vaihtoehtosi olisi käyttää mukautettua CSS:ää muuttaaksesi vierityspalkin ulkoasua. Kuten aiemmin mainitsimme, sinun on navigoitava kohteeseen Ulkoasu > Mukauta > Lisä-CSS tehdä muutoksia.
Tapa käyttää mukautettua CSS:ää vierityspalkin vaihtamiseen on käyttää pseudoelementtejä mukauttaaksesi tiettyjä vierityspalkin osia. Voit mukauttaa:
Joten kun haluat luoda mukautetun vierityspalkin, voit käyttää näitä pseudoelementtejä seuraavasti:
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #f6f6f4;
}
::-webkit-scrollbar-thumb {
background: #86af49;
}
::-webkit-scrollbar-thumb:hover {
Background: #E5cdbc
}
Tämä muuttaa oletusharmaasta vierityspalkin jotain, joka sopii paremmin tähän teemaan.
Muista, että voit lisätä varjoja, muuttaa elementtien sädettä ja tehdä muita asioita tehdäksesi mukautetusta vierityspalkistasi todella erityisen. Tarvitset lisätietoa CSS:stä, jotta voit hyödyntää tätä vierityspalkin mukautusmenetelmää. Toisaalta, jos sinulla on tarpeeksi aikaa ja olet valmis oppimaan yrityksen ja erehdyksen kautta – tulet varmasti keksimään mielenkiintoisia yhdistelmiä.
Päätetään se loppuun!
Vierityspalkki – hyödyllinen elementti, joka jää usein huomiotta, kun on kyse verkkosivustosi ulkoasun mukauttamisesta. Jos tämä on virhe, jonka yrität korjata, sinulla on kaksi tapaa tehdä se – joko laajennuksen avulla tai lisäämällä mukautettu CSS. Kummallakin on hyvät ja huonot puolensa, joten ennen valinnan tekemistä voi olla järkevää tarkistaa, mitä selaimia yleisösi käyttää eniten. Sen jälkeen on vain puuhailua vaihtoehtojen tai koodin kanssa, kunnes saat tyydyttäviä tuloksia.
Tue työtämme ❤️
Jos pidit tästä artikkelista, harkitse tipin antamista, jotta voimme jatkaa laadukkaan sisällön julkaisemista.
