Ajaxare WordPress

1,293 views

Published on

Le slide del mio talk al WordCamp 2012 di Mila

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,293
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
13
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Ajaxare WordPress

  1. 1. Ajaxare WordPress WordCamp Milano - 5 Maggio 2012 - Salvatore Laisa
  2. 2. About me (Interactive designer?) 2006 2007 2008 2010 2011 WordCamp Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  3. 3. Di cosa parleremo1. Le basi e bla bla bla2. Mettiamoci un po’ di Ajax in questo tema3. Case histories4. Risorse e altra “robbba giusta”5. Domande WordCamp Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  4. 4. Parte 1:Le basi e bla bla blaQuelle cose da sapere prima diiniziare a fare sul serio... WordCamp Foto: Milano 2012 “A spot of magic” - JD Hancock
  5. 5. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  6. 6. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  7. 7. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  8. 8. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  9. 9. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  10. 10. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  11. 11. Parte 2:Mettiamoci un pò diAjax in questo tema!E la cosa non dispiacerà neancheai plugin WordCamp Foto: Milano 2012 “Ajax for dummies” - Daveynin
  12. 12. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  13. 13. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  14. 14. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  15. 15. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  16. 16. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  17. 17. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  18. 18. Ajaxare una form 2/2 (il più è Javascript) Possiamo usare la funzione wp_mail() per gestire manualmente gli invii! WordCamp Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  19. 19. Parte 3:Case historiesAKA - se gli altri si buttano da unponte lo fai anche tu? Foto: WordCamp “Ocean view branch” - Orange Milano 2012 County Archives
  20. 20. Minimalista (tema) Portofolio fotografico + pagine caricate in Ajax + Lightbox = cari vecchi siti in Flash :-) WordCamp Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  21. 21. AGT Noname (tema)I caricamenti dei contenuti avvengono tramite Ajax (con icona animata dicaricamento). WordCamp Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  22. 22. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  23. 23. Parte 4:Risorse e altra“robbba giusta”Plugin, guide e tutorial utili e non! WordCamp Foto: Milano 2012 “Presents” - Msmorningtom
  24. 24. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  25. 25. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  26. 26. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  27. 27. 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 Salvatore Laisa Milano 2012 www.salvatorelaisa.net
  28. 28. e a questo punto.... GRAZIE! (e dateci dentro di domande!)WordCamp Salvatore LaisaMilano 2012 salvatorelaisa.net

×