...

Ako dosiahnuť vyhľadávanie na celú obrazovku v Elementore?

Vyhľadávanie na celú obrazovku v Elementore

Elementor nám pri jednom z updatov odstránil vyhľadávanie na celú obrazovku, tzv. full-screen search a nahradil ho nejakým nevkusným vyhľadávacím widgetom. V tomto článku si ukážeme, ako sa dá full-screen search dosiahnuť, a to pomocou vstavaných funkcionalít v Elementore. Ostáva len dúfať, že full-screen search sa čoskoro vráti, pretože to bola práca na dva kliky. Teraz sa s tým musíme trošku dlhšie zapodievať, ale výsledok bude rovnaký.

Ako na to?

Full-screen search fungoval ako ikona lupy, na ktorú keď sme klikli, tak obrazovka stmavla a vyhodil sa textový vstup (input), do ktorého sme napísali hľadaný výraz a stlačili Enter. Prehodilo nás to na stránku výsledkov, na ktorej sa už zobrazovali príspevky, ktoré zodpovedali hľadanému výrazu.

Budeme teda potrebovať ikonu (element Icon), kde zvolíme lupu (fa-search). Do odkazu zatiaľ vložíme len mriežku a nastavíme si veľkosti, farby, odsadenie a všetko tak, ako potrebujeme. Neskôr tento odkaz zmeníme na to, aby nám ikona otvárala pop-up, v ktorom bude vyhľadávací formulár.

Ideme do wp-adminu a pod políčkom Šablóny si nájdeme Vyskakovacie okná (Templates -> Popups). Vytvoríme nový popup, pomenujeme ho napríklad „Search„. V ňom bude umiestnený náš formulár. Ten bude prakticky obsahovať len jeden textový input a potvrdzovacie tlačidlo (ktoré sa dá nahradiť aj enterom).

TIP: Tvorba pop-up okien v Elementore

Samozrejme, popup si vizuálne môžeme upraviť na nami žiadanú podobu a výzor (pozadie a pod). Môže to vyzerať pokojne aj takto:

Vyhľadávací engine

Teraz ešte potrebujeme zabezpečiť, aby sa po odoslaní formulára naozaj aj niečo vyhľadalo. Vojdeme teda do formulára, na karte Obsah vyhľadáme a klikneme na Akcie po odoslaní. Odstránime preddefinované Collect submissions a Email, namiesto toho vyberieme Redirect, čiže presmerovanie. Keď to urobíme, hneď pod tým sa nám zobrazí nová položka Redirect. Vrátime sa teraz na Polia formulára – prvá položka na karte Obsah. Vyberieme jedinú položku, ktorú má náš formulár a klikneme na kartu Pokročilé:

Celkom dole vidíme skrátený kód (shortcode), tento si skopírujeme.

Vrátime sa do položky Redirect. Existovalo by možno aj lepšie (dynamické) riešenie, ale bezproblémovo funguje aj to, ak napíšeme tvrdo adresu webu a za ňou dodáme /?s=[skopirovany_shortcode].

Teda vo výsledku by sme mali dostať niečo ako

https://wpblog.sk/?s=[field id=“string“]

To znamená, že po odoslaní formulára budeme presmerovaný na adresu webu s query stringom /?s=[text-ktory-zadal-uzivatel]. Pokiaľ WordPress v URL vidí s=nieco, znamená to pre neho, že ide na výsledky vyhľadávania znakov, ktoré sú napísané za rovná sa. Pre nás to teda znamená, že keď človek dá vyhľadávať napríklad Mäso, tak po odoslaní formulára budeme presmerovaný na https://wpblog.sk/s=Mäso, čo je vlastne stránka výsledkov vyhľadávania reťazca Mäso. A to je presne to, čo chceme.

Ikona pop-upu

Teraz sa ešte vrátime k našej ikone lupy, ktorú sme si na začiatku definovali. Klikneme na ňu a tam, kde mám len mriežku klikneme na ikonu databázy, vyhľadáme v tom dlhom zozname Popup. Teraz nám tam bude svietiť kľúč s nápisom Popup. Znova klikneme na ten kľúč a vyskočí doplňovacie pole, kde vyberieme ako akciu Otvoriť popup a potom vyhľadáme samotný Popup podľa toho, ako sme si ho pomenovali.

Výsledok?

Klikneme na ikonu lupy, vyskočí popup s formulárom. Ak do neho zadáme hľadaný výraz a odošleme, budeme presmerovaný na stránku výsledkov výrazu, ktorý sme zadali do formulára.

Prakticky sme teda dosiahli to, čo nám v staršej verzií Elementora trvalo asi 10 sekúnd. Teraz nám to trvá 10 minút.

Pridajte Komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *

Návrat hore