Oggi ho intenzione di condividere una funzionalità di tendenza che ho implementato nei miei progetti da un po 'di tempo.
Lo chiamo "FoxyComplete" e quello che fa è recuperare i risultati di ricerca cliccabili insieme alle immagini che vengono automaticamente scaricate dal contenuto del risultato o da un file specificato. È facile da implementare e una volta fatto, facile da modificare.
L'applicazione di questa funzionalità dipende esclusivamente dalle preferenze del progettista e dello sviluppatore, ma il suo impatto sull'esperienza utente lo rende una scelta eccellente per aggiungere progetti di progettazione e sviluppo moderni.
Le unità aziendali in cui ho utilizzato personalmente questa funzionalità sono l'e-commerce, i progetti aziendali, la fotografia, l'intrattenimento e i progetti futuri che richiedono una funzione di ricerca completa.
Sono abbastanza sicuro che tutti voi avete visitato il IMDb e Mela siti Web e provato le loro funzionalità di ricerca. In caso contrario - sotto è un'anteprima di come appare la loro funzionalità di ricerca avanzata.
Sappiamo tutti che si può fare ma poi la domanda è: "Perché di solito non viene fatto su tutti quei siti Web ben fatti?". Beh, immagino che sia probabilmente una mancanza di una soluzione rapida e aperta a tutti!
Quando ho implementato la stessa ricerca di completamento automatico con immagini al mio Blog di fotografia che ho progettato qualche tempo fa, sicuramente è stato difficile da raggiungere, ma alla fine è venuto alla grande. I visitatori del mio blog si divertono molto a cercare attraverso la mia galleria di immagini e ottenere immediatamente un'anteprima di ciò che vedranno in seguito.
Di seguito è riportato l' aspetto della funzione di ricerca nel mio blog .
In questo tutorial ho intenzione di coprire i punti sotto indicati
Per WordPress Designers , è un pezzo di torta e per gli sviluppatori di WordPress / PHP - è una grande opportunità per esplorare le sue numerose funzionalità e applicazioni che ha da offrire. Per l'implementazione avanzata, i requisiti sarebbero conoscenze di base di WordPress, PHP, HTML, jQuery e CSS.
In primo luogo, facciamo subito una breve panoramica su ciò che creeremo in questo tutorial. Per favore clicca l'immagine qui sotto per a demo di base .
Si prega di tenere a mente, sto mantenendo questo tutorial ad un livello molto basilare per assicurarsi che tutti lo capiscano e chiunque può progettarlo o modificarlo in base alle proprie esigenze. La funzionalità che ho realizzato è stata ispirata da jQuery Plug-in Autocomplete di Jorn Zaefferer.
L'esempio rapido sopra compara automaticamente il titolo del risultato, ma possiamo anche modificarlo per reindirizzare a un URL su select (fatto nella sezione successiva). L'ID del campo di ricerca è mantenuto come "s", che è l'impostazione predefinita utilizzata per il campo di ricerca di WordPress (sarebbe utile se continuiamo con questo concetto per sviluppare un plugin WordPress).
Disegnare i risultati è semplice: è costituito da una struttura pulita e facile da personalizzare in base al design.
.ac_results
-> .ac_results ul
-> .ac_results ul li
-> .ac_results ul li a
-> .ac_results ul li a img
e .ac_results ul li a span
Questo esempio di base utilizza un'origine dati statica che è un semplice file JavaScript in cui abbiamo dichiarato una matrice in formato JSON. Tutto ciò che facciamo è analizzare la matrice e visualizzare i risultati.
Non preoccuparti, è solo un array di base coppie chiave e valore e nient'altro. Le nostre chiavi sono il permalink di portarci alla pagina dei risultati, l' immagine all'anteprima e il titolo in cui dobbiamo cercare la stringa. Ho mantenuto un'immagine di default e un titolo di esempio per questa demo di base.
[{“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]
La funzionalità JavaScript è semplice. Analizziamo semplicemente la matrice JSON risultante in jQuery, formiamo i risultati in base alle nostre esigenze e passiamo la visualizzazione.
Suggerimento per gli sviluppatori: Nel caso in cui si desideri modificare la modalità di visualizzazione dei risultati, consultare il formato function () nello script foxycomplete.js. È una funzione JavaScript che accetta un array come input e restituisce HTML formattato contenente gli elementi dell'array. Piuttosto basico per capire, ma se stai cercando di cambiarlo, fallo qui!
Clicca l'immagine qui sotto per scaricare il plugin WordPress come file .zip.
Spero che tu ricordi che ho detto che doveva essere un pezzo di torta per i designer, beh, eccolo! FoxyComplete come plug-in per WordPress Plug-and-Play funziona immediatamente, è necessaria una semplice configurazione per l'implementazione di base. Tutto ciò che devi fare è scaricarlo, installarlo e divertirti mentre ti prepari.
Le opzioni del plugin sono le seguenti:
Abilita ricerca locale: dopo aver navigato su alcuni siti Web ho scoperto che la loro opzione di ricerca era incredibilmente veloce, anche con un enorme database-esempio IMDB. La prima cosa che ha colpito sono stati i loro server veloci avanzati, ma per quanto riguarda gli utenti regolari che hanno hosting condiviso e quantità variabili di dati? Questo è il motivo per cui ho reso la ricerca locale un'opzione prioritaria. Carica semplicemente un file JavaScript nel footer della tua installazione di WordPress contenente un array per tutti i tuoi post e pagine insieme ai loro URL e, se trovati, anteprime di immagini. Il plug-in fa riferimento alla ricerca dinamica, sebbene sia possibile modificarlo in qualsiasi momento per la ricerca locale.
Limite: uno sicuramente avrebbe bisogno di un controllo sul limite dei risultati visualizzati. Aiuta a mantenere la coerenza con il design e consente agli utenti di ottenere solo i risultati più rilevanti. Il valore predefinito è cinque risultati rilevanti.
Larghezza del completamento automatico: originariamente era sempre uguale alla larghezza dell'input, ma poi mi sono reso conto che non stavamo cercando su una casella di ricerca ampia in stile Google. L'impostazione predefinita è sempre la larghezza dell'elemento di input, ma è possibile modificarla in qualsiasi momento.
ID dell'input: poiché si tratta di un plugin WordPress, ho dato la preferenza a "#s" come scelta predefinita che può essere modificata in qualsiasi modo. Basta inserire l'ID (senza il '#') dell'elemento di input desiderato ed è un go.
Immagine di default: A volte il plugin potrebbe non trovare un'immagine pertinente e per questo ho incluso un'immagine demo, ma hai il controllo anche su questo: basta sostituirlo con la tua immagine di esempio nella directory dei plugin.
La ricerca dinamica ricerca il contenuto pertinente in modo intelligente e fornisce immediatamente una funzionalità di array JSON dinamico alla funzionalità. Prima raccoglie tutti i post e le pagine nell'installazione di WordPress che sono pubblicati e pubblici. Quindi cerca le immagini in 3 passaggi dal contenuto come:
Una volta che ha tutti i dati, combina il titolo e il rispettivo contenuto di ogni post / pagina e cerca l'oggetto interrogato per un'esperienza di ricerca completa. Una volta trovato, diciamo X numero di elementi, spinge quelli X in un array JSON, che viene restituito alla funzionalità JavaScript.
Questo è un argomento critico e sono aperto a una discussione nella sezione dei commenti. Personalmente ritengo che non vi sia nulla di male dare a quelli una fonte locale se migliora l'esperienza di molte pieghe. Un altro motivo per cui ho implementato la ricerca locale è stato perché ho trovato persino Google che lo implementa in Gmail.
Una volta che l'utente effettua l'accesso, Gmail invia una richiesta al proprio server e recupera tutti gli indirizzi e-mail e i nomi o gli alias di tutti i contatti nel footer, che vengono quindi utilizzati per i campi di completamento automatico To, CC, BCC e Labels. Cosa dici, legittimo?
Come detto sopra, c'è anche molta funzionalità per gli sviluppatori. Sopra è quello che abbiamo fatto usando i feed di YouTube e poi analizzandoli in PHP per fornire i risultati richiesti in formato JSON. Puoi imparare su quelli Qui . Fai clic sull'immagine qui sotto per una demo della ricerca Foxycomplete di YouTube.
Un'altra funzionalità che puoi realizzare è il motore di ricerca di YouTube con riproduzione su clic in modal o overlay. Ad esempio, quando si cerca un video e si fa clic sui risultati del completamento automatico, viene aperta una finestra di dialogo modale o una sovrapposizione con il video al suo interno, riprodotta sul proprio sito Web ma proveniente da YouTube. Bello, non è vero?
Anche se il plugin WordPress è sicuro come ho usato WordPress Nounces , può essere reso persino sicuro utilizzando le costanti nella versione dinamica e la crittografia nel locale.
Una misura di sicurezza che abbiamo usato era quella di verificare la presenza di una chiamata Ajax e quindi anche di verificare una chiamata Ajax dallo stesso dominio, come mostrato di seguito.
//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}
Questo è solo uno dei numerosi modi per proteggerlo!
Quindi questo è stato FoxyComplete che potrebbe aiutarti molto nei tuoi progetti di progettazione e sviluppo in futuro. Questa è la versione 1.0 e farò in modo di continuare a migliorarlo con il vostro prezioso feedback e supporto.
Fatemi sapere cosa ne pensate nella sezione commenti qui sotto e dal momento che questo è ospitato in un ambiente che posso facilmente e regolarmente modificare, con i vostri super suggerimenti-lascia che sia un ottimo plugin gratuito con un'esperienza utente finale a entrambe le estremità.