Creare un Tema WordPress – L’header, Pt. 3

Nella precedente lezione abbiamo generato dinamicamente altri elementi del nostro tema, come i fogli di stile. Oggi completeremo finalmente l’header, aggiungendo anche un menù di navigazione personalizzato.

Collegamento ai Feed

Per inserire il collegamento ai feed Atom e Rss scriviamo, all’interno dell’head:

<!-- RSS 2.0 -->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS" href="<?php bloginfo('rss2_url'); ?>" />
<!-- ATOM -->
<link rel="alternate" type="application/atom+xml" title="<?php get_bloginfo('name'); ?>Atom " href="<?php bloginfo('atom_url'); ?>" />

Per inserire il collegamento ai feed Atom e Rss dei commenti scriviamo, all’interno del dell’head:

<!-- RSS 2.0 -->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> Comments RSS" href="<?php bloginfo('comments_rss2_url'); ?>" />
<!-- ATOM -->
<link rel="alternate" type="application/atom+xml" title="<?php get_bloginfo('name'); ?>Comments Atom " href="<?php bloginfo('comments_atom_url'); ?>" />

Per inserire il collegamento ai feed Atom e Rss dei commenti scriviamo, all’interno del dell’head:

<!-- RSS 2.0 COMMENT-->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> Comments RSS" href="<?php bloginfo('comments_rss2_url'); ?>" />
<!-- ATOM COMMENT -->
<link rel="alternate" type="application/atom+xml" title="<?php get_bloginfo('name'); ?>Comments Atom " href="<?php bloginfo('comments_atom_url'); ?>" />

Collegamento ai Pingback e ultimi accorgimenti.

I Pingback sono un sistema di notifica che ci avvisa quando viene inserito un collegamento verso una pagina del nostro sito da parte di un altro sito web. Con WordPress ci viene sempre incontro la funzione bloginfo() quindi scriviamo:

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Non dimentichiamoci di rendere dinamico anche il meta tag che si occupa di definire il contenuto e la codifica della pagina, quindi sostituiamo

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

con

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

Dopo aver terminato di rendere dinamici tutti gli elementi dell’header dobbiamo inserire, prima della chiusura del tag head, wp_head(). Ciò non è indispensabile per il corretto funzionamento del nostro tema, quanto a quei plugin di terze parti che caricano nell’header i file javascript e fogli di stile.

<?php wp_head() ?>
</head>

Ora possiamo iniziare ad inserire il logo e il menù del nostro sito. Dopo aver caricato il logo in formato png all’interno della cartella images presente nella root del nostro tema, apriamo il tag body e scriviamo

<!-- inizio wrapper -->
<div id="wrapper">

<!-- start header -->
<div id="header">

<!-- start logo -->
<div id="logo">
<a href="<?php bloginfo('url') ?>" title="<?php bloginfo('name') ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo" />
 </a>
</div>
<!-- end logo -->
</div>
<!-- end header -->
<div class="clear"></div>

Apriamo la pagina principale del nostro tema. Ci troveremo davanti il logo che abbiamo appena caricato.

Adesso iniziamo a personalizzare lo stile del nostro tema. Apriamo il file style.css ed aggiungiamo

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

body { background:#dcdcdc; }
#header { width:940px;padding:10px;}
#logo { float:left;height:47px; }

#wrapper {width:960px; margin:auto; background:#f8f8f8; border-left:solid 5px #ccc;border-right:solid 5px #ccc;}
#content {width:640px;}
#sidebar {width:320px;}
.clear { clear: both; }

/* Menu */

#nav { float:right; height:47px; }
#nav ul { list-style:none;}
#nav li { float:left; margin:0 5px;line-height:37px; }
#nav li a{ text-decoration:none; color:#007fa6; font-family:Verdana, Geneva, sans-serif; font-size:12px; text-shadow:1px 1px 1px #fff; padding:10px  }
#nav li a:hover{ color:#262626;background:#fff;background:#007fa6;color:#fff;text-shadow:1px 1px 1px #000;}
#nav li.current-menu-item a, #nav li.current-post-ancestor a, #nav li.current-menu-parent a, #nav li.current-menu-parent a { color:#fff; background:#007fa6;text-shadow:1px 1px 1px #000; }
#nav li.current-menu-item a:hover, #nav li.current-post-ancestor a:hover, #nav li.current-menu-parent a:hover, #nav li.current-menu-parent a:hover {background:#005b77;}

Aggiungiamo il menù.

Adesso dobbiamo aggiungere il menù al nostro sito, torniamo nell’header e scriviamo, prima di:

</div>
<!-- end header -->

<!-- start menu -->
<div id="nav">
<?php wp_nav_menu(); ?>
</div>
<!-- end menu -->

Grazie alla funzione wp_nav_menu(), possiamo aggiungere il menù di navigazione al nostro tema in WordPress. Quello che abbiamo integrato è il menù automatico che genera WordPress in base alle pagine presenti nel nostro sito, per aggiungere i menù personalizzati introdotti dalla versione 3.0 dobbiamo innanzitutto creare il file functions.php. Come suggerisce il nome stesso, questo file serve ad aggiungere nuove funzionalità al nostro tema, in futuro lo analizzeremo nel dettaglio man mano che andremo avanti con le lezioni. Per il momento scriviamo, al suo interno:

add_action( 'init', 'crea_menu' );
function crea_menu() {
register_nav_menu( 'menu-wip', 'Menu principale' );
}

Nella funzione register_nav_menu(), abbiamo scritto prima il nome del menù e l’etichetta che verrà visualizzata nell’amministrazione di WordPress. Ora sostituiamo, in header.php

<?php wp_nav_menu(); ?>
con
?php wp_nav_menu( array('menu' => 'menu-wip' )); ?>

Volendo, è possibile generare automaticamente la voce “Home” del nostro menù, grazie ad un filter hook. Aggiungiamo, in functions.php, il seguente codice:

add_filter( 'wp_nav_menu_items', 'home_link', 10, 2 );
function home_link($items, $args) {
if (is_home() || is_front_page())
$class = 'class="current-menu-item"';
else
$class = '';
		
$home = '<li '.$class.'><a href="' . get_bloginfo('url') . '">' . __('Home') . '</a></li>';
$items = $home.$items;

return $items;
}

All’inizio controlliamo la pagina corrente. Nel caso sia la home carichiamo, nella variabile $class, la classe css relativa alla pagina corrente altrimenti lasceremo la variabile vuota. Successivamente genereremo il codice html necessario per la visualizzazione della voce di menù.
Deve essere comunque presente un menù personalizzato in WordPress con almeno una voce attiva altrimenti verranno visualizzate le pagine esistenti.
Questo codice può essere ulteriormente migliorato, in base alle vostre esigenze.

Fatto questo andiamo nel backend del nostro sito, sotto “Aspetto” troveremo “Menu” che prima non era presente e creiamo il nostro meù personalizzato, io ho aggiunto un link personalizzato riprendendo l’url del sito come Home , la pagina di esempio rinominandola “Pagina” e la categoria “senza categoria” di default, rinominandola “Categoria”.

In questa lezione abbiamo scoperto l’esistenza del file functions.php ed infine siamo riusciti ad aggiungere al nostro tema il supporto ad un menù personalizzato, completando finalmente l’header del nostro tema, la prossima lezione sarà dedicata al loop.