Come cambiare il colore predefinito della selezione del testo in WordPress

Hai notato come appare il testo quando i visitatori lo evidenziano sul tuo sito web? A volte dobbiamo aggiornare il colore di selezione del testo sui siti web su cui lavoriamo per abbinarlo ai colori del marchio, e molti utenti ci hanno chiesto come farlo.

La buona notizia è che è più facile di quanto pensi personalizzare questo elemento di design spesso trascurato. Sia che tu voglia abbinare i colori del tuo marchio o migliorare la leggibilità, cambiare il colore di selezione del testo può migliorare l'esperienza utente del tuo sito web.

In questa guida, ti mostreremo esattamente come cambiare il colore predefinito della selezione del testo in WordPress.

Perché cambiare il colore predefinito della selezione del testo in WordPress?

Il colore di selezione del testo si riferisce al colore del carattere in WordPress che appare quando evidenzi un pezzo di testo all'interno di un contenuto. Come questo:

In alcuni casi, potresti voler cambiare questo colore perché non si abbina bene al design del tuo sito WordPress. La combinazione di colori gioca un ruolo importante nel rendere il tuo sito bello e nel mantenere un'esperienza di marca coerente.

Se gestisci un blog WordPress, allora potresti anche voler cambiare il colore predefinito della selezione del testo se pensi che non risalti abbastanza dal resto del contenuto, rendendolo difficile da leggere.

Detto questo, vediamo come puoi cambiare il colore del testo selezionato in WordPress. Usa semplicemente i link qui sotto per passare al metodo che desideri utilizzare:

• Metodo 1: Utilizzo del codice per cambiare il colore del testo selezionato (funziona con tutti i temi)
• Method 2: Using the WordPress Theme Settings (Varies by the Classic Theme)

Metodo 1: Utilizzo del codice per cambiare il colore del testo selezionato (funziona con tutti i temi)

Alcuni temi di WordPress offrono una funzionalità integrata per cambiare il colore del testo selezionato, ma non tutti. Ecco perché consigliamo di utilizzare codice CSS personalizzato poiché il metodo è molto più universale.

Spesso, troverai snippet di codice CSS nei tutorial di WordPress con istruzioni per aggiungerli al file functions.php del tuo tema.

Il problema più grande è che anche un piccolo errore nello snippet di codice può compromettere completamente il tuo sito WordPress. Senza contare che perderai tutto il tuo codice personalizzato quando aggiorni il tema di WordPress.

È qui che entra in gioco WPCode. Questo plugin per snippet di codice rende facile aggiungere codice personalizzato a WordPress senza causare errori o rendere il tuo sito inaccessibile.

La prima cosa da fare è installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, vai su Snippet di codice » Aggiungi snippet nella tua bacheca di amministrazione di WordPress.

Qui, passa semplicemente il mouse sopra ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’.

Quando appare, fai clic sul pulsante ‘+ Aggiungi snippet personalizzato’.

Quindi, devi scegliere un tipo di codice dall'elenco di opzioni che appaiono sullo schermo.

Per questo tutorial, seleziona ‘Snippet CSS’.

Nella pagina successiva, digita un titolo per lo snippet di codice personalizzato.

Può essere qualsiasi cosa che ti aiuti a identificare lo snippet nella bacheca di WordPress in seguito, come ad esempio ‘Cambia colore di selezione del testo’.

Puoi quindi aggiungere il seguente CSS nella casella di anteprima del codice:

/* Customizing text selection for Firefox */
::-moz-selection {
    /* Background color when text is selected in Firefox */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in Firefox */
    color: #fff;
}

/* Customizing text selection for other browsers */
::selection {
    /* Background color when text is selected in other browsers */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in other browsers */
    color: #fff;
}

Si noti che abbiamo aggiunto due stili. Il selettore CSS ::moz-selection funziona con il browser Firefox, e il selettore CSS ::selection funziona con altri browser popolari come Google Chrome, Safari, IE9+ e Opera.

Nell'esempio precedente, il codice esadecimale # cambierà il colore del link in verde, quindi dovrai cambiare background-color: #008000 nel colore che desideri utilizzare per il testo evidenziato.

Se non sei sicuro di quale codice esadecimale utilizzare, puoi esplorare diversi colori e ottenere i loro codici sul sito web HTML Color Codes.

Quando sei soddisfatto dell'aspetto del tuo codice, fai clic sull'interruttore 'Inattivo' per mostrare invece 'Attivo'.

Quindi, fai clic su 'Salva snippet' per rendere attivo lo snippet CSS.

Ora puoi visitare il tuo sito web per vedere le modifiche in azione.

Ecco come appariva sul nostro sito web demo.

Metodo 2: Utilizzo delle impostazioni del tema di WordPress (varia a seconda del tema classico)

Alcuni temi WordPress ti consentono di modificare le impostazioni per la tua tipografia e i font, incluso il colore del testo selezionato. Per verificare se questo è il caso del tuo tema, devi andare su Aspetto » Personalizza.

Nota: Questo metodo non è applicabile ai temi a blocchi.

Qui, cerca eventuali impostazioni etichettate come 'Colori'.

Se vedi una scheda 'Generale', 'Globale' o simile, questa spesso contiene le impostazioni del colore del tema.

Ad esempio, se stai utilizzando il tema WordPress Astra, dovrai selezionare la scheda 'Globale'.

Dopodiché, fai clic su ‘Colori’ per vedere tutti i diversi colori che compongono questo tema di WordPress.

Successivamente, devi fare clic su ‘Accento’.

Questo apre un selettore di colori dove puoi scegliere un nuovo colore di selezione del testo.

Ora puoi osservare il cambio del colore del carattere poiché l'anteprima live si aggiornerà automaticamente. Quindi, puoi provare diverse impostazioni per vedere cosa è meglio per il tuo sito web WordPress.

Quando sei soddisfatto delle tue modifiche, fai semplicemente clic su ‘Pubblica’ per renderle attive.

Dopodiché, vedrai il nuovo colore di selezione del testo in tempo reale sul tuo blog o sito web WordPress.

Anche se non vedi alcuna impostazione del colore nel personalizzatore del tema WordPress, vale comunque la pena controllare la documentazione del tuo tema per vedere se c'è un modo per cambiare il colore predefinito di selezione del testo.

Puoi persino contattare lo sviluppatore del tema per chiedere aiuto. Per ulteriori informazioni, consulta la nostra guida su come chiedere correttamente supporto per WordPress e ottenerlo.

Scopri altri suggerimenti e trucchi sulla tipografia di WordPress

Vuoi personalizzare i font del tuo sito web WordPress, ma non sai come? Dai un'occhiata a queste guide per iniziare:

• I migliori plugin di tipografia per WordPress per migliorare il tuo design
• Come cambiare facilmente la dimensione dei font in WordPress
• Cos'è un font web-safe + i migliori font web-safe (Guida per principianti)
• Come aggiungere facilmente font icona nel tuo tema WordPress
• Come aggiungere drop cap negli articoli di WordPress

Speriamo che questo tutorial ti abbia aiutato a imparare come cambiare il colore predefinito della selezione del testo in WordPress. Potresti anche voler consultare la nostra guida sui migliori page builder drag-and-drop per WordPress e su come vendere font online con WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.