Cambiare tema a WordPress – best practice per fare le cose per bene

Cambiare tema a WordPress per fortuna non capita di frequente ma quando succede sono dolori se non si fanno le cose per bene ecco perché ho deciso di scrivere questa guida indicando le best practice che normalmente seguo quando devo fare questo tipo di lavoro, proprio in questo periodo mi sono dedicato al cambio template per il sito della mia ragazza e ho potuto affinare meglio il processo produttivo aggiungendo passaggi secondo me importanti per il buon successo di questa operazione.

Il template possiamo vederlo come il vestito del nostro sito e programmando aggiornamenti periodici ci consente di non puzzare di naftalina quando un utente lo visita, anche il cambio totale del tema va considerato specie in quei casi in cui abbiamo messo troppe toppe assomigliando di più ad Arlecchino che ad un bel vestito

Questa guida non vuole essere definitiva ma è pensata per essere usata come un punto di partenza su cui sviluppare il proprio processo produttivo, molti dei passaggi sono stati per me essenziali ma come sempre ogni progetto ha una vita propria e sarò lieto di leggere la tua esperienza nei commenti a fine articolo, la condivisione di idee è fondamentale per migliorare e migliorarsi :-).

Il nuovo template su cui ho eseguito il cambio tema sul sito della mia ragazza si basa sul framework ItalyStrap, uno starter theme per WordPress di mia creazione e fatto per “velocizzare” la fase di sviluppo (ho messo velocizzare fra virgolette perché gran parte del codice è già pronto e funzionante ma ad ogni modo le personalizzazioni grafiche vanno fatte e richiedono comunque del tempo, tanto tempo, quindi non ti fare illusioni :-P, però avere una base pronta sicuramente aiuta ;-)).

Questo template è SEO friendly, performance friendly, Schema.org friendly ;-), Bootstrap friendly, mobile friendly, cuggino friendly,  facciotuttoio friendly, insomma è una bomba di starter theme 🙂 (ok, se non ci credi provalo :-)).

Tutto il lavoro di sviluppo e personalizzazioni varie è stato fatto in locale (e continua in locale) utilizzando il tema child di ItalyStrap, in questo modo posso aggiornare il tema padre senza perdere nessuna impostazione grafica (adoro i temi child :-)), se invece non sei sviluppatore e non hai una versione in locale del tuo sito allora potresti usare il Live Preview di WordPress (modalità anteprima) e testare così il tuo nuovo template senza causare problemi ai tuoi visitatori.

Il template precedente non aveva particolari funzionalità o ottimizzazioni varie quindi è bastato recuperare quelle parti di codice aggiunte da me e inserirle in quello nuovo (analytics, open graph, twitter cards, ecc), tutte le altre ottimizzazioni sia SEO che performance (quelle che si possono applicare ad un tema)  sono già comprese in ItalyStrap ;-).

Durante lo sviluppo della nuova veste grafica ho potuto sperimentare nuove tecniche per rendere più veloce il caricamento del sito, fattore importante per la user experience, al momento in cui sto scrivendo sono ancora in fase di sperimentazione (la fortuna di poter lavorare sul sito della propria ragazza ;-)), diciamo che il repo di WordPress è pieno di funzioni native interessanti sconosciute ;-).

Ho scritto ottimizzazioni SEO ma questo non vuol dire che non avrò bisogno comunque di un buon plugin dedicato alla SEO ma solo che il codice del template ha di base quelle ottimizzazioni di codice che tutti i template dovrebbero avere (e che molti non hanno), ricordo infatti che le funzionalità (come le impostazioni SEO classiche e altre impostazioni) dovrebbero essere delegate a plugin e le funzionalità grafiche invece dovrebbero essere delegate ai template, questo può essere utile infatti proprio in quelle situazioni in cui si dovesse eseguire un cambio tema come l’argomento di questa guida, ed è per questo che preferisco anche usare un child theme costruito sulla base di ItalyStrap, questo mi consentirà di eliminare solo pochi file nel caso voglia cambiare nuovamente la grafica del mio sito.

Disclaimer:

Prima di fare qualunque manovra eseguire un backup dell’intero sito compreso il database (qui la guida), primo perché male non fa 😉 secondo perché andremo a lavorare sia sul database che sui file media e nel caso qualcosa dovesse andare storto potrai sempre ripristinare tutto.

