SVILUPPARE PLUGINWordPress Meetup Torino - 09 Novembre 2016

Thomas Vitale

@vitalethomas | #wptorino

#WPTORINO

SVILUPPARE PLUGIN

▸ Introduzione ai Plugin

▸ Le basi dello sviluppo

▸ Esempio di sviluppo

2

47 618PLUGIN su WordPress.org

3

1. INTRODUZIONE AI PLUGIN

5

CHE COS’È UN PLUGIN1. INTRODUZIONE AI PLUGIN

6

CORE

TEMI PLUGIN

7

PERCHÉ I PLUGIN1. INTRODUZIONE AI PLUGIN

8

DON’T TOUCH THE CORE!

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

9

LE API DI WORDPRESS10

THE PLUGIN TERRITORY

1. INTRODUZIONE AI PLUGIN

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

2. LE BASI DELLO SVILUPPO

13

I CONCETTI PRINCIPALI

2. LE BASI DELLO SVILUPPO

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 BYilmioplugin.php

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

PREFISSI! PREFISSI OVUNQUE!

BUZZ LIGHTYEAR

17

HOOK

CORE

TEMI PLUGIN

19

FUNZIONE DI CALLBACK

AGGANCIO A UN HOOK

CORE

PLUGIN

22

Icons from www.vecteezy.com

CORE

PLUGIN

22

Icons from www.vecteezy.com

LE AZIONI2. LE BASI DELLO SVILUPPO

23

LE AZIONI

hook

Processo di esecuzione del Core di WordPress

24

Icons from www.vecteezy.com

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

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

LE AZIONI

hookProcesso di esecuzione del Core di WordPress

Funz

ione

1

Funz

ione

3

Funz

ione

2

25

Icons from www.vecteezy.com

LE AZIONI

wp_headProcesso di caricamento del sito

Caric

a CS

S

26

Icons from www.vecteezy.com

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

I FILTRILE BASI DELLO SVILUPPO

28

I FILTRI

hook

Processo di esecuzione del Core di WordPress

29

Icons from www.vecteezy.com

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

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

I FILTRI

the_contentProcesso di esecuzione del Core di WordPress

Funz

ione

30

Icons from www.vecteezy.com

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

3. ESEMPIO DI SVILUPPO

32

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

CREAZIONE DEL PLUGIN

3. ESEMPIO DI SVILUPPO

35

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

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

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

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

OTTIMIZZAZIONE DEL PLUGIN

3. ESEMPIO DI SVILUPPO

40

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

PUBBLICAZIONE DEL PLUGIN

3. ESEMPIO DI SVILUPPO

42

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

RISORSE UTILI

44

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

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

46

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