Creare un template per WordPress: header.php è fondamentale
La volta scorsa abbiamo visto la struttura base di un template di WordPress. Perlomeno, i files di base da avere per poterlo far riconoscere dal sistema.
Abbiamo anche accennato al fatto che la pagina si può dividere in tre parti fondamentali. Ma la parte fondamentale per far funzionare tutto è la header.php. Analizziamola punto per punto e vediamo cosa va inserito in questa parte:
- senza il doctype non si va da nessuna parte. Ebbene, il doctype transitional è quello più adatto per WordPress in questo caso. Semplicemente perchè non è “strict” e quindi troppo rigido e si presta a maggior malleabilità. Ecco il doctype da usare e il primo metadato da usare relativo alla head:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11"> - il title
- i metadati sul tipo di carattere e sulla versione di wordpress
- i link a fogli di stile, rss e per il funzionamento dei pingback, e se volessimo aggiungere un foglio di stile aggiuntivo o alternativo per explorer 6:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_directory'); ?>/css/reset.css" />
<!--[if lte IE 6]>
<link href="<?php bloginfo('stylesheet_directory'); ?>/ie6.css" rel="stylesheet" type="text/css" />
<![endif]--> - Infine il richiamo agli archivi di WordPress
<?php wp_get_archives('type=monthly&format=link'); ?>
e il tag importantissimo che permette a WordPress di inserire nella head tutti gli script necessari ai plugin aggiuntivi:
<?php wp_head(); ?>
Mi raccomando non lo dimenticate, altrimenti potrete impazzire per ore a capire perchè un plugin non funziona
- Ovviamente poi chiudete la
</head>e partite con il tag<body>ed ecco il vostro header.php
Riassumento, ecco tutto il codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php if ( function_exists('optimal_title') ) { optimal_title('|'); bloginfo('name'); } else { bloginfo('name'); wp_title('|'); } ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_directory'); ?>/css/reset.css" />
<!--[if lte IE 6]>
<link href="<?php bloginfo('stylesheet_directory'); ?>/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>
<body>
Scarica qui il file completo: header_wordpress
Note: spesso in questo file si può inserire per comodità l’apertura del tag contenitore dell’intero sito, dato che quello solitamente sta lì e non si muove. Salvo ricordarsi di chiuderlo nel footer.php mi raccomando
E per questa lezione è andata. Alla prossima!
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
22 Commenti
come sempre grazie per questi articoli su wordpress… mi saranno utili presto
prego! mi spiace solo dover spezzettare l’argomento in tanti pezzi, ma è meglio capire tutto e acquisire per bene, concordi?
Sul transitional io sono un po’ shizzinoso
A leggere al documentazione W3C il transitional nasce per convertire il markup vecchio in xhtml; volendo aderire veramente agli standard il transitional è deprecato per i progetti nuovi.
Io in genere parto con lo strict e se mi scontro con un blocco insormontabile passo al transitional.
Però è anche vero che il tema di default di WP usa il transitional… Laura, mi sai dire perché?
proprio per evitare di incontrare dei “blocchi” insormontabili e dover tornare indietro
a parte gli scherzi, non ho approfondito, ma se è così c’è un motivo. sono sicura che a mettergli lo strict qualcosa non funzionerebbe a dovere, ma non ho tempo di verificare cosa. chi si vuole divertire siamo pronti ad accogliere i vostri feedback in merito
ps tanto per cominciare, quando inserisci un link ad esempio, ti da la possibilità di aprirlo in una pagina nuova (target=_blank) che come si sa nello strict è proibito. questa è una banale, ma credo che molte funzioni del cms sarebbero inibite
Più che inibite direi che, anche se il tema realizzato fosse poi conforme al 100% con la DTD strict, difficilmente poi i contenuti inseriti manterrebbero tale validità… per l’appunto basta già il targer=”_blank”, ma non possimao dimenticare tutto quello che possono fare i plugin… insomma secondo me lo strict in un CMS è solo un’utopia
Grazie Lauryn, sempre chiara ed esaustiva!
@Engelium: esattamente
@andrea: grazie!
Per i meta keywords e description come consigliate di fare?
c’è All in seo – pack un plugin che li inserisce automanticamente e li gestisci comodamente dal pannello di gestione
Perfetto Lauryn! Questo articolo mi è capitato come si dice a “fagiolo”, grazie ancora!
Mi piaceeee!! Complimenti Lauryn!
Il prossimo articolo dedicalo al doctype! non tutti sanno cos’è e come si usa..
lo troverei molto interessante come “articolo miliare” lasciami passare il termine
@andrea: ne tengo conto in uno dei prossimi articoli, per ora seguo il filone wordpress se no mi perdo
Io ho sempre realizzato i template per WordPress utilizzando STRICT e non ho mai incontrato problemi. L’unico, se poi vogliamo definirlo problema, è l’apertura dei link su un altra pagina ma con un paio di righe di Javascript si aggira.
[...] 03) Creare un template per WordPress: header.php è fondamentale [...]
[...] Bene, abbiamo visto la struttura basilare di un template WordPress e visto cosa va messo in un file molto importante come header.php. [...]
Grazie per le delucidazioni sul doctype del template default, devo dire che quella che mi convince di più è quella che fa riferimento ai contenuti inseriti.
E anche questa è fatta
Grazie Lauryn, continua così che a fine corso ti sforno un template coi fiocchi
ciao, cos’è ?
grazie e complimenti per gli articoli
ops, cos’è era riferito a questo: head profile=”http://gmpg.org/xfn/11″ ho tolto vediamo se adesso lo scrive
http://www.w3.org/TR/html4/struct/global.html#h-7.4.4.3
Salve ragazzi, sto creando un template wordpress da zero, la mia domanda è:
E’ possibile far girare una jquery di immaggini?
ovvero ho una slide jquery con una lista ul di immagini dentro un div. quando inserisco il codice js nel head wordpress non lo legge come posso fargli leggere il codice jquery a wordpress?
jquery-1.4.2.js
con dreamweaver gira funziona ma con wordpress non riesco a capire dove sbaglio.
attendo risposte e vi ringrazio anticipatamente.