Fatta questa breve premessa entriamo nel vivo del tutorial 🙂

Plugin per la modalita manutenzione

La prima operazione da fare (non obbligatoria ma molto utile) durante il cambio di un tema è quella di installare un plugin per la modalità di manutenzione, io ho trovato questo di Yourinspirationweb molto valido e funzionale (che ho comunque riadattato per le mie esigenze sostituendo la form originale con quella di mail chimp), in questo plugin è implementata la possibilità di impostare un codice intestazione http 503 (service unavailable) alle pagine utile per indicare al motore di ricerca che il down è temporaneo ed evitare quindi la deindicizzazione delle pagine del nostro sito (cosa che non vogliamo avvenga), nel plugin sarebbe stato utile avere anche la possibilità di impostare sempre nell’intestazione http una data di riattivazione del sito, ad ogni modo per il mio utilizzo andava più che bene poiché il down sarebbe stato al max di 24 ore.

(Se vuoi saperne di più su come gestire il downtime pianificato leggi qui).

Ora che hai attivato la modalità manutenzione comincia a fare un po’ di pulizia generale, disattiva tutti i plugin e nel caso si sia installato W3TC o simili pulisci prima la cache generata e poi disattivalo, già che ci sei elimina pure quelli non più utilizzati, è inutile avere decine di plugin anche se non attivi, occupano comunque risorse poiché WordPress la prima cosa che fa è “andare a vedere” la lista dei plugin presenti, meno lavoro gli facciamo fare più velocemente lo farà 😉 (tenerne 2 o 3 non attivi non da problemi), quindi nel caso ce ne fosse bisogno aggiorna plugin e WordPress stesso.

Le immagini prima di tutto

Cambiando template molto probabilmente cambieranno anche le dimensioni dei file immagine (larghezza a altezza) e il numero totale di immagini caricate sul server, questo perché WordPress in base alle impostazioni sia del pannello di controllo che del template creerà dall’immagine di partenza un immagine per ogni dimensione settata, per esempio come ben saprai in “impostazioni > media” di default sono impostate le dimensioni per la thumbnail (o miniatura), per l’immagine media e per l’immagine grande, quindi 3 immagini create di default (più quella caricata fanno 4) e in più dobbiamo tenere conto anche di quelle create eventualmente dal template che si andranno a sommare a quelle standard aumentando così lo spazio su disco occupato, se sono quindi misure non più utilizzate è inutile tenerle sul nostro sever ad occupare spazio prezioso che in alcuni contratti fanno pure pagare caro.

Come vedi nella figura sopra accedendo al pannello “impostazioni > Media” nel Backend di worpress trovi le misure impostate “manualmente”, invece per conoscere quali immagiini ha creato il vecchio tema bisogna cercare la funzione add_image_size()  all’interno del file functions.php (di solito).

<?php add_image_size( 'homepage-thumb', 220, 180, true  ); ?>

Il secondo e il terzo parametro sono le misure che il template utilizza per creare le nuove thumbnail.

Eliminiamo le vecchie immagini non più utilizzate con DNUI Delete unused image

La prima fase sarà solo una scansione generale per avere una lista delle immagini presenti nel server quindi installa dal repository di WordPress DNUI delete unused image.

Disclaimer: Attualmente il plugin è fermo con lo sviluppo da oltre 2 anni, io personalmente lo uso spesso e non ho mai avuto problemi, comunque puoi fare queste due procedure, la prima fai un bel backup del tuo sito, la seconda cerchi un’alternativa a questo plugin, sul repo ce ne sono diversi.

Cominciamo con il fare la scansione con DNUI, il quale andrà a elencarci tutte le immagini inserite come media e le immagini figlie generate, vai in “impostazioni > DNUI” e clicca sul tasto “Make scan”.

Finita la scansione dovrebbe mostrarti la lista delle immagini presenti nella cartella uploads.

Come puoi vedere dall’immagine sopra (che ho tagliato per motivi di spazio) nella schermata trovi le informazioni su quante immagini sono state trovate, quante sono attualmente utilizzate e quante non sono utilizzate, nella parte sotto c’è la lista delle immagini di partenza e di quelle ridimensionate, prima di procedere segnati la dimensione di quelle non selezionabili (che sono immagini attualmnte inserite all’interno di articoli o pagine), dopo che hai fatto la tua bella lista a fondo pagina clicca sul pulsante select all e poi su delete.

