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.
Nella precedente lezione ti ho parlato della gerarchia dei files che compongono un tema, oggi andremo a vedere nel dettaglio alcuni di essi, scrivendo le prime righe di codice.
Creazione della cartella.
Innanzitutto crea la cartella wip_theme in wp-content/themes ed aggiungi i due file principali, style.css e index.php“.
Se ora apri la sezione temi di WordPress, troverai il tema wip_theme di Anonimo.
Informazioni sul tema.
Se dai uno sguardo agli altri due temi presenti, vedrai alcune informazioni sull’autore, la descrizione del template etc.
Queste informazioni vanno inserite all’inizio del file style.css, nel seguente formato.
/* Theme Name: Nome Del Template Theme URI: http://indirizzositowebtema.org/ Description: Descrizione del template. Author: Nome dell'autore. Author URI: http://wordindirizzositowebautore.org/ Version: 1.0 Tags: tag1,tag2,tag3 (opzionali) */
Tornando nella gestione dei temi di WordPress, vedrai le informazioni appena inserite:
Puoi aggiungere la miniatura del tema, caricando un’immagine png rinominata screenshot.png
Se ora attivi il tema e trovi una schermata completamente bianca nel sito è normale, questo perché non è stata ancora scritta nessuna riga di codice.
Struttura del tema.
È possibile includere l’intero codice in ogni file template del tema, ma è fortemente sconsigliato anche perché, ad ogni modifica, dovresti riportarla anche negli altri teplate, con una notevole perdita di tempo.
Dividendo il tutto in più parti sarà più facile gestire eventuali aggiornamenti, inoltre ti ritroverai con un codice più snello ed un tema più leggero.
Puoi richiamare i vari elementi tramite i tags include.
Ad esempio, per includere il file header.php, è necessario utilizzare la funzioneget_header(), per il file footer.php, puoi utilizzare get_footer(), per la barra laterale get_sidebar(),
Puoi anche aggiungere una barra laterale personalizzata, scrivendo il nome tra parentesi, ad esempio con get_sidebar (‘left’), andrai a richiamare la sidebar a sinistra contenuta nel file sidebar-left.php, mentre con get_sidebar (‘home’) invece, la sidebar contenuta nel file sidebar-home.php, e così via.
Invece, grazie al tag include get_template_part(), sarà possibile integrare parti di codice diversi da quelli che ti ho precedentemente indicato.
Ad esempio, se hai bisogno di creare un file che gestisce il loop per le pagine di WordPress e lo rinomini loop-page.php, lo potrai includere in un altro template scrivendo get_template_part(‘loop’,’page’); altrimenti, se il nome del file era semplicemente loop.php, avresti dovuto scrivere get_template_part(‘loop’);
Ti do appuntamento al prossimo articolo dedicato alla testata del tema.
Questo sarà il primo di una lunga serie di articoli e tutorial riguardanti lo sviluppo in WordPress, quindi darò per scontato che conosci bene questo CMS, insieme ai linguaggi HTML, CSSe PHP.
Per chi non lo sapesse, WordPress è una piattaforma di gestione dei contenuti (CMS) open source, realizzata in PHP che si appoggia ad un database MySql.
Nato come sistema di blogging, con gli anni si è sempre più evoluto e, grazie anche allo sviluppo di plugin che ne aumentano le funzionalità, è possibile utilizzare WordPress sia per la creazione di un semplice blog, ma anche per la vendita online di prodotti.
Mentre sto scrivendo, la versione più recente è la 4.8 disponibile in italiano al seguente link
La differenza tra tema e template
Innanzitutto va fatta una piccola precisazione.
Spesso si tende a confondere i termini tema e template, scambiandoli per la stessa cosa e utilizzandoli come sinonimi ma in realtà non è cosi.
Il template è il layout che verrà applicato al singolo elemento, su WordPress esiste un template diverso per ogni tipologia di contenuto, uno che si occupa di visualizzare gli articoli, uno per le pagine, uno per le categorie, uno per i risultati di ricerca e così via:
Il tema invece, è l’insieme di tutti questi template.
La gerarchia dei file
Su WordPress, i file principali che compongono un tema sono due, index.php e style.css, per tutti gli altri file è necessario rispettare una gerarchia che è possibile visualizzare nell’immagine sottostante.
Ognuno di questi file si occupa di generare il contenuto dell’elemento richiesto.
Ad esempio single.php è il template che gestisce la visualizzazione degli articoli mentre page.php le pagine del sito.
Quando uno di questi file non è presente, WordPress proverà a cercare il file successivo nella gerarchia.
Se non dovesse essere presente nessun file, verrà utilizzato index.php per visualizzare il contenuto.
Puoi approfondire questo discorso consultando la documentazione ufficiale di WordPress
Puoi anche impostare un template diverso per ogni pagina, categoria oppure articolo, semplicemente aggiungendo al nome del file, separato da un trattino, l’id dell’elemento (ad esempio category-1.php se la categoria ha come ID 1).
Oppure, se hai creato un post personalizzato o custom post type, introdotti nella versione 3.0 di WordPress, è possibile associare un diverso template sostituendo l’ID precedentemente menzionato con il nome del custom post type, ad esempio single-portfolio.php se il custom post type si chiama portfolio.
È comunque troppo presto per parlarti dei custom post, anche perché sarà un argomento delle future lezioni e quindi rischierei solo di confonderti.
La cartella in cui WordPress va a memorizzare ogni tema è wp-content/themes/.
Puoi installare nuovi temi in due modi, dalla sezione “Temi” di WordPress oppure copiando l’intera cartella del tema in /wp-content/themes/.
File fondamentali per il funzionamento di un tema WordPress
Detto questo, ecco un elenco di file che non dovrebbero mai mancare:
- index.php , il file più importante, senza di esso il nostro tema non funzionerebbe, nè verrebbe riconosciuto da WordPress.
- header.php , il file dove caricare i tags di apertura e la parte alta del tema.
- single.php , il template che si occupa di visualizzare gli articoli.
- page.php , il template che si occupa di visualizzare le pagine.
- comments.php , il template che si occupa di visualizzare i commenti ma, come vedremo tra qualche lezione, può anche non essere aggiunto.
- archive.php , il template che si occupa di visualizzare le categorie.
- search.php , il template che si occupa di visualizzare i risultati di ricerca.
- sidebar.php , la barra laterale del nostro tema.
- 404.php , pagina di errore, nel caso la pagina richiesta non esista.
- footer.php , template dove inserire la parte finale del tema, oltre ai tags di chiusura.
Dopo questa breve introduzione, vi do appuntamento alla prossima lezione in cui vedremo, nel dettaglio, ogni template andando a scrivere le prime righe di codice che comporranno il nostro tema WordPress.
