A volte è difficile lavorare sulla personalizzazione del proprio tema, in particolare quando si desidera usare il CSS per applicare determinati stili ai widget.
Oggi ti presento un plugin che renderà molto più semplice questa operazione, perciò vediamo subito come funziona Widget CSS Classes.
Lo scopo principale del plugin Widget CSS Classes è di assegnare classi e ID personalizzati ai tuoi widget in modo da poter applicare gli stili che desideri con facilità .
Attenzione: questo plugin non include la possibilitĂ di aggiungere CSS personalizzato.
Per farlo dovrai lavorare sul tuo file style.css (del tema child, mi raccomando!) oppure di usare le funzionalitĂ del tuo tema.
Se vuoi saperne di piĂą sul codice CSS e su come usarlo per personalizzare il tuo sito WordPress, ti suggerisco di leggere la mia guida HTML e CSS per principianti.
Quando installi il plugin, per prima cosa dovrai lavorare su alcune impostazioni generali.
Naviga quindi in Impostazioni > Widget CSS Classes.
Per prima cosa troverai alcune impostazioni per stabilire come debba essere creata una classe.
Attivando Show Additional Field for ID, invece, puoi scegliere se mostrare anche il campo ID, in modo da assegnare, oltre alla classe, anche un identificativo unico ai tuoi widget.
Come regola generale, le classi possono essere assegnate a più di un elemento all’interno del sito, mentre gli ID dovrebbero essere usati per un singolo widget.
Un campo interessante è quello chiamato “Class Field Type“.
Qui puoi scegliere se inserire – all’interno della pagina di configurazione dei widget – un campo di testo dove digitare il nome della classe, oppure un menu a tendina.
Se scegli la seconda opzione, dovrai compilare per ciascuna classe un campo nella sezione “Define Classes for Dropdown“.
Le classi che inserisci in questi campi, appariranno come opzione disponibile sotto ai singoli widget.
Navighiamo ora all’interno della pagina Aspetto > Widget.
Vedrai che ogni widget ha ora un nuovo campo (o due se hai selezionato anche l’opzione per l’aggiunta degli ID).
Per personalizzare lo stile dei widget ti basterĂ Â digitare il nome della classe che vuoi assegnare.
Quindi, aggiungere le corrispondenti regole CSS.
Ci sono diverse opzioni:
Ti sconsiglio vivamente di aggiungere codice CSS all’interno del file style.css del tema parent.
Quando aggiornerai il tuo tema, infatti, queste modifiche saranno sovrascritte e le tue personalizzazioni andranno perdute.
Conclusione
In questa breve guida abbiamo visto come personalizzare lo stile dei widget con il plugin Widget CSS Classes. Ovviamente, per poter usare questo strumento è necessario avere conoscenza di CSS.
Non farti spaventare da questo, il CSS è abbastanza semplice! Se non l’hai ancora fatto, vai a leggere la guida dedicata al CSS e inizia a sperimentare.
Come al solito, ne parliamo nei commenti.
Stai costruendo il tuo sito web con WordPress e vuoi che tutto funzioni alla perfezione.…
Se si naviga in rete, lo scopo è quello di raggiungere un sito web. Il…
La sicurezza online è sempre importante in qualitĂ di utenti ma anche come gestore di…
Cosa fare se ti hanno hackerato il sito? La domanda da un milione di dollari.…
Mentre ci si trova a navigare in rete, può capitare di imbattersi in un errore…
Quando si costruisce un sito web si ha a che fare con diversi elementi che…