Esegui la procedura per ogni pagina (tasto next sotto il pulsante unselect All)

Ora ti spiego un piccolo trucchetto per eliminare anche quelle immagini che il plugin non ha potuto eliminare poiché utilizzate all’interno di post e pagine (ricordi che ti ho detto di segnarti la dimensione delle immagini non selezionabili?), per fare questo avrai bisogno di un altro plugin Search regex quindi installalo e attivalo.

Disclaimer: Questo plugin è molto pericoloso, se usato male può creare seri danni, quindi prima di procedere hai fatto il backup? ;-))

Una volta attivato vai al pannello di controllo di Serach regex che trovi in Strumenti > Search regex

Il passaggio successivo sarà quello di cercare grazie a questo plugin le stringhe contenenti il pattern che vogliamo sostituire, che sarà quindi quello che aggiunge WordPress alla fine del nome dell’immagine, nel mio caso era 187×124.jpg (187 di larghezza e 124 di altezza), quindi inserisci nel campo “Search pattern” la dimensione delle tue immagini bloccate e clicca su “Search”.

Dopo qualche secondo (o minuto a seconda del numero di immagini presenti e dalle prestazioni del server) nella stessa pagina vedrai la lista delle stringhe trovate, dopo esserti assicurato che il testo trovato sia quello da sostituire inserisci nel campo “Replace pattern” la dimensioni immagine che verrà creata dal nuovo template e che dovrà sostituire quella da eliminare poiché dopo la rigenerazione delle immagini nell’articolo devono essere presenti quelle giuste 😉 (ho spiegato sopra come trovare questo valore).

Ma non è tutto perché quando inseriamo un’immagine nei nostri articoli ovviamente nell html verranno stampati anche i parametri del tag img, width=”187″ e height=”124″, che servono per definire l’altezza e la larghezza del file, quindi dobbiamo fare una sostituzione anche di questi valori (importanti per le performance), ma come facciamo a sostituire tutto (anche il valore spiegato sopra) in una volta sola? Vediamo di seguito i vari passaggi:

Fase 1: Inserisci la porzione di testo che vuoi sostituire nel campo “Search pattern” (nel mio caso era 187×124.jpg ma nell’immagine vedrai un’altra misura perché ho rifatto gli screen dei passaggi dopo che avevo modificato le misure)

Clicca su “Search” e attendi il risultato

Nalla lista sotto verrà mostrato un estratto della stringa trovata con evidenziato in rosso il pattern cercato

Ora seleziona il testo comprensivo della dimensione e dei parametri width e height

Copia ed incolla nuovamente nel campo “Search pattern” e clicca nuovamente su “Search”

Ora incolla il pattern appena cercato in “Replace pattern” (solo per essere sicuro di cambiare la stringa nel modo corretto) e sostituisci le dimensioni con quelle che verranno create dal nuovo template e che dovranno sostituire quelle da eliminare quindi clicca su “Replace & Save” (nell’immagine sotto ho evidenziato cosa sostituire).

Fatto 🙂

(Questa procedura va ripetuta per ogni pattern di immagini che DNUI non ha potuto eliminare poiché in uso)

Fatta la procedura ripeti una scansione con DNUI ed elimina i file ora selezionabili

Nel mio caso erano rimaste alcune immagini non eliminate che ho provveduto a rimuovere a manina, ovviamente nel caso sul server siano presenti migliaia di immagini consiglio di procedere con altri tool.

E’ il momento di attivare il nuovo template

Eccoci qui, finalmente possiamo attivare il nuovo template e procedere agli step successivi, quindi ora vai in “Aspetto > Temi” e attiva pure il tuo nuovo e fiammante template, ti ricordo che siamo ancora in modalità manutenzione quindi non ti preoccupare, solo tu vedi la nuova grafica ;-).

