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
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
Top Related