Come modificare un tema WordPress

Ti sarà probabilmente capitato di voler modificare un tema WordPress, rendendolo così differente dalla versione originale.

Molto spesso questa operazione è possibile utilizzando il pannello di gestione del tema oppure dalla sezione “Personalizza” di WordPress, ma se il tema non permette una determinata personalizzazione?

Grazie a questa guida sarai in grado di cambiare l’aspetto grafico del tema oppure sostituire e/o eliminare alcuni elementi, ma per fare questo è necessario conoscere i linguaggi HTML e CSS.

Come modificare un tema WordPress

La cosa più importante è che non saranno modificati i files del tema, ma procederemo alla creazione di un tema child per WordPress, in questo modo tutti i cambiamenti fatti non verranno persi ad ogni aggiornamento.

Ti consiglio comunque di effettuare una copia di backup, utilizzando un programma FTP, ti consiglio anche di utilizzare un’ installazione locale di WordPress, per personalizzare il tema.

Come creare un tema child per WordPress

La creazione di un tema child è abbastanza semplice, è sufficiente aggiungere una nuova cartella all’interno della directory wp-content/themes e rinominarla utilizzando il nome del tema genitore ed il suffisso “-child”.

Poiché sto utilizzando il tema Sueva per scrivere questa guida, il nome della cartella diventa sueva-child.

Successivamente crea il file style.css ed aggiungi la dichiarazione del tema child:

/**

Theme Name: Sueva Child
Description: Descrizione del tema child.
Author: ThemeinProgress.
Author URI: https://www.themeinprogress.com
Version: 1.0.0
Template: sueva
Tags: red,green,yellow,pink,orange,cyan,blue,sidebar,two columns
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html

*/

Il codice css presente in questo file andrà a sovrascrivere gli stili del tema genitore. E preferibile integrare il foglio di stile di quest’ultimo senza utilizzare la funzione @import ma creando un nuovo file functions.php contentente:

function wip_enqueue_parent_theme_style() {
    wp_enqueue_style( 'sueva-parent-style', get_template_directory_uri().'/style.css' );
}

add_action( 'wp_enqueue_scripts', 'wip_enqueue_parent_theme_style' );

Se adesso apri la pagina Temi, dalla sezione Aspetto di WordPress, troverai un nuovo tema pronto per essere attivato.

Puoi personalizzare uno o più template del tema genitore copiandoli all’interno del tema child, successivamente puoi modificarli utilizzando un editor html come Dreamweaver oppure Sublime Text, questo per sovrascrivere il template originale con quello aggiunto nel tema child.

Per esempio, se vuoi modificare l’aspetto del singolo articolo, il file template da copiare è single.php, per le pagine page.php, per la testata header.php e così via.

Ti consiglio di approfondire la gerarchia dei files di WordPress, leggendo il seguente articolo.

Come modificare il css un tema WordPress

Per personalizzare lo stile del tema ti consiglio di utilizzare la funzione “Ispeziona” se utilizzi il browser Chrome oppure “Analizza elemento” se invece hai installato il browser Firefox, in questo modo puoi modificare in tempo reale il codice sorgente della pagina, velocizzando l’intera procedura.

Ogni modifica verrà persa aggiornando la pagina, per questo devi copiare il codice che hai aggiunto in un blocco note oppure nel file style.css del tema child.

Procedi in questo modo, apri una pagina qualsiasi del tuo sito e clicca, con il tasto destro del mouse, su “Ispeziona” oppure “Analizza elemento” sopra gli elementi da modificare.

A questo punto si aprirà una sezione del browser, generalmente nella parte bassa del monitor, che ti permetterà di modificare il codice HTML e CSS della pagina, in tempo reale. Questi cambiamenti saranno visibili solamente a te, che ci stai lavorando. Se un’altra persona sta visualizzando la stessa pagina, non vedrà nulla di quello che è stato modificato.

(Puoi ingrandire l’immagine cliccandoci sopra)

Ora seleziona il testo e cambiane colore e grandezza aggiungendo, nel lato destro:

font-size:15px;
color:#000000;

Se la modifica viene visualizzata correttamente, copia tutto il codice css contente la modifica all’interno del blocco note.

.post-article p, .post-article li, .post-article address, .post-article dd, .post-article blockquote, .post-article td, .post-article th, .post-article span, .sidebar-area a, .sidebar-area p, .sidebar-area li, .sidebar-area address, .sidebar-area dd, .sidebar-area blockquote, .sidebar-area td, .sidebar-area th, .sidebar-area span, .textwidget, .posted_in a, .filterable-grid h4.title a {
    color: #616161;
    color: #000000;
    font-size: 15px;
}

Puoi ottimizzare questa parte di codice, includendo solamente le modifiche aggiunte ed eliminando tutte le classi css, ad eccezione di quella che vedi scritta con un colore più scuro rispetto alle altre, ovvero .post-article p

.post-article p {
    color: #000000;
    font-size: 15px;
}

Ripeti questa operazione con ogni elemento che desideri modificare.

Una volta finito, puoi aggiungere il codice css all’interno del foglio di stile del tuo tema child.

Come localizzare un tema child WordPress

Se mentre lavori alla personalizzazione del tuo tema WordPress, ti accorgi di dover aggiungere dei nuovi termini, ti consiglio di localizzarlo per permetterne una futura traduzione, le modifiche da fare sono veramente minime.

Per prima cosa crea una nuova cartella “languages” nella directory del tema child, dopodiché aggiungi il seguente codice all’interno del file functions.php

function wip_child_theme_setup() {
	load_child_theme_textdomain( 'sueva-child', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'wip_child_theme_setup' );

successivamente utilizza il seguente codice per ogni termine che devi aggiungere al tema

_e( 'Termine', 'sueva-child' );

oppure

echo __( 'Termine', 'sueva-child' );

Altre informazioni utili

Utilizzando il file functions.php puoi migliorare ancora di più il tuo tema child, ad esempio impedendo che WordPress carichi determinati file js oppure css del tema genitore utilizzando le funzioni wp_deregister_style() e wp_deregister_script() :

function wip_remove_scripts() {
	wp_deregister_style('flexslider' );
	wp_deregister_script('jquery.nivoslider');
}

add_action( 'wp_enqueue_scripts', 'wip_remove_scripts', 11 );

Puoi ottenere i nomi di tutti i files css e js inclusi nell’head di WordPress in questo modo:

function wip_get_scripts() {
   
    global $wp_scripts, $wp_styles;
	
	echo '<p>FILE JS</p>';
	
    foreach( $wp_scripts->queue as $handle ) :
        echo $handle . '<br />';
    endforeach;

	echo '<p>FILE CSS</p>';

    foreach( $wp_styles->queue as $style ) :
        echo $style . '<br />';
    endforeach;

}

add_action( 'wp_print_scripts', 'wip_get_scripts' );

Se aggiorni una qualsiasi pagina del sito, vedrai stampata a video una lista di tutti i files, non devi fare altro che copiare il nome di ogni script o stile che hai deciso di escludere tramite le funzioni wp_deregister_style() e wp_deregister_script().

Una volta completata questa operazione puoi rimuovere il precedente codice oppure commentare l’azione, aggiungendo un doppio slash

//add_action( 'wp_print_scripts', 'wip_get_scripts' );

Ecco il link per scaricare il tema child, prima di installarlo dovrai correggerne il nome ed indicare il tema genitore giusto.

PS: Se questo articolo ti è piaciuto, ti chiedo solamente di condividerlo sul tuo social network preferito.

A presto 😉