A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével

 

A WordPress keresőmotor szar

Nem ismerek olyan WordPress használót, aki jót mondana a keresőmotorjáról, és még mindig nem értem, hogy az első verziók óta alig fejlődött.

Nemcsak a működése szempontjából primitív, de egyáltalán nem kínál semmilyen konfigurációs lehetőséget. Még a találati oldalának megjelenése is sok kívánnivalót hagy maga után. A használt sablontól függően lehet, hogy valamivel jobb a kialakítása, de általában véve még mindig őskori

A találatok megjelenésén CSS-szel és reszponzivitással lehet egy kicsit javítani egy olyan ingyenes pluginnal (fizetős verzióval), mint a Relevanssi (bár ez megháromszorozza az adatbázis súlyát) vagy ez a másik, amelyik az Algolia külső szolgáltatáshoz kapcsolódik (havi 10 000 keresési kérésig ingyenes).

De a teljesítmény kérdését egy másik napra hagyom, mivel még mindig küzdök vele, és a tisztán esztétikai reformokkal fogok foglalkozni a következőkkel GeneratePress (GP) és a GenerateBlocks (GB) SEGÍTSÉGÉVEL.

GeneratePress és GenerateBlocks

AGP és a GB még mindig két eszköz egy fiatal projektből, amelynek a használhatóságán még sokat kell javítani, a GB nem kínál olyan tanulási görbét, mint amire számíthat, ha olyan építők használatából érkezik, mint az Elementor vagy hasonló.

Amint ebben a példában látni fogjuk, bizonyos folyamatok, amelyekkel bizonyos dolgokat a GenerateBlocks segítségével lehet felépíteni, sokkal hosszabbak és fáradságosabbak, és az első próbálkozásoknál kissé kétségbeejtőek lehetnek. Ahogy egyre több és több blokkot adsz hozzá, a dolgok egyre bonyolultabbá válnak.

Másrészt, ha egyszer megértetted a működésüket és megbarátkoztál velük, sokkal nagyobb kontrollt kapsz az egyes elemek kinézetére.

A nehézséget ellensúlyozza a dokumentációja és a kifogástalan támogatás, amelyben a készítői még a sajátos, nem az ő hatáskörükbe tartozó tervezési kérdésekben is segítenek, így még mindig egy remek alternatíva, amit érdemes figyelembe venni, mivel hűek maradnak a filozófiájukhoz; tisztességes, tiszta és könnyű kód.

Block elemek

A Blocks Elements, a továbbiakban Elements, 2020 júliusában került bele a GeneratePress Premium 1.11.0 verziójába. Normál kampóként használható, hogy szinte bárhova beilleszthessünk tartalmat a blogunkba anélkül, hogy kóddal kellene bíbelődnünk.

A GenerateBlocks-szal kombinálva lehetővé teszi, hogy a WordPress blokkszerkesztőjét használva horgokat, fejléceket, lábléceket, oldalsávokat, "Hero" oldalt, tartalmi sablonokat stb. hozzon létre.

Térjünk a tárgyra.

Szerkezeti sablon

Az első dolog, amit csinálni fogunk, az egy úgynevezett "struktúra sablon" létrehozása. Ez a lépés opcionális, de nem árt létrehozni egyet arra az esetre, ha egy nap néhány kattintással meg akarunk változtatni valamit.

Azért adtam ezt a nevet, mert csak a szerkezeti szempontokat fogja meghatározni, a tartalmát nem. Vagyis, hogy meg akarjuk-e jeleníteni vagy sem a fejlécet, a láblécet vagy annak widgetjeit, egy oldalsávot vagy meghatározzuk a szélességét, stb. és így nem keveredünk össze a többi lépés blokkjainak nevével.

A Megjelenés/Elemek főmenüből vagy a tetejéről érhetjük el az elemek létrehozását és kezelését.

Elements de GeneratePress- Layout o diseño

A minket érintő konkrét felhasználásnál egy új elem hozzáadásakor a Design menüpontot választjuk, és megnyomjuk a Create gombot.

Ezután megmondjuk az elemnek, hogy melyik oldalon szeretnénk alkalmazni. Ehhez a "Megjelenítendő szabályok" fülre lépünk, és a pozícióban a legördülő menüből kiválasztjuk a "keresési eredmények" opciót.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével

Az elemek rengeteg testreszabási lehetőséget kínálnak. Mint látni fogja, ebben a legördülő menüben kiválaszthatja a blogja legtöbb pozícióját, hogy ott alkalmazza ezeket a beállításokat.

Azt is eldönthetjük, hogy mely elemeket szeretnénk elrejteni. Az én esetemben csak egy opciót fogok használni, hogy az oldalsávot nélkülözzem, ezért a"Tartalom (Oldalsávok nélkül)" opciót választom.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 2

Vannak más módok is az oldalsáv elrejtésére, de ez amellett, hogy a legegyszerűbb és leggyorsabb, lehetővé teszi számunkra, hogy bármilyen változtatást visszaállítsunk, egyszerűen visszatérve ide, vagy közvetlenül "feloldva" ezt az elemet/sablont "Tervezet" státuszba, így az oldal visszanyeri eredeti megjelenését.

