Ajaxare WordPress
-
Upload
salvatore-laisa -
Category
Documents
-
view
1.029 -
download
1
description
Transcript of Ajaxare WordPress
Ajaxare WordPress
WordCamp Milano - 5 Maggio 2012 - Salvatore Laisa
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
About me (Interactive designer?)
2006 2007 2008 2010 2011
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Di cosa parleremo
1. Le basi e bla bla bla
2. Mettiamoci un po’ di Ajax in questo tema
3. Case histories
4. Risorse e altra “robbba giusta”
5. Domande
WordCamp Milano 2012
Parte 1:Le basi e bla bla bla
Quelle cose da sapere prima di iniziare a fare sul serio...
Foto:“A spot of magic” - JD Hancock
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Rapidamente: cos’è AJAX
E’ quella tecnologia che permette di avere pagine web “multitasking”, ovvero in grado di effettuare più caricamenti contemporaneamente e quindi più simili ad applicazioni che a pagine nel senso stretto.
AJAX esiste da sempre, è in voga dal 2005 quindi ampliamente supportato dai browser principali (sì, anche Internet Explorer <9) e non è assolutamento legato alla specifica HTML5.
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Come inserire Javascript in un tema
“Non ci vuole mica tanto, basta fare così:”
Di funzionare funziona, ma così WordPress non è in grado di “monitorare” la presenza di altri script simili.
Nel caso di librerie come jQuery ci si può ritrovare con più versioni incluse nella pagina, spesso anche di versioni diverse!
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Il metodo giusto: register/enqueue script
All’interno di functions.php
Accetta 5 argomenti che sono
• handler: (stringa) nome che si assegna allo script
• src: (stringa) posizione fisica del file
• dependencies: (array) altri script da cui dipende
• version: (stringa) versione dello script
• in footer: (booleano) se deve essere inserito nel footer
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Qual’è l’azione giusta?
Fino a qualche mese fa si usava l’azione “init” per far scaturire il tutto, il problema è che functions.php viene letto sia da backend e frontend e questa mossa può generare pasticci.
Un recente aggiornamento del Codex suggerisce di usare un’altra azione per caricare gli scripts:
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
WordPress è una web-application!
La backend di WordPress è costruita con i tradizionali linguaggi web Html, Css, PHP e anche Javascript, e già di suo include diverse librerie tra cui jQuery (e tutto lo stack jQuery UI), Prototype, SWF Object e altre ancora.
Quindi se vogliamo usare una di queste ci basta semplicemente richiamarla
PS: da diverso tempo il team di WordPress sta lavorando per Ajaxare maggiormente la backend!
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Occhio a jQuery!
All’interno di WordPress è presente una copia di jQuery abbastanza recente ma in modalità no-conflict ovvero dove il $ non viene riconosciuto come alias della libreria, perché già usato da Prototype!
Le alternative possono essere:
• ri-registrare la copia interna di jQuery sostituendola con una “nostra” o presa magari da un CDN (in genere quello di Google)
• ri-definire l’alias all’interno del file di Javascript in cui ci serve
Entrambi i metodi sono descritti nella pagina del Codex di wp_enqueue_script().
WordCamp Milano 2012
Parte 2:Mettiamoci un pò di Ajax in questo tema!
E la cosa non dispiacerà neanche ai plugin
Foto:“Ajax for dummies” - Daveynin
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Perché WordPress e Ajax sono una grande coppia
Tutti i caricamenti compiuti tramite Ajax avvengono lato client quindi un ipotetico CMS basato completamente su questo sarebbe quasi invisibile per i motori di ricerca.
WordPress al momento di pubblicazione di un articolo o pagina “crea” sempre una definizione di essa lato server (e quindi indicizzabile). Possiamo sfruttare il fatto che le pagine già esistono per caricarle con Ajax a rendere l’esperienza utente più snella e reattiva!
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Cosa possiamo Ajaxare?
Volendo anche tutto! Ma come tutte le tecniche è importante applicare AJAX solo quando lo riteniamo opportunamente efficace e non a sproposito!
I casi più diffusi in genere sono:
• caricamento pagine/articoli
• submit di informazioni in una form (anche i commenti!)
• importazione feed esterni (Rss, Flickr, Twitter, ecc.)
(PS: userò jQuery per i prossimi esempi!)
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Post casuali 1/2
Possiamo fare in modo che un template carichi in modo casuale dei post, a livello di PHP il codice può essere:
Ora possiamo fare in modo che un pulsante “refreshi” in modo asincrono questa porzione di pagina così da ottenere un nuovo post casuale.
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Post casuali 2/2
Da qualche parte nel HTML devo memorizzare l’url della pagina, poi con Javascript e jQuery...
Ora possiamo fare in modo che un pulsante “refreshi” in modo asincrono questa porzione di pagina così da ottenere un nuovo post casuale.
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Back to the future
Quando carichiamo pagine con Ajax entra in gioco il discorso di eventi su elementi “futuri”, ovvero che non sono presenti dall’inizio nella pagina ma arriveranno (forse più avanti) con una chiamata asincrona.
I normali gestori di eventi non funzionano, ma jQuery ha la funzione “on” per agganciare eventi a questi elementi:
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Ajaxare una form 1/2
WordPress elimina gran parte del dolore nella creazione di form per commenti e grazie ad alcuni plugin anche per form di contatti!
Validarle lato client ed evitare passaggi di pagine per invio dati rende l’esperienza di compilazione delle form molto più piacevole e fluida.
Prima di tutto... andiamo a prendere il nome della form generata!
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Ajaxare una form 2/2 (il più è Javascript)
Possiamo usare la funzione wp_mail() per gestire manualmente gli invii!
WordCamp Milano 2012
Parte 3:Case histories
AKA - se gli altri si buttano da un ponte lo fai anche tu?
Foto:“Ocean view branch” - Orange
County Archives
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Minimalista (tema)
Portofolio fotografico + pagine caricate in Ajax + Lightbox =
cari vecchi siti in Flash :-)
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
AGT Noname (tema)
I caricamenti dei contenuti avvengono tramite Ajax (con icona animata di caricamento).
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Jetpack - Statistiche sito (plugin)
Il caricamento dei dati di analitiche vengono importati e manipolati tramite Ajax permettendo così di rimanere sempre nella stessa pagina della bacheca.
WordCamp Milano 2012
Parte 4:Risorse e altra “robbba giusta”
Plugin, guide e tutorial utili e non!
Foto:“Presents” - Msmorningtom
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Plugin Ajaxosi di WordPress
• Post Ratings - Aggiunge un sistema di punteggio per post/pagine che si aggiorna in tempo reale.
• Jetpack - Set di plugin by Automattic, tra cui: creazione form di contatto e widget per Twitter.
• Contact Form 7 - Plugin per generare form direttamente da backend (e risparmiare qualche mezzoretta!)
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Librerie Javascript da considerare con WP
• MicroAjax - se volete un comodo wrapper per Ajax (0.4 kb!) senza dover includere librerie intere come jQuery o Prototype
• Fancybox - è un plugin di jQuery per creare gallerie, ma supporta anche il caricamento di contenuti Html
• Mini JS | Notification - Utile per mostrare avvisi di operazioni eseguite
• jQuery UI Tabs - (ricordatevi è gia incluso in WP!) hanno una comoda modalità Ajax facile da utilizzare!
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Tutorial, guide, libri
• WP Tuts+ - Abbastanza recente, ma si è già guadagnato una buona reputazione ed è abbastanza tecnico! (mitici Envato)
• WPLift - spazia molto tra gli argomenti ma molto valido.
• WPMania & WordPress Italy - siti italiani di tutorial e reviews plugin/temi.
• jQuery Novice to Ninja 2nd Edition - Libro edito da Sitepoint.com, ha una buona parte su Ajax!
• WordPress & Ajax - eBook sulla coppia che scoppia wpajax.com
WordCamp Milano 2012
Salvatore Laisawww.salvatorelaisa.net
Ultima nota
Queste slide e un tema Ajaxoso con le tecniche affrontate in questo talk sono disponibili da scaricare dal mio sito personale
www.salvatorelaisa.net
aggratis! e mi raccomando condividete!
WordCamp Milano 2012
Salvatore Laisasalvatorelaisa.net
e a questo punto....
GRAZIE!(e dateci dentro di domande!)