Divi 5: Loop Builder – svoboda při výpisu obsahu

Divi 5 přináší funkci Loop Builder (Tvůrce smyček), která umožňuje vytvářet opakující se obsah z příspěvků nebo taxonomií pomocí jakéhokoli prvku v Divi.

V čem je to jiné než dřív? Loop Builder v Divi 5 je unikátní svou svobodou. Už nejste omezeni na jeden statický modul (jako byl Blog nebo Portfolio modul) s předdefinovaným vzhledem.

Nyní si prostě postavíte vlastní design prvku a řeknete mu, aby se „zacyklil“. Následně si upravíte dotaz (Query) pomocí řady pohodlných voleb a meta filtrů.

Podpora integrací je obrovská:

Funguje s vlastními typy příspěvků (Custom Post Types).
Plná podpora WooCommerce.
Podpora vlastních polí z ACF (Advanced Custom Fields).
A dokonce podpora pro ACF Repeater Fields (opakovač polí)!

Je to neuvěřitelně silná funkce, která dříve vyžadovala placené doplňky. Jak to funguje v praxi, uvidíte ve videu níže. 👇

Jak tvůrce smyček funguje?

Nejdříve si pojďme říct, co to ten „Loop Builder“ vlastně je. Jednoduše řečeno: je to nástroj, který vám umožní vzít obsah z databáze vašeho webu (příspěvky, produkty, kategorie, autory) a zobrazit ho v opakující se smyčce, přičemž máte 100% kontrolu nad designem jednotlivých položek.

Díky tomu můžete vytvořit vlastní blogové výpisy, seznamy produktů, kalendáře událostí, seznamy kurzů a cokoliv dalšího vás napadne. Už nejste odkázáni na to, jak vypadá výchozí Blog modul.

Celý proces probíhá ve třech krocích:

Vytvoříte šablonu: Pomocí běžných Divi modulů a designových nastavení navrhnete vzhled jedné položky (např. jedné karty článku).
Nastavíte dotaz (Query): Určíte, jaký obsah se má do smyčky načítat (např. počet příspěvků, konkrétní typ příspěvku, kategorie atd.).
Připojíte dynamický obsah: Do vaší šablony „napojíte“ data ze smyčky (např. místo statického textu vložíte Nadpis příspěvku, místo obrázku Náhledový obrázek).

Ještě než se pustíme do technických detailů, podívejme se na pár příkladů, co všechno s tím jde v Divi 5 postavit.

Příklad 1: Vlastní blogový výpis

Na první pohled to vypadá jako klasický blog, který znáte z Blog modulu. Ale není. Toto je vlastní smyčka. Autor zde vytvořil šablonu článku (design karty) pomocí běžných Divi prvků. Následně zapnul smyčku na sloupci, který tyto prvky obsahuje, a nastavil, aby se procházely příspěvky. Sloupec se tak zopakuje pro každý článek a díky napojení dynamického obsahu se do každé karty automaticky doplní správný nadpis a náhledový obrázek.

Příklad 2: Vybrané WooCommerce produkty

V této ukázce vidíme smyčku doporučených produktů na domovské stránce e-shopu. Šablona produktu je zde postavena pomocí modulů a skupin uvnitř sloupce, který se cyklí v rámci řádku. Důležité je zde nastavení Dotazu (Query) – ten byl upraven tak, aby vybíral jen konkrétní produkty, které chce prodejce zvýraznit.

Příklad 3: Kalendář událostí (The Events Calendar)

Loop Builder si rozumí i s daty z jiných pluginů. Zde je výpis nadcházejících akcí z pluginu The Events Calendar. Díky novému Flexbox layoutu máte absolutní svobodu v tom, jak bude karta události vypadat. Klíčová je zde podpora vlastních polí (post meta) – do designu si tak můžete dynamicky vytáhnout specifická data, jako je cena vstupenky nebo datum konání akce.

Příklad 4: Slider kurzů z LMS

Smyčkovat (loopovat) nemusíte jen celé sloupce, ale i vnořené položky – například jednotlivé snímky ve slideru. Ve videu je ukázka, kde se v karuselu načítají kurzy z pluginu Tutor LMS. Dříve mělo Divi jen omezený „Post Slider“. Nyní, díky Loop Builderu a dynamickému obsahu, můžete v dynamický slider proměnit jakýkoli prvek.

Příklad 5: Rozcestník kategorií WooCommerce

Loop Builder neumí jen příspěvky. Umí procházet i taxonomie (kategorie, štítky). Tento příklad ukazuje hlavní stránku obchodu, která vypisuje všechny kategorie produktů. Každá položka ve smyčce tedy není produkt, ale kategorie. Název a obrázek kategorie se opět tahají dynamicky z metadat.

Příklad 6: Autoři blogu