Ora sei pronto per rigenerare tutte le immagini presenti in base alle nuove misure definite nel nuovo tema, ma prima di procedere ti svelo un piccolo trucchetto molto utile che ti consentirà di risparmiare un po’ di spazio sul server, ricordi quando ho detto che più immagini vengono create più spazio viene occupato? Bene, allora andiamo a ridurre il numero di immagini togliendo quelle superflue che non utilizzeremo mai (se un giorno invece vorrai aggiungere una dimensione basterà semplicemente rigenerare nuovamente le thumbnail dopo averla settata), considerando che le immagini impostate dal template siano “tutte utili” poiché saranno state inserite seguendo criteri grafici noi andremo a lavorare invece su quelle immagini che vengono create da WordPress stesso, queste immagini sono la thumbnail, l’immagine a dimensione media e quella a dimensione grande, noi andremo a “bloccare” le ultime due tenendo solo la thumb poiché utilizzata all’interno del pannello di controllo per visualizzare le anteprime sia nel pannello media sia quando apriamo l’editor per l’inserimento negli articoli o pagine.

Ora ti starai chiedendo, “Ma sono solo 2 dimensioni, è roba di poco, perché devo evitare che vengano create? Alla fine mi occupano poco spazio, non mi danno fastidio”

Beh, ovvio, non è un problema lasciarle, sei libero di fare quello che vuoi, lo spazio sul server è tuo, è solo un trick in più che può essere utile conoscere, come ho spiegato all’inizio questa non è la bibbia del cambio tema, le procedure qui spiegate vanno riadattate per ogni progetto ;-).

Comunque il barbatrucco è molto semplice, quando sei in “Impostazioni > media” nel back-end basta semplicemente settare a 0 le dimensioni di larghezza e altezza e queste non verranno create da WordPress ne durante la rigenerazione ne durante il caricamento dei file media stessi, più semplice di così ;-).

Ora è arrivato il momento di rigenerare tutte le immagini, per fare questo ho usato Regenerate Thumbnails che come sempre puoi scaricare dal repository di WordPress.

Rigenerare le immagini

Quando lo avrai installato e attivato vai al suo pannello di controllo che trovi in “Strumenti > Regen. Thumbnails”:

Clicca su “Regenerate All thumbnail” e aspetta che abbia finito 🙂 (su server lenti e/o con migliaia di immagini potrebbe impiegare diverso tempo)

Fatto 🙂

Nuova struttura dei contenuti, spostiamo custom post type, pagine e articoli

Nel mio caso oltre allo sviluppo del nuovo template era stata anche riprogettata la struttura dei contenuti creando dei custom post type nuovi in cui sarebbero stati spostati gli articoli di una determinata categoria, anche per fare questo mi sono avvalso dell’aiuto di un plugin, pTypeconverter sviluppato apposta per spostare i tipi di post da un formato all’altro.

Se anche tu hai bisogno di spostare tipi di post installa e attiva il plugin, vai nel pannello di controllo di pTypeConverter

E nella tab “Convert” trovi il cuore del plugin, da qui puoi scegliere di filtrare i tipi di post in base a Titolo, Autore, Data e tipo di post e limitare il numero di contenuti trovato.

Una volta che avrai filtrato i tuoi post e trovato quelli da spostare selezionali mettendo la spunta nella checkbox a sinistra a fianco del titolo (1), a destra nel menù a tendina seleziona il nuovo tipo di post (2) poi clicca su Convert (3), attendi qualche secondo ed il giuoco è fatto.

Ovviamente spostando questi articoli in un custom post type anche la url ha subito una variazione aggiungendo il nome del CPT nello slug, questa variazione di url se non risolta con un redirect 301 quando si tenta di accedere a tale pagina il server ritorna un bel 404 per pagina non trovata e la user experience va a farsi benedire :-), ovviamente noi siamo fighi e sappiamo come risolvere anche questo problema, io ti mostro due metodi, uno “manuale” tramite htaccess e uno “più semplice” tramite un plugin.

Redirect 301 tramite htaccess

Il redirect 301 usando il file htaccess è molto semplice da implementare, basta semplicemente aggiungere al file questo snippet di codice:

Redirect 301 /vecchia-url.tld http://www.dominio.tld/nuova-url.tld

Dove TLD sta per Top Level Domain, che in pratica sono i .com .it .net ecc ecc

Trick:
Se hai degli articoli con lo slug categoria (o tag) nella url ti basta semplicemente fare il redirect della sola categoria (o tag) alla nuova url

Redirect 301 /vecchia-categoria http://www.dominio.tld/nuova-categoria-o-nuova-posizione

Per approfondire maggiormente l’argomento puoi leggere questa guida e questa

