Speech WordCamp-KnowCamp, Modena 19 marzo 2011

1. 10 more things
Dieci tips and tricks che vi aiuteranno a sviluppare temi e plugins sempre più funzionali e
basati sul nostro CMS preferito: Wordpress
Giovambattista Fazioli
CTO & evangelist developer, co-founder - Saidmade Srl

2. wordpress

3. il successo di wordpress
• LAMP (Linux, Apache, MySQL, PHP)
• temi semplici e personalizzabili
• vasta libreria di plugins semplici da
realizzare
• modello di sviluppo lineare PHP
• CMS

4. temi & plugins

5. 5 cose sui temi

6. 1. cos’è un tema?
è un insieme di file posizionati all’interno di una cartella, a sua
volta posizionata nel percorso
/wp-content/themes
wordpress si aspetta di trovare “almeno” un determinato tipo di
file all’interno della cartella del tema, come:
/wp-content/themes/
-> miotema/
--> styles.css
--> index.php

7. 1. cos’è un tema?
“il tema, nella realizzazione di un sito web con tecnologia
wordpress, rappresenta il cuore di tutto il sistema, molto più di
una valanga di plugins”
• cosa visualizzare
• come visualizzarlo

8. 2. come realizzare un tema
“la realizzazione di un tema da parte di un singolo, nella sua
semplicità, richiede un concentrato di varie competenze”
• gusto gra co
• capacità utilizzare strumenti come Adobe
Photoshop pensando al codice nale
• HTLM e CSS
• PHP
• struttura e le funzioni di Wordpress

9. 2. come realizzare un tema
1. content design
2. prototipo gra co
3. scrittura codice (PHP/HTML) per visualizzare
i contenuti
4. taglio della gra ca e scrittura CSS

10. ti ps
2. come realizzare un tema
content design

11. ti ps
2. come realizzare un tema
prototipo grafico

12. ti ps
2. come realizzare un tema
scrittura codice HTML/PHP

13. ti ps
2. come realizzare un tema
taglio della grafica + CSS

14. 3. cosa visualizzare
Wordpress permette sostanzialmente di collezionare contenuti
testuali (POST, PAGE, …) emultimediali (immagini, video,
documenti PDF, …).
Questi contenuti (descritti nel Content Design) possono essere
estratti in vari modi: tramite le funzioni – il tema – standard di
Wordpress, tramite l’uso di Plugin, scrivendo proprie funzioni.
Ogni file nel tema di Wordpress svolge una funzione particolare e
viene automaticamente richiamato da Wordpress in determinate
circostanze. I file più importanti di un tema (che può essere
composto anche da numerosi file) sono:

15. 3. cosa visualizzare
/wp-content/themes/
-> miotema/
--> archive.php
--> comments.php
--> footer.php
--> functions.php
--> header.php
--> index.php
--> page.php
--> sidebar.php
--> single.php
--> style.css

16. ti ps
3. cosa visualizzare
In linea di massima potremmo affermare che tutti i file elencati,
determinano il cosa verrà visualizzato, mentre style.css il come.
index.php, ad esempio, è il file principale, quello che corrisponde
alla Home Page.
header.php e footer.php contengono il codice HTML e PHP
utilizzato rispettivamente nell’header e nel footer.
Questa tecnica permette alle altre pagine di occuparsi
esclusivamente del contenuto che cambia, normalmente la parte
centrale.

17. ti ps
3. cosa visualizzare
A livello logico tutte le pagine di un tema possono essere
ricondotte a questo schema:
<?php get_header(); ?>
<div id="content">
...
</div>
<?php get_footer(); ?>

18. ti ps
3. cosa visualizzare
Wordpress permette varianti e semplificazioni relative al naming
dei file del tema.
Ad esempio il file archive.php è quello che si occupa della
visualizzazione degli archivi, cioè la lista dei contenuti (post) per
categoria, tag, data, etc…
Capita spesso, sopratutto in siti web che non sono
necessariamente dei blog, di dover trattare la
visualizzazione di una categoria diversamente da un’altra.

19. ti ps
3. cosa visualizzare
In prima analisi verrebbe immediatamente spontane inserire una
condizione all’interno del file archive.php del tipo:
if( is_category('news') ) {
// Visualizzazione per le News
} else {
// Altre visualizzazioni
}
Nonostante sia corretto, Wordpress fornisce una più semplice ed
elegante soluzione: basta creare un file composto da category- lo
slug (abbreviazione) della nostra categoria, tipo: category-
news.php.

20. ti ps
3. cosa visualizzare
Questa caratteristica può essere utilizzata anche per le pagine e
le sidebar, ma non per i post. Per le sidebar si nomina un file con
una notazione simile a quella utilizzata per le categorie, tipo
sidebar-footer.php, ma si usa una funzione per discriminare le
varie sidebar:
// Carica la sidebar standard: il file sidebar.php
get_sidebar();
// Carica la side del file sidebar-footer.php
get_sidebar( 'footer' );

