In un tema WordPress ogni pagina prevede un'intestazione, una parte centrale destinata ai contenuti, una o più sidebar, e, infine, un fondo pagina. Il codice che genera queste aree può essere direttamente inserito nel template principale, oppure, in template specifici, che vengono inclusi dinamicamente nel template principale. Il primo template specifico è il file header.php, incluso nel template principale grazie al tag get_header.
La struttura dell'intestazione
Lo script genera l'intestazione del documento HTML e la parte superiore della pagina. L'output comprenderà, quindi, il doctype, i tag di apertura degli elementi html e body, nonché l'elemento head con i relativi meta tag, gli script e i fogli di stile. Questi, naturalmente, possono essere inseriti direttamente nel documento o inclusi con gli elementi link e script. Quello che segue è un esempio dell'intestazione generato dal file header.php:
<!doctype html>
<html class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
...
<title>Seventyone | Un nuovo sito targato WordPress</title>
<link rel="stylesheet" href="style.css" />
<script src="/js/vendor/modernizr-2.8.3.min.js"></script>
</head>Lo script provvede anche a generare la parte superiore della pagina e il menu di navigazione principale. La struttura su cui si svilupperà l'intestazione del tema Seventyone è la seguente:
<body class="home blog">
<div id="page" class="site">
<header id="site-header" class="site-header" role="banner">
<a class="home-link" href="..." title="Seventyone" rel="home">
<h1 class="site-title">Seventyone</h1>
</a>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="nav-menu">
<li id="menu-item-143" class="menu-item">
<a href="...">Home</a>
</li>
...
</ul>
</div>
</nav>
</header>L'apertura del documento
Una volta definita la struttura, si può procedere alla progettazione dello script. Esattamente come per il file index.php, le istruzioni PHP e il codice HTML del file header.php sono precedute dai meta-dati che identificano il tema:
<?php
/**
* @package WordPress
* @subpackage Seventy-One-WordPress-Theme
* @since Seventy One 1.0
*/
?>Subito dopo vanno generati il doctype e l'apertura dei tag <html> e <head>:
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<!-- the "no-js" class is for Modernizr. -->
<head>I tag condizionali permettono di definire un elemento html specifico per ogni versione di Internet Explorer. In questo blocco di codice, l'unica istruzione PHP è data dalla funzione language_attributes(), che genera gli attributi specifici per la lingua del sito.La classe no-js è, infine, richiesta dalla libreria Modernizr.
Si prosegue, quindi, con l'elemento head. Questo conterrà tutti i meta-tag del documento:
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="<?php wp_title( '|', true, 'right' ); ?>">
<meta name="description" content="<?php bloginfo('description'); ?>" />
...Del template tag bloginfo()si è già detto nei capitoli precedenti: qui i parametri charset e description forniscono la codifica e la descrizione del sito, come memorizzati nelle impostazioni generali e di lettura del pannello di amministrazione. La funzione wp_title(), invece, genera il titolo del sito. Si passa, quindi, agli elementi title, link e script:
<head>
...
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!-- <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/normalize.css"> -->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" />
<!-- Lea Verou's Prefix Free, lets you use only un-prefixed properties in yuor CSS files -->
<script src="<?php echo get_template_directory_uri(); ?>/js/vendor/prefixfree.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/vendor/modernizr-2.8.3.min.js"></script>Ancora una volta si è fatto ricorso alla funzione bloginfo(), cui è stato passato, questa volta, il parametro pingback_url. Le funzioni get_template_directory_uri() e get_stylesheet_uri() forniscono due dati diversi: la directory del tema corrente e l'URL del foglio di stile. Come si vede, nel tema Seventyone si fa ricorso al foglio di stile normalize.css, allo script -prefix-free e alla libreria Modernizr.
Infine, subito prima del tag di chiusura </head>, va invocata la funzione wp_head(), che completa l'intestazione del documento:
<head>
...
<?php wp_head(); ?>
</head>La testata della pagina
Chiuso il tag <head>, si va a generare la parte superiore della pagina. Viene aperto il tag <body> e creata l'a testata con il menu di navigazione:
<body <?php body_class(); ?>>
<div id="page" class="site">
<header id="site-header" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h3 class="site-description"><?php bloginfo( 'description' ); ?></h3>
</a>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<!-- <?php get_search_form(); ?> -->
</nav>
</header>La div#page fa da contenitore per l'intero contenuto della pagina. Questa viene aperta nel file header.php e sarà, poi, chiusa nel file footer.php, allo stesso modo degli elementi html e body.
Il primo elemento discendente è un header, che contiene il titolo e la descrizione del sito in h1 e h3. L'header, inoltre, contiene il menu di navigazione principale, racchiuso in un elemento nav. All'interno vengono invocate le funzioni wp_nav_menu e get_search_form. La prima genera il menu di navigazione, strutturato come lista non ordinata di elementi. Qualora siano presenti dei sottomenu, questi vengono strutturati nella forma di liste annidate, sicché un elemento li di un menu sovraordinato diventa il parent di un sottomenu. La seconda funzione, infine, genera un form di ricerca. Nella tabella che segue vengono elencate le funzioni del framework cui si è fatto riferimento nella progettazione del file header.php del tema Seventyone.
| Funzione | Descrizione |
|---|---|
language_attributes() |
Mostra gli attributi specifici della lingua del sito. |
esc_url() |
Filtra le URL codificando i caratteri speciali, elimina caratteri non validi o pericolosi, rimuove le URL che non appartengono a protocolli noti. |
wp_title() |
Mostra o recupera il titolo del sito. |
bloginfo() |
Mostra a video informazioni sul sito in base ai parametri passati come argomenti. |
get_bloginfo() |
Restituisce informazioni sul sito in base ai parametri passati come argomenti. |
get_template_directory_uri() |
Restituisce la directory in cui è istallato il tema corrente. |
get_stylesheet_uri() |
Restituisce l'URL del foglio di stile del tema corrente. |
wp_head() |
Genera le intestazioni del documento. |
language_attributes() |
Manda a video le classi associate al body. |
wp_nav_menu() |
Mostra un menu di navigazione creato nella scheda "Menus" del pannello di amministrazione. |
get_search_form() |
Mostra un form di ricerca. |
Il tag get_header
Si è detto che il file header.php viene incluso nel file index.php grazie all'include tag get_header(). Se al tag non viene passato alcun argomento, la funzione include l'header.php generico; tuttavia è possibile creare un header diverso per ogni tipo di pagina. Questo dovrà avere un nome composto dal prefisso header e da un suffisso che individua il template: header-{slug}.php.
Ad esempio, l'istruzione
<?php get_header( 'home' ); ?>Lo script includerà nel template corrente il file header-home.php. Predisponendo, quindi, template specifici, si potranno differenziare gli header a seconda della pagina richiesta dall'utente. Come si vedrà nei prossimi capitoli, la stessa logica può essere applicata ai template che generano le sidebar e il footer delle pagine.
Nel prossimo capitolo si analizzerà il template che genera la sidebar.