Modificare un tema WordPress: quando e come

Modificare un tema WordPress

gennaio 1, 2018 • sviluppo • Views: 193

Oggi se vuoi fare il blogger non hai bisogno di saper programmare. Se utilizzi gli strumenti giusti puoi fare a meno di conoscere HTML e CSS. Non devi neanche essere un esperto di grafica per avere un blog accattivante.

Nella maggioranza dei casi se usi WordPress troverai il tema WordPress su misura per te e non avrai bisogno di modificarlo.

Ma che dire se il template che hai scelto ha bisogno di alcune personalizzazioni? Ti toccherà sborsare qualche soldo in più affidandoti ad un esperto?

FACCIO DA SOLO O MI AFFIDO A UN ESPERTO?

Beh, se hai scelto con attenzione il tuo template è improbabile che tu abbia bisogno di grosse modifiche.

Per la ricerca ti consiglio di usare portali come Themeforest o Template Monster. Non solo troverai prodotti di qualità ma per ogni template potrai visionare un elenco dettagliato di caratteristiche che ti aiuteranno nella scelta.

Quindi il primo consiglio che ti do è non avere fretta: scegli il tuo template in maniera oculata.

In questo modo se dovrai personalizzare il tuo template le modifiche di cui avrai bisogno saranno di modesta entità e potrai apportarle da solo (più avanti ti spiegherò come fare).

Nel raro caso, ammesso che ci sia, in cui avrai bisogno di modifiche importanti, allora come ultima soluzione potrai considerare di ingaggiare un freelance.

SEMPLICI MODIFICHE A PORTATA DI TUTTI

Ma vediamo ora quali sono alcune modifiche di cui potresti aver bisogno e soprattutto come puoi farle da solo.

Ecco due esempi:

  • piccoli ritocchi al design (nascondere un elemento, aumentare dimensioni del testo, allargare il margine tra due elementi…)
  • aggiunta di porzioni di codice già pronti

PICCOLI RITOCCHI AL DESIGN

Quando si parla di design nel caso di pagine web si parla di CSS.

Stop! … Aspetta un attimo! Ma non dicevamo che non c’è bisogno di essere un programmatore?

Tranquillo voglio solo spiegarti dove andare per modificare il design del tuo blog. Il backend di WordPress ha una voce nel menu Aspetto che si chiama Editor. Solitamente questa è una sezione riservata ai programmatori.

Menu Aspetto Editor

Qui infatti puoi modificare il codice dei files che compongono il tuo tema. Dunque fai attenzione a non cancellare nulla! Assicurati di avere almeno una copia di backup.

Il file che dovrai modificare è un foglio di style che solitamente di chiama “style.css”. Ti basterà aggiungere alla fine del file le tue modifiche e aggiornare il file.

Style css

Vediamo nello specifico alcuni esempi pratici.

Come puoi nascondere un elemento del template che non ti serve facendo sì che non venga visualizzato sullo schermo?

E’ veramente un gioco da ragazzi. ti basta inserire queste poche righe di codice:

1
2
3
#id_elemento{
   display: none;
}

Ti basta sostituire “id_elemento” con l’identificativo dell’elemento.

Ora ti mostro come puoi trovarlo.

Ogni browser web ha una funzionalità che ti permette di ispezionare qualsiasi pagina web andando a leggere il codice.

Se usi Chrome ti basta cliccare sul tasto destro del mouse sulla pagina, selezionare “Ispeziona” e cliccare sulla prima icona del menu. In alternativa puoi usare la combinazione di tasti CTRL+Shift+C usando la tastiera.

Ispeziona Elemento

A questo punto scorrendo sulla pagina vedrai che al passaggio del mouse ciascun elemento viene selezionato. Seleziona l’elemento che vuoi nascondere posizionandoti sopra.

A questo punto vedrai che sotto l’elemento comparirà una stringa formata da diverse parole con “.” e “#”. Questa è una specie di firma che contraddistingue l’elemento. All’interno di questa firma dovrai trovare il carattere “#” insieme alla parola che lo segue immediatamente. Questa parola è l’identificativo unico dell’elemento.

Id Elemento

Una volta inserite all’interno del file style.css queste semplici righe di codice vedrai come magia che l’elemento in questione non comparirà più sul tuo blog.

Nel caso volessi nascondere più elementi simili il codice da aggiungere è leggermente diverso e cioé:

1
2
3
.classe_elemento{
   display: none;
}

Come vedi al posto del “#” questa volta c’è un “.”. Il punto contraddistingue la classe di un elemento che a differenza dell’id non è univoco. Solitamente più elementi simili condividono la stessa classe.

Firma Elemento

Ripeti la procedura per ispezionare la pagina web e trova la classe degli elementi che ti interessano (è la parola che segue il punto). Alcuni oggetti possono avere più classi. Verifica qual è la classe comune a tutti gli elementi che vuoi nascondere.

E se volessi invece modificare le dimensioni del testo?

Usa sempre la funzionalità di Chrome per ispezionare la pagina e individua l’elemento che contiene il testo di cui vuoi modificare la grandezza e poi aggiungi nel file style.css le seguenti righe di codice:

1
2
3
#id_elemento{
   font-size: 20px;
}

Come vedi la procedura è simile. Nell’esempio la grandezza del carattere è impostata a 20 pixel. In alternativa puoi ingrandire il testo con questo codice:

1
2
3
#id_elemento{
   font-size: large;
}

oppure diminuire il testo con quest’altro codice:

1
2
3
#id_elemento{
   font-size: small;
}

Un ultimo esempio per quanto riguarda le modifiche al design. Immagina di aver bisogno di allargare o restringere un margine tra due elementi della pagina.

Per esempio visualizzando i post noti che le immagini sono troppo ravvicinate al testo e vorresti aumentare sia il margine superiore che quello inferiore di 10px. In questo caso il codice che devi inserire è il seguente:

1
2
3
4
img{
   margin-top: 10px;
   margin-bottom: 10px;
}

Ovviamente ci sono moltissime altre possibilità ma non voglio ora darti lezioni di css.

AGGIUNTA DI PORZIONI DI CODICE GIA’ PRONTI

Un’altro tipo di modifiche che puoi fare anche se non hai competenze di programmazione html è quella di inserire porzioni di codice già pronti.

Esistono numerosi tools o programmi di vario genere che ti danno la possibilità di inserire pulsanti, moduli di iscrizione e altro all’interno del tuo sito o blog semplicemente copiando e incollando il codice.

Ma dove va inserito questo codice?

Beh, facciamo l’ipotesi che vuoi inserire l’elemento all’interno di un post. Niente di più facile!

Come sai bene l’editor dei post di WordPress presenta due modalità: Visuale e Testo.

Se provi a selezionare la modalità Testo vedrai oltre che il testo non formattato alcuni strani codici. Questo è il codice HTML.

Editor Testo

Per inserire lo spezzone di codice basta incollarlo all’interno dell’editor nella posizione in cui si desidera inserirla, e il gioco è fatto!

In questo modo puoi inserire:

Quelli che ti ho fatto ovviamente sono solo alcuni esempi delle personalizzazioni che puoi apportare al tuo blog.

Te ne sono venute in mente altre? Hai bisogno di altre modifiche ma non sai come farle? Scrivimi nei commenti!

Tags: , , ,