Vyhľadávač WordPress je na nič
Nepoznám nikoho, kto používa WordPress, kto by o jeho vyhľadávači hovoril dobre a stále nechápem, že sa od prvých verzií takmer nevyvinul.
Nielenže je jeho ovládanie primitívne, ale neponúka ani žiadnu konfiguráciu. Dokonca aj vzhľad jeho stránky s výsledkami je veľmi žiaduci. V závislosti od použitej šablóny môže mať o niečo lepší dizajn, ale vo všeobecnosti je stále prehistorická.
Vzhľad výsledkov možno trochu vylepšiť pomocou CSS a odozvu pomocou bezplatného pluginu (s platenou verziou), ako je Relevanssi (hoci strojnásobí váhu vašej databázy) alebo tento, ktorý sa pripája k externej službe Algolia (zadarmo do 10 000 požiadaviek na vyhľadávanie mesačne).
Ale otázku výkonu si nechám na inokedy, pretože s ňou stále zápasím a riešim čisto estetické reformy pomocou GeneratePress (GP) a GenerateBlocks (GB).
GeneratePress a GenerateBlocks
GP a GB sú stále dva nástroje z mladého projektu s množstvom použiteľnosti na zlepšenie, GB neponúka rovnakú krivku učenia, akú by ste mohli očakávať, ak prichádzate z používania staviteľov ako Elementor alebo podobných.
Ako uvidíme na tomto príklade, niektoré procesy vytvárania určitých vecí pomocou GenerateBlocks sú oveľa dlhšie a prácnejšie a pri prvých pokusoch môžu byť trochu zúfalé. Ako pridávame ďalšie a ďalšie bloky, veci sa komplikujú.
Keď pochopíte, ako fungujú, a dostanete ich do rúk, budete mať oveľa väčšiu kontrolu nad tým, ako jednotlivé prvky vyzerajú.
Náročnosť je vyvážená jeho dokumentáciou a bezchybnou podporou, v rámci ktorej jeho tvorcovia dokonca podávajú pomocnú ruku pri špecifických otázkach dizajnu, ktoré nie sú v ich kompetencii, takže je to stále alternatíva, ktorú treba brať do úvahy, pretože zostávajú verní svojej filozofii; spravodlivý, čistý a ľahký kód.
Prvky bloku
Prvky blokov, ďalej len Prvky, boli pridané v júli 2020 vo verzii 1.11.0 GeneratePress Premium. Môžete ho použiť ako bežný háčik na vloženie obsahu takmer kdekoľvek na vašom blogu bez toho, aby ste museli manipulovať s kódom.
V kombinácii s GenerateBlocks umožňuje používať editor blokov WordPress na vytváranie háčikov, hlavičiek, pätiek, bočných panelov, stránky "Hero", šablón obsahu atď.
K veci.
Šablóna štruktúry
Najskôr vytvoríme tzv. šablónu štruktúry. Tento krok nie je povinný, ale je dobré si ju vytvoriť pre prípad, že by sme chceli niečo zmeniť niekoľkými kliknutiami.
Tento názov som mu dal preto, lebo bude definovať len štrukturálne aspekty, a nie jeho obsah. To znamená, či chceme zobraziť alebo nezobraziť hlavičku, pätičku alebo jej widgety, bočný panel alebo definovať šírku atď., a tak sa nebudeme zahrávať s názvami blokov ostatných krokov.
Z hlavného menu Vzhľad/Elementy alebo z hornej časti môžeme pristupovať k vytváraniu a správe prvkov.
Pre konkrétne použitie, ktorým sa tu zaoberáme, pri pridávaní nového prvku vyberieme položku Návrh a stlačíme tlačidlo Vytvoriť.
Ďalej povieme prvku, na ktorú stránku sa má použiť. Za týmto účelom sa presunieme na kartu "Pravidlá na zobrazenie" a v pozícii vyberieme z rozbaľovacieho zoznamu "výsledky vyhľadávania".
Prvky ponúkajú veľa možností prispôsobenia. Ako uvidíte, v tomto rozbaľovacom zozname môžete vybrať väčšinu pozícií svojho blogu, aby sa tam tieto nastavenia mohli použiť.
Môžeme sa tiež rozhodnúť, ktoré prvky chceme skryť. V mojom prípade použijem iba jednu možnosť, aby som sa zaobišiel bez bočného panela, takže vyberiem možnosť"Obsah (bez bočných panelov)".
Existujú aj iné spôsoby, ako skryť bočný panel, ale tento spôsob okrem toho, že je najjednoduchší a najrýchlejší, nám umožňuje vrátiť akúkoľvek zmenu jednoduchým návratom sem alebo priamo "zrušiť publikovanie" tohto prvku/šablóny do stavu "Návrh", čím sa stránka vráti do pôvodného vzhľadu.
Okrem toho vám karta"Deaktivovať prvky" umožňuje ponechať stránku prakticky čistú. Dalo by sa povedať, že ide o ekvivalent šablóny stránky "Canvas" od spoločnosti Elementor, len mierne vylepšený a jednoduchší na používanie.
Osvedčeným postupom, ktorý sa odporúča aj na jednej z konfiguračných kariet, je zdokumentovať, čo každý prvok robí, pomocou interných poznámok pre prípad, že názov nie je dostatočne popisný alebo nechceme, aby bol príliš dlhý.
Zvykol som si ku všetkému pridávať poznámky a komentáre, pretože keď robíte veľa úprav a časom sa stane, že zabudnete, kde a/alebo ako boli vykonané. V interných poznámkach tak budete mať vždy všetky informácie, ktoré potrebujete na to, aby ste sa mohli vrátiť k svojim krokom, ak sa niečo pokazí alebo ak chcete vykonať nové úpravy.
Publikovaním tejto šablóny by sme už mali stránku s výsledkami nakonfigurovanú podľa našich predstáv, ale, samozrejme, teraz by bola pri vyhľadávaní prázdna, pretože musíme vytvoriť a publikovať nový prvok, ktorý bude určovať vzhľad týchto vyhľadávaní.
Túto šablónu môžete zatiaľ ponechať v návrhu a zverejniť ju, keď bude všetko pripravené.
Šablóna vzhľadu
Hoci ide len o ďalší prvok, v tejto malej príručke ho nazývam "šablóna vzhľadu", pretože v tom čase som bol trochu zmätený pomenovaním jednotlivých vecí a ich rôznymi možnosťami použitia.
Tu sa začína skutočná práca na personalizácii.
Vytvoríme nový prvok, tentoraz Blok, a dáme mu popisný názov.
Pridáme kontajner GenerateBlocks a do tohto kontajnera vložíme blok "Query Loop".
A práve to uvidíme.
Vybral som možnosť"Začať prázdne", aby som kopíroval pôvodnú štruktúru výsledkov, ale môžete si vybrať ktorúkoľvek zo šablón ponúkaných v tomto bloku.
Najlepšie bude, ak si ich pred rozhodnutím vyskúšate, pretože keď začnete pracovať na jednej z nich, nebudete môcť použiť inú a ak ju budete chcieť zmeniť, budete musieť začať celý proces od začiatku (čo by mala vyriešiť GB).
Po výbere šablóny vyberte blok slučky dotazu (1) a vpravo sa zobrazí karta "Blok" ( 2). Kliknite na ňu a v časti "Query parameters" (Parametre dotazu) zaškrtnite možnosť"Inherit query from template" (Zdediť dotaz zo šablóny) (3). Nakoniec v spodnej časti v časti "Display Rules"/"Position" (4 ) vyhľadáme a nastavíme "Search Results" a uložíme ako návrh.
Keď rozbalíme cyklus dotazu, uvidíme toto:
Pridajte ďalší blok mriežky v časti "Query template" a vyberte požadovanú štruktúru.
V tomto príklade použijeme jeden z dvoch kontajnerov , ktoré budú slúžiť ako stĺpce. Ľavý stĺpec bude miestom pre prezentovaný obrázok a v pravom stĺpci sa bude zobrazovať výňatok z príspevku (excerpt).
Môžete sa tiež hrať s tromi kontajnermi a nakonfigurovať stredný kontajner ako priestor. Trvám na tom, že možností je veľa a najlepšie je hrať sa s nimi.
Ako ste si možno všimli, takmer od základov staviame kontajner so všetkými časťami, ktoré budú tvoriť konečný vzhľad toho, čo chceme ukázať. V tomto prípade výsledky vyhľadávania, ale možno to urobiť s akýmkoľvek iným obsahom.
Teraz zaútočíme na tieto dva kontajnery.
Vyberieme prvý kontajner a nastavíme jeho šírku na 33 (v skutočnosti je nastavená na 33,33), ako uvidíte, ak prejdete na možnosti zmeny veľkosti.
To isté urobíme s druhým kontajnerom a vyberieme 66 (ktorý sa automaticky nastaví ako 66.66). Samozrejme, ide o to, aby sa všetky použité kontajnery sčítali do 100, aby nevybočovali z horizontálneho priestoru stránky a boli zobrazené na jednom riadku.
Teraz, keď je vybraný prvý kontajner, pridáme doň blok obrázku GenerateBlocks.
Potom sa objavia rôzne obrazové priestory. Nepodliehajte panike, je to preto, že blok rozpozná slučku a obnoví jej správanie. Ak váš vyhľadávač zobrazí desať výsledkov, zobrazia sa práve tieto priestory. Jednoducho pokračujte v práci na kontajneri s obrázkami a vynechajte veľkú časť zvyšku, ktorý nie je ničím iným ako náhľadom stránky s výsledkami.
Opäť vyberte kontajner s obrázkom (1). V ponuke bloku vpravo prejdeme na položku "Aktivovať dynamické údaje a aktivujeme ju (2). V časti Zdroj obrázkov na pozadí vyberieme možnosť "Featured image" ( 3) a obrázky sa zobrazia v editore.
V zdroji odkazov vyberieme možnosť "Individuálny odkaz" (4), aby každý obrázok odkazoval na príslušný príspevok, a opäť ho uložíme ako návrh.
Teraz prejdeme do druhého kontajnera, vyberieme ho a pridáme blok "Headline" z GenerateBlocks.
Vyberte blok "Nadpis" (1) s aktivovanými dynamickými údajmi (2) a zopakujte predchádzajúci postup (3), ale tentoraz vyberte "Nadpis" ako zdroj obsahu (4) a individuálny záznam v zdroji odkazu (5).
Nakoniec pridáme ďalší blok "Title", ktorý sa bude používať na zobrazenie úryvku záznamu podľa týchto krokov.
Po pridaní zopakujeme rovnaký postup. Pri tomto novom bloku označenom (1) aktivujeme dynamické údaje (2) a ako zdroj údajov (3) aktuálny záznam a zdroj obsahu "Výpis" (4). Teraz môžete nastaviť aj dĺžku výpisu v slovách (5).
Nakoniec pridáme stránkovanie, ktoré sa zobrazí pod výsledkami. Ak to chcete urobiť, vyberte blok slučky dotazu (1) a kliknite na malý symbol + s bodkami, ktorý nájdete v paneli úprav (2).
Stránkovanie je vytvorené pomocou bloku tlačidiel, ktorým musíte dať formát, farbu a tvar, ktorý zodpovedá požadovanému vzhľadu. Všetky jeho možné konfigurácie, ktorých nie je málo, sa nachádzajú v ponuke bloku, kde budete mať vždy k dispozícii možnosti doladenia každého bloku pre mobilné zariadenia, tablety a počítače.
Nechám to tu, aby som tento príspevok príliš nepredlžoval.
Odporúčam vám, aby ste to všetko najprv urobili v testovacom prostredí, aby ste videli, ako to naozaj funguje nad rámec náhľadu poskytnutého editorom, a zverejnili to, keď si budete istí, že sa to zobrazuje tak, ako má.
Nezabudnite tiež, že ak ste urobili ten blok návrhu, ktorý bol navrhnutý na začiatku a ktorý sme nazvali Šablóna štruktúry, ktorú sme nechali v návrhu, budete ho musieť zverejniť.
Toto by bol východiskový bod pre ďalšie prispôsobenie vzhľadu stránky s výsledkami v závislosti od vašich estetických preferencií.
Množstvo možností personalizácie
Môžete ďalej pridávať alebo upravovať, čo chcete, napríklad blok mriežky s dvoma kontajnermi medzi názvom a úryvkom a pridať tam dátum vydania, meno autora záznamu alebo čokoľvek iné.
Ak sa na to odhodláte, môžete dokonca vytvoriť ďalšiu šablónu pre túto nevýraznú predvolenú stránku, keď WordPress pri vyhľadávaní nenájde výsledky, a pridať informačné polia alebo akýkoľvek iný prvok, ktorý návštevníkovi pomôže nájsť to, čo možno hľadá.
Môžete meniť typ a veľkosť písma, ospravedlňovať ho na jednu alebo druhú stranu, upravovať rozstupy a rozmery prvkov, hrať sa s farbou pozadia pridávaním obrázkov a tvarov, pridávať ikony, orámovania, efekty hover na odkazoch, tiene na kontajneroch atď.
To všetko bez opustenia editora a bez toho, aby ste museli manipulovať s CSS alebo zasahovať do súborov šablóny.
Tu si môžete vyskúšať základné rozloženie výsledkov vyhľadávania, ktoré ešte musím doladiť, napríklad pridať čas čítania a počet návštev, napísať prázdne úryvky a pridať chýbajúce obrázky.
Bonusová loptička: Ak potrebujete do výsledkov pridať typickú frázu"Showing (number) results for: ( searchword) ", tu nájdete potrebný kód a pokyny, aby to fungovalo s blokom Query Loop, vďaka Davidovi z podpory GB.
