Come creare un pulsante «Chiama ora» fisso in WordPress

Se vuoi creare un pulsante «Chiama ora» fisso in WordPress, continua a leggere.

Un pulsante «Chiama ora» può aumentare le conversioni o offrire ai tuoi utenti un modo semplice e veloce per contattarti. Per un’impresa di pompe funebri usiamo questo pulsante per ottenere aiuto immediato in caso di decesso.

Per prima cosa apri il file functions.php e aggiungi questo codice:

function custom_load_font_awesome() {
    wp_enqueue_style( 'font-awesome-5', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );

In questo modo l’icona del telefono del pulsante viene mostrata. Per farlo usiamo le icone Font Awesome.

Il codice HTML del pulsante «Chiama ora»

Poi aggiungiamo il codice HTML, che verrà mostrato nel footer della tua installazione WordPress. Usiamo l’hook wp_footer, così lo script viene inserito alla fine del sito. In questo modo eviti problemi di SEO, perché il testo viene caricato prima del pulsante.

Aggiungi quindi le righe di codice seguenti, che costituiscono la struttura del pulsante, ancora senza stile:

function we_sticky_call() {
	?>
	<a href="tel:05911234" class="we-sticky-call-container">
		<div class="we-sticky-call-icon">
			<i class="fas fa-phone-alt"></i>
		</div>
		<div class="we-sticky-call-content">
			<div class="we-sticky-call-title">
				0591 1234
			</div>
			<div class="we-sticky-call-description">
				24/7 Accident Phone
			</div>
		</div>
	</a>
	<?php
}
add_action( 'wp_footer', 'we_sticky_call' );

Ricordati di sostituire i numeri di telefono con i tuoi.

Lo stile del pulsante

Naturalmente il pulsante ha bisogno di un po’ di stile e deve funzionare sui dispositivi mobili. Per lo stile di base aggiungi queste righe di CSS al file styles.css:

.we-sticky-call-container {
    background: #f39200;
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 20%;
    left: 20px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    z-index: 999;
}
.we-sticky-call-content {
    position: absolute;
    top: 0;
    left: 25px;
    width: 250px;
    padding-left: 25px;
    background: #f39200;
    height: 50px;
    z-index: -1;
    border-radius: 0 25px 25px 0;
    opacity: 0;
    transition: all 0.5s ease;
    font-size: 16px;
    line-height: 20px;
}
.we-sticky-call-title {
    margin-top: 5px;
}
.we-sticky-call-description {
	font-size: 12px;
}
.we-sticky-call-container:hover .we-sticky-call-content {
	opacity: 1;
}

Ora il pulsante ha il suo stile e belle animazioni al passaggio del mouse sull’icona. E per il responsive? Aggiungi anche questo CSS, che vale solo per i dispositivi mobili:

@media (max-width: 768px) {
	.we-sticky-call-container {
	    bottom: 0;
	    width: 100%;
	    border-radius: 0;
	    left: 0;
	}
	.we-sticky-call-icon {
		display: none;
	}
	.we-sticky-call-content {
		opacity: 1;
		width: 100%;
		left: 0;
		padding-left: 0;
	}
}