Vuoi emergere nel mare magnum del web? Hai deciso che il tuo sito web si deve distinguere dalla massa? C’è una sola soluzione! Personalizzare il tuo tema. Con poche modifiche e qualche codice intelligente, puoi riuscire a trasformare il tuo sito in qualcosa di veramente unico.
Ma in cosa consiste esattamente la personalizzazione di temi WordPress? Si tratta di personalizzare l’aspetto e le funzionalità del tuo sito WordPress tenendo presente le tue esigenze specifiche e dando quel tocco di personalità che gli consentirà di distinguersi da una miriade di templates tutti uguali. Scordati i modelli generici utilizzati da tutti gli altri, dai il tuo tocco personale e rendi il tuo sito davvero unico nel suo genere.
Lo può fare chiunque, d’altronde WordPress è stato creato proprio per questo, ma per riuscire meglio in questa impresa sarebbe meglio conoscere un po’ di HTML e CSS, sapere come funzionano i database MySql e magari avere una infarinata di PHP.
Ma non c’è da spaventarsi, approfondiamo meglio il nocciolo della questione. Cerchiamo di capire passo dopo passo con alcuni pratici esempi di codice come affrontare il percorso. Per prima cosa, concentriamoci su due termini chiave: “temi WordPress” e “personalizzazione WordPress”, che sono i due concetti guida.
Capire cos’è la personalizzazione di temi WordPress
I temi WordPress, anche o più diffusamente chiamati template, determinano l’aspetto generale e le funzionalità del tuo sito web. Arrivare a personalizzarli ti consentirà di aggiungere il tuo tocco personale e creare una presenza online unica. E’ fondamentale per prima cosa comprendere appieno la struttura del tema, inclusi file del tema, modelli ed elementi di progettazione.
WordPress è stato concepito per distinguere bene layout grafico, funzionalità e contenuti e ognuna di queste caratteristiche può essere usata o personalizzata a se stante.
Il layout è ovviamente l’aspetto grafico del tuo sito web WordPress e il tema la base di tutto il design. Definisce quindi il layout generale, la combinazione di colori e lo stile. Se ne possono installare quanti se ne vuole, ma uno solo deve essere attivo e se si cambia attivandone un altro cambia tutto l’aspetto del sito. Sono disponibili migliaia di temi gratis e a pagamente quindi trovare quello perfetto può essere una vera sfida.
Scegliere il tema WordPress giusto
Scegliere il tema più indicato per la propria idea o la propria attività è la base di un processo di personalizzazione di successo. La prima, vasta e soprattutto gratuita selezione di temi può essere fatta tramite il repository ufficiale di WordPress, ma ci sono market di terze parti che hanno migliaia di temi WordPress a pagamento, i quali in realtà possono costare pochi euro. Ci si può confondere un po’ nella scelta, ma bisogna tener presente che qualsiasi tema WordPress può essere personalizzato e quindi è meglio concentrarsi su temi che si allineano più o meno perfettamente con la nicchia del tuo sito web.
Bisognerebbe cercare di individuare quelli che si caricano più velocemente e offrono un design responsive per un’esperienza utente ottimale. Poi, una volta trovato il tema che ritieni più adatto è il momento di liberare la tua creatività e possiamo procedere con le fasi di personalizzazione.
Personalizzazione del tema WordPress
Si inizia andando sulla dashboard di WordPress e poi nella sezione “Aspetto”, però prima di immergersi completamente nella personalizzazione è molto importante capire e fare alcune cose:
- primo: fai un backup. Questo è il consiglio migliore che ti posso dare!
- secondo: crea un child theme.
Queste due cose di cui non bisogna dimenticarsi garantiscono che le modifiche non andranno perse in caso di problemi o durante l’aggiornamento del tema e vanno fatte subito all’inizio del lavoro perchè per esempio nel caso del tema child, una volta creato va attivato e le modifiche fatte, se viene disattivato, potrebbero andare perse, per cui una volta attivato si lavora su quello piuttosto che sul tema padre e adesso vediamo perchè.
Capire come sono impostati i Temi WordPress
Andiamo a comprendere le basi che compongono un tema WordPress. La prima cosa da capire è dove si trova la cartella contenente i file del tema installato e per farlo dobbiamo collegarci utilizzando il software di gestione FTP.
Una volta collegati andiamo nella cartella /wp-content/themes che contiene tutti i temi WordPress installati, principali o child e andiamo ad individuare la cartella contenente il nostro tema e vediamo quali files contiene.
Nella cartella troverete con certezza nel 98% dei casi, sempre, obbligatoriamente alcuni files. Ho detto nel 98% dei casi perché esistono anche temi molto complessi che sono organizzati diversamente che in questa fase lasceremo da parte perchè con questi temi WordPress c’è bisogno di avere un livello di esperienza alto per poter fare modifiche, ma sono casi molto particolari. Vediamo invece quali sono i file che troverete praticamente sempre:
- style.css: è il file principale che contiene il codice CSS utile a personalizzare lo stile grafico del tema con i suoi colori, caratteri e il layout.
- functions.php: la “spina dorsale” del tema WordPress nel quale con il codice PHP si possono aggiungi funzioni personalizzate per estendere le funzionalità del tema.
- index.php: praticamente la pagina iniziale del tema.
- header.php e footer.php: sono i file che contengono le personalizzazioni per le sezioni di intestazione e piè di pagina.
- single.php e archive.php: questi files a volte potete non trovarli, perchè possono essere gestiti in modalità diverse ma il uso è volto a contenere il layout dei singoli post e delle pagine archivio.
- page.php: stessa cosa per questo file che se c’è contiene il layout delle singole pagine.
Mettendo le mani su questi files e conoscendo un po’ di CSS, HTML o PHP puoi personalizzare il tuo sito per adattarlo al tuo stile e ai tuoi requisiti unici. Supponiamo che tu voglia modificare la dimensione del carattere dei titoli dei post del tuo blog. Basta aprire il file style.css e inserire il codice pertinente oppure individuare il file PHP Functions.php e inserire uno snippet di codice con una funzione per regolare la dimensione del carattere a proprio piacimento.
Ma non iniziamo ancora a modificare vediamo prima nel dettaglio alcuni esempi del contenuto di questi files.
Diamo un’occhiata al file style.css:
/*
Theme Name: My Custom Theme
Theme URI: http://example.com/my-custom-theme/
Description: Child theme for the parent theme
Author: Your Name
Author URI: http://example.com
Template: parent-theme-folder-name
Version: 1.0.0
*/Questo riportato è proprio l’esempio di un tema WordPress child e questo file riporta dati ben precisi racchiusi in un commento generale che non va cambiato o tolto perché viene interpretato da WordPress. La prima contiene il Nome del tema poi l’URL dove si trova una copia del tema mantenuto per poterlo scaricare, se necessario, poi c’è una breve descrizione delle caratteristiche, l’autore del tema e il suo sito web e la riga “Template:” che è molto importante perché contiene il riferimento al tema principale.
Il “Child Theme” infatti si chiama cosi proprio perchè non può funzionare se non in modo dipendente dal tema principale o padre e la sua funzionalità è proprio quella di consentire modifiche senza intaccare in alcun modo il tema principale stesso e quindi consentirne gli eventuali aggiornamenti periodici.
I due punti sono importanti nei temi WordPress perchè a sinistra abbiamo l’interpretazione per WordPress stesso che è sempre uguale e non cambia mai ed a destra il dato vero e proprio che viene modificato dall’utente.
Dopo la versione e la fine del commento generale chiuso con il tag “*/” ci si può “sbizzarrire” ad inserire qualsiasi codice CSS per modificare il nostro tema. Il tema principale non verrà toccato, ma vedrai le modifiche apparire magicamente sul tuo sito WordPress. Puoi dare sfogo alla tua creatività: aggiungere un tocco di colore al tuo menu di navigazione, modificare i font, cambiare colori e tutto quello che ti viene in mente per dare al tuo sito WordPress un aspetto unico e distinguibile dalla massa.
E’ sempre una buona idea testare le modifiche man mano che procedi senza aver paura di sperimentare e non c’è da preoccuparsi se hai commesso un errore puoi sempre ripristinare una versione precedente o consultare la sempre utile community di WordPress per avere indicazioni, a proposito hai fatto tutte le copie di backup?.
Ma non modifichiamo ancora, diamo un’occhiata ad un esempio del file functions.php:
<?php
function custom_theme_setup() {
// Add custom logo support
add_theme_support('custom-logo');
// Register custom navigation menus
register_nav_menus(array(
'primary-menu' => __('Primary Menu', 'my-custom-theme'),
));
// Add custom image sizes
add_image_size('custom-thumbnail', 300, 200, true);
}
add_action('after_setup_theme', 'custom_theme_setup');Anche questo esempio è tratto da un tema Child: infatti troviamo le funzioni principali, obbligatorie per collegarsi al tema principale. Non vanno toccate assolutamente, altrimenti il vostro sito WordPress non funzionerà, ma di seguito puoi inserire i tuoi snippetti di codice e le tue funzioni in linguaggio PHP.
Oltre a questi due file, puoi ovviamente modificare anche tutti gli altri file del tema utilizzando il tema Child. Bisogna solo seguire una gerarchia molto specifica e alcune regole per avere tutta la libertà di apportare le modifiche che ti vengono in mente. Ti consiglio di dare un’occhiata qui nel coding standard di WordPress per gli sviluppatori di temi WordPress per evitare errori e problemi presenti e futuri che potrebbero sorgere ad esempio nei nuovi aggiornamenti di WordPress.
Child Theme
Entriamo nel vivo della modifica ai temi WordPress e creiamo il tema figlio (child theme). In realtà è molto semplice: prima si installa il tema principale, poi, via FTP, si crea una cartella in /wp-content/themes con un nome qualsiasi che vogliamo dare al nostro tema figlio e si creano al suo interno, due files: styles.css, functions.php e infine si attiva il tema figlio da WordPress admin.
Ma non funziona ancora! Bisogna scrivere qualcosa all’interno di questi files.
Nel file styles.css la cosa è semplice, basta copiare ed incollare l’esempio che ho riportato sopra, mentre nel file function.php la questione è un po’ più complessa: vanno fatte eseguire le funzionalità richieste dal tema padre e caricati i suoi fogli stile CSS. Non semplice per chi conosce poco il PHP.
Ma c’è una possibilità da seguire per semplificare di molto questa cosa: utilizzare un plugin. Ce ne sono molti che fanno questo lavoro quindi non è un problema di scelta, ad esempio il primo che ho trovato dal Repository di WordPress è: Child Theme Wizard . Ma usa quello che vuoi, in questo caso il risultato sarà sicuramente lo stesso.
Utilizzalo per creare il child theme ed il primo passo verso la personalizzazione è fatto.
Quindi a questo punto, riassumiamo, i passi da compiere:
- Installare il tema principale
- Installare il plugin per la creazione del tema figlio
- Creare il tema figlio utilizzando il plugin appena installato
- Attivare il tema figlio da “Aspetto” -> “Temi”
Molti temi WordPress addirittura offrono già un tema child a disposizione e ciò permette di saltare dei passaggi, basta copiare il tema child nella propria cartella dei temi WordPress ed attivarlo.
A questo punto possiamo iniziare veramente le nostre personalizzazioni (a proposito: avete fatto le copie di backup?), ma ci sono anche molti altri modi di personalizzare i temi Wordpres nel loro layout e/o di espanderne le funzionalità.
Tecniche di personalizzazione
Le modifiche più avanzate nei temi WordPress possono essere fatte mettendo le mani sul codice, ma ci sono altre possibilità. La più semplice e più utilizzabile da utenti meno esperti in programmazione è quella che viene offerta dal tema stesso ed è proprio una prerogativa di WordPress: il Customizer. Si accede dal menu Admin di WordPress tramite ” Aspetto ” -> ” Personalizza ” e qui si possono trovare tutte le funzionalità messe a disposizione dagli sviluppatori dei temi WordPress. Si va dalla modifica dei colori e dei font, fino anche all’inserimento di codice CSS senza bisogno di passare dal file style.css. Il bello è che il Customizer funziona allo stesso modo anche con il tema child installato quindi si può usare tutte e due le opzioni.
Poi, nei nuovi temi WordPress che usano le funzionalità a Blocchi troviamo anche altre nuove possibilità di templating di cui parlerò approfonditamente in altri articoli, ma è una prerogativa di versioni recentissime di WordPress e di temi WordPress adatti a questo.
Estensioni e aggiunte di funzionalità personalizzate
Siamo solo all’inizio delle possibilità che WordPress ci offre, ma ovviamente non è possibile riassumere in post argomenti che richiedono continui approfondimenti. Vediamo però come i temi WordPress e WordPress stesso nel suo complesso offre altre possibilità di espansione e/o aggiunta di funzionalità diverse.
I Widgets
Non vengono subito presi in considerazione perchè forse sono un po’ più ostici da comprendere, ma i widget di WordPress sono piccoli blocchi che eseguono funzioni specifiche e possono essere aggiunti alle varie aree del tuo sito web, sia tramite i temi WordPress, sia a sè stante, come ad esempio barre laterali, piè di pagina e altre aree all’interno o fuori del layout del tema.
Vediamo un esempio della registrazione di un widget WordPress personalizzato con del codice da inserire direttamente nel file functions,php del tema child:
function custom_widget_init() {
register_sidebar(array(
'name' => __('Custom Widget Area', 'my-custom-theme'),
'id' => 'custom-widget-area',
'description' => __('Add widgets here to appear in the custom widget area.', 'my-custom-theme'),
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'custom_widget_init');I widget di WordPress sono strumenti essenziali per la personalizzazione e il miglioramento del sito web. Consentono di aggiungere contenuti e funzionalità dinamici ai propri siti Web senza sforzo, contribuendo in modo significativo alla funzionalità complessiva e all’esperienza utente di un sito WordPress.
Modelli di pagina personalizzati
I modelli di pagina personalizzata WordPress sono layout predefiniti per pagine specifiche su un sito Web WordPress. Consentono agli sviluppatori e ai proprietari di siti di personalizzare l’aspetto di singole pagine o gruppi di pagine.
Ad esempio si potrebbe voler avere delle pagine con un tipo di grafica ed impaginazione diversa dalle pagine principali dei temi WordPress e questa cosa si può fare usando appositi templates di pagina o modelli di pagina personalizzati.
I modelli di pagina personalizzata WordPress sono strumenti potenti che consentono a sviluppatori e designer di creare esperienze utente su misura per le diverse sezioni di un sito Web. Sono essenziali per mantenere un design coerente e allo stesso tempo accogliere diversi tipi di contenuti, migliorando in definitiva l’estetica e l’usabilità complessive di un sito Web WordPress.
Tipi di post personalizzati e tassonomie
Usando la programmazione avanzata si possono creare tipi di post personalizzato e tassonomie da usare solo con i temi WordPress installati o con i temi child installati.
I tipi di post personalizzati (CPT) in WordPress consentono di definire i propri tipi di contenuto. Infatti WordPress ha post e pagine impostati in modo predefinito e questa è la base del CMS. I tipi di post personalizzati invece consentono di creare nuovi tipi di contenuti, come portfolio, testimonianze, eventi, prodotti, ecc., su misura per le esigenze specifiche del tuo sito web.
I tipi di post personalizzati e le tassonomie sono potenti funzionalità di WordPress che consentono agli amministratori dei siti Web di strutturare i propri contenuti in modo efficace e fornire un’esperienza migliore sia agli utenti che ai creatori di contenuti. I tipi di post personalizzati definiscono nuove strutture di contenuto, mentre le tassonomie classificano e taggano questo contenuto, rendendolo più accessibile e organizzato.
Questi però sono argomenti complessi da sviluppare con l’aiuto di un WordPress developer che lo fa di mestiere, ma si può fare anche da soli con la buona volontà, però, di imparare a farlo. Per chi vuole approfondire, sono argomenti che verranno trattati a parti in altri tutorials in modo più approfondito come richiede la tematica.
Personalizzazione dei temi WordPress e posizionamento Google
La modifica del tema di WordPress ha senza dubbio un impatto importante sulla SEO, che può risultare addirittura significativo, a patto però di sapere bene quello che si sta facendo. I temi hanno un impatto sull’aspetto e sulle prestazioni del sito, sulla formattazione dei contenuti e sui dati strutturati utilizzati. Esistono strategie per garantire che le classifiche rimangano stabili o addirittura aumentino quando si cambia tema.
Il contenuto effettivo del vostro sito web non è influenzato dal tema o dai temi WordPress che avete scelto, ma l’articolo detta il modo in cui il materiale viene presentato.
È estremamente importante che il tema utilizzi la struttura dell’intestazione appropriata seguendo quindi le regole di struttura dei tag HTML h1, h2, h3 ecc, e non c’è niente di meglio che poter personalizzare via codice la struttura del proprio sito WordPress in modo che possa adattarsi in maniera completa ai dettami SEO. E qui le tecniche di SEO Optimization sono varie ed ognuno utilizza ciò che meglio si adatta al proprio prodotto o servizio, quindi conoscere come si può personalizzare i temi WordPress aiuta in modo efficace ad adattarsi alle tecniche SEO volte a posizionarsi in modo maggiormente rilevanti su Google e sugli altri motori di ricerca. Guarda il mio tutorial sulle nozioni di base SEO.
Conclusione
Questi pochi concetti basilari ti consentiranno di affrontare personalizzazioni di successo e creare la tua presenza online unica sia come presentazione sia in ottica SEO. Tuttavia, ricorda che un sito web è un continuo work in progress. Rimani aggiornato con gli aggiornamenti di temi e plug-in, aggiungi nuove funzionalità secondo necessità e crea costantemente contenuti accattivanti per migliorare il tuo posizionamento su Google.
