Come personalizzare il template di WordPress

WordPress, come molti altri programmi per la creazione di siti web, usa i template (o temi) per mostrare in modi differenti i contenuti che creiamo. Cambiando il template i nostri articoli verranno mostrati con grafiche differenti. Al tempo di questo articolo Il sito del GULLi usa il template “Catch box”. Il template viene fornito con una serie di parametri per personalizzare in dettaglio le visualizzazioni. Ma vediamo qualche settaggio particolare che abbiamo dovuto o voluto fare per correggere certe situazioni.

Suggerimento nella casella di ricerca

L’aggiornamento del tema ha cambiato il testo di aiuto che appare della casella di ricerca che appare in alto a destra della home page che permette di effettuare ricerche. Per chi già conosce l’HTML è l’attributo “placeholder” del tag HTML “input”.Il suggerimento appare in inglese e non più in italiano.

Soluzione: dal menu laterale selezionare Aspetto / Personalizza / Theme Options / Search Text Settings:

La parola “Cerca” apparirà come suggerimento all’interno della casella di input.

Personalizzazione della larghezza del tema

Il template “Catch Box” non usa la larghezza dell’intero schermo, ma lascia degli spazi liberi ai lato dei contenuti. La scelta degli autori è interessante, permette di non disperdere il testo e di avere linee brevi e di facile lettura. Nonostante ciò abbiamo ritenuto che lo spazio esterno era troppo ed abbiamo cercato il modo per modificare il template per allargare lo spazio utile.

Non avendo trovato parametri nel template, abbiamo decisi di andare a lavorare sul file CSS che definisce gli stili di rappresentazione di ogni elemento delle pagine. Sebbene possibile, non è consigliato andare a modificare il CSS che viene fornito con il template, bensì è possibile andare a creare delle definizioni in un file CSS aggiuntivo che prevarranno su quelle originali.

WordPress permette di scrivere le nuove definizioni dal menu principale: Aspetto / Personalizza / Theme Options / CSS aggiuntivo.

Cercando in rete abbiamo trovato le definizioni CSS da modificare:

@media screen and (min-width: 1025px) {
	.site {
	    max-width: 94% !important;
	    width: 100% !important;
	}
	#primary {
	    width: 100% !important;
	}	
	#secondary {
	    width: 26%  !important;
	}	
}
@media screen and (min-width: 1360px) {
	.site {
	    max-width: 1300px !important;
	    width: 100% !important;
	}
}

Da notare che abbiamo dovuto usare la regola “!important” per avere il corretto override delle regole originali con quelle che siamo andati a definire. I valori del parametro “width” permettono valori diversi con schermi di larghezze differenti. La figura di seguito mostra come sono state ridotte le colonne laterali in grigio.

Evidenziare la sintassi del codice CSS

Il codice riportato sopra evidenzia con colori differenti gli elementi del codice CSS. WordPress permette la syntax highlight tramite plugin che gestiscono un blocco di testo di tipo “code”. Il plugin “Syntax highlighting Code Block” è fra quelli che possiamo installare direttamente dalla finestra dei “Plugin”

Questo di seguito è il risultato:

@media screen and (min-width: 1025px) {
	.site {
	    max-width: 94% !important;
	    width: 100% !important;
	}
	#primary {
	    width: 100% !important;
	}	
	#secondary {
	    width: 26%  !important;
	}	
}
@media screen and (min-width: 1360px) {
	.site {
	    max-width: 1300px !important;
	    width: 100% !important;
	}
}
Code language: CSS (css)