E-commerceWordpress

Aggiungere un pulsante personalizzato in header wordpress

velocità sito WordPress

Aggiungere un pulsante personalizzato in header wordpress può essere utile quando si vuole aggiungere un link al di fuori dal menù predefinito.

Nel caso specifico si desiderava il link allo shop fosse immediatamente visibile anche nella versione mobile del sito, senza dover aprire prima il menù.

L’operazione è molto semplice è praticamente funziona con tutti i temi wordpress.

Codice html del pulsante

E’ sufficiente andare nell’editor del tema da: Bacheca -> Aspetto -> Editor del tema

selezionare dai file del tema, sulla destra, il file header.php e aggiungere il codice nel punto desiderato:

<a class="button custom" href="https://www.robertozanardo.com/negozio/">Shop</a>

A seconda del tema naturalmente potrebbe essere necessario ‘scavare’ fino al punto in cui ci interessa mettere il pulsante ma di base già nell’header abbiamo tutte le informazioni che ci servono.

pulsante header wordpress

Aspetto e posizionamento

In questo caso ci siamo appoggiati alla classe button del tema e abbiamo aggiunto una classe aggiuntiva ‘custom’ per poterne personalizzare ulteriormente l’aspetto.

Siamo quindi andati in: Aspetto -> Modifica CSS e abbiamo definito la classe css personalizzata:

/* Custom button */
.custom {
margin-left:25px;
background-color: #0000004d;
}

pulsante personalizzato wordpress

Comment here