Een vaste ‘Bel nu’-knop maken in WordPress

Wil je een vaste ‘Bel nu’-knop in WordPress maken? Lees dan verder.

Een ‘Bel nu’-knop kan je conversies verhogen of bezoekers een snelle en eenvoudige manier bieden om contact op te nemen. Voor een uitvaartonderneming gebruiken we deze knop om bij een overlijden direct hulp te krijgen.

Open eerst je functions.php-bestand en voeg daar de volgende code toe:

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' );

Zo zorg je ervoor dat het telefoonicoon van de knop wordt getoond. We gebruiken hiervoor Font Awesome-iconen.

De HTML-code van de ‘Bel nu’-knop

Daarna voegen we de HTML-code toe die in de footer van je WordPress-installatie wordt weergegeven. We gebruiken daarvoor de hook wp_footer, zodat het script helemaal aan het eind van je site wordt geladen. Dat voorkomt SEO-problemen, omdat de tekst vóór de knop wordt geladen.

Voeg dus de volgende regels code toe; dit is het skelet van de knop, nog zonder styling:

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' );

Vergeet niet de telefoonnummers door die van jou te vervangen.

De knop stylen

De knop heeft natuurlijk wat styling nodig en moet ook op mobiel werken. Voeg voor de basisstyling deze CSS-regels toe aan je 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;
}

Nu is je knop gestyled en heeft hij mooie animaties als je over het icoon beweegt. En responsive? Voeg daarnaast de volgende CSS toe, die alleen op mobiele apparaten geldt:

@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;
	}
}