Ajaxare WordPress

Ajaxare WordPress

WordCamp Milano - 5 Maggio 2012 - Salvatore Laisa

About me (Interactive designer?)

2006 2007 2008 2010 2011

WordCamp Salvatore Laisa
Milano 2012 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...

WordCamp Foto:
Milano 2012 “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 speciﬁca 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 ﬁsica del ﬁle
• 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

WordCamp Foto:
Milano 2012 “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 deﬁnizione 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 efﬁcace 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 ﬂuida.

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:
WordCamp “Ocean view branch” - Orange
Milano 2012 County Archives

Minimalista (tema)

Portofolio fotograﬁco + 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!

WordCamp Foto:
Milano 2012 “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 | Notiﬁcation - 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!


e a questo punto....

GRAZIE!
(e dateci dentro di domande!)

Milano 2012 salvatorelaisa.net

Ajaxare WordPress

More Related Content

What's hot

Viewers also liked

Similar to Ajaxare WordPress

Ajaxare WordPress