Come creare un tema per wordpress 3.0 – header.php

Una volta definita la sidebar e l’index sistemiamo l’header.

Questo è il codice che otterremo alla fine:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<title><?php wp_title( ‘|’, true, ‘right’ );  bloginfo(‘name’); ?></title><!–il titolo è preso dal nome del blog–>
<link rel=”stylesheet”  href=”<?php bloginfo(‘stylesheet_url’); ?>” media=”screen” />

<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” /><!–per i pingback–>

<!– rss2 e atom –>
<link rel=”alternate” title=”<?php printf(__(‘%s RSS Feed’, ‘yiw’), get_bloginfo(‘name’)); ?>” href=”<?php bloginfo(‘rss2_url’); ?>” />

<link rel=”alternate” title=”<?php printf(__(‘%s Atom Feed’, ‘yiw’), get_bloginfo(‘name’)); ?>” href=”<?php bloginfo(‘atom_url’); ?>” />

<?php wp_head(); ?><!–definisco che è l’header–>

</head>

<body>
<a href=”<?php echo get_option(‘home’); ?>/” title=”Ritorna alla Home Page”><!–link del titolo alla home–>
<?php bloginfo(‘name’); ?>
</a>
<?php bloginfo(‘description’); ?>

<?php wp_nav_menu(array(‘menu_class’ => ‘nav’,’container_class’ => ‘nav’ )); ?>

Ma andiamo con ordine.

Inizialmente dichiariamo il doctype e l’inizio del file html, non mi dilungherò di più su queste informazioni. Passiamo poi a dichiarare i meta, con la funzione bloginfo() non facciamo altro che prendere il nome del sito, quello scelto in fase di installazione e modificabile in qualsiasi momento dalle impostazioni generali. Successivamente inseriamo il titolo della pagina in modo dinamico inserendo tra il tag title:

<title><?php wp_title( ‘|’, true, ‘right’ ); bloginfo(‘name’); ?></title>

così facendo mostreremo prima il titolo del post o della pagina, poi il carattere pipeline | ed infine il nome del sito, wp_title() è la funzione che si occupa di fare questa operazione.

Ora colleghiamo la pagina al foglio di stile mediante questo codice:

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” media=”screen” />

bloginfo(‘stylesheet_url’) si occuperà di recuperare il foglio di stile del tema.

Questa riga:

<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

serve per permettere i pingback, mentre queste:

<link rel=”alternate” title=”<?php printf(__(‘%s RSS Feed’, ‘mioblog’), get_bloginfo(‘name’)); ?>” href=”<?php bloginfo(‘rss2_url’); ?>” />

<link rel=”alternate” title=”<?php printf(__(‘%s Atom Feed’, ‘mioblog’), get_bloginfo(‘name’)); ?>” href=”<?php bloginfo(‘atom_url’); ?>” />

permettono la lettura dei feed rss2 e atom.

Come ultimo elemento dell’head inseriamo una funzione di wordpress per definire che questo è l’header.

<?php wp_head(); ?>

Nel body andremo ad inserire il titolo del blog e il suo motto.

<a href=”<?php echo get_option(‘home’); ?>/” title=”Ritorna alla Home Page”><!–link del titolo alla home–>

<?php bloginfo(‘name’); ?>

</a>

<?php bloginfo(‘description’); ?>

get_option(‘home’) recupera il link all’home page del blog, mentre bloginfo(‘name’) ne recupera il nome, mettendo come parametro ‘description’, invece, recuperereo la descrizione.

Di tutto il file ci manca una sola riga, eccola qui:

<?php wp_nav_menu(array(‘menu_class’ => ‘nav’,’container_class’ => ‘nav’ )); ?>

Questa semplicissima riga è la più importante, perchè si occupa di mostrare il menu di wordpress 3.0, infatti dalla versione 3.0 di wordpress il menu è personalizzabile come nel caso di joomla e drupal, questa nuova funzione permette di recuperare questo menu non mostrando più le solite pagine. E’ la sostituta della vecchia wp_page_menu(), ancora utilizzabile.

Ma se proverete a creare il vostro menu ora (forse ci riuscite anche), ma otterrete un errore, è necessario infatti registrare il menu nel file functions.php:

<?php if ( function_exists( ‘register_nav_menu’ ) ) {
register_nav_menu( ‘pluginbuddy_mobile’, ‘PluginBuddy Mobile Navigation Menu’ );
}?>

Ora l’header è completato, e come sempre ecco il download.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *