Modificare temi WordPress: come fare per non sbagliare

WordPress è una delle piattaforme CMS (content management system) più utilizzate al mondo. Si conta che ad oggi circa 75 milioni di siti siano basati su WordPress ed il 48% dei primi 100 blog elencati su Technorati poggino sulla medesima piattaforma.
Uno dei principali scogli per chi si è da poco avvicinato al CMS consiste nel personalizzare temi WordPress. Per WordPress esistono temi gratuiti e a pagamento ed è proprio grazie ad essi che il software può essere utilizzato per pubblicare siti web complessi, molto più articolati rispetto ai semplici blog.

WordPress si è da tempo scrollato di dosso la nomea di CMS per la pubblicazione di blog: proprio grazie alla disponibilità di migliaia di temi, alle elevate possibilità di personalizzazione, alla gestione delle pagine attraverso l’uso di template, alla possibilità di estendere le funzionalità di base attraverso l’installazione di plugin, WordPress si propone come una soluzione estremamente versatile per la realizzazione di qualunque genere di sito web.

Installare un tema WordPress

I temi per WordPress rappresentano un’inestimabile risorsa: scaricando, installando e personalizzando un tema WordPress già predisposto, è possibile arrivare ad allestire un sito web in poco tempo e riducendo al minimo gli sforzi.

Già sul sito ufficiale è disponibile una buona raccolta di temi WordPress gratuiti (vedere questa pagina) e sul web è possibile individuare molto facilmente ulteriori temi, anche piuttosto versatili, distribuiti sia a titolo gratuito che a pagamento.

Per installare un tema WordPress, ovviamente, bisognerà disporre di un’installazione di WordPress, effettuata su un server remoto oppure in locale.
Qualora si volesse provare WordPress in locale, le soluzioni adottabili sono molteplici: di solito il miglior approccio consiste nell’allestire una macchina, connessa alla rete locale, sulla quale si provvederà ad installare e configurare un server web. In alternativa, servendosi di un software per la virtualizzazione (vanno benissimo anche Virtualbox o Vmware Player; su IlSoftware.it trovate tutte le guide in merito), si può creare una macchina virtuale sulla quale installare sistema operativo e server web.
C’è l’imbarazzo della scelta:

- Una distribuzione Linux + Apache
- Windows (qualunque versione) + XAMPP (a proposito di XAMPP vedere Installare Joomla in locale: guida completa; Condividere file online allestendo un web server con XAMPP)
- Windows Vista o versioni successive (tranne edizioni “Home”) + IIS + Microsoft Web Platform (con FastCGI)
- Una versione di Windows Server + IIS + Microsoft Web Platform (con FastCGI)
- Windows 7, Windows 8, Windows 8.1, Windows Server 2008 R2 o successivi + IIS + Zend Server (vedere PHP a tutta velocità: come aggiornare Zend Server all'ultima versione; Debug PHP con Z-Ray: ottimizzare pagine PHP lente, risolvere problemi negli script

Per installare un nuovo tema in WordPress, è sufficiente effettuarne il download, accedere al pannello di amministrazione del sito (http://www..../wp-admin) con le credenziali dell’account amministratore, cliccare sulla voce Aspetto nella colonna di sinistra quindi su Temi.

Con un clic su Aggiungi nuovo quindi su Carica tema, si potrà scegliere il file Zip del tema WordPress appena scaricato.

Come modificare temi WordPress

Quando si modificano i temi WordPress è bene non commettere alcuni errori molto comuni ed è essenziale attenersi ad una serie di linee guida che riassumiamo di seguito:

1) Utilizzare i temi figli
A meno che le modifiche apportate il tema WordPress non siano minime, il consiglio è quello di utilizzare sempre i cosiddetti temi figli: è una prassi fondamentale che consente di non “sporcare” il tema originale e consente di aggiornarlo agevolmente senza perdere le personalizzazioni applicate in proprio.

Il 90% del lavoro di modifica di WordPress in vista del lancio di un nuovo sito web di solito è incentrato solamente su due file: style.css e functions.php.
Le modifiche sul file style.css, da memorizzarsi nella cartella del tema figlio, consentono di agire essenzialmente sull’aspetto estetico del tema WordPress (senza alterare i file che compongono il tema originale) mentre functions.php permette di apportare modifiche più strutturali aventi a che fare con i singoli script PHP ed, in particolare, con le varie funzioni.

2) Accodare i propri script WordPress

