WordPress Child Theme – Modifica del CSS




wordpress child theme

Come creare i child theme per Wordpress

La modifica del CSS – #2

(Articolo precedenteWordPress – Child theme – Le basi)

Nell’articolo precedente abbiamo visto quali sono i passaggi da effettuare per impostare un child theme. In questo articolo cominceremo a fare le prime modifiche al tema padre dando vita al nostro child theme, e non sarebbe male avere già ben le idee chiare su cosa si vuole modificare e a quale risultato puntare.

Quello che mi prefiggo di fare è centrare il corpo, visto che il tema padre (twenty fourteen) è allineato a sinistra ed è una cosa che non mi piace particolarmente, e poi cercherò una nuova combinazione di colori.

Purtroppo non ci sono regole fisse su come operare perchè ogni tema ha le sue particolarità e la sua struttura, e un principio che può essere valido per un tema potrebbe non produrre lo stesso risultato in un altro tema che ha una struttura diversa, quindi molto è lasciato alla propria capacità di individuare correttamente gli elementi su cui intervenire. In questo caso in cui ci prefiggiamo di intervenire sulla centratura dell’intero contenuto qualunque sia la pagina visitata si dovrà operare sull’elemento contenitore più alto di tutti in termini gerarchici, quello cioè che sarà l’elemento che conterrà al suo interno tutti gli altri elementi. Se ad esempio il tema avesse avuto una testata a tutta pagina, si sarebbe dovuto cercare l’elemento contenitore immediatamente successivo al contenitore della testata e dei suoi elementi, ed intervenire in quel punto, lasciando quindi inalterata la testata; per contro si sarebbe dovuto intervenire già dal contenitore della testata se l’intento fosse stato quello di eliminare anche la testata a tutta pagina e centrare tutto. Ma ripeto, queste non possono essere intese come regole generali e sempre valide, perchè non è detto che il contenitore della testata abbia necessariamente al suo interno anche il corpo, ci si potrebbe trovare davanti anche a due o più contenitori ben distinti e quindi si dovrà intervenire su ognuno.

Wordpess Child Theme – La ricerca degli elementi da modificare

Per capire dove andare a mettere le mani apriamo la pagina del nostro sito e premiamo F12 (funziona con tutti i più comuni browser) per aprire quelli che sono definiti gli “strumenti di sviluppo” del browser in modo tale da avere la possibilità di esplorare il codice e il o i file .css collegati ai vari elementi.

Semplicemente muovendo il mouse sulla parte relativa al codice della pagina (cfr.1 – in basso a sinistra nel mio browser)

Wordpress Child Theme Modifica CSS

capiamo dalla diversa colorazione che assume la pagina, a quale parte della stessa fa riferimento l’elemento sul quale stiamo passando con il mouse, e se clicchiamo su di esso, nella parte destra (cfr.2) verrà mostrato tutto il codice CSS che interessa quel determinato elemento.




Come detto quello che ci interessa individuare è l’elemento gerarchicamente più alto, e quindi concentrando l’attenzione sulla parte relativa al codice della pagina il primo elemento più alto in grado che troviamo è <body> che andiamo a cliccare per leggere a quali regole CSS è sottoposto.

Wordpress Child Theme Modifica CSS

Guardando a destra il CSS non noto nessun elemento di particolare interesse finalizzato all’obbiettivo; potrei certamente intervenire nella parte body{ del CSS inserendo le istruzioni per ottenere quello che voglio, ma prima preferisco esplorare l’elemento immediatamente successivo per vedere se trovo regole già definite più importanti e vicine al nostro obbiettivo. Tra l’altro noto che espandendo sulla sinistra <body> al suo interno c’è un unico contenitore <div> (e quindi secondo elemento in ordine gerarchico) che a sua volta contiene tutto il resto del sito, quindi ancora gerarchicamente valido per pensare di fare una modifica CSS per il nostro obbiettivo. La struttura ad albero con la quale viene presentato il codice (sulla sinistra) è molto comoda per capire la gerarchia degli elementi e in questi casi aiuta tantissimo.

Wordpress Child Theme Modifica CSS




Wordpess Child Theme – Rendere definitiva una modifica

In effetti il secondo elemento è più indicativo per effettuare la modifica che vogliamo. Infatti presenta la classe site che certamente è indicativa per quello che l’autore del template ha voluto definire dove tra l’altro viene definita la larghezza massima e il colore di sfondo. In questo elemento andremo ad aggiungere le nostre istruzioni, ma prima di farle in modo definitivo andiamo a provarle “on the fly” per vedere se otteniamo l’effetto voluto.

Per centrare un <div>…codice…</div> basta aggiungere al css “margin:0 auto” e lo facciamo direttamente nella parte destra del browser

Wordpress Child Theme Modifica CSS

Perfetto. Esattamente quello che si voleva ottenere; possiamo quindi procedere a rendere definitiva la modifica aprendo il file style.css che abbiamo già creato nella cartella del child theme e riportando la nuova istruzione.

A questo proposito c’è da fare un’osservazione. Nel .css del child theme potremmo riportare semplicemente

e tutto funzionerebbe correttamente, ma con riferimento alla classe .site avremmo istruzioni nel .css del tema padre e istruzioni nel .css del child theme e questo anche se non crea problemi al funzionamento potrebbe diventare problematico con l’aggiungersi di altri classi e di altre istruzioni fino ad arrivare a non capirci più nulla, o a creare continue confusioni sulla provenienza delle istruzioni, e con temi complessi posso garantirvi che finirete nel pallone.