css-style-sm

Come lavora e funziona un tema WordPress

Capire con un solo sguardo l’organizzazione dei file di un tema Word­Press non è mai stato così sem­plice. Se si è alle prime armi si rimane spesso e volen­tieri smar­riti di fronte a que­sta molti­tu­dine di file, spe­cial­mente se un utente vuole fare sem­plice­mente le sue prime pic­cole mod­i­fiche ad un tema.

Ho tro­vato que­sto bel­lis­simo gra­fico real­iz­zato da Joost de Valk e pub­bli­cato in orig­i­nale sul sito Yoast.com che per mia comod­ità e per far­velo cono­scere ho ripor­tato sul mio blog e lib­era­mente tra­dotto nelle parti che rite­nevo mag­gior­mente utili.

Anato­mia di un tema WordPress

The cheat­sheet for how your blog works

Un tema Word­Press è for­mato da una car­tella di file tem­plate ognuno dei quali con­trolla una parte speci­fica del vostro tema. Le parti del vostro sito che riman­gono sta­tiche indipen­den­te­mente da quale pag­ina sti­ate visu­al­iz­zando sono con­trol­late dai file hea­der, side­bar e foo­ter. Potete mod­i­fi­care que­sti file affin­chè rile­vino su quale pag­ina vi tro­vate e for­niscano con­tenuti dif­fer­enti in maniera coer­ente come ad esem­pio mostrare dif­fer­enti menu di nav­igazione nei post e nelle pagine; ad ogni modo è più comune che l’aspetto di que­ste sezioni rimanga invari­ato nell’intero sito.

  • header.php
    File glob­ale che mostra l’header (o intes­tazione se pre­fe­rite) e la barra di nav­igazione. Con­tiene inol­tre codice HTML.
  • The Loop
    La visu­al­iz­zazione dei con­tenuti nell’area prin­ci­pale del vostro sito è con­trol­lata da tem­plate indi­vid­u­ali per ogni tipo di con­tenuto che ven­gono gestiti nel cosid­detto “loop”.
  • sidebar.php
    Con­trolla la visu­al­iz­zazione della barra lat­er­ali. Barre lat­er­ali mul­ti­ple pos­sono essere con­fig­u­rate nel file functions.php, men­tre l posizion­a­mento dei wid­get della barra lat­erale viene con­fig­u­rato ne pan­nello di ammin­is­trazione di WordPress.
  • footer.php
    Con­tiene il codice del foo­ter (piè di pag­ina) glob­ale e prov­vede a chi­ud­ere i tag HTML.

index.php – home

Il file index gesti­sce l’aspetto dell’homepage del vostro tema Word­Press. Di default è un loop che richiama e mostra gli arti­coli più recenti ed un link in basso che rimanda ai post precedenti.

Altri­menti potete speci­fi­care in wp-admin -> set­tings -> read­ing di uti­liz­zare come home page una pag­ina che avete cre­ato voi stessi in Word­Press. In que­sto caso speci­ficherete un ind­i­rizzo dif­fer­ente per la pag­ina in cuiap­paiono  gli arti­coli e que­sta pag­ina sarà gen­er­ata dal file index.php.

single.php – ARTICOLI INDIVIDUALI

La visu­al­iz­zazione di arti­coli indi­vid­u­ali nel vostro tema Word­Press è con­trol­lata da un pic­colo file chiam­ato single.php. Con­tiene un loop che richiama e mostra sem­plice­mente un solo articolo.

Potete speci­fi­care se volete le barre lat­er­ali (e quali volete) o se volete un aspetto dif­fer­ente da quello delle altre pagine del sito.

page.php – PAGINE individualI

Page.php con­trolla l’aspetto delle vostre pagine. Potete sce­gliere di elim­inare le barre lat­er­ali o altri ele­menti, o anche aggiun­gere altri ele­menti che ver­ranno visu­al­iz­zati esclu­si­va­mente nelle pagine.