WordPress utilizza le funzioni definite in questo file per gestire possibili conflitti tra gli script personalizzati dallo sviluppatore e quelli già presenti in temi e pacchetto base.
Utilizzando la pratica dell’enqueueing (letteralmente, “accodamento”) degli script PHP in WordPress si eviteranno molteplici problemi.
È altamente sconsigliato, ad esempio, modificare direttamente il file include header.php per alterare l’intestazione del sito WordPress perché con ogni probabilità, non appena s’installerà un nuovo plugin, si sperimenteranno fastidiosi conflitti.
L’utilizzo dell’enqueueing consente di prevenire automaticamente tali spiacevoli situazioni.

3) Utilizzare sempre il tema migliore per il lavoro da sviluppare

Non mai consigliabile “reinventare la ruota”: se si sta realizzando un sito web di un’agenzia immobiliare è bene partire da un tema sviluppato per questa esigenza; allo stesso modo per un sito di fotografia, un sito informativo, per quello di un’azienda, un portale di viaggi e così via.

4) Prima di iniziare con la personalizzazione del tema WordPress, verificare attentamente le opzioni di default

È altrettanto sconsigliato gettarsi a pesce sulla modifica di un tema WordPress senza prima controllare quali opzioni di personalizzazione vengono offerte dal tema stesso.
Perché perdere tempo nella modifica dei CSS se il tema, già di per sé, fornisce alcune funzionalità per modificare il suo layout?
Prima di procedere, quindi, è bene studiare con molta attenzione le possibilità offerte nella sezione Aspetto, Theme options di WordPress, per ogni singolo tema:

5) Modificare il tema seguendo il giusto ordine

In prima battuta, per personalizzare un tema, è bene in primis verificare se il tema già di per sé contenga le funzionalità per alterarne il comportamento.
Qualora non fosse sufficiente, si dovrà metter mano ai CSS utilizzando i temi figli.
Per le modifiche di tipo strutturale, invece, si potrà utilizzare il file functions.php ricorrendo sempre alla cartella del tema figlio.
Infine, si potrà aggiungere un nuovo template al tema figlio ed, ancora, valutare l’installazione di appositi plugin per estendere ulteriormente le funzioni di WordPress.

6) Cross-browser testing

Prima di dichiarare un lavoro concluso e via a via che si prosegue con le modifiche su WordPress (senza quindi ridursi mai all’ultimo minuto…) è indispensabile verificare che il sito web venga correttamente caricato e visualizzato su tutti i vari browser.
È quindi bene effettuare una serie di verifiche con Chrome, Firefox, Internet Explorer, Safari, Opera e sui vari dispositivi mobili (smartphone e tablet).
La scelta di un tema WordPress fully responsive consente già di mettersi al riparo da problemi di visualizzazione sui dispositivi mobili o comunque dotati di differenti fattori di forma.
Uno strumento come BrowerStack consente di controllare come si comporta il sito web WordPress su qualunque dispositivo e con qualunque browser, senza la necessità di installare alcunché.

Lavorare sul tema figlio WordPress

Dopo aver personalizzato il look del tema WordPress cliccando su Theme options, se si avesse necessità di modificare in profondità il tema, è bene orientarsi sull’utilizzo dei cosiddetti temi figli.

Il primo passo consiste nel creare una nuova sottocartella all’interno della directory /wp-content/themes di WordPress. Alla cartella si può assegnare una denominazione arbitraria.

All’interno della cartella si potrà copiare il file screenshot.png, recuperandolo dalla sottocartella del tema originale.

Quindi, sempre all’interno della directory del tema figlio, si dovrà creare un nuovo dal nome style.css. Il suo contenuto dovrà essere impostato così come segue:

/*
Theme Name: Nome tema figlio
Theme URI: http: //www.sitoweb.xyz
Description: Descrizione del tema figlio
Author: Nome dell'autore del tema figlio
Author URI: URL sito web dell'autore
Template: nometemapadre
Version: 1.0.0
*/

@import url("../nometemapadre/style.css");

