Aggiungere un pulsante su WordPress senza plugin

20 Giu Aggiungere un pulsante su WordPress senza plugin

Un trucchetto semplice e molto pratico che non necessita di particolari conoscenze di codice, è quello che consente di inserire nelle pagine e negli articoli di WordPress un pulsante (o un bottone) con relativo link. Ad oggi, WordPress non ha ancora una simile funzionalità integrata, ad esclusione del classico link testuale, e se il template utilizzato non possiede tale funzione, si deve ricorrere all’installazione di un plugin esterno che consenta di aggiungere dei pulsanti.

Di plugin nel repository di WordPress ne trovate a bizzeffe, ma se volete evitare di aggiungerne un altro al vostro elenco, allora esiste un piccolo trucchetto fatto in due semplici step che vi consentirà di aggiungere dei pulsanti anche al vostro tema.

1. Aggiungere il codice CSS

Si tratta di un’operazione semplice, ossia di copiare ed incollare il seguente codice su Aspetto > Personalizza > CSS aggiuntivo.
Per personalizzare il colore del pulsante, l’unico elemento che dovrete modificare sarà il codice esadecimale del background (nell’esempio #d95c5c). Come vedete ce ne sono due, poiché il primo è il colore che compare agli occhi dell’utente, mentre il secondo è il colore che compare quando l’utente passa col cursore sopra il pulsante e si trasforma in link.

In questo esempio l’effetto era quello di dare due tonalità diverse del colore rosso, una più chiara e una più scura.

.button {
display: inline-block;
padding: 12px 24px;
border-radius: 6px;
border: 0;
font-weight: bold;
letter-spacing: 0.0625em;
text-transform: uppercase;
background: #d95c5c;
color: #fff;
}
/* Add a rollover background colour but keep the text white */
.button:hover,
.button:focus,
.button:active {
background: #b51e1e;
color: #fff;
}

2. Aggiungere il codice HTML alla pagina o all’articolo

Anche il secondo passaggio è piuttosto semplice, si tratta di aprire la pagina o l’articolo nel quale andare ad inserire il pulsante e successivamente aprire l’editor in modalità Testo. Fatto ciò vi basterà inserire il seguente codice e modificare soltanto il link interno (che in questo esempio è quello di Google) ed il testo che comparirà sul pulsante stesso, che in questo caso è “CLICCA QUI”.

<h2 style="text-align: center;"><a class="button" href="http://www.google.it/" target="_blank" rel="noopener noreferrer">CLICCA QUI</a></h2>