21. ti ps
3. cosa visualizzare
Uno dei file più potenti e utili, presente nei temi, è functions.php.
Questo contiene di solito tutte le funzioni PHP che possono
essere richiamate all’interno di uno qualsiasi dei file del tema. In
questo file, poi, possono essere eseguite funzioni tali da
aggiungere o modificare funzioni presenti nel backend!
Tutte le funzioni inserite in questo file saranno disponibili
esattamente come un qualsiasi altra funzione Wordpress. Un
qualsiasi file del tema, come single.php ad esempio, potrà
accedere a queste funzionalità.

22. ti ps
4. snippet
<body <?php body_class(); ?>>

23. ti ps
4. snippet
/**
* Restituisce il contenuto di una pagina, sia essa pubblica
* che privata
*/
function pageBySlug($slug) {
$objectPost = get_page_by_path($slug);
return apply_filters("the_content", $objectPost->post_content);
}

24. 5. amministrazione
Altra importantissima funzionalità è quella di presentare in modo
più “usabile” i campi personalizzati all’utente che opera
l’inserimento di un post.
Questa è un’altro punto a favore di Wordpress, cioè la possibilità
di alterare la maschera di inserimento di un post/pagina,
rendendo il backend estremamente più semplice da utilizzare per
il cliente.
Normalmente nel backend i campi personalizzati si presentano
come:

25. 5. amministrazione
Normalmente nel backend i campi personalizzati si presentano
come:

26. ti ps
5. amministrazione
Sfruttando la funzione add_meta_box(), ben documentata sulla
documentazione sul sito Wordpress

27. 5 cose sui plugin

28. 1. quando scrivere un plugin

29. ti ps
2. le funzioni più importanti
Le funzioni più potenti presenti in Wordpress, che permettono
spesso di risolvere problematiche apparentemente complesse
sono le “poco documentate” add_filter() e add_action().
function logoCustom() {
echo '<style type="text/css">
#header-logo {
background-image: url(' . get_bloginfo('template_directory') . '/
images/logo.png) !important;
}
</style>';
}
add_action('admin_head', 'logoCustom');

30. ti ps
2. le funzioni più importanti
Con le ultime versioni di Wordpress, a livello di sistema, azioni e
filtri sono la stessa cosa. Tuttavia concettualmente vengono (a
ragione) distinti. Una action è appunto un’azione, tipo:
// Runs when a post or page is about to be deleted.
// Action function arguments: post or page ID.
function didDeletePost( $pID ) {
// Un post è stato eliminato, $pID indica l'ID
}
add_action('delete_post', 'didDeletePost');

31. ti ps
2. le funzioni più importanti
I filtri, a differenza, vengono usati ad esempio per alterare l’output
o il comportamento di alcune funzioni:
function modernContactInfo($contactmethods) {
unset($contactmethods['aim']);
unset($contactmethods['yim']);
unset($contactmethods['jabber']);
$contactmethods['facebook'] = 'Facebook';
$contactmethods['twitter'] = 'Twitter';
$contactmethods['linkedin'] = 'LinkedIn';
return $contactmethods;
}
add_filter('user_contactmethods', 'modernContactInfo');

32. ti ps
2. le funzioni più importanti
Per capire come funzionano i filtri, ecco un’estratto del codice
sorgente della funzione che usa Wordpress
function _wp_get_user_contactmethods() {
$user_contactmethods = array(
'aim' => __('AIM'),
'yim' => __('Yahoo IM'),
'jabber' => __('Jabber / Google Talk')
);
return apply_filters('user_contactmethods', $user_contactmethods);
}

33. ti ps
3. come scriverlo...
Una disamina sulla struttura di un Plugin è disponibile su:
Sulla struttura ad oggetti di un Plugin WordPress,
dove viene illustrato un possibile scheletro per confezionare
adeguatamente un plugin.

34. ti ps
4. tools

35. ti ps
4. tools

36. vi ew
p re
5. anteprima
MVC

37. vi ew
p re
5. anteprima
// Includo il framework Saidmade
include ("/libraries/smwordpress-plugins.php");
// Estendo la classe SMWordpressPlugin
class MioPlugin extends SMWordpressPlugin {
// ...
}
#import <UIKit/UIKit.h>
@interface myViewController : UIViewController
{
}

38. grazie

39. 10 more things
Dieci tips and tricks che vi aiuteranno a sviluppare temi e plugins sempre più funzionali e
basati sul nostro CMS preferito: Wordpress
Giovambattista Fazioli
CTO & evangelist developer, co-founder - Saidmade Srl