In questo articolo inizieremo a definire un template di Wordpress partendo dal file header.php, che definisce il DOCTYPE usato nelle nostre pagine, la sezione head e la parte del template che viene prima del loop principale del contenuto di Wordpress. La cosa più importante da capire non è il codice PHP, che è simile a quello visto in migliaia di altri temi come il nostro, ma le scelte di design a monte del tema. Tali scelte sono fondamentali e occorre affrontarle il prima possibile.
Il DOCTYPE
Quale DOCTYPE scegliere? Vi propongo due opzioni:
- HTML5
- XHTML 1.0 Strict
Avremo quindi:
<!DOCTYPE html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5
Con HTML5 sono possibili due approcci:
- Approccio retrocompatibile: useremo il nuovo DOCTYPE ma non i nuovi elementi per mantenere la retrocompatibilità non solo con i browser che non supportano i nuovi elementi ma anche con quelle tecnologie assistive che non riconoscono tali elementi.
- Approccio compatibile nel futuro: useremo i nuovi elementi unitamente a questo script di Remy Sharp che permetterà ai browser obsoleti di riconoscere i nuovi elementi.
XHTML 1.0 Strict
Con XHTML dovremo prestare molta attenzione al modo con cui gli elementi vengono annidati e al rapporto tra genitori e figli al fine di evitare problemi di validazione. A tal proposito consiglio la lettura di questa guida.
Per questo esempio sceglieremo HTML5 con approccio retrocompatibile.
Dichiarazione del tema: metadati
Inseriamo il seguente commento all'inizio del nostro file per aggiungere dei metadati informativi al nostro tema:
<?php
/**
* @package WordPress
* @subpackage Tema
*/
?>
Ossia avremo questo rapporto:
- Wordpress
- Tema
Inserire il DOCTYPE
Subito dopo i metadati viene il nostro DOCTYPE:
<!DOCTYPE html>
Inserire la lingua
Inseriamo quindi i nostri attributi per la lingua delle pagine usando language_attributes():
<html <?php language_attributes(); ?>>
Inserire la codifica delle pagine
Ora inseriamo la codifica delle pagine usando bloginfo:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
Formattare il titolo delle pagine
L'elemento title di ciascuna pagina deve essere formattato come segue:
- il nome del sito o il titolo della pagina sulla sinistra
- un carattere separatore al centro
- la descrizione o il nome del sito sulla destra
Questi requisiti variano ad una sola condizione: se la pagina servita è la home page del sito o un'altra pagina. Inoltre dobbiamo anche tener conto della paginazione, ossia del fatto che l'elenco degli articoli venga suddiviso su più pagine (pagina 1, pagina 2 e così via). Inoltre dobbiamo verificare se il sito ha una descrizione o meno. Quindi avremo:
<title>
<?php
global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
$description = get_bloginfo( 'description', 'display' );
if ( $description && ( is_home() || is_front_page() ) )
echo " | $description";
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Pagina %s', 'tema' ), max( $paged, $page ) );
?>
</title>
Le funzioni di Wordpress usate sono:
Inserire il foglio di stile principale
Il nostro foglio di stile, che risiede nella directory del nostro tema ed è di norma chiamato style.css, viene così inserito:
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Gestire i commenti e i pingback
Per gestire i commenti e i pingback utilizziamo uno script ed un elemento link:
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
Le funzioni Wordpress usate sono:
Chiudere la sezione head
In Wordpress, la sezione head viene in genere chiusa dalla funzione wp_head() che permette ai plugin di operare al meglio sul nostro tema:
<?php wp_head(); ?>
</head>
Dare una classe a body
Quindi viene l'elemento body a cui dobbiamo assegnare varie classi a seconda che si tratti di un articolo, di una pagina o della home page:
<body <?php body_class(); ?>>
La funzione usata è body_class().
Contenitore generale
Assegniamo un contenitore generale all'intero sito:
<div id="site">
L'header del sito
Ora definiamo l'elemento che conterrà il titolo del sito e la sua descrizione:
<div id="branding">
<h1>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
<p id="description"><?php bloginfo( 'description' ); ?></p>
</div>
La funzione esc_attr() di Wordpress ha l'unico scopo di formattare propriamente i caratteri speciali contenuti in una stringa trasformandoli in entità SGML, mentre la funzione home_url() restituisce l'URL assoluto della home page del sito.
La navigazione
Definiamo a questo punto la navigazione principale per le pagine o sezioni del nostro sito:
<div id="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</div>
In questo caso è stata usata la funzione wp_nav_menu().
Preparare il contenitore del loop
Infine, dobbiamo creare un contenitore che ospiterà il contenuto generato dal loop di Wordpress:
<div id="content">
<div id="main">
Questa parte è opzionale, nel senso che possiamo definirla anche nel file index.php.