Word­Press vi per­me­tte inol­tre di creare tem­plate delle pagine dif­fer­enti nel vostro tema che si applicher­anno a diversi tipi di pagine. Per creare un tem­plate di pag­ina basta sem­plice­mente creare una copia di page.php, rinom­i­narla il qua­lun­que modo vogli­ate ed infine aggiun­gendo in cima que­sto sem­plice codice:

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

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

Potete con­trol­lare anche l’aspetto ed il com­por­ta­mento di diversi tipi di archi­vio uti­liz­zando file di tem­plate. Se non esi­ste un file archive.php gli archivi si com­porter­anno come index.php; comun­que sia potete sem­pre creare un file archive.php per mod­i­fi­carne lo stile ed il com­por­ta­mento. Se cree­rete un file chiam­ato category.php, que­sto verrà uti­liz­zato esclu­si­va­mente per le cat­e­gorie. Allo stesso modo se cree­rete il file tag.php potrete gestire autono­ma­mente gli archivi dei tag.

Il Loop

Il loop è prob­a­bil­mente la parte più potente di un tema Word­Press. ini­zia con una query (che deter­mina quali arti­coli o pagine devono essere estratte), e ter­mina con un’instruzione PHP “end­while”. Ogni cosa in que­sto inter­vallo dipende da voi. Potete speci­fi­care di mostrare titoli, , con­tenuto degli arti­coli, meta­data, campi per­son­al­iz­zati e sis­tema di com­menti tutto all’interno del loop ed ogni ele­mento che avrete inser­ito verrà visu­al­iz­zato in ogni pag­ina o arti­colo ogni qual­volta verrà ese­guita una query. Potete con­fig­u­rare loop mul­ti­pli e query su una sola pagin; ad esem­pio: in single.php potre­ste avere un loop che mostra l’intero con­tenuto di un arti­colo ed in più un loop che mostra sotto ad esso solo i titoli e le icone degli arti­coli similari.

  • Query  del post o della pagina
  • Ini­zio del Loop
  • the_title (visu­al­izza il titolo del post)
  • the_excerpt (visu­al­izza il rias­sunto del post)
  • the_content (visu­al­izza l’intero con­tenuto del post)
  • the_category (visu­al­izza le cat­e­gorie del post)
  • the_author (visu­al­izza l’autore del posto)
  • the_date (visu­al­izza la data del post)
  • altri tag (esi­ste una vari­età di ulte­ri­ori tag che pos­sono essere uti­liz­zati nel loop)
  • endwhile;
  • Fine del loop

File di con­torno di un tema WordPress

Per per­me­t­tere il com­pleto fun­zion­a­mento di un tema Word­Press, c’è biso­gno di aluni file essen­ziali di con­torno. Que­sti file pos­sono essere mod­i­fi­cati in base alle pro­prie esi­genze e pos­sono influire notevol­mente sul look e le fun­zion­al­ità del vostro sito.

comments.php

Que­sto file con­trolla l’output dei com­menti, che pos­sono essere inser­iti nel loop se desider­ate avere que­sta fun­zion­al­ità nel vostro tema. Comments.php può essere sovra­scritto da plu­gin come Dis­qus, che poten­zia oltre­modo la fun­zione dei com­menti nel vostro blog.

functions.php

Functions.php vi per­me­tte di inse­rire il pro­prio codice PHP per­son­al­iz­zato per effet­tuare mod­i­fiche degli ele­menti di base (core ele­ments) del tema. E’ anche uti­liz­zato per speci­fi­care barre lat­er­ali mul­ti­ple, cam­biare il numero di carat­teri dell’excerpt (rias­sunto) o per aggiun­gere un pan­nello opzioni per­son­al­iz­zato nell’area di amministrazione.

style.css

Que­sto è il prin­ci­pale foglio di stile CSS del vostro tema. Con­tiene inol­tre all’inizio una por­zione di testo che dice a Word­Press il nome del tema, l’autore e l’URL del sito.

Que­sto info­grafico è stato cre­ato in col­lab­o­razione con gli arti­sti di CreditLoan.com. Ricordo inol­tre che l’articolo orig­i­nale è stato scritto da Joost de Valk e pub­bli­cato sul sito Yoast.com

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>