Tänään aion jakaa trendikkäitä toimintoja, joita olen toteuttanut projektissani jo jonkin aikaa.

Sanoin sen "FoxyComplete" ja mikä on, on hakea klikattavia hakutuloksia ja kuvien joko kaapataan automaattisesti tuloksen sisällöstä tai määritetystä tiedostosta. Se on helppo toteuttaa ja kun se on tehty, helppo säätää.

Tämän toiminnallisuuden soveltaminen riippuu pelkästään suunnittelijan ja kehittäjien mieltymyksistä, mutta sen vaikutus käyttäjäkokemukseen tekee siitä huippuluokan lisäyksen nykyaikaisiin suunnittelu- ja kehityshankkeisiin.

Liiketoimintayksiköt, joissa olen käyttänyt tätä toimintoa henkilökohtaisesti, ovat sähköinen kaupankäynti, yritysmallit, valokuvaus, viihde ja tulevat projektit, jotka edellyttävät kattavaa hakutoimintoa.

Olen melko varma, että olette kaikki vieraillut IMDb ja Omena sivustoja ja kokeillut hakutoimintoja. Jos et ole - alla on esikatselu siitä, mitä niiden kehittynyt hakutoiminto näyttää.

IMDB- ja Apple-verkkosivustojen tyypit Haku-ominaisuus kuvien ja automaattisen täydennyksen tulosten kanssa

Me kaikki tiedämme, että se voidaan tehdä, mutta sitten kysymys on: "Miksi sitä ei yleensä tehdä kaikissa kauniisti muotoilluilla verkkosivustoilla?" No, luulen, että siinä ei todennäköisesti ole nopeaa, avointa ratkaisua!

Kun otin saman Automaattisen täydennyksen haun kuvakuvakkeen kohdalla minun Valokuvaus Blogi joka suunnitelin jo jonkin aikaa, oli varmasti hankala saavuttaa, mutta lopulta se tuli loistavasti. Blogini kävijät nauttivat mielellään kuvagallerian kautta ja saavat välittömästi esikatselun siitä, mitä he näkevät seuraavaksi.

Alla on, miten blogin hakutoiminto näyttää.

Pushpinder Bagga eli Foxybagga Photography Blog

Tässä opetusohjelmassa aion käsitellä seuraavia kohtia

  1. Lyhyt katsaus käsikirjoitukseen
  2. FoxyComplete WordPress-laajennuksena (paikallinen / dynaaminen)
  3. FoxyComplete-sovelluksen toteutus Youtube-haussa kuvien kanssa
  4. Turvallisuuden parantaminen

WordPress-suunnittelijoille se on kakku ja WordPress / PHP-kehittäjille - se on suuri tilaisuus tutkia sen lukuisia toimintoja ja sovelluksia, joita se on tarjonnut. Edistykselliseen toteutukseen tarvittavat perustiedot WordPress, PHP, HTML, jQuery ja CSS.

Lyhyt katsaus käsikirjoitukseen

Antaa ensiksi ottaa nopeasti hiipin huippu siihen, mitä aiomme luoda tässä opetusohjelmassa. Napsauta alla olevaa kuvaa a perusdemo .

Foxycomplete-haun peruskuva demoineen

Muistakaa, että pidät tämän opetusohjelman hyvin perustasolla varmistaakseni, että jokainen ymmärtää sen ja kuka tahansa voi suunnitella tai muokata sitä vaatimustensa mukaisesti. Toiminto, jonka olen tehnyt, oli innoitettu jQuery Autocomplete Plugin esittäjä (t): Jorn Zaefferer.

Edellä oleva nopea esimerkki automaatti täydentää tuloksen otsikkoa, mutta voimme myös muokata sen uudelleenohjatuksi URL-osoitteeseen select (tehdään seuraavassa osassa). Hakukenttän tunnus on "s", joka on oletusarvo WordPress-hakukenttään (olisi hyödyllistä, kun jatkamme tätä konseptia edelleen WordPress-laajennuksen kehittämiseksi).

Tulosten muotoilu on helppoa: se koostuu puhtaasta rakenteesta, joka on helppo suunnitella mallin mukaan.

.ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img ja .ac_results ul li a span

HTML: n ja CSS: n Foxycomplete-haun kuvaukset Tulokset Div

Tämä perusesimerkki käyttää staattista tietolähdettä, joka on yksinkertainen JavaScript-tiedosto, jossa olemme julistaneet taulukon JSON-muodossa. Kaikki toiminnallamme on jäsentää taulukkoa ja näyttää tulokset.

Älä huoli, se on vain yksinkertainen avain- ja arvopareja eikä mitään muuta. Meidän avaimet ovat permalink, joka vie meidät tulossivulle, esikatseltavaan kuvaan ja otsikkoon , jossa meidän on etsittävä merkkijonoa. Olen säilyttänyt oletuskuvan ja esimerkin otsikon tälle perusdemolle.

Esimerkki taulukkorakenteesta

[{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” }… Repeat as much as you want to]

JavaScript-toiminto on helppoa. Paras vain tuloksena oleva JSON Array jQueryssä, muokata tuloksia vaatimuksiemme mukaisesti ja siirtää se näyttöön.

Vihje kehittäjille: Jos haluat muuttaa tulosten näyttämisen, katso foxycomplete.js- komentosarjan funktiomuoto () . Se on JavaScript-funktio, joka ottaa taulukon syötteeksi ja palauttaa muotoillun HTML: n, joka sisältää taulukon elementit. Melko yksinkertainen ymmärtää, mutta jos aiot muuttaa sitä, tee se täällä!

FoxyComplete WordPress-pluginina (paikallinen / dynaaminen)

Napsauta alla olevaa kuvaa ladataksesi WordPress-laajennuksen .zip-tiedostona.

Foxycomplete Etsi kuvia WordPress-laajennuksena - Esikatselu WordPress-asetussivulta.

Suunnittelijoille

Toivottavasti muistat, että sanoin, että sen oli tarkoitus olla kakku suunnittelijoille, eikö täällä ole! FoxyComplete kuin Plug-n-Play WordPress-laajennus joka toimii suoraan laatikosta - vain yksinkertainen kokoonpano tarvitaan perusasetuksen toteuttamiseen. Sinun tarvitsee vain ladata se, asentaa se ja soittaa sitä, kun suunnittelet sitä.

Plugin Options ovat seuraavat:

Ota paikallishaku käyttöön: Selaamisen jälkeen muutamia verkkosivustoja havaitsin, että niiden hakuvaihtoehto oli uskomattoman nopea - myös valtava tietokanta-esimerkki-IMDB. Ensimmäinen asia, joka iski oli heidän edistyneitä nopeita palvelimiaan, mutta entä säännölliset käyttäjät, jotka ovat jakaneet palvelimen ja vaihtelevat tietomäärät? Siksi tein paikallinen haku ensisijaiseksi vaihtoehdoksi. Se lataa JavaScript-tiedoston WordPress-asennuksen alatunnisteessa, joka sisältää kaikki viestit ja sivut sekä niiden URL-osoitteet ja, jos löydetty, kuvan esikatselut. Plugin oletuksena on dynaaminen haku, vaikka voit muuttaa sen milloin tahansa paikalliseen hakuun.

Limit: Yksi varmasti tarvitsisi valvoa näytettyjen tulosten rajaa. Se auttaa säilyttämään suunnittelun yhdenmukaisuuden ja antamaan käyttäjille mahdollisuuden saada vain tärkeimmät tulokset. Se oletusarvoisesti viisi tärkeintä tulosta.

Automaattisen täydennyksen leveys: Alun perin se pysyi aina yhtä suuri kuin syötteen leveys, mutta tajusin, ettemme etsineet Google-tyylistä laajaa hakukenttää. Se on edelleen oletusarvoisesti syöttöelementin leveys, mutta voit muuttaa sen milloin tahansa.

Tulon tunnus: Koska se on WordPress-laajennus, annoin etusijalle #s " oletusvalinnaksi, jota voidaan muuttaa haluamallasi tavalla. Syötä vain haluamasi syöttöelementin tunnus (ilman '#') ja se on menossa.

