State costruendo una pagina particolare? Nella quale vorreste mettere un bottone diverso dal solito oppure creare una tabella con dei bordi strani? Beh per fare questo c’è bisogno di usare il CSS.
Che cos’è il CSS?
Il CSS (sigla di Cascading Style Sheets, in italiano fogli di stile a cascata), in informatica, è un linguaggio usato per definire la formattazione di documenti come HTML e XML, ad esempio i siti web e relative pagine web.
Usando il CSS puoi personalizzare colori, font, bordi, margini e molto altro ancora.
Il CSS è semplice ed intuitivo da utilizzare.
Se non avete idea di come si usa il CSS, non fatevi spaventare dai codici e leggete qualche esempio su w3schools per farvi una idea.
In meno 15-20 minuti avrete un’idea più chiara, di come usarlo e delle sue potenzialità.
Posso farlo senza plugin?
Il bello di queste modifiche è che si possono fare senza dover andare ad aggiungere chissà quale plugin che appesantirebbe solamente il sito.
Il vostro sito ha già tutti gli strumenti necessari per applicare una personalizzazione di questo tipo.
Piccole ma importanti accortezze
Prima di fare qualsiasi modifica al CSS del vostro sito web, che si tratti di cambiare un semplice colore o di personalizzazioni più importanti, installate subito il tema child del vostro template.
Se effettuate le modifiche direttamente sul tema genitore, quando lo aggiornerete perderete tutto, perché i file verranno sovrascritti.
Il tema child, invece, crea dei file aggiuntivi che non verranno modificati con l’aggiornamento del tema, perciò tutto il vostro lavoro sarà salvo.
A questo punto non vi resta che creare il backup completo del vostro sito.
Se non avete molta pratica, c’è il rischio di commettere degli errori e di non riuscire a correggerlo.
Per questo motivo, se ci sono problemi o volete che qualcuno di affidabile faccia il lavoro potete contattarmi tramite la pagina dei contatti o via social.
Dopo aver fatto tutto ciò, possiamo entrare nel vivo dell’argomento.
Modificare il CSS di una singola pagina
Oramai da molte versioni di WordPress (se mi ricordo bene dalla versione 4.7) c’è la possibilità di inserire il vostro CSS personalizzato all’interno del tema.
Selezionate nella dashboard la voce Aspetto e poi Personalizza.
Per vedere questa funzionalità, assicurati di avere installato l’ultima versione disponibile di WordPress, questo è molto importante soprattutto per mantenere il vostro sito sicuro e funzionante.
Attenzione! Le modifiche fatte al CSS dal pannello Personalizza vengono applicate al tema attivo sul sito al momento del salvataggio.
Non saranno quindi visibili se successivamente installerete ed attiverete un altro tema e, anche in questo caso, potrete perderle se non avete attivato un tema child.
Trovare il punto che si vuole modificare
Affinché una modifica al CSS venga applicata ad una singola pagina (o ad un singolo post), dobbiamo specificare l’ID della pagina in questione all’interno della nostra regola CSS oppure una classe (class) se vogliamo sistemare la stessa voce indipendentemente dalla pagina.
Se non conoscete il CSS e non avete dato un occhio su w3schools, facciamo un breve ripasso:
h1 {
font-size: 30px;
}Quella che vedete qui sopra è una regola CSS.
Tutto ciò che si trova prima della parentesi graffa di apertura è il selettore, in questo caso h1, il tag utile per i titoli e in questo caso la regola CSS verrà quindi applicata a tutti gli elementi h1.
Come usare il CSS
Immaginiamo che vogliamo far in modo che il colore del testo del titolo di ogni mio articolo passi da essere bianco (come in foto) ad arancione (#ddb271).
Ispezioniamo il titolo, stando col cursore sul titolo, tasto destro e poi ispeziona elemento.
Scopriremo che ogni titolo ha in comune la classe cs-entry__title e che il testo è all’interno del tag HTML <a>.
A questo punto ci basta andare in Aspetto > Personalizzazione e trovare la voce CSS
E aggiungere il pezzo di codice, scritto qua sotto, per avere il risultato atteso:
.cs-entry__title a {
color: #ddb271;
}
In questo modo con l’aggiunta di un piccolo pezzo di codice abbiamo modificato diversi punti in una pagina ma se volessimo modificare un solo testo all’interno di una pagina? Come possiamo fare?
Andiamo a scoprirlo.
Immaginiamo di avere questo elenco puntato e di voler cambiare lo stile in modo tale che tutto il suo contenuto venga messo in grassetto e che lo sfondo sia di colore azzurro usando il CSS ma senza che tutti gli altri elenchi puntati presenti nelle pagine del sito ricevano la stessa modifica grafica.
Partiamo dicendo che per fare questa modifica avremo bisogno delle seguenti righe di codice:
background-color: #0093ff;
font-weight: bold;Andiamo sempre in Aspetto > Personalizzazione > CSS e ci inventiamo una nuova classe tipo boldAzz.
Quindi il codice che bisognerà inserire sarà il seguente:
.boldAzz {
background-color: #0093ff;
font-weight: bold;
}Salviamo il tutto e ora andiamo nella pagina dove è presente l’elenco puntato e sfruttando l’editor di WordPress clicchiamo sulla voce Modifica come HTML
A questo punto vedrete tutto il codice HTML che è necessario per costruire l’elenco puntato e vi basterà dentro al tag <ul> aggiungere class=”boldAzz” per avere il seguente risultato:
<ul class="boldAzz">....Salvate tutto e ricaricando la pagina il risultato sarà il seguente.
Se le modifiche non sono immediatamente visibili
Per prima cosa svuotate la cache del vostro sito e successivamente ricaricare la pagina.
Se dopo questo passaggio le modifiche non sono ancora visibili, modificate la dichiarazione aggiungendo !important prima del punto e virgola finale.
Attenzione però ad usare !important con moderazione, dovrebbe proprio essere l’ultima risorsa.
Ora basta investire un po’ di tempo nel lavorare sulla console e testare codici CSS finché non avrete raggiunto le aspettative.
Come vedete modificare il CSS di una singola pagina o modificare aspetti generici del tema è piuttosto semplice in WordPress.
Ricordo che grazie alla funzionalità per inserire codici CSS direttamente dal pannello Personalizza, avrete probabilmente già tutti gli strumenti che vi servono sul vostro sito.
Conclusioni
Abbiamo visto come apportare delle modifiche grafiche a pagine singole o modificare punti che sono presenti in più punti all’interno del tema.
Se avete problemi non esitate a contattarmi via social o attraverso la pagina dedicata dei contatti.
Andremo a trovare la giusta soluzione alle vostre richieste.
Crediti
