Přizpůsobení stránky s výsledky vyhledávání ve WordPressu pomocí GeneratePress a GenerateBlocks

Pro konkrétní použití, které se nás týká, při přidávání nového prvku zvolíme Design a stiskneme tlačítko create.

Poté prvku sdělíme, na které stránce jej chceme použít. Za tímto účelem se přesuneme na záložku "Pravidla pro zobrazení" a v poloze vybereme z rozbalovacího seznamu "výsledky hledání".

Prvky nabízejí mnoho možností přizpůsobení. Jak uvidíte, v tomto rozevíracím seznamu můžete vybrat většinu pozic svého blogu, aby se tam tato nastavení uplatnila.

Můžeme se také rozhodnout, které prvky chceme skrýt. V mém případě použiji pouze jednu možnost, abych se obešel bez postranního panelu, takže vyberu možnost"Obsah (bez postranních panelů)".

Existují i jiné způsoby skrytí postranního panelu, ale tento, kromě toho, že je nejjednodušší a nejrychlejší, nám umožňuje vrátit případné změny jednoduchým návratem sem nebo přímo "zrušením publikování" tohoto prvku/šablony do stavu "Návrh", čímž se stránka vrátí do původního vzhledu.

Na kartě"Deaktivovat prvky" navíc můžete nechat stránku prakticky čistou. Dalo by se říci, že se jedná o obdobu šablony stránky "Canvas" od Elementoru, dokonce mírně vylepšenou a jednodušší na používání.

Dobrým zvykem, který je doporučen i na jedné z konfiguračních karet, je dokumentovat, co který Element dělá, interními poznámkami pro případ, že by název nebyl dostatečně popisný nebo bychom nechtěli, aby byl příliš dlouhý.

Zvykl jsem si ke všemu přidávat poznámky a komentáře, protože když provádíte mnoho úprav a časem je nevyhnutelné, že nakonec zapomenete, kde a/nebo jak byly provedeny. V interních poznámkách tak budete mít vždy všechny informace, které potřebujete k tomu, abyste mohli zpětně dohledat své kroky, pokud se něco pokazí nebo pokud chcete provést nové úpravy.

Zveřejněním této šablony bychom již měli stránku s výsledky nakonfigurovanou podle našich představ, ale samozřejmě by nyní byla při vyhledávání prázdná, protože musíme vytvořit a zveřejnit nový prvek, který bude určovat vzhled těchto vyhledávání.

Tuto šablonu můžeme prozatím ponechat v návrhu, než to uděláme, a publikovat ji, až bude vše připraveno.

Šablona vzhledu

Ačkoli se jedná pouze o další prvek, pro tento malý návod jej nazývám "šablona vzhledu", protože jsem byl v té době trochu zmatený z názvosloví věcí a jejich různých možností použití.

Zde začíná skutečná práce na přizpůsobení.

Vytvoříme nový prvek, tentokrát Blok, a dáme mu popisný název.

Přidáme kontejner GenerateBlocks a do něj vložíme blok Query Loop.

A to je to, co uvidíme.

Vybral jsem"Start blank", abych kopíroval nativní strukturu výsledků, ale můžete si vybrat jakoukoli ze šablon, které tento blok nabízí.

Nejlepší bude, když si je vyzkoušíte, než se rozhodnete, protože jakmile začnete pracovat s jednou z nich, nebudete moci použít jinou a pokud ji budete chtít změnit, budete muset celý proces začít od začátku (což by mělo vyřešit GB).

Po výběru šablony vyberte blok dotazovací smyčky (1 ) a vpravo se zobrazí karta "Blok" ( 2). Klikněte na ni a v části "Parametry dotazu" zaškrtněte možnost"Zdědit dotaz ze šablony" (3 ). Nakonec dole v části "Pravidla zobrazení"/"Pozice" (4 ) vyhledáme a nastavíme "Výsledky hledání" a uložíme jako návrh.

Po rozbalení smyčky dotazu se nám zobrazí toto:

Přidáme další blok mřížky uvnitř "Šablony dotazu" a vybereme požadovanou strukturu.

Pro tento příklad použijeme jeden ze dvou kontejnerů , které budou fungovat jako sloupce. Levý sloupec bude místem pro doporučený obrázek a v pravém sloupci se bude zobrazovat úryvek záznamu.

Můžete si také pohrát se třemi kontejnery a prostřední z nich nakonfigurovat jako prostor. Trvám na tom, že možností je mnoho a nejlepší je si s nimi pohrát.

Jak jste si možná všimli, téměř od nuly vytváříme kontejner se všemi částmi, které budou tvořit konečný aspekt toho, co chceme zobrazit. V tomto případě výsledky vyhledávání, ale můžete to udělat s jakýmkoli jiným obsahem.

Nyní tyto dva kontejnery vyprázdníme.

