Kereső a fejlécben és saját keresőűrlap

Ez a fejezet három gyakori feladatot mutat be: a keresőt a fejlécbe teszed, saját keresőűrlapot állítasz össze kategórialistával, és átírod a mező helykitöltő szövegét.

A kereső beillesztése a fejlécbe

A fejlécet a JetThemeCore (Elementorban és a blokkszerkesztőben) vagy a Bricks sablonkezelője adja. Elementor esetén az ingyenes Elementor is elég.

Elementor

1. Nyisd meg a Crocoblock → Theme Builder oldalt.
2. Szerkeszd a meglévő fejlécet a Edit content gombbal, vagy készíts újat.
3. A szerkesztőben keresd meg az Ajax Search widgetet, és húzd a kívánt szekcióba.
4. A Tartalom fülön állítsd be a szakaszokat (Search Form, Search Query, Results Area, Custom Fields, Search Suggestions, Notifications). A beállítások jelentése az áttekintésben olvasható.
5. A Stílus fülön alakítsd a megjelenést a weboldalad arculatához.
6. Kattints a Frissítés gombra.

Blokkszerkesztő

1. Szerkeszd a blokkszerkesztővel készült fejlécet.
2. Kattints a blokk hozzáadása gombra, és keresd meg az Ajax Search blokkot.
3. A Blokk fülön ugyanazokat a beállításokat találod, mint Elementorban.
4. A blokk megjelenéséhez használd a JetStyleManager bővítményt: a szerkesztő jobb felső sarkában a Block Style gombbal stílusozhatod.
5. Mentsd a fejlécet.

https://minta-bolt.hu/wp-admin/post.php?post=9&action=edit

A jobb oldali sávban a Blokk fülön látszanak a szakaszok.

Végül ellenőrizd, hogy a fejléc feltételei be vannak állítva (a fejléc jelenjen meg az oldalakon), és nézd meg a fejlécet a weboldalon.

Bricks

A Bricksben az Ajax Search bármelyik sablonba beilleszthető; itt a fejléc példáját követjük. A JetPlugins és a Bricks együttműködéséhez a Bricks sablonkezelője kell.

1. Nyisd meg a Bricks → Templates oldalt, és kattints az Add New Template gombra.
2. A Template type listában válaszd a Header típust.
3. Add meg a sablon címét, és kattints az EDIT WITH BRICKS gombra.
4. Tervezd meg a fejlécet, majd a kereső elemek között keresd meg az Ajax Search elemet, és húzd a kívánt helyre.
5. A CONTENT fül SEARCH FORM szakaszában kapcsold be a Show Categories List kapcsolót, és a Taxonomy listában válaszd ki az osztályozást.
6. A találati terület szakaszban válaszd ki a találatokhoz használt listázósablont (Listing).
7. A jobb felső sarokban kattints a Save ikonra.
8. Rendeld a fejlécet egy oldalhoz, és nézd meg a weboldalon: három karakter beírása után megjelennek a találatok. Ha bekapcsoltad a kategórialistát, a kategória kiválasztásával a találatok a kategóriára szűkíthetők.

Saját keresőűrlap összeállítása

Az alábbi példában az egész webhelyen keresel, a mező mellett kategórialista áll, és a keresés az osztályozások kifejezéseire is kiterjed. Az Elementor, a blokkszerkesztő és a Bricks mind használható.

Szükséges: a JetSearch aktív, és ha saját osztályozást használsz, a JetEngine is aktív az egyéni bejegyzéstípussal és osztályozással. Egy előre létrehozott oldalra vagy bejegyzésre is szükség van.

1. A globális beállítások

1. Nyisd meg a Crocoblock → JetPlugins Settings → JetSearch → Ajax Search Settings oldalt.
2. Kapcsold be a Kategórialista megjelenítése kapcsolót, és a Taxonomy listában hagyd meg az alapértelmezett „Categories” értéket.
3. Hagyd üresen a Forrás mezőt, hogy a keresés az egész webhelyen történjen.
4. Kapcsold be a Kifejezés szerinti keresés és a Keresés az osztályozás (taxonomy) kifejezéseiben kapcsolót.
5. Az osztályozások listájában válaszd ki a kívánt osztályozást (például az „Ingatlan típusa”).
6. Hagyd meg az Eredmények sorrendjének alapja mezőben a Relevancia, az Eredmények sorrendje mezőben a Növekvő értéket.
7. Kattints az Opciók mentése gombra.

2. Az Ajax Search hozzáadása

Nyiss meg egy oldalt vagy bejegyzést, keresd meg az Ajax Search widgetet (blokkot, elemet), és húzd az oldalra.

3. A keresőűrlap testreszabása

Nyisd ki a widget beállításait, és menj a Tartalom → Search Form szakaszra.

1. Az Input Icon mezőben válassz ikont a médiatárból.
2. A Placeholder Text mezőbe írd a mező szövegét, például „Írd be, mit keresel”, az alapértelmezett „Search …” helyett.
3. A Minimal Quantity of Symbols for Search értékét állítsd 3-ra (alapérték: 2).
4. Kapcsold be a Show Submit Button kapcsolót, a Submit Button Label mezőbe írd például: „Keresés”, majd a Submit Button Icon mezőben válaszd ki a gomb ikonját.
5. Kapcsold be a Show Categories List kapcsolót, a Taxonomy listában válaszd ki az osztályozást, a Select Placeholder mezőbe pedig írd a lista alapszövegét, például „Minden típus”.
6. Kapcsold be a Responsive Form on Mobile kapcsolót.
7. Mentsd az oldalt (Közzététel vagy Frissítés).

4. Az eredmény ellenőrzése

Nyisd meg az oldalt a weboldalon. Mivel három karakter a minimum, annyit kell beírnod, hogy a találatok megjelenjenek. Ha a kategórialistából kiválasztasz egy kategóriát, a találatok arra szűkülnek. A küldés gombra kattintva megnyílik a teljes eredményoldal.

https://minta-bolt.hu/kereses/

A képen a kereső háromnál több karakter beírása után két találatot mutat, a találatok alatt az összes találat hivatkozásával.

A helykitöltő szöveg átírása és formázása

Elementor

1. Nyisd meg az oldalt, amelyen a keresőt használni szeretnéd, és add hozzá az Ajax Search widgetet.
2. A Tartalom fülön nyisd ki a Search Form szakaszt.
3. A Placeholder Text mezőbe írd az új szöveget.
4. Ha az Input Icon mezőben ikont választasz az ikonkönyvtárból vagy feltöltesz egy SVG-t, az ikon a szöveg előtt jelenik meg.
5. A Stílus fülön az Input Field szakaszban a helykitöltő betűtípusa, mérete és színe is állítható.

Blokkszerkesztő

1. Add hozzá az Ajax Search blokkot.
2. A Blokk fülön, a Search Input szakaszban írd át a Placeholder szöveget.
3. A blokkszerkesztőnek nincs stílusfüle. A JetStyleManager bővítménnyel a Block Style gombra kattintva, az Input Field szakaszban formázhatod a helykitöltő szöveget.