Introduzione ai temi di WordPress
Una parte molto importante durante la creazione del nostro sito o del nostro blog è quella che riguarda il layout grafico. Un tema è una cartella che contiene tutti i file che compongono il layout (header, footer, index, page, single), mentre un template è l'aspetto che può avere una pagina o un post, direttamente selezionabile dal pannello di amministrazione del sito (raggiungibile dall'indirizzo
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
).Per creare il nostro tema possiamo prenderne uno già esistente e modificarlo a nostro piacimento oppure crearlo da zero. Nel primo caso dobbiamo spendere tempo nel ricercare un template di base che si avvicina a quello che vogliamo noi, nel secondo caso dobbiamo studiare bene la struttura dei template in WordPress e quest'ultimo risulta essere più efficace nel caso si voglia creare più template diversi.
I file principali per creare un tema
Un tema WordPress è composto di diversi file PHP e molti di questi restituiscono una pagina con determinati scopi:
-index.php: è la vera pagina del sito, quella che si presenta quando accediamo a esso;
-header.php: comprende tutta la parte di codice compresa tra il doctype il tag body, comprese tutte le informazioni come il nome del sito, la descrizione, i metadati e i link ai file di stile e agli script. A volte, per comodità, è inserita l'apertura dei tag contenitori e tutto ciò che è in ogni caso ripetuto per tutte le pagine, per esempio un logo o un banner;
-footer.php: è quella parte che sta in fondo alla pagina e comprende alcune informazioni come i credits e la chiusura dei tag body e html;
-sidebar.php: comprende gli script per far comparire dei widget, ma più in generale tutti gli strumenti di navigazione del sito (categorie, archivi o anche menu). Di solito è strutturata come una colonna laterale;
-page.php: serve per restituire una pagina interna al sito;
-single.php: serve per restituire un articolo. È, in sostanza, la pagina che si apre quando si clicca su un post dell'homepage;
-search.php: è la pagina che restituisce l'elenco dei risultati di una ricerca;
-archive.php: restituisce i risultati di post archiviati, selezionati secondo una data oppure un tag;
-comments.php: è il template dei commenti. Contiene, oltre ai commenti, il form e le indicazioni per inserirli ed è richiamata solitamente all'interno di single.php;
-category.php: restituisce un elenco di articoli riguardanti la categoria selezionata;
-functions.php: contiene alcune funzioni proprie del tema, per esempio restituisce il numero di sidebar presenti. Tramite questo possiamo far comparire più sidebar (come vedremo in seguito);
-404.php: restituisce un messaggio di errore di pagina non trovata.
Se uno di questi file non esiste, sarà utilizzato il corrispondente file presente nel tema "default". Alcuni file possono essere personalizzati, per esempio è possibile adattare l'aspetto di una categoria rispetto ad un'altra semplicemente creando un file del tipo category-2.php dove 2 è l'id della categoria in questione.
Infine, ultimo ma non ultimo, è necessario il foglio di stile, style.css, e possibilmente una cartella per contenere le immagini del tema. I file più importanti di un tema sono certamente index.php e style.css. I file elencati seguono una gerarchia, come possiamo vedere dall'immagine.
I file elencati seguono una gerarchia, come possiamo vedere dall'immagine.
Figura 1. I file necessari per un tema WordPress
La gerarchia è per ordine decrescente di importanza e, nello schema, si va dall'alto al basso e da sinistra verso destra. Questo schema è importante (anche se non sono presenti tutti i file) per capire cosa andrà a cercare il sistema di WordPress nel caso manchi un file. Come si può ben capire ogni pagina del nostro sito o del nostro blog è composta di più file del tema. Nella prossima immagine possiamo vedere un esempio di una prima pagina.
Figura 2. Una pagina di un tema WordPress
In verità la zona dell'index.php "cambia" a seconda di quale pagina stiamo visualizzando: infatti, se un utente è in una pagina di un singolo post, la pagina sarebbe composta da quattro file (header.php, single.php, sidebar.php e footer.php).
Figura 3. Single.php su WordPress
Come richiamare le parti dinamiche nelle pagine
È possibile richiamare diverse funzioni all'interno delle pagine del nostro sito e le possiamo inserire nei file del tema. Ecco qui un elenco di quelle più importanti:
-<?php the_title(); ?> per restituire il titolo del post;
-<?php the_time('j.m.y'); ?> per restituire la data (con la convenzione giorno-mese-anno);
-<?php the_content(); ?> per pubblicare il contenuto del post;
-<?php the_category(''); ?> oppure per pubblicare la categoria (se sono più di una si aggiunge la virgola);
-<?php the_tags(); ?> per pubblicare i tags;
-<?php the_permalink() ?> per ottenere il link per gli url degli articoli;
-<?php comments_number(__( 'Commenta per primo!', 'nome_tema'), __('Un commento', 'nome_tema'), __('% Commenti', 'nome_tema'));?> per pubblicare un link con i commenti presenti relativi al post e che rimanda all'articolo che comprende anche i commenti. Gli underscore (__) prima della pubblicazione del testo e del nome del tema servono per facilitare la traduzione del tema in caso di multilingue. Esistono numerose altre variabili che vengono utilizzate per ottenere certi dati, per esempio "name" che restituisce il titolo del blog, "rss2_url" che restituisce l'url del feed RSS 2.0, "version" per la versione di WordPress installata e così via.
Creiamo il nostro template: primo esempio
Passiamo a creare concretamente il nostro template. Supponiamo che si chiami PersonalTheme e creiamo una cartella con questo nome e al suo interno creiamo due file: index.php e style.css (per ora lasciamoli vuoti).
Il file index.php contiene i contenuti (sia testi sia immagini), i titoli degli articoli (o post) e i post meta data, cioè tutte quelle informazioni sull'autore del post, sulla data di pubblicazione, la categoria ed eventuali commenti. È strutturato come in questo esempio:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Possiamo notare che è stato inserito il doctype transitional. Questa cosa va bene perché un sito in WordPress non è strict e quindi facilmente modificabile e non troppo rigido. Se guardiamo le prime righe di codice, ci sono delle parti interessanti:
-il title;
-i metadati che riguardano i tipi di carattere e la versione di WordPress;
-i link a fogli di stile, agli rss e per il funzionamento dei pingback;
-un richiamo agli archivi di WordPress, tramite la riga ;
-il tag che serve a inserire nell'head, usando WordPress, tutti gli script necessari a eventuali plugin aggiuntivi: <?php wp_head(); ?>
La riga di codice <? php bloginfo ('stylesheet_url');?> è una funzione PHP che richiama la posizione del file style.css
Osservazione: non è necessario utilizzare lo script <?php blogInfo(‘name'); ?> prima di usare i template perché blogInfo è una funzione di WordPress e ritorna un valore solo quando il template è installato.
Se volessimo aggiungere un foglio di stile alternativo per alcuni browser che interpretano le regole CSS in modo diverso, per esempio per Internet Explorer 6, bisogna aggiungere queste righe di codice all'interno dell'head:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Nei template di WordPress si utilizza un codice "loop" che rappresenta una query che è inviata al database per la richiesta di alcuni dati:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Il file di stile per ora possiamo anche lasciarlo vuoto oppure solo con dei metadati:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Una volta creati i due file con questi codici, andiamo a installare il template. Carichiamo la cartella creata dentro wp-content/themes/, accediamo al pannello di gestione del nostro sito, andiamo in Aspetto-->Aggiungi nuovo tema e selezioniamo il nuovo tema. Se a questo punto andiamo a vedere il sito, visualizzeremo una pagina bianca. Questa pagina, a contrario di come possiamo pensare, non è una pagina di errore. Infatti, abbiamo creato il nostro file index.php ma non abbiamo inserito i codici necessari per visualizzare gli articoli, i moduli e i widget installati.
Separiamo il codice del file index.php
Come detto prima è possibile suddividere la pagina in più file, per esempio possiamo esportare la parte dell'header in un file separato. La domanda sorge spontanea: dopo come facciamo a collegare i diversi file all'index.php? Basta inserire alcuni tag di WordPress nella parte di codice che ci interessa, per esempio per inserire il file header.php si scrive
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
In tal caso supponiamo di riprendere il codice già scritto e riscriviamolo (quasi totalmente uguale) nel file header.php
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Aggiungiamo il file per il footer.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Possiamo ora inserire delle parti interessanti del nostro blog, come i post e i widget. Riprendiamo in mano il file index.php e modifichiamolo in questo modo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Nel frattempo aggiungiamo la sidebar. Scriviamo il file sidebar.php per esempio in questo modo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Nel file index.php basta aggiungere il collegamento al nuovo file quindi rimane uguale e cambia solo in questo punto del codice:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
A questo punto il file index.php diventa semplicemente:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
In questo modo comparirà nella nostra pagina (nella parte inferiore della pagina, a meno che non si specifichi in modo diverso nel foglio di stile) il nome del sito con la scritta "in WordPress is proudly powered by WordPress" e i link agli rss e ai commenti riguardanti gli RSS, oltre al nome del sito nella parte più alta.
Possiamo ora inserire delle parti interessanti del nostro blog, come i post e i widget. Riprendiamo in mano il file index.php e modifichiamolo in questo modo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Nel frattempo aggiungiamo la sidebar. Scriviamo il file sidebar.php per esempio in questo modo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Nel file index.php basta aggiungere il collegamento al nuovo file quindi rimane uguale e cambia solo in questo punto del codice:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Con i nuovi pezzi di codice se andiamo a installare e riattivare di nuovo il template creato possiamo vedere che in prima pagina adesso abbiamo tutti i post con la data, la categoria ed eventuali commenti.
Notiamo che ancora non è presente uno stile grafico: questo perché ancora non abbiamo modificato il nostro file style.css, andiamo allora a modificarlo. Creiamo il file per la rappresentazione del nostro sito o del nostro blog. Un esempio molto semplice può essere questo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Con un codice così otteniamo una pagina strutturata come in figura
Figura 4. La struttura del nostro template
Come abbiamo visto prima per inserire la sidebar basta richiamare il file sidebar.php dentro index.php in questo modo: <? get_sidebar(); ?>. Se riguardiamo il codice dentro sidebar.php, le righe:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
sono quelle che aggiungono effettivamente la sidebar. Possiamo però utilizzare il codice che la richiama ovunque serva nel template oppure crearne più di una.
Per fare questo ci viene in aiuto il file functions.php. Apriamolo e aggiungiamo questo codice:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Adesso basta andare nel pannello di amministrazione del sito e dal menù andare su Aspetto-->Widget e troveremo tutte le nuove sidebar create con i nomi che gli sono stati dati. A questo punto basta inserire i widget che vogliamo visualizzare all'interno delle parti e richiamarle in qualsiasi punto del template (passandogli il nome o l'id corretto).
Da notare bene questo fatto: quando si usano i css e le sidebar, WordPress per esse usa delle liste non ordinate e al suo interno sono annidati i widget. È altamente consigliato mettere anche, prima di richiamare la funzione della sidebar, i tag di apertura e chiusura di una lista:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Il file di anteprima
Possiamo inserire un'immagine di anteprima del nostro template, in modo da visualizzarla quando andiamo ad attivare i template dalla sezione Aspetto del pannello di amministrazione. Questo file dovrà chiamarsi screenshot.png, avere una dimensione di circa 300×225 e dovrà essere salvato nella cartella principale del template (quindi riprendendo il nostro esempio nella cartella PersonalTheme). È molto importante usare un'anteprima perché permette all'amministratore di scegliere in modo più veloce quale template utilizzare e per capire che tipo di layout abbia.
Fonte: cmshtml.it
Ultima modifica:
