Automatikus kitöltés a keresési formanyomtatvány használatához
A WordPress keresési formája alapértelmezés szerint nem nyújt semmilyen vizet. Ezt ellenőrizheti, ha már be van ágyazva a témába, vagy hozzáadta a keresőmappát az egyik oldalsávhoz. Az űrlap funkcionalitásának javításának egyik módja az automatikus kiegészítés szkript hozzáadása. hogy javítsa a keresési lekérdezések kiválasztásának hatékonyságát.
Ez úgy fog kinézni, mint az automatikus kiegészítés formája
Twitter typeahead.js
Rengeteg önműködő szkript van, és a közelmúltban megjelent Jake Harding a typeahead.js-ről. teljesen hasonló változatú, hasonló névvel ellátott, Bootstrap csomagolású változat. Azt gondoltam, hogy érdekes lenne megtanulni, hogyan használhatom ezt az egyszerű szkriptet a WordPress programmal, és néhány tanulmány után egy kis plugint hoztam létre.
WP Typeahead plug-in
Ez a plug-in meglehetősen egyszerű, mivel nagyon kis konfigurációra van szüksége ahhoz, hogy minden működjön, ahogy kellene. A plugin-kód mindegyik részét külön fogom részletezni, hogy kifejtse működését.
Base plug-in
Vegyük figyelembe az egyes funkciókat külön-külön.
Hozzáadás a sorhoz
Szkript a láblécre
Illessze be ezt az új fájlba /js/wp-typeahead.js. A jQuery választó csatolja a typeahead függvényt bármely szabványos WordPress keresési formanyomtatványhoz, és használja a Hogan sablonmotort. Az Ajax adatok formázása és visszaküldése. Néha a keresési űrlapot megváltoztathatja a téma, és a "Keresés" gomb hiányozhat, ezért hozzáadtam egy kis szkriptet, hogy megbizonyosodjék róla, hogy az elküldés gomb megnyomásakor a keresési űrlap ténylegesen feldolgozásra kerül.
Kérje az Ajaxot
Ha valamit beír a keresési űrlapba, a typeahead.js elveszi az adatokat és elküldi az Ajax-on keresztül. a kód utolsó részéből származó paraméter használatával. Ahhoz, hogy hasznos legyen, ezt a szöveget átadni kell a függvénynek, így szüksége van a fenti kódra.
Megkíséri a keresési lekérdezés szövegét, átmegy egy WordPress-kérelemen, és visszaadja a megfelelő eredményt, ha van ilyen. Ezt az eredményt visszaadják a kódolás után a JSON-n keresztül történő dekódolás után. hogy a szkript helyesen olvashassa el az adatokat.
Mi látszik a kód?
Ha minden a helyén van, akkor a fő plugin-fájlnak olyannak kell lennie, mint ez:
A plug-in letöltésekor egy stíluslapot és a szükséges JS fájlokat is kap a ZIP archívumban.
következtetés
Automatikus kiegészítõ szkript hozzáadása a keresési űrlaphoz segíthet a felhasználóknak abban, hogy könnyebben és kényelmesebben használhassák webhelyét. Ez azt jelenti, hogy javítani kell az összbenyomást, ami ismételt hívásokhoz vezethet a webhelyhez és jobb forgalomhoz. A keresési formákkal való együttműködéshez egyszerűen aktiválnia kell a plugint.
Forrás: WP.tutsplus.com