Vybereme první kontejner a nastavíme jeho šířku na 33 (což je ve skutečnosti nastaveno na 33,33), jak uvidíte, když přejdete dolů k možnostem změny velikosti.

Totéž uděláme s druhým kontejnerem a vybereme 66 (který bude automaticky nastaven na 66,66). Pochopitelně jde o to, aby se všechny použité kontejnery sečetly do 100, aby nevybočovaly z vodorovného prostoru stránky a byly zobrazeny na stejném řádku.

Nyní s vybraným prvním kontejnerem přidáme dovnitř obrázkový blok GenerateBlocks.

Pak se stane to, že se zobrazí různé prostory pro obrázky. Nepropadejte panice, to proto, že blok detekuje smyčku a znovu vytvoří její chování. Pokud vyhledávač zobrazí deset výsledků, zobrazí se právě tyto prostory. Prostě pokračujte v práci na kontejneru s obrázky a vynechejte velkou část zbytku, který není ničím jiným než náhledem stránky s výsledky.

Znovu vybereme kontejner obsahující obrázek ( 1). V nabídce bloku vpravo přejdeme dolů na položku "Povolit dynamická data a aktivujeme ji (2). V položce Zdroj obrázků na pozadí vybereme "Featured image" ( 3 ) a obrázky se zobrazí v editoru.

Ve zdroji odkazů zvolíme "Individuální odkaz" ( 4 ), aby každý obrázek odkazoval na příslušný příspěvek, a opět uložíme jako návrh.

Nyní přejdeme do druhého kontejneru, vybereme jej a přidáme blok "Headline" z GenerateBlocks.

Vybereme blok "Headline" (1 ) s aktivovanými dynamickými daty (2) a zopakujeme předchozí postup (3), tentokrát však jako zdroj obsahu vybereme "Title" ( 4) a ve zdroji odkazu individuální položku ( 5)

Nakonec přidáme další blok "Nadpis" níže, který použijeme pro zobrazení výpisu záznamu podle těchto kroků.

Po přidání zopakujeme stejný postup znovu. S tímto nově vybraným blokem (1) aktivujeme dynamická data (2) a jako zdroj dat (3) aktuální záznam a zdroj obsahu "Výpis" ( 4). Nyní můžeme také nastavit délku výpisu ve slovech (5).

Nakonec přidáme stránkování, které se zobrazí pod výsledky. To provedete tak, že vyberete blok smyčky dotazu (1) a kliknete na malý symbol + s tečkami, který najdete v panelu úprav (2).

Stránkování je sestaveno pomocí bloku tlačítek, kterým budete muset dát formát, barvu a tvar, který odpovídá vzhledu, který hledáte. Všechny možné konfigurace, kterých není málo, jsou v nabídce bloku, ve které budete mít vždy možnosti doladit jednotlivé bloky pro mobilní zařízení, tablet a desktop.

Zde to nechám, abych tento příspěvek příliš neprodlužoval.

Doporučuji vám, abyste vše nejprve provedli v testovacím prostředí, abyste viděli, jak to skutečně funguje nad rámec náhledu, který nabízí editor, a publikovali, až si budete jisti, že se to zobrazuje tak, jak má.

Nezapomeňte také, že pokud jste udělali onen blok návrhu, který byl navržen na začátku a který nazýváme Šablona struktury který jsme nechali v návrhu, budete ho muset zveřejnit.

To by byl výchozí bod pro další přizpůsobení vzhledu stránky s výsledky v závislosti na vašich estetických preferencích.

Spousta možností přizpůsobení

Můžete pokračovat v úpravách nebo přidávat, co chcete, například blok mřížky se dvěma kontejnery mezi nadpisem a úryvkem a přidat tam datum vydání, číslo autora příspěvku nebo cokoli chcete.

Pokud máte chuť, můžete dokonce vytvořit další šablonu pro tu nevýraznou výchozí stránku, když WordPress při vyhledávání nenajde výsledky, a přidat tlačítka nápovědy nebo jakýkoli jiný prvek, který návštěvníkovi pomůže.

Můžete měnit typ a velikost písma, ospravedlňovat ho na jednu nebo druhou stranu, upravovat rozestupy a rozměry prvků, hrát si s barvou pozadí přidáváním obrázků a tvarů, přidávat ikony, rámečky, efekty najetí na odkazy, stíny na kontejnerech atd.

To vše bez opuštění editoru a bez nutnosti manipulovat s CSS nebo zasahovat do souborů šablony.

Zde si můžete vyzkoušet základní rozvržení mých výsledků vyhledávání, které musím ještě doladit některými věcmi, jako je přidání doby čtení a počtu návštěv, napsání prázdných výpisů a přidání chybějících featured obrázků.

Bonusový míč: Pokud potřebujete do výsledků přidat typické"Zobrazeno (počet) výsledků pro: ( hledanéslovo )", zde najdete potřebný kód kód a návod, jak jej zprovoznit pomocí bloku Query Loop, díky Davidovi z podpory GB