Kun suunnittelet WordPress-sivustoja asiakkaillesi, käytettävyys on tärkeä huomioon otettava tekijä. Jotkin tekniikat, joita käytetään käyttäjäkokemuksen (UX) parantamiseen yhdellä sivustolla, eivät kuitenkaan välttämättä ole parhaita menetelmiä toisella sivustolla.

Jatkuva vieritys on yksi taktiikka, jota kehittäjät ja suunnittelijat käyttävät pitääkseen sivuston kävijät sitoutuneina. Vaikka jotkut ovat sitä mieltä, että se voi itse asiassa haitata verkkosivustojen käytettävyyttä, on monia tapauksia, joissa siitä voi olla hyötyä.

Tässä postauksessa selitämme, mitä ääretön vieritys on ja minkä tyyppiset sivustot voivat hyötyä siitä. Sitten käymme läpi kolme menetelmää, joilla voit lisätä tämän toiminnallisuuden asiakkaidesi verkkosivustoihin. Aloitetaan!

Esittely äärettömään vieritykseen

Ääretön vieritys on verkkosuunnittelutekniikka, jossa uusi sisältö ladataan automaattisesti, kun kävijä saavuttaa sivun alareunan. Tuloksena on tasainen, loputtomalta vaikuttava sisällönsyöttö.

Suosittuja esimerkkejä ääretöntä vieritystä käyttävistä sivustoista ovat sosiaaliset verkostot, kuten Facebook, Twitter ja Pinterest. Sitä voi nähdä myös blogi- ja viihdesivustoilla, kuten Mashable ja Buzzfeed:

Päätteettömän vierityksen sisällyttämisestä näihin sivustoihin on monia etuja. Mitä ilmeisimmin se säästää aikaa ja tarjoaa käyttäjillesi enemmän sisältöä ilman, että heidän tarvitsee klikata Lue lisää -painiketta tai sivulinkkejä.

Vähemmän häiriötekijän ansiosta sisällön automaattinen syöttö voi myös tarkoittaa, että käyttäjät pysyvät sivustolla pidempään, mikä voi johtaa korkeampaan sitoutumisasteeseen. Lisäksi tämä ominaisuus on mobiiliystävällinen.

Jokainen verkkosivusto ei kuitenkaan sovellu äärettömään vieritykseen. Jos sinulla on esimerkiksi tavoitteellinen verkkosivusto, kuten verkkokauppa, käyttäjien voi olla vaikea löytää etsimänsä. Se voi myös vaikuttaa sivuston suorituskykyyn, jos sitä ei ole optimoitu oikein.

Toisaalta, jos sivustolla on lineaarinen rakenne, se voi olla erittäin hyödyllistä. Ääretön vieritys voi olla erityisen hyödyllistä tarinankerronnan kannalta, olipa kyse sitten pitkistä blogikirjoituksista tai visuaalisesta sisällöstä, kuten kuvista.

Miten lisätä ääretön vieritys asiakassivustoihin (3 menetelmää)

Jos luot asiakassivustoja, jotka ovat sisältöpainotteisia, voit harkita äärettömän vieritysominaisuuden lisäämistä. Tarkastellaan kolmea menetelmää, joita voit käyttää tähän.

Käytä ääretön vieritys -liitännäistä

Yksi nopeimmista ja helpoimmista menetelmistä, joilla voit lisätä äärettömän vierityksen asiakkaiden verkkosivustoihin, on käyttää liitännäistä. Joissakin, kuten Jetpackissa, on ominaisuuksia tämän suunnitteluelementin toteuttamiseen.

Ei ole liikaa itsenäisiä loputtoman vierityksen lisäosia. Suosittu, jota suosittelemme kuitenkin käyttämään, on Ajax Load More:

Tämä lisäosa on ilmainen ja helppokäyttöinen, vaikkakin se vaatii jonkin verran ohjelmointiosaamista. Sen avulla voit lisätä loputtoman vierityksen laiskan latauksen viestejä, sivuja ja kommentteja varten.

Asennettuasi ja aktivoituasi lisäosan voit määrittää asiaankuuluvat WordPressin kyselyparametrit eri sisältötyyppien perusteella. Asetukset-sivulla voit säätää ja mukauttaa, miten Ajax Load More käyttäytyy asiakassivustoillasi. Voit esimerkiksi lisätä oman mukautetun CSS:n:

Lisäosa sisältää myös Shortcode Builderin, jonka avulla voit muokata sivuja ja viestejä nopeasti sisältöeditorista tai mallitiedostoista. Toinen tarkistamisen arvoinen lisäosan ominaisuus on sen Repeater-mallit:

