Wordpress: creare un file header di un template

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:

  1. HTML5
  2. XHTML 1.0 Strict

Avremo quindi:

  1. <!DOCTYPE html>
  2. <!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:

  1. 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.
  2. 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:

  1. wp_title()
  2. get_bloginfo()
  3. is_home()
  4. is_front_page()

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:

  1. is_singular()
  2. get_option()
  3. wp_enqueue_script()

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.

Torna su