Ezenkívül az"Elemek deaktiválása" fülön gyakorlatilag tisztán hagyhatjuk az oldalt. Mondhatni, hogy ez az Elementor "Canvas" oldalsablonjának megfelelője, még ha kissé továbbfejlesztve és egyszerűbben használható.

Desactivar Elementos en GeneratePress

Jó gyakorlat, amit az egyik konfigurációs fülön is javasolnak, hogy belső jegyzetekkel dokumentáljuk, hogy mit csinál az egyes Elementek, ha a cím nem elég leíró, vagy nem akarjuk, hogy túl hosszú legyen.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 4

Hozzászoktam ahhoz, hogy mindenhez jegyzeteket és megjegyzéseket fűzök, mert ha sok módosítást végzünk, és idővel elkerülhetetlen, hogy a végén elfelejtjük, hol és/vagy hogyan végeztük el azokat. Így a belső jegyzetekben mindig megvan minden információ, amire szükséged van ahhoz, hogy visszakövethesd a lépéseidet, ha valami rosszul megy, vagy ha újabb módosításokat akarsz végezni.

A sablon közzétételével már a találati oldalt is a kedvünkre konfigurálnánk, de természetesen most üres lenne, amikor keresést végzünk, mert létre kell hoznunk és közzé kell tennünk egy új elemet, amely meghatározza ezeknek a kereséseknek a megjelenését.

Ezt a sablont egyelőre hagyhatjuk vázlatban, amíg mi ezt elvégezzük, és közzétehetjük, ha minden készen van.

Megjelenési sablon

Bár ez is csak egy újabb Elem, én "megjelenési sablon"-nak hívom ebben a kis útmutatóban, mert akkoriban kicsit összezavarodtam a dolgok nómenklatúrájától és a különböző lehetséges felhasználási módjaitól.

Itt kezdődik az igazi testreszabási munka.

Létrehozunk egy új elemet, ezúttal egy Blokkot, és adunk neki egy leíró nevet.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 5

Hozzáadunk egy GenerateBlocks konténert, és ezen belül elhelyezünk egy Query Loop blokkot.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 6

És ez az, amit látni fogunk.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 7

Én a"Start blank"-ot választottam, hogy az eredmények natív struktúráját másoljam, de bármelyik sablont választhatjuk, amit ez a blokk kínál.

A legjobb, ha kipróbálod őket, mielőtt döntesz, mert ha egyszer elkezdtél dolgozni az egyiket, nem fogsz tudni másikat alkalmazni, és az egész folyamatot elölről kell kezdened, ha változtatni akarsz rajta (amit meg kellene oldani GB).

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 8

A sablon kiválasztása után válassza ki a lekérdezési hurok blokkot (1), és a jobb oldalon megjelenik a "Blokk" fül (2). Kattintson rá, és jelölje be a"Lekérdezési paraméterek" alatt az"Inherit query from template" ( 3 ) opciót. Végül alul, a "Megjelenítési szabályok"/"Pozíció" (4 ) alatt keresünk és állítjuk be a "Keresési eredmények" opciót, majd mentsük el vázlatként.

Amikor kibontjuk a lekérdezési hurkot, ezt fogjuk látni:

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 9

Hozzáadunk egy másik rácsblokkot a "Query Template" belsejében, és kiválasztjuk a kívánt struktúrát.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 10

A példához két tároló egyikét fogjuk használni, amelyek oszlopokként fognak működni. A bal oldali oszlopban lesz a kiemelt kép helye, a jobb oldali oszlopban pedig a bejegyzés kivonata.

Játszhatunk három konténerrel is, és a középsőt helyként konfigurálhatjuk. Ragaszkodom hozzá, a lehetőségek sokrétűek, és a legjobb, ha eljátszadozik velük.

Mint észrevehetted, szinte a semmiből építünk egy konténert, amelyben minden darabot megtalálsz, ami a végső aspektusát fogja alkotni annak, amit meg akarunk mutatni. Jelen esetben a keresési eredményeket, de ezt bármilyen más tartalommal is megtehetjük.

Most megtámadjuk ezt a két konténert.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 11

Kiválasztjuk az első konténert, és beállítjuk a szélességét 33-ra (ami valójában 33,33-ra van beállítva), ahogy azt látni fogod, ha legörgetsz az átméretezési lehetőségekhez.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 12

Ugyanezt tesszük a második konténerrel, és kiválasztjuk a 66-ot (ami automatikusan 66,66-ra lesz beállítva). Nyilvánvalóan a lényeg az, hogy az összes használt konténer összege 100 legyen, hogy ne lépjenek ki az oldal vízszintes teréből, és egy sorban jelenjenek meg.

Most az első konténer kiválasztásával hozzáadunk egy GenerateBlocks képblokkot a belsejébe.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 13

