0
X
Add Snippet To Project
New Project
Add To Existing Project
<?php
function wpturbo_add_promo_banner() {
?>
<div id="promo-banner">
<p>Profitez de notre promotion spéciale !</p>
<button id="close-banner">Fermer</button>
</div>
<style>
#promo-banner {
background-color: #f5f5f5;
padding: 10px;
text-align: center;
}
#close-banner {
background-color: #ccc;
border: none;
color: #fff;
padding: 5px 10px;
cursor: pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var promoBanner = document.getElementById('promo-banner');
var closeBannerBtn = document.getElementById('close-banner');
closeBannerBtn.addEventListener('click', function() {
promoBanner.style.display = 'none';
});
});
</script>
<?php
}
add_action( 'wp_footer', 'wpturbo_add_promo_banner' );
Ce code encapsule le HTML, le CSS et le JavaScript du bandeau promotionnel dans une fonction wpturbo_add_promo_banner() qui est ensuite ajoutée au hook wp_footer avec add_action(). Ainsi, lorsque la page est générée, le contenu du bandeau sera inséré juste avant la fermeture de la balise </body>.
La fonction wpturbo_add_promo_banner() affiche le HTML du bandeau promotionnel, puis définit le style CSS du bandeau et du bouton de fermeture à l'intérieur d'une balise <style>. Enfin, le JavaScript est ajouté pour gérer la fermeture du bandeau lorsqu'on clique sur le bouton de fermeture.
N'oubliez pas de copier ce code dans le fichier test.php à l'endroit où vous souhaitez afficher le bandeau promotionnel.