Sviluppare Plugin per WordPress

51
SVILUPPARE PLUGIN WordPress Meetup Torino - 09 Novembre 2016 Thomas Vitale @vitalethomas | #wptorino

Transcript of Sviluppare Plugin per WordPress

Page 1: Sviluppare Plugin per WordPress

SVILUPPARE PLUGINWordPress Meetup Torino - 09 Novembre 2016

Thomas Vitale

@vitalethomas | #wptorino

Page 2: Sviluppare Plugin per WordPress

#WPTORINO

SVILUPPARE PLUGIN

▸ Introduzione ai Plugin

▸ Le basi dello sviluppo

▸ Esempio di sviluppo

2

Page 3: Sviluppare Plugin per WordPress

47 618PLUGIN su WordPress.org

3

Page 4: Sviluppare Plugin per WordPress
Page 5: Sviluppare Plugin per WordPress

1. INTRODUZIONE AI PLUGIN

5

Page 6: Sviluppare Plugin per WordPress

CHE COS’È UN PLUGIN1. INTRODUZIONE AI PLUGIN

6

Page 7: Sviluppare Plugin per WordPress

CORE

TEMI PLUGIN

7

Page 8: Sviluppare Plugin per WordPress

PERCHÉ I PLUGIN1. INTRODUZIONE AI PLUGIN

8

Page 9: Sviluppare Plugin per WordPress

DON’T TOUCH THE CORE!

HODORGame of Thrones @ Home Box Office, Inc. All Rights Reserved.

9

Page 10: Sviluppare Plugin per WordPress

LE API DI WORDPRESS10

Page 11: Sviluppare Plugin per WordPress

THE PLUGIN TERRITORY

1. INTRODUZIONE AI PLUGIN

11

Page 12: Sviluppare Plugin per WordPress

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

Page 13: Sviluppare Plugin per WordPress

2. LE BASI DELLO SVILUPPO

13

Page 14: Sviluppare Plugin per WordPress

I CONCETTI PRINCIPALI

2. LE BASI DELLO SVILUPPO

14

Page 15: Sviluppare Plugin per WordPress

I CONCETTI PRINCIPALI

LA STRUTTURA

15

/wp-content/plugins/ilmioplugin/

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BYilmioplugin.php

Page 16: Sviluppare Plugin per WordPress

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

Page 17: Sviluppare Plugin per WordPress

PREFISSI! PREFISSI OVUNQUE!

BUZZ LIGHTYEAR

17

Page 18: Sviluppare Plugin per WordPress

HOOK

Page 19: Sviluppare Plugin per WordPress

CORE

TEMI PLUGIN

19

Page 20: Sviluppare Plugin per WordPress

FUNZIONE DI CALLBACK

Page 21: Sviluppare Plugin per WordPress

AGGANCIO A UN HOOK

Page 22: Sviluppare Plugin per WordPress

CORE

PLUGIN

22

Icons from www.vecteezy.com

Page 23: Sviluppare Plugin per WordPress

CORE

PLUGIN

22

Icons from www.vecteezy.com

Page 24: Sviluppare Plugin per WordPress

LE AZIONI2. LE BASI DELLO SVILUPPO

23

Page 25: Sviluppare Plugin per WordPress

LE AZIONI

hook

Processo di esecuzione del Core di WordPress

24

Icons from www.vecteezy.com

Page 26: Sviluppare Plugin per WordPress

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

Page 27: Sviluppare Plugin per WordPress

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

Page 28: Sviluppare Plugin per WordPress

LE AZIONI

hookProcesso di esecuzione del Core di WordPress

Funz

ione

1

Funz

ione

3

Funz

ione

2

25

Icons from www.vecteezy.com

Page 29: Sviluppare Plugin per WordPress

LE AZIONI

wp_headProcesso di caricamento del sito

Caric

a CS

S

26

Icons from www.vecteezy.com

Page 30: Sviluppare Plugin per WordPress

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

Page 31: Sviluppare Plugin per WordPress

I FILTRILE BASI DELLO SVILUPPO

28

Page 32: Sviluppare Plugin per WordPress

I FILTRI

hook

Processo di esecuzione del Core di WordPress

29

Icons from www.vecteezy.com

Page 33: Sviluppare Plugin per WordPress

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

Page 34: Sviluppare Plugin per WordPress

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

Page 35: Sviluppare Plugin per WordPress

I FILTRI

the_contentProcesso di esecuzione del Core di WordPress

Funz

ione

30

Icons from www.vecteezy.com

Page 36: Sviluppare Plugin per WordPress

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

Page 37: Sviluppare Plugin per WordPress

3. ESEMPIO DI SVILUPPO

32

Page 38: Sviluppare Plugin per WordPress
Page 39: Sviluppare Plugin per WordPress

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 BYtom-book-banner.php

css/

style.css

Page 40: Sviluppare Plugin per WordPress

CREAZIONE DEL PLUGIN

3. ESEMPIO DI SVILUPPO

35

Page 41: Sviluppare Plugin per WordPress

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

Page 42: Sviluppare Plugin per WordPress

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

Page 43: Sviluppare Plugin per WordPress

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

Page 44: Sviluppare Plugin per WordPress

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

Page 45: Sviluppare Plugin per WordPress

OTTIMIZZAZIONE DEL PLUGIN

3. ESEMPIO DI SVILUPPO

40

Page 46: Sviluppare Plugin per WordPress

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

Page 47: Sviluppare Plugin per WordPress

PUBBLICAZIONE DEL PLUGIN

3. ESEMPIO DI SVILUPPO

42

Page 48: Sviluppare Plugin per WordPress

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

Page 49: Sviluppare Plugin per WordPress

RISORSE UTILI

44

Page 50: Sviluppare Plugin per WordPress

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

Page 51: Sviluppare Plugin per WordPress

PRONTI A SVILUPPARE IL VOSTRO PRIMO PLUGIN?Thomas Vitale |@vitalethomas | #wptorino

46

Quest’opera è distribuita con Licenza Creative Commons Attribuzione 3.0 Italia