Ezután az fog történni, hogy különböző képterek fognak megjelenni. Ne essünk pánikba, ez azért van, mert a blokk felismeri a Loopot, és újra létrehozza a viselkedését. Ha a kereső tíz találatot mutat, akkor ezek a terek fognak megjelenni. Csak folytasd a munkát a képkonténerrel, a többi nagy részét kihagyva, ami nem más, mint a találati oldal előnézete.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 14

Újra kiválasztjuk a képet tartalmazó konténert (1). A jobb oldali blokk menüjében lemegyünk a "Dinamikus adatok engedélyezése" menüpontra, és aktiváljuk (2). A Háttérkép forrásnál válasszuk ki a "Kiemelt kép" opciót ( 3 ), és a képek megjelennek a szerkesztőben.

A linkforrásnál válasszuk az "Egyedi linket" ( 4 ), így minden kép a megfelelő posztra fog hivatkozni, és mentsük el ismét tervezetként.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 15

Most a második konténerre megyünk, kiválasztjuk, és a GenerateBlocksból hozzáadunk egy "Headline" blokkot.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 16

Válasszuk ki a "Headline" blokkot (1) a dinamikus adatok aktiválásával (2 ), és ismételjük meg az előző folyamatot (3), de ezúttal a tartalom forrásaként a "Title"-t választjuk (4), a link forrásaként pedig az egyéni bejegyzést (5)

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 17

Végezetül, alul még egy "Cím" blokkot adunk hozzá, amelyet a bejegyzés kivonatának megjelenítésére fogunk használni a fenti lépéseket követően.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 18

Miután hozzáadtuk, ismételjük meg ugyanezt a folyamatot. Az új blokk kiválasztásával (1) aktiváljuk a dinamikus adatokat (2) és az adatok forrásaként (3) az aktuális bejegyzést és a "Kivonat" tartalom forrását (4). Most már beállíthatjuk a kivonat hosszát is szavakban (5).

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 19

Végül hozzáadjuk a lapozást, amely az eredmények alatt fog megjelenni. Ehhez válassza ki a lekérdezési hurok blokkot (1), és kattintson a kis + szimbólumra a pontokkal, amelyet a szerkesztési sávban talál (2).

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 20

A lapozás egy gombokból álló blokkból épül fel, amelynek meg kell adnia a kívánt megjelenésnek megfelelő formátumot, színt és formát. Az összes lehetséges konfigurációját, amelyek nem kevesen vannak, a blokk menüjében találja, ahol mindig lehetősége lesz az egyes blokkok finomhangolására mobilra, táblagépre és asztali számítógépre.

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 21

Itt hagyom, hogy ne hosszabbítsam túlságosan ezt a bejegyzést.

Azt tanácsolom, hogy mindezt először egy tesztkörnyezetben végezd el, hogy lásd, hogyan működik valójában a szerkesztő által kínált előnézetén túl, és akkor tedd közzé, amikor már biztos vagy benne, hogy úgy jelenik meg, ahogyan kell.

Ne feledje azt sem, hogy ha azt a tervezési blokkot csinálta, amit az elején javasoltunk, és amit mi úgy hívunk, hogy Struktúra sablon tervezetben hagytunk, azt is közzé kell tenned.

Ez lenne a kiindulási pont ahhoz, hogy az esztétikai preferenciáidtól függően tovább testre szabd a találati oldal kinézetét.

Rengeteg lehetőség a testreszabásra

A WordPress keresési eredmények oldalának testreszabása a GeneratePress és a GenerateBlocks segítségével 22

Továbbra is hozzáadhatsz vagy szerkeszthetsz bármit, amit csak akarsz, például egy rácsos blokkot két konténerrel a cím és a kivonat között, és odaírhatod a megjelenés dátumát, a bejegyzés szerzőjének nevét vagy bármit, amit csak szeretnél.

Ha van hozzá kedved, akár egy másik sablont is létrehozhatsz arra a bágyadt alapértelmezett oldalra, amikor a WordPress nem talál talál találatot a keresés során, és hozzáadhatsz információs dobozokat vagy bármilyen más olyan elemet, amely segít a látogatónak megtalálni azt, amit esetleg keres.

Megváltoztathatod a betűtípust és a betűméretet, igazíthatod az egyik vagy a másik oldalra, beállíthatod az elemek távolságát és méreteit, játszhatsz a háttérszínnel képek és formák hozzáadásával, ikonokat, kereteket, lebegőhatásokat adhatsz a linkekhez, árnyékot a tárolókhoz stb.

Mindezt anélkül, hogy elhagyná a szerkesztőt, és anélkül, hogy a CSS-szel babrálna vagy a sablonfájlokhoz nyúlna.

Itt kipróbálhatod a keresési eredményeim alap elrendezését, amit még ki kell csiszolnom néhány dolgot, mint például az olvasási idő és a látogatások számának hozzáadása, az üres kivonatok írása és a hiányzó kiemelt képek hozzáadása.

Extra labda: Ha szükséged van a tipikus"Showing (number) results for: ( searchedword )" hozzáadására a találatokhoz, itt találod a szükséges kódot kódot és utasításokat, hogy ez a Query Loop blokkoddal működjön, hála Davidnek a GB supporttól


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting