Když navrhujete weby WordPress pro své klienty, je použitelnost důležitým faktorem, který je třeba zvážit. Některé techniky používané ke zlepšení uživatelské zkušenosti (UX) na jednom webu však nemusí být těmi nejlepšími metodami pro jiný web.

Jednou z taktik, kterou vývojáři a designéři používají k udržení pozornosti návštěvníků webu, je nekonečné rolování. Ačkoli někteří zastávají názor, že může ve skutečnosti poškodit použitelnost webových stránek, existuje mnoho případů, kdy může být přínosem.

V tomto příspěvku si vysvětlíme, co je nekonečné rolování a které typy webů z něj mohou těžit. Poté vás provedeme třemi metodami, které můžete použít k přidání této funkce na weby svých klientů. Začněme!

Úvod do nekonečného rolování

Konečné rolování je technika webového designu, při které se nový obsah automaticky načítá, když návštěvník dosáhne spodní části stránky. Výsledkem je stálý, zdánlivě nekonečný přísun obsahu.

Populárními příklady webů, které používají nekonečné rolování, jsou sociální sítě, jako je Facebook, Twitter a Pinterest. Můžete se s ním setkat také na blogovacích a zábavních webech, jako jsou Mashable a Buzzfeed:

Začlenění nekonečného posouvání na tyto weby má mnoho výhod. Nejzřejmější je, že šetří čas a poskytuje uživatelům více obsahu, aniž by museli klikat na tlačítko Přečíst více nebo odkazy na stránkování.

Díky menšímu počtu rozptylujících prvků může automatické podávání obsahu také znamenat, že uživatelé zůstanou déle na stránce, což se může projevit vyšší mírou zapojení. Navíc je tato funkce vhodná pro mobilní zařízení.

Ne každý web je však vhodný pro nekonečné posouvání. Pokud máte například cíleně zaměřený web, jako je e-shop, může to uživatelům ztížit nalezení toho, co hledají. Pokud není správně optimalizováno, může také ovlivnit výkon webu.

Na druhou stranu, pokud máte web s lineární strukturou, může být velmi přínosné. Nekonečné posouvání může být užitečné zejména pro účely vyprávění příběhů, ať už prostřednictvím dlouhých blogových příspěvků nebo vizuálního obsahu, jako jsou obrázky.

Jak přidat nekonečné posouvání na klientské weby (3 metody)

Pokud vytváříte klientské weby, které jsou zaměřené na obsah, můžete zvážit přidání funkce nekonečného posouvání. Podívejme se na tři metody, které k tomu můžete použít.

Použití pluginu nekonečného posouvání

Jednou z nejrychlejších a nejjednodušších metod, jak přidat nekonečné posouvání na webové stránky vašich klientů, je použití pluginu. Některé z nich, například Jetpack, obsahují funkce pro implementaci tohoto designového prvku.

Samostatných pluginů pro nekonečné posouvání není příliš mnoho. Nicméně oblíbený, který doporučujeme používat, je Ajax Load More:

Tento doplněk je zdarma a snadno se používá, i když vyžaduje určité znalosti programování. Umožňuje přidat nekonečné rolování pro líné načítání příspěvků, stránek a komentářů.

Po instalaci a aktivaci pluginu můžete nakonfigurovat příslušné parametry dotazů WordPressu na základě různých typů obsahu. Na stránce Nastavení můžete upravit a přizpůsobit, jak se bude Ajax Load More chovat na webových stránkách vašich klientů. Můžete například přidat vlastní CSS:

Plugin obsahuje také nástroj Shortcode Builder, který můžete použít k rychlé úpravě stránek a příspěvků z editoru obsahu nebo souborů šablon. Další funkcí pluginu, která stojí za vyzkoušení, jsou jeho šablony opakovačů:

Můžete si vytvořit vlastní šablonu opakovače a upravit fungování HTML a PHP v rámci zkráceného kódu. Můžete také zahrnout více instancí doplňku Ajax Load More do jednoho příspěvku, stránky nebo šablony.

Ačkoli bezplatný doplněk poskytuje spoustu funkcí pro nekonečné posouvání, k dispozici je také prémiová verze, která odemyká přístup k dalším šablonám. Chcete-li se dozvědět více, můžete se podívat na dokumentaci a stránku podpory Ajax Load More.

Vyberte si motivy s integrovaným nekonečným posouváním

Pokud nechcete na své klientské weby přidávat další doplněk, nezoufejte. Stejného efektu můžete dosáhnout použitím tématu, které má zabudované nekonečné posouvání.

Tato cesta samozřejmě není pro stávající weby nejpraktičtější. Změna tématu webu často vyžaduje rozsáhlou změnu značky. To nestojí zrovna za námahu jen proto, abyste získali přístup k funkci nekonečného posouvání – zejména s ohledem na to, že toho můžete dosáhnout jinými metodami.

Existuje zdravé množství témat WordPressu, která tuto funkci obsahují. Můžete procházet katalog témat WordPress a vyhledávat podle funkce nekonečného posouvání:

Ačkoli samotné téma může být zdarma, mějte na paměti, že pro použití nekonečného posouvání budete možná muset přejít na prémiovou verzi. Existují však i takové, které tuto funkci nabízejí bezplatně, například Minimal Dark.

Jakmile najdete motiv, který se vám líbí a který tuto funkci obsahuje, stáhněte si jej a nainstalujte stejně jako jakýkoli jiný motiv. Většina z nich bude tuto funkci obsahovat v nástroji Theme Customizer.

Například u Minimal Dark najdete možnost nekonečného posouvání tak, že přejdete do Vzhled > Přizpůsobit > Možnosti motivu > Možnosti stránkování:

Pokud chcete pokročilejší funkce, můžete zvážit prémiové téma. Theme Forest má široký výběr, který zahrnuje nekonečné rolování.

Pokyny pro aktivaci a používání funkce nekonečného rolování budou záviset na tématu, které používáte. Proto je nejlepší podívat se do dokumentace vývojáře, kde najdete návod.

Ruční přidání kódu na web

Třetí metodou implementace nekonečného posouvání – kterou můžete upřednostnit, pokud jste zkušený vývojář – je ruční přidání kódu na web. Tato možnost vám dává větší kontrolu a eliminuje potřebu instalace dalšího zásuvného modulu.

Navíc můžete tento kód použít na webech s tématy, která nemají zabudované nekonečné posouvání. Prvním krokem je aktivace funkce prostřednictvím souboru functions.php vašeho tématu.

Za tímto účelem přidejte do souboru následující kód:

Po dokončení tohoto kroku je dalším krokem nastavení funkce Render Parameter. To je část kódu, která se zabývá načítáním příspěvků pro nekonečné rolování ve smyčce.

Aby se příspěvky načítaly průběžně, přidejte funkci mytheme_infite_scroll_init do souboru functions.php vašeho tématu takto:

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

Po přidání těchto dvou fragmentů byste měli být připraveni. Pokud to však nefunguje, možná budete muset ještě změnit téma webu. Starší, zastaralé produkty nemusí nekonečné posouvání vůbec podporovat.

Závěr

Konečné posouvání není pro každého. Existují však weby, například blogy a jiné online publikace s velkým množstvím obsahu, kde může poskytnout lepší UX a dokonce zvýšit zapojení.

V tomto článku jsme probrali tři metody, které můžete použít k přidání nekonečného posouvání na klientské weby:

1. Použijte doplněk pro nekonečné posouvání.
2. Vyberte si témata s integrovaným nekonečným posouváním.
3. Ručně přidejte kód na web.

Přidejte kód na web.