Share
Oggi esamineremo come configurare utilizzando i gesti per navigare tra i tuoi post WordPress. È davvero semplice, quindi tuffiamoci dentro!
Mentre stiamo progredendo nella progettazione di siti Web reattivi e il numero di utenti che visitano siti Web su dispositivi mobili è in aumento, è una buona cosa se possiamo far funzionare il nostro sito Web con tecnologie sorprendenti come i gesti. Useremo una libreria jQuery per raggiungere questo obiettivo insieme ad alcuni buoni PHP e WordPress.
La demo è un tema ridotto che è stato creato per gli scopi di questo tutorial.
Quindi apri il tuo editor di testo preferito e cominciamo!
Useremo un eccellente plugin jQuery per creare la nostra navigazione gestuale chiamata Hammer.js. Ci forniscono tutte le funzioni per utilizzare diversi tipi di gesti all'interno dei nostri siti web.
Iniziamo prendendo tutti i file necessari di cui abbiamo bisogno affinché i gesti funzionino. È possibile scaricare i file localmente sul proprio computer o utilizzare la loro versione online.
Dobbiamo accodare i seguenti script:
Accoderemo questi script all'interno del nostro "functions.php" file. Il mio metodo preferito è innanzitutto creare una funzione per registrare e accodare ogni script all'interno di questa funzione. Questo sarebbe simile a questo:
Accentsconagua
function vsgt_enqueue_scripts () // Registra Hammer.js dal link esterno wp_register_script ('hammer', 'http://eightmedia.github.com/hammer.js/hammer.js'); // Registrati jQuery Hammer dal link esterno // Imposta jQuery e Hammer come dipendenze in modo da accodare solo questo e otteniamo tutti loro wp_register_script ('jquery_hammer', 'http://eightmedia.github.com/hammer.js/jquery. hammer.js ', array (' jquery ',' hammer ')); // Accoda i nostri script wp_enqueue_script ('jquery_hammer'); add_action ('wp_enqueue_scripts', 'vsgt_enqueue_scripts'); Successivamente, dobbiamo creare un file JavaScript vuoto che utilizzeremo in seguito per scrivere lo script del gesto. Crea un file e registralo e accodalo nella stessa funzione che abbiamo appena usato per registrare e accodare tutte le altre nostre librerie e script:
// Registra il nostro script JS personalizzato wp_register_script ('custom_js', get_template_directory_uri (). '/Js/jquery.custom.js', array ('jquery_hammer'), '1.0', vero); wp_enqueue_script ('custom_js'); Se non sei sicuro con gli script di enqueue, segui questo tutorial: Come includere JavaScript e CSS nei tuoi temi e plug-in di WordPress
Ora che i nostri script sono in atto, dobbiamo assicurarci di poter navigare avanti e indietro durante la lettura di un singolo post sul blog. Lo facciamo inserendo il seguente codice all'interno del nostro WordPress Loop all'interno del nostro "single.php" file:
Noi avvolgiamo la nostra navigazione all'interno di a div per una migliore gestione e flessibilità stilistica, e quindi utilizzare uno span per avvolgere i nostri link precedenti e precedenti che sono generati da WordPress. Lo avvolgiamo con classi span, in modo da poter indirizzare direttamente i link che saranno necessari in seguito. Puoi leggere ulteriori informazioni sulle funzioni successive e precedenti nel codice WordPress.
Infine, dobbiamo andare alla nostra apertura taggare e applicare una classe ad esso. Aggiungerò una classe di "gesto" al body_class () funzione: >. Applichiamo una classe al tag body perché in seguito la utilizzeremo nel nostro file JavaScript dove agirà da contenitore per verificare se l'utente ha strisciato il dito per la navigazione.
Ora che la nostra navigazione è impostata, dovrebbe permetterti di navigare avanti e indietro quando leggi un singolo post sul blog. Successivamente abbiamo bisogno di scrivere il nostro JavaScript per rendere la navigazione con gesti. Iniziamo aprendo il nostro file JavaScript vuoto che abbiamo creato in precedenza e creare una funzione. Il tuo documento dovrebbe assomigliare a questo:
jQuery (document) .ready (function ($) function runGesture () // Il nostro codice andrà qui);
Successivamente creeremo alcune variabili. Inserisci il seguente codice all'interno del nostro runGesture funzione:
// Imposta la nostra variabile container gesture var gestureContainer; // Imposta la variabile su "hammered" var hammeredGesture;
In seguito, assegneremo le variabili ai compiti appropriati. Useremo gestureContainer per assegnare la classe al tag body e inizializzeremo il plugin Hammer.js sul nostro hammeredGesture variabile. Inserisci il seguente codice nel nostro runGesture funzione e il nostro codice dovrebbe assomigliare a questo:
// Assegna il nostro contenitore all'ID gestureContainer = $ ('body.gesture'); // Hammer our Gesture hammeredGesture = $ (gestureContainer) .hammer (); Ora che abbiamo impostato i nostri parametri fondamentali, possiamo passare e associare il nostro evento gestuale al nostro contenitore che è stato inizializzato con il plug-in Hammer.js. Lo facciamo eseguendo il legare funzione sul nostro hammeredGesture variabile e passa l'evento gesto; in particolare useremo l'evento "drag". Quindi apri una funzione in cui scriveremo tutto il trattamento per l'evento gesture. Inserisci il seguente codice nel nostro runGesture funzione:
// Collega il nostro Hammer all'evento in cui vogliamo eseguire hammeredGesture.bind ("drag", function (evnt) // Qui gestiremo il codice per l'evento drag); Ora gestiremo la parte di navigazione. Dentro il nostro legare funzione, creiamo una variabile chiamata url. Questo sarà usato per ottenere il href valore dai link precedenti e precedenti. Verificheremo anche se stiamo trascinando a sinistra oa destra, a seconda della direzione che stiamo trascinando, passeremo il href valore al url variabile. Alla fine controlleremo se c'è un valore per il url, e se c'è, reindirizzeremo la finestra al valore di url. Il seguente codice dovrebbe mostrare questo:
// Imposta una variabile URL e impostala su false var url = false; / * Verifica se la direzione che stiamo facendo scorrere è giusta se TRUE, quindi ottieni lo span con la classe 'nav-next' e passa il link href all'URL * / if (evnt.direction == 'right') url = jQuery ( '.nav-next a'). attr ('href'); / * Come il tasto destro, ma modifica il valore dell'URL per ottenere il link precedente * / if (evnt.direction == 'left') url = jQuery ('. Nav-previous a'). Attr (' href '); / * Se l'URL ha un valore allora cambia la finestra e passa la posizione dell'URL a * / if (url) window.location = url; Questo è tutto il nostro script gestuale fatto e completato insieme alla navigazione. Abbiamo solo bisogno di eseguire alcuni rilevamenti del browser per garantire che lo script venga eseguito solo quando siamo su un dispositivo mobile.
WordPress ci consente di rilevare la pagina che il client sta visualizzando utilizzando body_class che è ottimo per lo styling e la compatibilità cross browser, ma lo espanderemo un po 'e aggiungeremo il rilevamento del browser ad esso. Grazie a Nathan Rice che ha già scritto quello che stiamo cercando. Assicurati di applicare il body_class al tuo corpo tag come abbiamo fatto sopra e quindi aprire il nostro functions.php e inserisci il seguente codice:
function browser_body_class ($ classes) global $ is_lynx, $ is_gecko, $ is_IE, $ is_opera, $ is_NS4, $ is_safari, $ is_chrome, $ is_iphone; if ($ is_lynx) $ classes [] = 'lynx'; elseif ($ is_gecko) $ classes [] = 'gecko'; elseif ($ is_opera) $ classes [] = 'opera'; elseif ($ is_NS4) $ classes [] = 'ns4'; elseif ($ is_safari) $ classes [] = 'safari'; elseif ($ is_chrome) $ classes [] = 'chrome'; elseif ($ is_IE) $ classes [] = 'ie'; else $ classes [] = 'unknown'; if ($ is_iphone) $ classes [] = 'iphone'; restituire $ classi; add_filter ('body_class', 'browser_body_class'); Grande! Ora che abbiamo attivato il rilevamento del browser, insieme a tutto lo script completo di gesti e alla nostra navigazione completamente completata. Torniamo indietro e apriamo il nostro custom.jquery.js e inserisci il seguente codice al di fuori del nostro runGesture funzione:
// Esegui i gesti solo su un iPhone o dispositivo mobile se ($ ('. Gesture'). HasClass ('iphone')) runGesture (); Il codice appena inserito fa un ultimo test per verificare se siamo su un dispositivo mobile e se poi viene eseguito lo script gesture, altrimenti non fare nulla.
Questo è tutto! Semplice, giusto? Puoi scorrere verso destra e verso sinistra sui tuoi dispositivi mobili tramite post e il tuo sito WordPress funzionerà perfettamente normalmente sui desktop! Divertiti a giocare con i diversi eventi.
Mi piacerebbe dire un ENORME grazie per aver dedicato del tempo a leggere il mio tutorial, spero che sia stato di aiuto. Non esitate a lasciare commenti e farò del mio meglio per aiutarli e rispondervi. In caso contrario, puoi sempre contattarmi direttamente tramite il mio sito web: www.VinnySingh.co