Voit tehdä oman repeater-mallisi ja säätää, miten HTML ja PHP toimivat lyhytkoodin sisällä. Voit myös sisällyttää useita Ajax Load More -lisäosan esiintymiä yhteen viestiin, sivuun tai malliin.

Vaikka ilmainen lisäosa tarjoaa runsaasti ominaisuuksia äärettömään vieritykseen, on myös premium-versio, joka avaa pääsyn useampiin malleihin. Jos haluat lisätietoja, voit tutustua Ajax Load More -dokumentaatioon ja tukisivuun.

Valitse teemoja, joissa on sisäänrakennettu ääretön vieritys

Jos et halua lisätä toista lisäosaa asiakassivuillesi, ei hätää. Voit saavuttaa saman vaikutuksen käyttämällä teemaa, jossa on sisäänrakennettu ääretön vieritys.

Tämä reitti ei tietenkään ole käytännöllisin olemassa oleville sivustoille. Sivuston teeman vaihtaminen vaatii usein laajaa uudelleenbrändäystä. Tämä ei ole aivan vaivan arvoista vain siksi, että saisi käyttöönsä äärettömän vierityksen ominaisuuden – varsinkin kun ottaa huomioon, että sen voi saavuttaa muilla menetelmillä.

On olemassa terve määrä WordPress-teemoja, jotka sisältävät tämän toiminnallisuuden. Voit selata WordPress-teemahakemistoa ja tehdä haun ääretön vieritys -ominaisuuden perusteella:

Vaikka teema itsessään voi olla ilmainen, pidä mielessä, että saatat joutua päivittämään premium-versioon, jotta voit käyttää ääretöntä vieritystä. On kuitenkin joitakin, jotka tarjoavat toiminnon ilmaiseksi, kuten Minimal Dark.

Kun löydät mieleisesi teeman, joka sisältää ominaisuuden, lataa ja asenna se samalla tavalla kuin mikä tahansa muu teema. Useimmat sisältävät ominaisuuden teeman muokkausohjelmassa.

Esimerkiksi Minimal Dark -teemasta löydät ääretön vieritys -vaihtoehdon menemällä kohtaan Ulkoasu > Mukauta > Teema-asetukset > Sivumääritysasetukset:

Jos haluat edistyneempiä ominaisuuksia, voit harkita premium-teemaa. Theme Forestilla on laaja valikoima, joka sisältää äärettömän vierityksen.

Ohjeet äärettömän vierityksen ominaisuuden aktivointiin ja käyttöön riippuvat käyttämästäsi teemasta. Siksi on parasta tarkistaa ohjeet kehittäjän dokumentaatiosta.

Koodin lisääminen manuaalisesti sivustoosi

Kolmas tapa toteuttaa ääretön vieritys – ja se voi olla suositeltavampi, jos olet kokenut kehittäjä – on lisätä koodia manuaalisesti sivustoosi. Tämä vaihtoehto antaa sinulle enemmän kontrollia ja poistaa tarpeen asentaa ylimääräinen lisäosa.

Lisäksi voit käyttää tätä koodia sivustoilla, joiden teemoissa ei ole sisäänrakennettua loputonta vieritystä. Ensimmäinen vaihe on aktivoida ominaisuus teemasi functions.php-tiedoston kautta.

Tehdäksesi tämän, lisää seuraava koodi tiedostoon:

Kun tämä on valmis, seuraava vaihe on asettaa Render Parameter -toiminto. Tämä on se osa koodia, joka käsittelee viestien lataamista silmukassa loputonta vieritystä varten.

Tehdäksesi sen niin, että viestit ladataan jatkuvasti, lisää mytheme_infite_scroll_init-funktio teemasi functions.php-tiedostoon näin:

function mytheme_infinite_scroll_render(){get_template_part( 'loop' );}

Kun olet lisännyt nämä kaksi pätkää, sinun pitäisi olla valmis. Jos se ei kuitenkaan toimi, sinun on ehkä vielä vaihdettava sivuston teemaa. Vanhemmat, vanhentuneet tuotteet eivät välttämättä tue ääretöntä vieritystä lainkaan.

Johtopäätös

Ääretön vieritys ei sovi kaikille. On kuitenkin joitakin verkkosivustoja, kuten blogeja ja muita sisältöpainotteisia verkkojulkaisuja, joissa se voi tarjota paremman UX:n ja jopa lisätä sitoutumista.

Tässä artikkelissa käsiteltiin kolmea menetelmää, joilla voit lisätä äärettömän vierityksen asiakassivustoillesi:

1. Käytä äärettömän vierityksen liitännäisohjelmaa.
2. Valitse teemoja, joissa on sisäänrakennettu ääretön vieritys.
3. Lisää koodia manuaalisesti sivustollesi.