Oletuskuva: Joskus plugin ei välttämättä löydä asiaankuuluvaa kuvaa, ja minulla on mukana demo-kuva, mutta sinulla on myös hallintasuhde: korvaa se vain omalla näytekuvallasi plugin-hakemistossa.

Dynaaminen haku etsii asiaankuuluvaa sisältöä älykkäästi ja toimittaa dynaamisen JSON-taulukon toimintoihin välittömästi. Ensin se kerää kaikki WordPress-asennuksen viestit ja sivut, jotka ovat julkisia ja julkisia. Sitten se etsii kuvat 3 vaiheessa sisällöstä seuraavasti:

  1. Media-lähetykset
  2. "Thumbnail" Custom Field
  3. Kuvia sisällön sisällöstä

Kun sillä on kaikki tiedot, se yhdistää jokaisen viestin / sivun otsikon ja sisällön ja etsii kyselyn kohteena kattavan hakukokemuksen. Kun löydetty, sanotaan X-kohteiden määrä - se työntää X: n JSON-taulukkoon, joka palautetaan JavaScript-toimintoihin.

Dynaaminen vs. paikallinen toiminto

Tämä on kriittinen aihe ja olen avoin keskustelulle kommenttiosassa. Olen henkilökohtaisesti sitä mieltä, että ei ole haittaa antaa niille paikallista lähdettä, jos se parantaa useiden taitojen kokemusta. Toinen syy, jonka toteutin Paikallinen haku, oli siksi, että löysin jopa Googlen toteuttavan sen Gmailissa.

Gmail käyttää foxycomplete paikallisia tietoja, kun käyttäjä on kirjautunut sisään.

Kun käyttäjä kirjautuu sisään, Gmail lähettää pyynnön palvelimelle ja hakee kaikki yhteystietojasi kaikki alatunnisteen sähköpostiosoitteet ja nimet tai aliakset, joita käytetään sitten To, CC, BCC ja Labelsin automaattisen täydennyksen kenttiin. Mitä sanot, oikeutettu?

FoxyComplete on toteutettu YouTube-kaltaisella haulla kuvien kanssa

Kuten yllä mainittiin, kehittäjille on paljon toimintoja. Yllä on, mitä teimme käyttämällä YouTube-syötteitä ja sitten jäsentämällä niitä PHP: ssä saadaksemme tarvittavat tulokset JSON-muodossa. Voit oppia niistä tässä . Napsauta alla olevaa kuvaa YouTube Foxycomplete -haku-demo.

Foxycomplete kuin Youtube-hakukone

Toinen toiminto, jota voit tehdä, on YouTube-hakukone, jossa on klikattava toisto modeemissa tai peittokuvassa. Esimerkiksi, kun haet videota ja napsautat sitä automaattisen täydennyksen tuloksissa, avautuu modaalinen valintaikkuna tai päällekkäinen video, jossa on video, joka toimii verkkosivustollasi, mutta on peräisin YouTubesta. Hyvä, eikö olekin?

Turvallisuuden parantaminen

Vaikka WordPress-plugin on turvallinen, kuten käytin WordPress Nounces , se voidaan tehdä turvallisemmaksi dynaamisessa versiossa ja salauksessa paikallisissa vakiokuvissa.

Yksi turvatekijä, jota käytimme, oli tarkistaa Ajax-puhelu ja tarkistaa myös Ajax-puhelu samasta verkkotunnuksesta kuin alla.

//define SAME_DOMAIN to true in the Header of your document.define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');define('DOING_AJAX', true);if(IS_AJAX && DOING_AJAX && SAME_DOMAIN){//your search logic}

Se on vain yksi lukuisista tavoista varmistaa se!

johtopäätös

Joten se oli FoxyComplete, joka voisi auttaa sinua paljon suunnittelu- ja kehityshankkeissa tulevaisuudessa. Tämä on versiota 1.0, ja varmistan sen jatkuvan parantaakseni arvokasta palautetta ja tukea.

Kerro, mitä mieltä olet alla olevissa huomautuksissa, ja koska tämä on isännöinyt ympäristössä, jota voin helposti ja säännöllisesti muokata super-ehdotusten avulla, voit tehdä siitä hyvän ilmaisen laajennuksen, jolla on molemmat käyttöpäätelmät.