Redazione
a- a+

Template

In questa lezione: la scelta e variazione del tema grafico e l'inserimento immagini ed il corretto uso dell'editor.

Scelta e variazione del tema grafico

Installato WordPress dobbiamo iniziare a dargli una veste grafica e a gestirne i contenuti. Entriamo nel nostro pannello di amministrazione e cominciamo a vedere l’aspetto del tema scelto. Il tema o template è l’aspetto grafico del proprio sito e WordPress per default dà un paio di scelte molto semplici. Esaminiamo il caso in cui si voglia cambiare il tema: il tema grafico possiamo scaricarlo oppure crearlo ad hoc. In questo capitolo vedremo come si scarica un tema e come si carica e adatta al nostro sito web. Nel capitolo successivo invece vedremo l’operazione più complessa, cioè la creazione di un tema grafico per WordPress ad hoc, utilizzando strumenti grafici opportuni.

I temi possono essere scaricati nel sito ufficiale di WordPress http://www.wordpress.org/ nella sezione EXTEND. Ad ogni modo anche attraverso ricerche in rete è possibile trovarne un’ampia scelta sia gratuiti che a pagamento. Se si opta per questa seconda soluzione basta andare su un qualsiasi motore di ricerca e digitare “temi gratuiti per WordPress” oppure “temi per WordPress”, “template per WordPress” e così via.  Una volta trovato il tema che soddisfa le nostre esigenze si scarica (di solito è in formato compresso .zip o .rar), si decomprime e l’intero contenuto compattato si carica sul sito dove abbiamo installato WordPress nella cartella wp-content hemes, utilizzano un client FTP.

Di seguito vediamo un esempio, scegliamo il tema Easel (Figura 1) e clicchiamo il tasto “Download”.

Figura 1

Scarico il file .zip, lo decomprimo e carico la cartella Easel con tutti i file e le sottocartelle incluse nel mio sito in WordPress nella directory: wp-content hemes. Vado nel pannello di amministrazione loggandomi usando le username e password impostate al momento dell’installazione di WordPress. Una volta entrato scelgo dal menu verticale sinistro “Aspetto” (Figura 2).

Figura 2

Si accede così alla gestione temi grafici: per ogni tema grafico caricato compare un miniatura e 3 tasti “Attiva”, “Anteprima”, “Cancella”. L’anteprima ci mostra come verrebbe il sito con quel tema, “Attiva” invece imposta il tema grafico del sito e lo pone in primo piano (Figura 3). Se si vuole modificare il tema, ovvero non ci piace il colore di sfondo, il font, il colore dei caratteri, insomma tutto quello che riguarda la formattazione, lo possiamo fare (nei limiti del possibile) attraverso la modifica dei file “style.css” e “style-default.css” che si trovano nella cartella del tema al seguente percorso: wp-content hemeseasel. I file sono dei fogli di stile, per cui per modificare il tema dobbiamo mettere mano a questi tipi di file. Fate attenzione, prima di modificare qualunque file su WordPress fatevi una copia di back-up, altrimenti eventuali errori possono compromettere il funzionamento del CMS.

Figura 3

Inserimento immagini e corretto uso dell’editor

WordPress.com offre un editor grafico  per la scrittura di post e pagine. Si tratta di un editor WYSIWYG (What You See Is What You Get – Ciò che vedi è ciò che ottieni) che semplifica molto la formattazione del testo senza occuparsi del codice HTML, con la possibilità di inserire immagini, video, elementi multimediali in flash, tabelle ecc. Inoltre l’editor permette di importare direttamente codice HTML cliccando sul tab “HTML” (Figura 4). In tal modo si può creare la struttura della pagina con un editor HTML professionale e poi fare il copia e incolla. L’editor grafico è attualmente chiamato “Editor avanzato” e può essere attivato nel proprio profilo. Qui di seguito le sue funzionalità.

Funzionalità di base

Quando si lavora con l’editor grafico in modalità “Visuale” è visibile una barra di comandi, che corrispondono alle seguenti funzionalità:

Figura 4

1.     grassetto

2.     corsivo

3.     “barrato”

4.     elenco puntato

5.     elenco numerato

6.     citazione (formatta il testo in modo che compaia come una citazione)

7.     allineare il testo a sinistra

8.     allineare il testo al centro

9.     allineare il testo a destra

10.   link (si deve prima evidenziare il testo o l’immagine)

11.   toglie il link da un testo evidenziato o da una immagine

12.   tag <!- -more- ->

13.   controllo ortografico del testo (solo inglese)

14.   attiva l’editor a schermo pieno

15.   funzionalità avanzate (vedi sotto)

a) aggiunge un’immagine (figura 6) selezionata da un archivio di immagini caricate (uploadate) oppure facendo upload dal proprio PC di una nuova immagine

b) aggiunge video (figura 6) selezionato da un archivio di video caricati (uploadati) oppure facendo upload dal proprio PC di un nuovo video

c) aggiunge un file audio (figura 6) selezionato da un archivio di file audio (mp3, wav ecc) caricati (uploadati) oppure facendo upload dal proprio PC di un nuovo file audio

d) aggiunge un file multimediale (figura 6) selezionato da un archivio di file multimediali caricati (uploadati) oppure facendo upload dal proprio PC di un nuovo file.

Funzionalità avanzate

Con il tasto 16 mostrato nella Figura 4 si visualizza la barra dei controlli avanzati:

Figura 5

1.     scegliere un formato predefinito per il testo selezionato

2.     testo sottolineato

3.     testo giustificato

4.     scegliere il colore del testo

5.     incollare testo senza formattazione

6.     incollare testo copiato da Word

7.     cancellare la formattazione

8.     inserire un simbolo a scelta da una lista (inserimento carattere personalizzato)

9.     rientro a sinistra

10.   rientro a destra

11.   annullare azioni precedenti (fino all’ultimo salvataggio) (annulla: ctrl + z)

12.   ripetere azioni precedenti (ripeti: ctrl + y)

13.   aiuto (alt + shift + h)

Figura 6