Oggi vediamo come modificare una pagina web singola con l’uso del css
Molte volte vi sarà capitato di voler modificare un sito internet, e in particolare di dare, ad esempio ad un semplice titolo H2, uno stile differente dal resto del sito web ma, ovviamente, andando a modificare il css per l’H2 nello style.css, appena inserisci il tag, tutto il testo messo in H2 prenderà il solito stile appena modificato.
Quello che c’è da fare è di rendere possibile che si possa modificare il tag h2 solo di una singola pagina.
Molti temi WordPress hanno il proprio CSS in style.css che formatta tutto il sito web secondo le proprie specifiche, ma per fortuna, WordPress permette comunque di modificare pagina web singola con il css.
Modificare pagina web singola con il CSS
Per poter modificare sito web, in particolare il css, i modi sono molti tra cui:
- tramite plugin come My CSS
- tramite la console di wordpress per il CSS aggiuntivo
- tramite l’editor di wordpress modificando il file proprietario style.css (Sconsigliatissimo anche per chi sa dove mettere le mani)
- tramite un programma editor di testo per l’html.
Il terzo punto, lo sconsiglio, se non si è installato un tema child, in quanto se viene modificato il file originale che formatta graficamente tutto il sito web, diventa un lavoro mooolto grosso per ripristinare se non si ha attivo un servizio di backup come parlato in precedenza in questo post qua
Qale che sia il metodo che userete, il modo di implementare il CSS è sempre il solito. Vediamo insieme.
1- Inserire CSS tramite plugin
Tra i più diffusi e pratici c’è sicuramente CUSTOM CSS che, anche se vi ho spiegato come fare su un editor CSS Unico, vi da la possibilità di inserire CSS anche pagina per pagina come c’è gia nei temi premium.
Altrimenti c’è SIMPLE CUSTOM CSS O JS, che vi permette di inserire i css in un file unico (e sicuramente più leggero, a patto che non si esageri)
2- Inserire CSS tramite console di WordPress
Per entrare in questa sezione vi basterà entrare nella vostra Dashboard di WordPress e nella barra di sinistra cliccare su aspetto > Personalizza > CSS aggiuntivo (O edit CSS) et voilà
3- Inserire CSS tramite editor del tema
Come detto prima, vi sprono a non utilizzare questo metodo, ma se proprio volete, almeno installate un tema child per evitare ogni modifica indesiderata che renderà difficile il ripristino
Vi basterà entrare nella vostra Dashboard di WordPress e nella barra di sinistra cliccare su aspetto > Editor. troverete, oltre il file style.css anche tutti i file php che potrete modificare a vostro rischio e pericolo.
4- Inserire CSS tramite editor di testo come “Sublime text”
Se siete un po’ più pratici dell’argomento, e avete accesso ai file del vostro sito web, recatevi pure, aprendo il sito web in FTP con programmi come FileZilla, nella cartella wp-content>themes>tuo-tema e aprite il file con un programma per html semplice quanto potente, che si chiama Sublime text.
É un programma molto intuitivo che serve per modificare pagine web (solitamente per modificare file html), specialmente per modificare html, php, js ecc.
Adesso si aprirà una schermata che vi mostrerà tutti gli stili e le classi che sono state utilizzate all’interno del sito web.
Ovviamente, se l’autore del tema aggiornerà quello che state utilizzando, andrà a cancellare tutto il vostro lavoro eseguito sullo style.css, ma poco male, basta creare uno child theme (letteralmente tema figlio) che vi permette di modificare tutto quello che volete senza andare a perderne le modifiche. Vedi il mio post Creare un child theme in WordPress
Individuare il page-id ovvero l’ID della pagina
Ogni pagina ha un ID univoco su cui possiamo lavorare. Per trovare questo codice, è necessario usare un Browser come Google Chrome o Firefox.
Entriamo nella pagina di nostro interesse e apriamo la console per sviluppatori, per farlo basta cliccare con il tasto destro del mouse e cliccare su ispeziona (in chrome) o analizza elemento (in firefox).
Vedrete che nella prime righe del tag <body> tra le classi ci sarà quella con scritto page-id-xx dove xx è un numero identificativo
Trovato il numero siamo in grado di modificare il singolo elemento all’interno della pagina. Se per esempio vogliamo modificare i margini di una riga, la sintassi normale sarebbe:
.row1 {
margin: 10px 10px 10px 10px;
}
ma fatto così, tutti gli elementi row1 se non sono univoci, verranno modificati all’interno dell’intero sito web. Per ovviare a questo ci viene in aiuto la classe appena trovata, il CSS diventerà quindi il seguente:
.page-id-16 .row1 {
margin: 10px 10px 10px 10px;
}
se invece dovete cambiare semplicemente un tag h2, p ecc allora la sintassi è:
.page-id-16 h2 {
color: #309303;
}
Adesso sapete come modificare un sito web, e una pagina singola e potrete modificare qualsiasi singolo CSS del vostro sito web.
Se hai necessità di qualcosa di più specifico o se vuoi semplicemente una consulenza, CLICCA QUI e compila il form di contatto
