Come creare un vero tema WordPress. Theme Features

Prima di riprendere la descrizione del file header.php, esamineremo alcune caratteristiche modulari dei temi WordPress, cioè delle funzionalità che possono essere attivate o meno attraverso una serie di funzioni inserite all’interno del file functions.php. Ancora una volta Vi ricordo che per seguire questa guida è necessario:

• una installazione di WordPress funzionante;
• una conoscenza almeno di base di html, css, jQuery e php.

Theme Features

WordPress mette a disposizione degli sviluppatori di temi alcune funzionalità, che gli stessi possono integrare o meno all’interno dei temi in base alle loro esigenze. Ne parlo adesso perchè alcune di esse sono necessarie per comprendere il funzionamento di alcune funzioni inserite all’interno del file header.php. Queste features possono essere registrate all’interno del file function.php attraverso la funzione add_theme_support().

Torniamo al file functions.php, dove troviamo la funzione mymagazine_setup alla riga n. 20:

function mymagazine_setup(){
load_theme_textdomain( 'mymagazine', get_template_directory() . '/languages' );
 if ( ! isset( $content_width ) ) $content_width = 1100;
 
 register_nav_menus( array(
 'primary' => __( 'Primary Menu', 'mymagazine' ),
 'social' => __( 'Social Menu', 'mymagazine' ),
 ) );
 add_theme_support( 'custom-background' );
 add_theme_support( 'post-thumbnails' );
 add_theme_support( 'automatic-feed-links' );
 add_theme_support( 'title-tag' );
 $args = array(
 'flex-width' => true,
 'width' => 1100,
 'flex-height' => true,
 'height' => 126,
 'default-image' => '',
 );
 add_theme_support( 'custom-header', $args );
 add_theme_support( 'html5', array(
 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption',
 ) );
 add_theme_support( 'post-formats', array(
 'aside', 'gallery', 'image', 'video',
 ) );
 add_image_size( 'mymagazine-size', 703, 527 );

}
add_action( 'after_setup_theme', 'mymagazine_setup' );

 

Abbiamo utilizzato la funzione mymagazine_setup() perchè è agganciata all’action hook “after_setup_theme”, ideale per registrare le features che ci interessano. Utilizzare un action hook diverso, richiamato dopo “after_setup_theme” potrebbe causare degli errori.

Esaminiamo le singole righe di codice appena inserite:

if ( ! isset( $content_width ) ) $content_width = 1100;

Content Width è una caratteristica dei temi che pone un limite alla dimensione dei contenuti inseriti all’interno di una pagina. Nel nostro caso abbiamo inserito 1100 pixel, pertanto se venisse caricato un video od una immagine all’interno del tema di dimensione maggiore rispetto a 1100 pixel, WordPress automaticamente ne genererebbe una versione ridotta con una larghezza massima di 1100 pixel.

add_theme_support( 'custom-background' );

Custom Background è una theme feature obbligatoria sin dalla versione 3.4 di WordPress, che deve essere necessariamente inclusa nei temi per consentire la possibilità di modificare l’aspetto dello sfondo della pagina attraverso il customizzatore. Qualora voleste gestire i valori predefiniti del customizzatore, ad esempio del colore di sfondo, dovreste inserire gli argomenti in un array, richiamato tra parentesi come nell’esempio che segue;

$defaults = array(
'default-color' => '#eeeeee',
'default-image' => '%1$s/img/background-image.jpg',
); 
add_theme_support( 'custom-background', $defaults );

Una caratteristica del tema simile a quella appena esaminata è la “Custom Header”. Anch’essa deve essere obbligatoriamente inclusa nei temi a partire dalla versione 3.4 ed ha lo scopo di consentire la visualizzazione di una immagine della testata da caricare dal Customizer. Poichè nel nostro tema è necessario specificare alcuni argomenti da passare alla funzione, li abbiamo inseriti in un’array:

$args = array(
 'flex-width' => true,
 'width' => 1100,
 'flex-height' => true,
 'height' => 126,
 'default-image' => '',
 );