/* =Inizio personalizzazione del tema
---------------------------------------------- */

Le varie informazioni vanno sostituite con quelle corrette. Molta attenzione, comunque deve essere riposta nell’impostazione del parametro Template.
Esso, infatti, deve riportare il nome esatto della directory contenente il tema padre che si desidera modificare (verificarne la denominazione nella cartella /wp-content/themes di WordPress).

Lo stesso nome deve essere sostuito nell’URL indicato in corrispondenza della riga @import url("../nometemapadre/style.css");.

Sotto la sezione /* =Inizio personalizzazione del tema */, si potranno andare ad inserire le varie personalizzazioni dei CSS del tema originale.

Per modificare in profondità i temi WordPress, ovviamente, bisognerà conoscere il funzionamento e le dinamiche dei fogli di stile (CSS).
Lo strumento Ispeziona elemento richiamabile cliccando con il tasto destro del mouse su di un qualunque elemento del tema WordPress, consente di risalire ai selettori, agli identificatori ed alle classi CSS da modificare all’interno del file style.css del tema figlio.

Nell’esempio in figura, abbiamo semplicemente modificato la regola .site-description per alterare la dimensione ed il posizionamento dello slogan del sito WordPress visualizzata, nel tema scelto, accanto al logo.

La funzionalità Ispeziona elemento è presente in tutti i browser web più recenti. In Mozilla Firefox, per approfondire, è possibile utilizzare la notissima estensione Firebug che permette di monitorare il comportamento delle pagine web con la possibilità di modificare direttamente HTML, CSS e codice JavaScript in modo da verificare in tempo reale i risultati degli interventi.

Le modifiche specificate nel tema figlio hanno la prevalenza su quanto dichiarato nel tema originale. E ciò vale sia a livello di CSS che di interventi strutturali.

Accodare script nel file functions.php

Quando si ha la necessità di alterare il comportamento di WordPress ed agire, quindi, a livello strutturale, è bene creare – nella cartella del tema figlio – un file dal nome functions.php (vedere questa pagina di supporto).

Qualora si dovessero ad esempio aggiungere degli script JavaScript fra le tag <head></head> di WordPress non bisognerà assolutamente modificare direttamente il contenuto del file header.php ma si potranno usare le seguenti righe di codice nel file functions.php:

add_action('wp_enqueue_scripts', 'add_my_scripts');

function add_my_scripts() {
        wp_register_script('nomescript', get_bloginfo('stylesheet_directory') . '/js/esempio.js');
        wp_enqueue_script('nomescript');
}

Per aggiungere script che non sono dichiarati utilizzando file .js esterni, si può ad esempio usare il codice seguente:

add_action( 'wp_head', 'my_js' );
function my_js() {
    if ( !is_admin() ) { ?>

    <script type="text/javascript">
        …
    </script>
<?php }
}

File di lingua

Non tutti i temi utilizzano il file di lingua italiano. Anzi, sono pochi quelli che mostrano messaggi e riferimenti già tradotti nella nostra lingua.
Per tradurre un tema WordPress in italiano, è innanzi tutto necessario che nel file wp-config.php, in corrispondenza della direttiva WP_LANG sia appunto specificato l’italiano (it_IT): define('WP_LANG', 'it_IT');.

A questo punto, suggeriamo di verificare in prima battuta se fossero disponibili i file (estensioni .po e .mo) che consentono di tradurre il tema in italiano (fare riferimento al sito web dell’autore del tema).

Qualora i file della traduzione italiana non risultassero disponibili, si può recuperare il file en_US.po dalla directory del tema originale (sottocartella languages), creare una sottocartella languages nella directory del tema figlio, copiarvi il file en_US.po e rinominarlo in it_IT.po.
A questo punto, si potrà tradurlo manualmente (con un normale editor di testo od aiutandosi con un software come Poedit).

Per creare il file con estensione .mo, da salvare nella stessa cartella languages del tema figlio, ci si può affidare anche a tool automatizzati come questo (basterà caricare online il file di testo .po).

L’ultimo passo consiste nel controllare quale codice va inserito nel file functions.php del tema figlio per impostare l’utilizzo del diverso file di lingua. Di solito quest’informazione è disponibile nella documentazione del tema WordPress prescelto.