10 more thingsDieci tips and tricks che vi aiuteranno a sviluppare temi e plugins sempre più funzionali e basati sul nostro CMS preferito: Wordpress

Giovambattista FazioliCTO & evangelist developer, co-founder - Saidmade Srl

wordpress

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

temi & plugins

5 cose sui temi

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

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

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

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

2. come realizzare un temacontent design

tips

2. come realizzare un temaprototipo grafico

tips

2. come realizzare un temascrittura codice HTML/PHP

tips

2. come realizzare un temataglio della grafica + CSS

tips

3. cosa visualizzareWordpress 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:

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

3. cosa visualizzareIn 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.

tips

3. cosa visualizzareA livello logico tutte le pagine di un tema possono essere ricondotte a questo schema:

<?php get_header(); ?>

<div id="content"> ... </div>

<?php get_footer(); ?>

tips

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.

tips

3. cosa visualizzareIn 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}

tips

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.

3. cosa visualizzareQuesta 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.phpget_sidebar();

// Carica la side del file sidebar-footer.phpget_sidebar( 'footer' );

tips

3. cosa visualizzareUno 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à.

tips

4. snippet

<body <?php body_class(); ?>>

tips

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);}

tips

5. amministrazioneAltra 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:

5. amministrazioneNormalmente nel backend i campi personalizzati si presentano come:

5. amministrazioneSfruttando la funzione add_meta_box(), ben documentata sulla documentazione sul sito Wordpress

tips

5 cose sui plugin

1. quando scrivere un plugin

2. le funzioni più importantitip

s

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');

2. le funzioni più importantitip

s

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');

2. le funzioni più importantitip

s

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');

2. le funzioni più importantitip

s

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);}

3. come scriverlo...tip

s

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.

4. toolstip

s

4. toolstip

s

5. anteprimaprev

iew

MVC

5. anteprimaprev

iew

// Includo il framework Saidmadeinclude ("/libraries/smwordpress-plugins.php");

// Estendo la classe SMWordpressPluginclass MioPlugin extends SMWordpressPlugin {  // ...}

#import <UIKit/UIKit.h>

@interface myViewController : UIViewController {    }

grazie

10 more thingsDieci tips and tricks che vi aiuteranno a sviluppare temi e plugins sempre più funzionali e basati sul nostro CMS preferito: Wordpress

Giovambattista FazioliCTO & evangelist developer, co-founder - Saidmade Srl