Come lavora e funziona un tema WordPress

[note color=”#9AB5E3″]Capire con un solo sguardo l’organizzazione dei file di un tema WordPress non è mai stato così semplice. Se si è alle prime armi si rimane spesso e volentieri smarriti di fronte a questa moltitudine di file, specialmente se un utente vuole fare semplicemente le sue prime piccole modifiche ad un tema.

Ho trovato questo bellissimo grafico realizzato da Joost de Valk e pubblicato in originale sul sito Yoast.com che per mia comodità e per farvelo conoscere ho riportato sul mio blog e liberamente tradotto nelle parti che ritenevo maggiormente utili.[/note]

Anatomy of a WordPress theme - Infographic

Anatomia di un tema WordPress

The cheatsheet for how your blog works

Un tema WordPress è formato da una cartella di file template ognuno dei quali controlla una parte specifica del vostro tema. Le parti del vostro sito che rimangono statiche indipendentemente da quale pagina stiate visualizzando sono controllate dai file header, sidebar e footer. Potete modificare questi file affinchè rilevino su quale pagina vi trovate e forniscano contenuti differenti in maniera coerente come ad esempio mostrare differenti menu di navigazione nei post e nelle pagine; ad ogni modo è più comune che l’aspetto di queste sezioni rimanga invariato nell’intero sito.

  • header.php
    File globale che mostra l’header (o intestazione se preferite) e la barra di navigazione. Contiene inoltre codice HTML.
  • The Loop
    La visualizzazione dei contenuti nell’area principale del vostro sito è controllata da template individuali per ogni tipo di contenuto che vengono gestiti nel cosiddetto “loop”.
  • sidebar.php
    Controlla la visualizzazione della barra laterali. Barre laterali multiple possono essere configurate nel file functions.php, mentre l posizionamento dei widget della barra laterale viene configurato ne pannello di amministrazione di WordPress.
  • footer.php
    Contiene il codice del footer (piè di pagina) globale e provvede a chiudere i tag HTML.

index.php – home

Il file index gestisce l’aspetto dell’homepage del vostro tema WordPress. Di default è un loop che richiama e mostra gli articoli più recenti ed un link in basso che rimanda ai post precedenti.

Altrimenti potete specificare in wp-admin -> settings -> reading di utilizzare come home page una pagina che avete creato voi stessi in WordPress. In questo caso specificherete un indirizzo differente per la pagina in cuiappaiono  gli articoli e questa pagina sarà generata dal file index.php.

single.php – ARTICOLI INDIVIDUALI

La visualizzazione di articoli individuali nel vostro tema WordPress è controllata da un piccolo file chiamato single.php. Contiene un loop che richiama e mostra semplicemente un solo articolo.

Potete specificare se volete le barre laterali (e quali volete) o se volete un aspetto differente da quello delle altre pagine del sito.

page.php – PAGINE individualI

Page.php controlla l’aspetto delle vostre pagine. Potete scegliere di eliminare le barre laterali o altri elementi, o anche aggiungere altri elementi che verranno visualizzati esclusivamente nelle pagine.

WordPress vi permette inoltre di creare template delle pagine differenti nel vostro tema che si applicheranno a diversi tipi di pagine. Per creare un template di pagina basta semplicemente creare una copia di page.php, rinominarla il qualunque modo vogliate ed infine aggiungendo in cima questo semplice codice:

1 <?php
2 /*
3 Template Name: YourPageNameHere
4 */
5 ?>

archive.php, category.php, tag.php – ARCHIVI

Potete controllare anche l’aspetto ed il comportamento di diversi tipi di archivio utilizzando file di template. Se non esiste un file archive.php gli archivi si comporteranno come index.php; comunque sia potete sempre creare un file archive.php per modificarne lo stile ed il comportamento. Se creerete un file chiamato category.php, questo verrà utilizzato esclusivamente per le categorie. Allo stesso modo se creerete il file tag.php potrete gestire autonomamente gli archivi dei tag.

Il Loop

Il loop è probabilmente la parte più potente di un tema WordPress. inizia con una query (che determina quali articoli o pagine devono essere estratte), e termina con un’instruzione PHP “endwhile”. Ogni cosa in questo intervallo dipende da voi. Potete specificare di mostrare titoli, , contenuto degli articoli, metadata, campi personalizzati e sistema di commenti tutto all’interno del loop ed ogni elemento che avrete inserito verrà visualizzato in ogni pagina o articolo ogni qualvolta verrà eseguita una query. Potete configurare loop multipli e query su una sola pagin; ad esempio: in single.php potreste avere un loop che mostra l’intero contenuto di un articolo ed in più un loop che mostra sotto ad esso solo i titoli e le icone degli articoli similari.

  • Query  del post o della pagina
  • Inizio del Loop
  • the_title (visualizza il titolo del post)
  • the_excerpt (visualizza il riassunto del post)
  • the_content (visualizza l’intero contenuto del post)
  • the_category (visualizza le categorie del post)
  • the_author (visualizza l’autore del posto)
  • the_date (visualizza la data del post)
  • altri tag (esiste una varietà di ulteriori tag che possono essere utilizzati nel loop)
  • endwhile;
  • Fine del loop

File di contorno di un tema WordPress

Per permettere il completo funzionamento di un tema WordPress, c’è bisogno di aluni file essenziali di contorno. Questi file possono essere modificati in base alle proprie esigenze e possono influire notevolmente sul look e le funzionalità del vostro sito.

comments.php

Questo file controlla l’output dei commenti, che possono essere inseriti nel loop se desiderate avere questa funzionalità nel vostro tema. Comments.php può essere sovrascritto da plugin come Disqus, che potenzia oltremodo la funzione dei commenti nel vostro blog.

functions.php

Functions.php vi permette di inserire il proprio codice PHP personalizzato per effettuare modifiche degli elementi di base (core elements) del tema. E’ anche utilizzato per specificare barre laterali multiple, cambiare il numero di caratteri dell’excerpt (riassunto) o per aggiungere un pannello opzioni personalizzato nell’area di amministrazione.

style.css

Questo è il principale foglio di stile CSS del vostro tema. Contiene inoltre all’inizio una porzione di testo che dice a WordPress il nome del tema, l’autore e l’URL del sito.

[quote style=”1″]Questo infografico è stato creato in collaborazione con gli artisti di CreditLoan.com. Ricordo inoltre che l’articolo originale è stato scritto da Joost de Valk e pubblicato sul sito Yoast.com [/quote]

Comments are closed.