Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sviluppare Plugin per WordPress

2,047 views

Published on

Cosa sono i Plugin in WordPress, perché si utilizzano e le basi dello sviluppo.

Published in: Internet
  • Be the first to comment

Sviluppare Plugin per WordPress

  1. 1. SVILUPPARE PLUGIN WordPress Meetup Torino - 09 Novembre 2016 Thomas Vitale @vitalethomas | #wptorino
  2. 2. #WPTORINO SVILUPPARE PLUGIN ▸ Introduzione ai Plugin ▸ Le basi dello sviluppo ▸ Esempio di sviluppo 2
  3. 3. 47 618PLUGIN su WordPress.org 3
  4. 4. 1. INTRODUZIONE AI PLUGIN 5
  5. 5. CHE COS’È UN PLUGIN 1. INTRODUZIONE AI PLUGIN 6
  6. 6. CORE TEMI PLUGIN 7
  7. 7. PERCHÉ I PLUGIN 1. INTRODUZIONE AI PLUGIN 8
  8. 8. DON’T TOUCH THE CORE! HODOR Game of Thrones @ Home Box Office, Inc. All Rights Reserved. 9
  9. 9. LE API DI WORDPRESS 10
  10. 10. THE PLUGIN TERRITORY 1. INTRODUZIONE AI PLUGIN 11
  11. 11. THE PLUGIN TERRITORY FUNCTIONS.PHP Aggiungere funzionalità uniche a un tema. ▸ Supporto Menu ▸ Supporto Barra laterale ▸ Supporto Immagine in evidenza ▸ Opzioni di personalizzazione PLUGIN Estendere le funzionalità di WordPress. ▸ Custom Post Types ▸ Custom Fields ▸ Custom Taxonomies ▸ Shortcodes VS 12
  12. 12. 2. LE BASI DELLO SVILUPPO 13
  13. 13. I CONCETTI PRINCIPALI 2. LE BASI DELLO SVILUPPO 14
  14. 14. I CONCETTI PRINCIPALI LA STRUTTURA 15 /wp-content/plugins/ilmioplugin/ Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY ilmioplugin.php
  15. 15. I CONCETTI PRINCIPALI L’HEADER DEL FILE PRINCIPALE (ILMIOPLUGIN.PHP) /** * Plugin Name: Il Mio Plugin * Plugin URI:  http://wptorino.it/ * Description: The awesome plugin for Torino WordPress Community. * Version:     1.0 * Author:      Thomas Vitale * Author URI:  https://thomasvitale.com */ 16
  16. 16. PREFISSI! PREFISSI OVUNQUE! BUZZ LIGHTYEAR 17
  17. 17. HOOK
  18. 18. CORE TEMI PLUGIN 19
  19. 19. FUNZIONE DI CALLBACK
  20. 20. AGGANCIO A UN HOOK
  21. 21. CORE PLUGIN 22 Icons from www.vecteezy.com
  22. 22. CORE PLUGIN 22 Icons from www.vecteezy.com
  23. 23. LE AZIONI 2. LE BASI DELLO SVILUPPO 23
  24. 24. LE AZIONI hook Processo di esecuzione del Core di WordPress 24 Icons from www.vecteezy.com
  25. 25. LE AZIONI hook function tom_ciak() { // Stampa un paragrafo echo “<p>Ciak, si gira!</p>”; } Processo di esecuzione del Core di WordPress 1 24 Icons from www.vecteezy.com
  26. 26. LE AZIONI hook function tom_ciak() { // Stampa un paragrafo echo “<p>Ciak, si gira!</p>”; } Processo di esecuzione del Core di WordPress add_action( ‘hook’, ‘tom_ciak’ ); 1 2 24 Icons from www.vecteezy.com
  27. 27. LE AZIONI hook Processo di esecuzione del Core di WordPress Funzione1 Funzione3 Funzione2 25 Icons from www.vecteezy.com
  28. 28. LE AZIONI wp_head Processo di caricamento del sito CaricaCSS 26 Icons from www.vecteezy.com
  29. 29. GLI HOOK LE AZIONI ▸ Le Azioni permettono di aggiungere dei dati o di cambiare il funzionamento di WordPress. ▸ Le relative funzioni di callback vengono eseguite in un punto specifico dell’esecuzione del core di WordPress, di un tema o di un plugin. ▸ Possono essere utilizzate per: ▸ Aggiungere un foglio di stile CSS. ▸ Aggiungere un file JavaScript. ▸ Stampare dell’output all’utente. 27
  30. 30. I FILTRI LE BASI DELLO SVILUPPO 28
  31. 31. I FILTRI hook Processo di esecuzione del Core di WordPress 29 Icons from www.vecteezy.com
  32. 32. I FILTRI hook function tom_tg( $content ) { return $content .“Linea allo studio”; } Processo di esecuzione del Core di WordPress 1 29 Icons from www.vecteezy.com
  33. 33. I FILTRI hook function tom_tg( $content ) { return $content .“Linea allo studio”; } Processo di esecuzione del Core di WordPress add_filter( ‘hook’, ‘tom_tg’ ); 1 2 29 Icons from www.vecteezy.com
  34. 34. I FILTRI the_content Processo di esecuzione del Core di WordPress Funzione 30 Icons from www.vecteezy.com
  35. 35. GLI HOOK I FILTRI ▸ I Filtri permettono di cambiare i dati durante l’esecuzione di WordPress. ▸ Le relative funzioni di callback accettano una variabile, la modificano e la ritornano. ▸ I Filtri sono pensati per lavorare in modo isolato e non dovrebbero mai avere effetti collaterali ad esempio sulle variabili globali. ▸ Possono essere utilizzati per: ▸ Mostrare un’icona quando un articolo appartiene a una determinata categoria. ▸ Aggiungere del codice alla fine di un articolo. 31
  36. 36. 3. ESEMPIO DI SVILUPPO 32
  37. 37. ESEMPIO DI SVILUPPO TOM BOOK BANNER 34 /wp-content/plugins/tom-book-banner/ Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY tom-book-banner.php css/ style.css
  38. 38. CREAZIONE DEL PLUGIN 3. ESEMPIO DI SVILUPPO 35
  39. 39. CREAZIONE DEL PLUGIN L’HEADER DEL FILE PRINCIPALE (TOM-BOOK-BANNER.PHP) /** * Plugin Name: Tom Book Banner * Plugin URI: http://wptorino.it/ * Description: Show a fixed banner to promote your brand new e-book. * Version: 1.0 * Author: Thomas Vitale * Author URI: https://thomasvitale.com * License: GPL2 * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: wptorino * Domain Path: /languages */ 36
  40. 40. CREAZIONE DEL PLUGIN IL BANNER HTML (TOM-BOOK-BANNER.PHP) function tom_book_banner_html() { ?> <div class="book-banner"> <p> Sei appasionato di libri? <a href="#">Scarica</a> gratuitamente il mio nuovo e-book! </p> </div> <?php } add_action( 'wp_footer', 'tom_book_banner_html', 1 ); 37
  41. 41. CREAZIONE DEL PLUGIN IL CARICAMENTO DELLO STILE (TOM-BOOK-BANNER.PHP) function tom_load_css() { wp_enqueue_style( 'tom-book-banner', plugins_url( 'css/style.css', __FILE__ ) ); } add_action( 'wp_enqueue_scripts', 'tom_load_css' ); 38
  42. 42. CREAZIONE DEL PLUGIN LO STILE CSS (CSS/STYLE.CSS) .book-banner { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; padding: 10px 0; background: #86151d; min-height: 24px; line-height: 24px; color: #eeeeee; font-size: 1em; } .book-banner p { margin: 0; padding: 5px; } .book-banner a { color: #eee; text-decoration: underline; } 39
  43. 43. OTTIMIZZAZIONE DEL PLUGIN 3. ESEMPIO DI SVILUPPO 40
  44. 44. CREAZIONE DEL PLUGIN OTTIMIZZAZIONE: PREDISPORRE IL PLUGIN PER LA TRADUZIONE function tom_book_banner_html() { ?> <div class="book-banner"> <p> <?php _e( ‘Sei appassionato di libri?’, ‘wptorino’ ); ?> <?php _e( ‘<a href="#">Scarica</a> gratuitamente il mio nuovo e-book!’, ‘wptorino’ ); ?> </p> </div> <?php } add_action( 'wp_footer', 'tom_book_banner_html', 1 ); 41
  45. 45. PUBBLICAZIONE DEL PLUGIN 3. ESEMPIO DI SVILUPPO 42
  46. 46. ESEMPIO DI SVILUPPO COME PUBBLICARE UN PLUGIN ▸ Seguire attentamente le linee guida. ▸ Preparare un file readme.txt secondo le specifiche. ▸ Il Plugin deve avere una licenza compatibile con GNU GPL v2. ▸ Controllare che sul repository non esista già un Plugin con lo stesso nome. ▸ Accedere con un account WordPress.org. ▸ Inviare il Plugin. ▸ Una volta approvato, utilizzare SVN per caricare sul repository i file e pubblicare aggiornamenti. 43
  47. 47. RISORSE UTILI 44
  48. 48. RISORSE UTILI PER APPROFONDIRE ▸ WordPress Codex: https://codex.wordpress.org ▸ Plugin Developer Handbook: https://developer.wordpress.org/plugins/ ▸ Professional WordPress: Design and Development, 3rd edition (Wrox) di Brad Williams, David Damstra, Hal Stern ▸ Sviluppare con WordPress, II edizione (Smashing WordPress: Beyond the Blog, 4th edition) di Thord Daniel Hedengren ▸ Codice sorgente plugin d’esempio e altre risorse: https://github.com/ ThomasVitale/SvilupparePlugin 45
  49. 49. PRONTI A SVILUPPARE IL VOSTRO PRIMO PLUGIN? Thomas Vitale |@vitalethomas | #wptorino 46 Quest’opera è distribuita con Licenza Creative Commons Attribuzione 3.0 Italia

×