Modificare lo stile di un modulo WordPress: casella di spunta, larghezza, pulsante e RTL

Perché lo stile di un modulo WordPress si scombussola

Nei forum di WordPress.org, la domanda si ripete ogni settimana in forme diverse: la casella del consenso occupa il 90% della larghezza, il CSS aggiunto al pulsante di invio non cambia nulla sul sito, i messaggi di errore rimangono a sinistra su un sito in arabo. Dietro questi sintomi, lo stile di un modulo WordPress obbedisce a una regola semplice: eredita tutto ciò che il tema dichiara.

Un tema spesso scrive regole ampie, del tipo “tutti i campi al 100% di larghezza”. Queste mirano ai campi di testo, ma toccano anche le caselle di spunta e i pulsanti radio. Il modulo aggiunge le proprie regole ed è la più precisa delle due ad avere la meglio, non necessariamente l’ultima scritta.

Prima di correggere qualsiasi cosa, apri la pagina nel browser, fai clic con il tasto destro sull’elemento in questione e scegli “Ispeziona”. Il pannello degli stili mostra ogni regola applicata, il file che la dichiara e le regole barrate perché un’altra ha vinto. È lì che si trova la risposta, nove volte su dieci.

Cosa gestisce nexya forms

nexya forms è un modulo di nexya Pro, venduto su nexya.dev e consegnato da Freemius dopo l’acquisto. Come qualsiasi modulo nexya, si attiva dall’hub e, finché è spento, nessuno dei suoi hook viene eseguito sul sito.

Il modulo applica un unico stile a tutti i moduli del sito. Non è quindi necessario riprendere la formattazione modulo per modulo e un modulo aggiunto in seguito assomiglia agli altri. Anche gli elenchi a discesa e il calendario per la selezione della data sono stilizzati, invece di mantenere l’aspetto grezzo del browser, che cambia da un dispositivo all’altro.

A partire dalla versione 1.3.2, il pulsante di invio può avere un’icona prima e/o dopo la sua etichetta: una delle sedici icone proposte o un’immagine presa dalla libreria multimediale. L’icona è centrata sul testo e l’ordine segue le lingue scritte da destra a sinistra.

Per lo spam, il modulo Mail fornisce un captcha invisibile per i moduli del sito. Non aggiunge alcuna casella di spunta né riquadro da formattare: non c’è nulla da stilizzare da questo lato.

La casella di consenso occupa tutta la larghezza

Questo è il caso più frequente. Il tema dichiara una larghezza del 100% per i campi di input, senza escludere le caselle di spunta. Risultato: la casella si allunga e il testo del consenso viene spinto a capo o schiacciato.

La correzione consiste nel restituire alle caselle di spunta e ai pulsanti radio la loro larghezza naturale, limitando la regola ai tuoi moduli per non rompere nulla altrove. Nell’ispettore, individua la classe o l’identificativo del contenitore del modulo, quindi scrivi una regola di questo tipo, sostituendo il selettore con quello che hai rilevato:

• Selettore del contenitore seguito da input[type="checkbox"] e input[type="radio"]
• Proprietà: width: auto; e, se necessario, flex: none; quando il tema posiziona la casella in una riga flessibile
• Verifica quindi la resa sullo smartphone, dove le regole del tema cambiano spesso

Modificare l'aspetto di un modulo, passo dopo passo

1. 1

   Attivare il modulo dei moduli

   Con nexya Pro installato, attivate nexya forms dall'hub. Lo stile comune verrà quindi applicato a tutti i moduli del sito.

   
2. 2

   Aggiungere l'icona del pulsante di invio

   Nell'editor del modulo, scegliete un'icona prima e/o dopo l'etichetta del pulsante, tra sedici disponibili, oppure un'immagine dalla libreria multimediale.

   
3. 3

   Ispezionare ciò che è ancora storto

   Sulla pagina pubblicata, fate clic con il pulsante destro del mouse sull'elemento visualizzato male e scegliete «Ispeziona» per vedere la regola del tema che vince e il file che la dichiara.

   
4. 4

   Correggere in CSS, quindi svuotare la cache

   Aggiungete una regola limitata al contenitore del modulo nel CSS aggiuntivo (width: auto per le caselle di spunta, text-align: start per RTL), svuotate la cache delle pagine e verificate da computer e cellulare.

   

Il CSS del pulsante di invio non si applica

Quando una regola aggiunta al pulsante non cambia nulla sul sito, l’ispettore ne indica la causa. Si ripresentano tre situazioni.

La regola è barrata: un’altra, più precisa, ha la meglio. Aggiungi il selettore del contenitore del modulo davanti a quello del pulsante per guadagnare in precisione. Usa !important solo come ultima spiaggia, poiché rende le correzioni successive più difficili.

La regola non appare affatto: il CSS non viene caricato. Potrebbe essere stato posizionato nel posto sbagliato oppure una versione precedente della pagina viene servita da una cache. Il CSS aggiuntivo di WordPress si trova nello strumento di personalizzazione per i temi classici e nell’editor del sito, sotto gli stili, per i temi a blocchi. Svuota quindi la cache delle pagine e ricarica senza la cache del browser.

La regola si applica nell’editor ma non sul sito: l’anteprima dell’editor e la pagina pubblica non caricano sempre gli stessi fogli di stile. Testa sempre sulla pagina pubblicata.

Per un’icona sul pulsante, non è necessario scrivere CSS con nexya forms: l’impostazione esiste dalla versione 1.3.2 e gestisce autonomamente il centramento e l’ordine nella lingua RTL.

Regolare la larghezza del modulo

Un modulo prende la larghezza del blocco che lo contiene. Se sembra troppo largo su uno schermo grande, la cosa più pulita è limitare il suo contenitore anziché ogni campo: una larghezza massima (max-width) in pixel o in caratteri e margini automatici a sinistra e a destra per centrarlo.

I fatti noti su nexya forms non menzionano un’impostazione di larghezza dedicata. Questo limite si pone quindi nel layout stesso (colonna, gruppo di blocchi, sezione del page builder) o tramite una regola CSS sul contenitore.

Moduli in arabo, ebraico o persiano (RTL)

Quando il sito è in una lingua scritta da destra a sinistra, WordPress aggiunge l’attributo dir="rtl" alla pagina. Gli elementi scritti correttamente seguono da soli. Quelli che rimangono a sinistra hanno quasi sempre una regola text-align: left o un posizionamento fissato a sinistra, dichiarato dal tema o dal modulo.

Ciò che nexya forms annuncia per l’RTL è l’ordine dell’icona e dell’etichetta sul pulsante di invio. Non vi è alcuna impostazione RTL annunciata per il resto del modulo, né alcuna impostazione avanzata dei messaggi di validazione. Se un messaggio di errore rimane disalineato, la correzione passa attraverso il CSS.

La soluzione più duratura consiste nel sostituire left e right con i valori logici start e end (ad esempio text-align: start), che seguono la direzione della lingua. In alternativa, è sufficiente una regola limitata a [dir="rtl"] seguita dal selettore del messaggio.

Le regole che vincono non sono le ultime scritte, ma quelle più specifiche.