Poslední ukázka dokazuje variabilitu systému – smyčka uživatelů. Stránka automaticky vypisuje všechny uživatele, kteří mají na webu roli „Autor“. Dynamicky se pro každého z nich načte jméno, avatar (profilová fotka) a biografie.

Detailní možnosti nastavení Query (Dotazu)

Divi 5 nám dává do rukou kompletní kontrolu nad tím, co přesně se ve smyčce zobrazí. Nejde jen o jednoduchý výběr, ale o velmi podrobný systém filtrování.

Základní nastavení zdroje:

Query Type (Typ dotazu): Zde určujete, co vlastně chcete smyčkovat – zda to budou Příspěvky (Posts), Taxonomie (Terms) nebo Uživatelé (Users).
Post Type (Typ příspěvku): Pokud jste zvolili příspěvky, vyberete konkrétní typ – např. blogové články, WooCommerce produkty, Projekty nebo jakýkoli Custom Post Type.
Terms (Taxonomie): Pokud smyčkujete taxonomie, volíte konkrétní typ, např. Kategorie nebo Štítky.
Users (Uživatelé): V případě uživatelů můžete filtrovat podle jejich role na webu (např. jen Autoři nebo Přispěvatelé).

Filtrování obsahu:

Include/Exclude Terms: Můžete zahrnout nebo naopak vyloučit příspěvky, které spadají do specifických kategorií či štítků.
Include/Exclude Specific Posts: Umožňuje ručně vybrat konkrétní příspěvky, které se mají (nebo nemají) zobrazit. To je ideální pro sekce typu „Vybrané produkty“ nebo „Doporučené články“.

Řazení a zobrazení:

Order By: Nastavení řazení výsledků (vzestupně nebo sestupně) podle různých kritérií.
Posts Per Page: Kolik položek se má zobrazit v rámci jedné stránky/smyčky.
Post Offset (Posun): Umožňuje přeskočit určitý počet prvních položek (např. „zobraz každý n-tý“). Díky tomu můžete na jedné stránce vytvořit více smyček se stejným dotazem, které se ale nebudou překrývat (např. první smyčka ukáže nejnovější článek, druhá smyčka začne až od druhého v pořadí).

Pokročilé Meta Query (Dotazy na metadata): Tato část je klíčová pro vývojáře a pokročilé weby. Umožňuje filtrovat obsah na základě vlastních polí (custom fields).

Meta Key: Název klíče v databázové tabulce post_meta.
Meta Value: Hodnota, kterou u daného klíče hledáte.
Compare (Porovnání): Jak se má hodnota porovnávat (např. „je rovno“, „je větší než“, „obsahuje“).
Type: Typ dat, se kterými pracujete (číslo, datum, čas atd.).

Podpora vlastních polí (Custom Fields) a ACF

Loop Builder v Divi 5 pracuje s vlastními poli dvěma hlavními způsoby:

Filtrování: Pomocí Meta Queries můžete na základě hodnot v post_meta tabulce rozhodovat, které příspěvky se mají ve smyčce zobrazit (např. zobrazit jen produkty s barvou „červená“).
Zobrazení: Hodnoty z vlastních polí (uložené v tabulce wp_postmeta) můžete přímo vypsat jako obsah uvnitř vaší šablony.

Plná podpora Advanced Custom Fields (ACF)

Divi 5 si nyní skvěle rozumí s pluginem ACF. Když v nastavení vybíráte dynamický obsah, všechna pole vytvořená přes ACF najdete přehledně seřazená hned na začátku seznamu, včetně jejich popisků.

Podpora pro ACF Repeater Fields (Opakovač)

Tohle je funkce, na kterou mnozí čekali. Loop Builder podporuje i ACF Repeater Fields. Pokud máte pomocí ACF vytvořené opakovací pole, stačí ho v nastavení modulu vybrat v nabídce Query Type. Divi pak automaticky pochopí strukturu a umožní vám tato data „smyčkovat“ stejně snadno jako běžné příspěvky.

Závěr

Loop Builder v Divi 5 není jen „další nová funkce“. Je to zásadní změna v filozofii celého builderu. Doposud jsme byli zvyklí, že na jednoduché věci stačí Divi, ale na složitější výpisy dat (Custom Post Types, ACF) potřebujeme buď drahé pluginy třetích stran, nebo vlastní PHP kód.

S příchodem Loop Builderu a nativní podporou pro ACF Repeater Fields tato bariéra padá.

Divi 5 nám dává nástroj, jak vizuálně nadefinovat vzhled jakýchkoliv dat z databáze a zobrazit je přesně tam, kde potřebujeme. Pro běžné uživatele to znamená konec nudných blogů „podle šablony“. Pro pokročilé tvůrce to znamená, že Divi se stává plnohodnotným nástrojem i pro komplexní databázové projekty, aniž by nám svazovala ruce.

Prohlédněte si i další novinky v Divi 5