LinkedIn0

I CMS sono uno strumento che ha rivoluzionato l’approccio allo sviluppo per il web, agevolando esperti e non nella realizzazione di siti ad impatto e con contenuti facilmente modificabili. Molto spesso però, quello che ci viene offerto non ci basta: potremmo infatti avere la necessità di fare delle customizzazioni per dare quel pizzico di originalità al nostro sito o di dover presentare i nostri contenuti diversamente dall’impaginazione standard.

In questo percorso, prenderemo il CMS WordPress come riferimento per creare un sito completamente personalizzato che vi permetterà di distinguervi dal grande esubero in rete.

In particolare, andremo a capire:

  • Come creare pagine personalizzate (page template)
  • Mostrare categorie di articoli con più varianti
  • Modificare la tipologia dei post (post type)
  • Gestire le immagini
  • Creare widget e posizionarli a proprio piacimento all’interno del sito

Conoscere la struttura

Prima di cominciare ad impastare il codice, è importante innanzitutto comprendere come è strutturato un tema di WordPress per sapersi poi muovere al meglio nella modifica dei file interessati.

Una volta installato, WordPress si scompatterà in diverse cartelle, ciascuna adibita ad uno scopo specifico. Poichè tutte le modifiche che andremo ad attuare saranno solamente modifiche a livello di template, tutti i file interessati si troveranno nella directory /wp-content/themes/nome_template_corrente/. Dei file presenti in questa cartella, i principali nella costruzione del template sono:

  • index.php: visualizzazione di default
  • header.php: la parte superiore del sito che precede i contenuti
  • footer.php: la parte inferiore del sito, sottostante ai contenuti
  • page.php: template delle pagine interne
  • single.php: template per il singolo post
  • archive.php: template per la presentazione di post di una categoria
  • sidebar.php: la colonna laterale in cui generalmente compaiono i diversi moduli integrati
  • functions.php: definisce le funzioni necessarie al buon funzionamento del sito
  • style.css: foglio di stile principale

Installazione ed identificazione del template

Per poter iniziare a lavorare sul nostro template, va innanzitutto installato il tema da cui vorremmo partire: potremmo scegliere un tema che più si avvicina alle nostre esigenze o cominciare da un tema pulito come Twentytwelve.

L’installazione del template può essere effettuata in due modi:

  • Caricare lo zip dal pannello di amministrazione in Aspetto → Temi → Installa Tema, cliccando sulla voce Upload.
  • Importare la cartella del tema in /wp-content/themes.

Se l’operazione è andata a buon fine, vedremo comparire il nostro tema nel pannello di amministrazione all’interno del menu Temi.

È buona norma dare un nome personalizzato al tema scelto: rinominiamo quindi la cartella del tema in /wp-content/themes ed entriamo in style.css. Nel foglio di stile dovranno essere inserite le seguenti righe di codice:

/*
Theme Name: blog.artera.net
Theme URI: https://blog.artera.net
Description: Tema per il Blog di Artera

Author: Artera
Version: 0.1
Tags: artera, wordpress, magento, seo
*/

Ognuna di queste righe identifica, rispettivamente:

  • Il nome del tema
  • L’url di riferimento
  • Una descrizione che lo renda unico
  • L’autore
  • La versione
  • Eventuali tag che caratterizzano il tema

Andando ora in Aspetto → Temi, la descrizione del tema scelto dovrebbe ora essere cambiata con i parametri da voi inseriti. Per modificare l’immagine della miniatura del vostro template, non dobbiamo fare altro che sostituire il file immagine screenshot.png, presente nella cartella del template.

Fatte queste modifiche, tornate nel pannello di controllo e cliccate “Attiva” sul vostro tema: ora siete pronti per cominciare a sviluppare il vostro sito in WordPress!

Nel prossimo intervento, toccheremo con mano il codice relativo alle pagine, capendo cosa ci viene offerto e come modificarlo a nostro piacimento.

LinkedIn0