Redirect 301 tramite il plugin Redirection

Redirection è un plugin molto valido, oltre la possibilità di impostare i redirect 301 tiene traccia anche delle visite fatte sui 301 e di eventuali pagine 404, tutte queste informazioni le trovi nelle tab “Log” e “404s” del pannello di controllo del plugin, molto importante quando si è attivato è impostare un periodo massimo di tempo in cui verranno memorizzati i log questo perché a lungo andare la cartella sul server contenente i log potrebbe lievitare andando ad occupare spazio prezioso, il tempo massimo per mantenere i log consigliato è di 7 giorni.

Il plugin ha molte altre impostazioni che puoi approfondire una volta scaricato leggendo il manuale, quello che ti mostro di seguito è la procedura base per creare un redirect 301.

Quando sei nella tab “Reindirizzamenti” (difficile da dire e da scrivere :-)) in basso ci sono i campi dove dovrai aggiungere la tua vecchia url e quella nuova, l’immagine sotto parla chiaro senza bisogno di ulteriori spiegazioni, le impostazioni di default vanno più che bene, la url da inserire funziona sia con la presenza del dominio che senza:

http://yoursite.com/oldpage/that/needs/redirecting/

oppure

/oldpage/that/needs/redirecting/

Per essere sicuro che funzioni tutto correttamente puoi accedere alla vecchia url e vedere se l browser fa il corretto reindirizzamento a quella nuova, per approfondire qui c’è una guida molto dettagliata.

Una volta impostato un redirect 301 va lasciato a vita 😉

Il nuovo sito è online

Finalmente ci siamo, ora puoi disattivare il plugin per la modalità manutenzione e cominciare la fase di verifica del lavoro eseguito per correggere eventuali problemi che ti sono sfuggiti durante la “migrazione” al nuovo tema, nei paragrafi successivi ti indico alcuni strumenti utili che ti consentiranno di eseguire svariati test sul tuo nuovo e fiammante sito web 🙂

Fase di test, gli strumenti utili

Il primo strumento sei tu, fai una navigazione come se tu fossi l’utente target, fallo anche nei giorni successivi, a mente fresca si vedono più facilmente gli errori.

Sul sito in produzione attiva il debug di WordPress, per farlo devi editare il file wp-config.php (se non hai programmi apposta va bene anche il notepad di windows), vai alla riga

define('WP_DEBUG', false);

e al posto di false scrivi true come ho vedi qui sotto:

define('WP_DEBUG', true);

Se dovessero comparire errori del PHP comincia a risolverli uno a uno, se non sei pratico di PHP la procedura più semplice è quella di disattivare tutti i plugin e riattivarli uno a uno, nel caso non dovessi risolvere allora probabilmente nel tema che stai usando ci sono errori, quindi correggili, ricordati quando hai finito di rimettere a posto la candela… ehm… volevo dire di rimettere false 🙂

Qui di seguito ti lascio un video sul debug di WordPress:

Fai vedere il nuovo sito ad amici e parenti, ascolta il loro feedback da veri niubbi e nel caso apporta eventuali modifiche 😉

Esegui un crawling dell’intero sito e verifica che non ci siano errori 404 o link rotti, nel caso ce ne fossero sai già come risolverli ;-), in questo ti può aiutare Visual SEO Studio di Federico Sasso, un ottimo tool che consiglio.

Verifica anche la velocità del nuovo sito con Speedo e controlla nei giorni a seguire anche Google analytics in "Comportamento > Velocità sito".

Tieni monitorato anche il Google Webmaster Tool, anche questo lo considero un’importante strumento di aiuto per il Webmaster in cui puoi trovare tantissime informazioni, da eventuali problemi che il bot di google ha trovato allo stato di indicizzazione del tuo sito e molto altro.

Conclusioni

E con questo direi di aver inserito passaggi importanti per cambiare tema a WordPress (secondo me) analizzando varie problematiche e come risolverle, ovviamente ogni situazione va valutata di volta in volta ma ritengo che queste procedure siano la base sui cui partire per fare un buon lavoro e per evitare gravi problemi dopo, insomma una serie di best practice che andrebbe sempre seguita.

Tu hai qualcosa da aggiungere? Pensi che ci siano altri punti che possono o devono essere presenti nella mia lista? Fammelo sapere qui sotto nei commenti 🙂