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

http://www.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




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



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.





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!





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





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:





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!





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().




Parte 2:Mettiamoci un pò di Ajax in questo tema!

E la cosa non dispiacerà neanche ai plugin

Foto:“Ajax for dummies” - Daveynin



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!





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!)





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.





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.





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:





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!





Ajaxare una form 2/2 (il più è Javascript)

Possiamo usare la funzione wp_mail() per gestire manualmente gli invii!




Parte 3:Case histories

AKA - se gli altri si buttano da un ponte lo fai anche tu?

Foto:“Ocean view branch” - Orange

County Archives



Minimalista (tema)

Portofolio fotografico + pagine caricate in Ajax + Lightbox =

cari vecchi siti in Flash :-)





AGT Noname (tema)

I caricamenti dei contenuti avvengono tramite Ajax (con icona animata di caricamento).





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.




Parte 4:Risorse e altra “robbba giusta”

Plugin, guide e tutorial utili e non!

Foto:“Presents” - Msmorningtom



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!)





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!





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





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!






Salvatore Laisasalvatorelaisa.net

e a questo punto....

GRAZIE!(e dateci dentro di domande!)

Ajaxare WordPress

Documents

Transcript of Ajaxare WordPress