codice esadecimale evidenziato
 | 

Come evidenziare il testo in WordPress

Aggiornato il 22/01/2021

Per evidenziare il testo, l’editor di WordPress, mette a disposizione il pulsante B che dà uno stile grassetto al testo precedentemente selezionato. A volte il grassetto potrebbe non essere sufficiente come evidenziazione e si vorrebbe enfatizzare ulteriormente il testo.

Per evidenziare il testo in WordPress ci sono due vie. La prima richiede l’uso di un plugin come Advanced Editor Tools. Ma questo è utile solo nel caso in cui si intende fare largo uso dell’evidenziazione.
Il secondo caso, forse il più comune, è quando di tanto in tanto si intende evidenziare piccole parti di testo allora è più utile utilizzare HTML (HyperTextMarkupLanguage)

Evidenziare con HTML

In questo secondo caso è preferibile utilizzare la capacità dell’editor di visualizzare il testo come markup HTML anche se richiede di inserire un po’ di codice, pratica molto semplice per questa evenienza.

Per evidenziare una parte di testo è necessario utilizzare l’elemento HTML “mark”.

Come inseriamo l’elemento “mark” nel testo?
Dopo aver editato il testo del tuo scritto, vai al paragrafo in cui vuoi evidenziare il testo, assicurati che il cursore sia all’interno del paragrafo quindi dal menu tre pallini seleziona la voce Modifica come HTML.

Quello che vedi adesso è il testo in HTML.

Ora devi solo scegliere quale parte del testo evidenziare e racchiuderlo tra gli elementi <mark> testo da evidenziare </mark>.

L’evidenziazione avviene sul testo inserito dopo il tag <mark> e si conclude sull’ultima parola prima del tag di chiusura </mark>. Questo significa che tutto quello posto tra i due tag, viene evidenziato.

Nota lo slash / sul tag di chiusura. Se non inserisci il simbolo / il browser non capisce dove finisce l’istruzione iniziale <mark>, quindi è probabile che evidenzi il testo fino alla fine dell’articolo, perciò fai attenzione a non dimenticare lo slash che dice al browser “qui finisce l’evidenziazione”.

Ora puoi tornare all’editor nel modo visuale, facendo click sul menu tre pallini e sulla voce Modifica visivamente.

Il blocco paragrafo ritorna alla modalità visuale e si nota il testo selezionato evidenziato

Di solito il testo evidenziato ha uno sfondo giallo, ma il colore potrebbe variare in base al tema utilizzato per il tuo blog.

Cambiare i colori

Per cambiare il colore di sfondo, si deve usare un po’ di CSS (Cascading Style Sheet). Ci sono due modi per cambiare il colore dello sfondo. Dipende soprattutto dall’uso che si vuole fare dell’evidenziazione.

Se si pensa di utilizzare sempre lo stesso stile, o si è più autori all’interno di un unico blog, allora è consigliabile impostare un unico stile per tutte le evidenziazioni.
Se invece l’evidenziazione è cosa molto sporadica e si vuole variarla (non consigliabile), si può utilizzare uno stile in linea.

Nel primo caso devi aggiungere al tema una regola CSS personalizzata. Per fare questo devi avere un ruolo di amministratore, ma se non sei amministratore puoi sempre chiedere all’amministratore di cambiare lo sfondo dell’evidenziazione. Dalla Bacheca di WordPress vai al menu Aspetto > Customizer. Una volta nel custimizer, cerca l’area che consente di inserire css personalizzati dove potrai aggiungere la regola CSS per cambiare lo sfondo del testo evidenziato.
Il customizer del tema può essere molto diverso da tema a tema.

In questa regola è stato impostato un sfondo color oro. definito dalla notazione esadecimale #FFD700. Nella definizione dei colori possono essere utilizzate diverse notazioni: esadecimale, hsl, rgb, rgba, e, infine, quella più semplice da capire che utilizza parole chiave attraverso la notazione in inglese del colore, come in questo caso dove abbiamo usato gold.

Queste proprietà possono essere scritte minuscole o maiuscole. Adesso tutte le volte che utilizzerai l’elemento “mark”, lo sfondo sarà di colore oro. Se vuoi cambiare lo sfondo potrai riaprire il customizer del tema, andare alla funzione CSS personalizzato, cercare l’elemento mark e sostituire il colore da gold a qualcos’altro.
Ricorda che questo cambiamento avverrà su tutte le evidenziazioni, comprese quelle precedenti alla variazione dello sfondo.

Importante: se cambi sfondo dell’evidenziazione assicurati che il contrasto tra testo e sfondo permetta la lettura del testo, non come in questo caso dove il testo è poco contrastato e rende difficile la lettura.

Salvate le modifiche potrai tornare al tuo blog per vedere attive le variazioni.

Il secondo metodo per cambiare lo sfondo dell’evidenziazione, consiste nell’usare un CSS in linea.
Il CSS in linea è attivo solo sull’elemento selezionato. Questo significa che tutte le altre evidenziazioni, presenti negli articoli del blog, restano invariate.

Se usi spesso l’evidenziazione, non solo all’interno di uno stesso articolo, ma i tuoi articoli hanno quasi sempre del testo evidenziato, non è questa la pratica migliore perché colori diversi, utilizzati per lo stesso scopo, confondono i lettori che hanno bisogno di certezze per riconoscere al volo il significato di un particolare stile visivo.

Se però l’evidenziazione è cosa usata molto di rado, allora si può provare a dare stili diversi al testo evidenziato. Ricorda però che all’interno di un articolo l’evidenziazione deve avere lo stesso stile.

Per applicare uno stile in linea al tag “mark” si deve tornare alla visualizzazione come HTML e impostare all’interno del tag mark la stringa evidenziata nell’immagine

Questa immagine ha l'attributo alt vuoto; il nome del file è evidenziare-testo-css-inlinea.png

In questa immagine il cambiamento dello sfondo è dato dalla stringa style=”background: gold;” posta all’interno del tag mark. Come puoi notare è utilizzata la scorciatoia background al posto di background-color e il colore è definito con la notazione in inglese gold. Fai attenzione a mettere virgolette e ; al posto giusto.
Per sapere tutto sui codici esadecimali e sulle alternative a questi, puoi guardare le tabelle dei colori Web.

Il modo più facile

Dopo aver elencato alcuni modi per evidenziare il testo, descrivo il modo più semplice per marcare il testo offerto dall’editor di WordPress e utilizzabile con pochi click:

  1. seleziona il testo che vuoi evidenziare;
  2. dalla barra degli strumenti fai click sul pulsante freccia giù;
  3. seleziona la voce Highlight e il gioco è fatto.
evidenziare il testo

Alla fine di questo articolo ricordo che l’alternativa migliore a queste evidenziazioni artistiche è sempre l’uso del testo in grassetto, da usare con attenzione e solo dove serve. Perché, se si evidenzia troppo, non si capisce più cosa si vuole mettere in risalto.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *