Voulez-vous créer une barre de pied de page flottante collante dans WordPress ? Nous utilisons la barre de pied de page flottante sur notre site Web depuis de nombreuses années, car elle nous aide à réduire le taux de rebond et à augmenter les pages consultées par les utilisateurs. Vous avez été nombreux à nous demander comment créer une barre flottante similaire, alors la voici. Dans cet article, nous allons vous montrer comment créer une barre de pied de page flottante collante dans WordPress.
Qu’est-ce que la barre de pied de page flottante ?
Une barre de pied de page flottante collante vous permet d’afficher votre contenu important en évidence pour les utilisateurs. Cette barre reste visible à tout moment pour les utilisateurs, ils sont donc plus susceptibles de cliquer dessus et de découvrir un contenu plus utile.
Vous pouvez utiliser la barre de pied de page flottante pour :
- Générez plus de clics vers d’autres articles de blog
- Construisez votre liste de diffusion
- Attirer l’attention sur les offres spéciales / vente
Dans cet article, nous allons vous montrer deux méthodes pour ajouter une barre de pied de page flottante collante sur votre site WordPress. L’un utilise un plugin tandis que l’autre est une méthode de code que nous utilisons sur Themelocal. Vous pouvez choisir celui que vous trouvez le plus facile à utiliser.
Méthode 1 : Créer manuellement une barre de pied de page flottante collante dans WordPress
Cette méthode nécessite que vous ajoutiez du code dans vos fichiers WordPress. Si vous êtes nouveau dans l’ajout de code, veuillez consulter notre guide sur la façon de coller des extraits du Web dans WordPress.
Tout d’abord, vous devez vous connecter à votre site WordPress à l’aide d’un client FTP ou d’un gestionnaire de fichiers dans cPanel.
Dans votre client FTP, vous devez localiser le footer.php
fichier dans votre dossier de thème WordPress et téléchargez-le sur votre bureau. Il serait situé sur un chemin comme celui-ci :
/wp-content/themes/your-theme-folder/
Ensuite, vous devez ouvrir le fichier footer.php dans un éditeur de texte brut comme le Bloc-notes et ajouter le code suivant juste avant le </body>
étiqueter.
<div class="fixedbar"> <div class="boxfloat"> <ul id="tips"> <li><a href="https://www.wpbeginner.com/">Themelocal Link is the First Item</a></li> <li><a href="http://www.wordpress.org/">WordPress.org is the Second Item</a></li> </ul> </div> </div>
Vous pouvez ajouter autant d’éléments de liste que vous le souhaitez. Nous allons vous montrer comment les faire pivoter au hasard à chaque chargement de page.
La prochaine étape consiste à ajouter les styles CSS.
Vous pouvez ajouter du CSS à votre thème WordPress style.css
ou utilisez le plugin Simple Custom CSS.
/*Themelocal Footer Bar*/ .fixedbar { background: #000; bottom: 0px; color:#fff; font-family: Arial, Helvetica, sans-serif; left:0; padding: 0px 0; position:fixed; font-size:16px; width:100%; z-index:99999; float:left; vertical-align:middle; margin: 0px 0 0; opacity: 0.95; font-weight: bold; } .boxfloat { text-align:center; width:920px; margin:0 auto; } #tips, #tips li { margin:0; padding:0; list-style:none } #tips { width:920px; font-size:20px; line-height:120%; } #tips li { padding: 15px 0; display:none; } #tips li a{ color: #fff; } #tips li a:hover { text-decoration: none; }
Après avoir ajouté le CSS, vous ne pourrez peut-être pas voir les modifications sur votre site Web. C’est parce que nous avons défini l’affichage des éléments de notre liste sur aucun.
Ensuite, nous utiliserons jQuery pour afficher au hasard un élément de notre liste à chaque chargement de page.
Vous devez ouvrir un éditeur de texte brut comme le Bloc-notes sur votre ordinateur et ajouter ce code à un fichier vierge :
(function($) { this.randomtip = function(){ var length = $("#tips li").length; var ran = Math.floor(Math.random()*length) + 1; $("#tips li:nth-child(" + ran + ")").show(); }; $(document).ready(function(){ randomtip(); }); })( jQuery );
Une fois que vous avez terminé, vous devez enregistrer ce fichier sous le nom floatingbar.js sur votre bureau.
Ouvrez maintenant votre client FTP et connectez-vous à votre serveur Web. Accédez à votre dossier de thème et localisez le dossier js. Ce serait sur un chemin comme celui-ci :
/wp-content/themes/your-theme-folder/js
S’il n’y a pas de dossier js dans votre répertoire de thème, vous devez en créer un.
Vous devez maintenant télécharger le fichier floatbar.js que vous avez créé précédemment dans le dossier js que vous venez de créer.
L’étape suivante consiste à mettre en file d’attente (charger) le fichier JavaScript dans votre thème WordPress.
Collez ce code dans le fichier functions.php de votre thème ou dans un plugin spécifique au site.
function wpb_floating_bar() { wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );
C’est tout, vous pouvez maintenant visiter votre site Web pour voir la barre de pied de page flottante en action. Rechargez la page plusieurs fois pour voir la barre de pied de page affichant au hasard différents éléments de votre liste.
L’avantage d’utiliser cette méthode est que vous pouvez faire pivoter de manière aléatoire plusieurs liens dans la barre de pied de page flottante, comme nous le faisons.
Cependant, la difficulté est que vous devez ajouter du code. De plus, vous ne pouvez pas utiliser cette barre flottante pour d’autres choses sans faire trop de personnalisations CSS.
Méthode 2 : Utilisation d’OptinMontser pour ajouter une barre de pied de page flottante dans WordPress
OptinMonster est un plugin de génération de leads populaire qui fonctionne sur tous les sites Web. Il vous aide à convertir les visiteurs du site Web en abonnés et en clients.
L’une des caractéristiques d’OptinMonster est un barre flottante d’en-tête et de pied de page que vous pouvez utiliser pour afficher un formulaire d’inscription par e-mail ainsi que pour promouvoir des liens / offres uniques.
L’avantage d’utiliser cette méthode est :
- Facile à installer (pas de code)
- Vous pouvez afficher des barres flottantes personnalisées sur différentes pages/catégories de votre site Web.
- Vous pouvez l’utiliser pour créer votre liste de diffusion ainsi que pour promouvoir des offres.
Le seul inconvénient est qu’OptinMonster est un service payant. Mais vous pouvez utiliser notre coupon OptinMonster : WPB10 pour obtenir 10% de réduction sur n’importe quel plan OptinMonster.
Après avoir acheté OptinMonster (forfait Plus ou Pro), vous pouvez utiliser le API WordPress OptinMonster plugin sur votre site. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Ce plugin agit simplement comme un connecteur entre votre site WordPress et OptinMonster.
Lors de l’activation, le plugin ajoutera un nouvel élément de menu intitulé OptinMonster à votre barre d’administration WordPress. En cliquant dessus, vous accéderez à la page des paramètres du plugin.
Il vous sera demandé de fournir votre nom d’utilisateur et votre clé API OptinMonster. Vous pouvez obtenir ces clés à partir de votre compte OptinMonster.
Copiez et collez les clés dans les paramètres du plugin et cliquez sur le bouton « Se connecter à OptinMonster ». Le plugin va maintenant connecter votre site WordPress à votre compte OptinMonster.
Ensuite, vous devez cliquer sur le bouton « Créer une nouvelle option ».
Cela vous mènera à la page « Créer un nouvel Optin » sur le site Web d’OptinMonster.
Vous devez d’abord fournir un titre pour votre campagne d’options et sélectionner un site Web sur lequel vous utiliserez cette option. Si votre site n’est pas répertorié, cliquez sur le lien « Ajouter un nouveau site Web ».
Ensuite, vous pouvez cliquer sur la barre flottante sous « Sélectionnez votre type d’option » pour utiliser les modèles disponibles à utiliser comme barre flottante.
Vous pouvez personnaliser tous ces modèles à votre guise. Sélectionnez celui qui ressemble le plus à ce que vous avez en tête.
Dès que vous sélectionnez un modèle, OptinMonster lancera son personnalisateur de conception. Il s’agit d’un générateur pointer-cliquer où vous pouvez configurer l’apparence et les paramètres de votre optin.
Lorsque vous avez terminé de configurer l’apparence de votre optin, assurez-vous de cliquer sur le bouton Enregistrer.
Bien que ceux-ci soient appelés optins, ils ne doivent pas toujours l’être. Vous pouvez utiliser la fonctionnalité Oui / Non pour ajouter le bouton permettant d’afficher un article de blog ou de réclamer une remise spéciale.
Lorsque vous créez votre barre flottante pour la première fois, elle est en pause par défaut.
Une fois que vous avez terminé de le configurer, survolez la barre d’état dans le menu du haut et choisissez Démarrer la campagne.
Votre barre flottante est maintenant prête à être ajoutée à votre site WordPress.
Retournez dans la zone d’administration de votre site WordPress et visitez OptinMonster » Optins. Vous verrez votre optin répertorié ici. Si vous ne le voyez pas, cliquez sur le bouton Actualiser les options et le plugin l’affichera.
Cliquez sur le lien « Modifier les paramètres de sortie » pour continuer.
Sur la page suivante, cochez la case à côté de l’option « Activer l’option sur le site », puis cliquez sur Enregistrer les paramètres.
Vous pouvez également utiliser l’option Avancé pour n’afficher la barre flottante que sur des publications, des pages, des catégories et d’autres zones spécifiques.
C’est tout, l’option de barre de pied de page flottante est maintenant en ligne sur votre site WordPress.
Nous espérons que cet article vous a aidé à ajouter une barre de pied de page flottante à votre site WordPress. Vous pouvez également consulter ces conseils pratiques pour générer du trafic vers votre site WordPress.