Creare un Tema WordPress – Header, pt. 1
In precedenza ti ho illustrato quali sono i file necessari per il funzionamento di un tema WordPress, la gerarchia dei file e come aggiungere le informazioni all’interno del file style.css.
Questo articolo, invece, è dedicato ad uno dei principali file di un tema WordPress, ovvero il file header.php, che conterrà la parte iniziale di una pagina HTML, come la definizione del DOCTYPE, i meta tag, il logo ed il menu principale del sito.
Il file header.php
Come prima cosa crea il file header.php ed aggiungi:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Titolo della pagina</title> <link rel="stylesheet" type="text/css" href="wp-content/themes/wip_theme/style.css" media="screen" /> </head>
Dopo aver salvato, puoi richiamare la testata del tema all’interno di index.php in questo modo
<?php get_header(); ?>
Se ora torni alla home del sito, troverai il meta tag title Titolo della pagina
Per rendere dinamico il meta tag title e visualizzare il titolo della pagina corrente, puoi utilizzare la comoda funzione bloginfo() fornita da WordPress, inserendo tra parentesi il parametro richiesto.
Ad esempio, per aggiungere il titolo della pagina, devi utilizzare il parametro name, scrivendo quindi bloginfo(‘name’);.
Apri nuovamente il file header.php, sostituisci
<title>Titolo della pagina</title>
con
<title> <?php bloginfo('name'); ?> </title>
ed torna sul sito, troverai il nome del blog che puoi gestire andando in Impostazioni -> Generale -> Nome blog
Attualmente, quando apri un qualsiasi contenuto del sito, come un articolo oppure una pagina, vedrai sempre il nome del blog e non il nome del post o della pagina.
Questo perché è necessario utilizzare la funzione wp_title().
Puoi impostare tre parametri, il tipo di separatore, se è visibile e la posizione del separatore.
Con wp_title( ‘|’ , true, ‘right’ ) , potrai visualizzare il titolo della pagina, separato dalle altre informazioni tramite | e posizionato a destra del titolo.
Se desideri visualizzare il meta tag title nel seguente formato :
titolo pagina | nome blog nelle pagine ed articoli oppure
nome blog | motto blog nella homepage, devi sostituire
<title> <?php bloginfo('name'); ?> </title>
con
<title>
<?php
wp_title( '|', true, 'right' );
bloginfo('name');
if ( is_home() || is_front_page() ) echo ' | ' . get_bloginfo( 'description' );
?>
</title>
Il funzionamento di questo codice è abbastanza semplice, wp_title si occupa di generare il nome del post oppure della pagina nel caso ci si trovi in una di esse, successivamente viene visualizzato il nome del blog ed infine viene effettuato un controllo sulla pagina corrente, grazie ai tag condizionali e se la pagina corrente è la homepage, viene aggiunta anche la descrizione oppure il motto del blog.
I tag condizionali verranno trattati in maniera più approfondita nei prossimi articoli, comunque ti anticipo che sono molto utili per la personalizzazione del tema, per visualizzare un qualsiasi contenuto in una determinata sezione, come articoli, pagine, categorie, oppure solo in alcune di esse (ad esempio una determinata pagina).
Nel prossimo articolo ti spiegherò come completare il file header.php, integrando un logo e il menù principale, se hai domande puoi lasciare un commento alla fine dell’articolo.
Commenti
Ottimo tutorial. Avevo problemmi con la funzione wp_title, e sto da ore a cercare di risolvere, ma nessun sito riusciva a spiegare il concetto in modo chiaro e semplice. La tua spiegazione, anche grazie alle immagini è davvero molto utile e precisa. Complimenti.
Ti ringrazio. buon lavoro 😉
Vero ottimo tutorial, complimenti
Grazie mille 🙂
A presto
Alex.