add_theme_support( 'custom-header', $args );

add_theme_support( 'automatic-feed-links' );

Grazie a questa funzione WordPress aggiunge automaticamente i link ai feed RSS nella <head> del documento;

add_theme_support( 'title-tag' );

Per caso avete notato che nel nostro file header.php manca il classico tag <title>? Grazie a questa feature è WordPress a generarlo dinamicamente per noi;

add_theme_support( 'html5', array(
'search-form', 'comment-form', 'comment-list', 'gallery', 'caption',
) );

All’interno di WordPress ci sono funzioni, o template tag, che una volta chiamate generano il codice html di interi elementi di una pagina web. Ad esempio esiste il tag get_search_form() che visualizza un form di ricerca predefinito, generato in HTML4. Con le righe di codice sopra riportate, stiamo dicendo a WordPress di utilizzare il markup HTML5 per generare gli elementi predefiniti della pagina web indicate all’interno dell’array.

add_theme_support( 'post-formats', array(
'aside', 'gallery', 'image', 'video'
) );

Con questa funzione abilitiamo il supporto ai c.d. “post format”. I post format sono molto semplicemente delle “meta-informazioni” associate ai post, che variano in base al formato prescelto. Grazie a queste “meta-informazioni” è possibile, ad esempio, selezionare solo e soltanto i post con il medesimo formato con la funzione get_post_format($post->ID); oppure utilizzando la funzione post_class() è possibile generare dinamicamente delle classi css con cui applicare delle regole di stile specifiche per i diversi formati. I formati ammessi sono quelli contenuti nell’array riportato sopra. I temi non devono riportare necessariamente tutti i formati, è possibile registrare (e quindi personalizzare) soltanto i tipi di formati di cui si ha l’esigenza. Dopo avere inserito il codice riportato sopra, provate ad andare nella schermata di modifica di un post, sulla parte destra troverete qualcosa simile all’immagine che segue:

 

add_theme_support( 'post-thumbnails' );

Ho lasciato per ultima questa funzione, che abilita le c.d. “immagini in evidenza” all’interno del tema. L’immagine caratteristica è l’immagine principale di un post o una pagina, che può essere selezionata dalla pagina di creazione o modifica dei post. Se avete installato Mymagazine, provate a modificare un articolo, nella parte inferiore destra dello schermo troverete qualcosa del genere:

Cliccate su “Set feature image” ed effettuate l’upload di una immagine. Salvate il post e visualizzatelo sul sito: troverete l’immagine selezionata esattamente al proprio posto, in quanto richiamata dalla funzione the_post_thumbnail() che esamineremo nei prossimi articoli.

Esistono ulteriori “theme features” che non ho inserito nel nostro tema, di cui potrete trovare ogni dettaglio nella relativa pagina del codex.

La funzione register_nav_menus()

La funzione mymagazine_setup() contiene alcune righe di codice che non riguardano le “theme features”, ma è opportuno parlarne adesso perchè si collegano direttamente ai menu presenti nel file header.php che completeremo nel prossimo articolo. Mi riferisco alla funzione register_nav_menus() che troviamo alle righe 29-32 del file functions.php

register_nav_menus( array(
 'primary' => __( 'Primary Menu', 'mymagazine' ),
 'social' => __( 'Social Menu', 'mymagazine' ),
 ) );

Questa funzione consente la registrazione di una pluralità di menu, da inserire in un array associativo con la consueta sintassi chiave => valore, in cui la chiave è lo slug del menu (nel nostro caso “primary” e “social”) ed il valore è la relativa descrizione. Grazie a questa funzione, quando nel pannello di amministrazione creeremo un nuovo menù, potremo associarlo ad una delle due posizioni già registrate, come evidenziato nella schermata successiva:

Nel prossimo articolo completeremo il file header.php ed avremo modo di approfondire l’argomento menu. Nel frattempo, se avete dubbi o domande scrivete pure un commento qui sotto, e se l’articolo vi è piaciuto, condividetelo!