Comment faire pour créer un « Sticky » flottant barre de pied de page dans WordPress

faire vous voulez créer une collant barre flottante de pied de page dans WordPress ? Nous avons utilisé la barre flottante de pied de page sur notre site Web pendant de nombreuses années parce qu’il nous aide à réduire le taux de rebond et d’augmenter les pages consultées par les utilisateurs. Beaucoup d’entre vous nous ont demandé comment créer une barre flottante similaire, alors c’est ici. Dans cet article, nous vous montrerons comment créer une barre de pied de page flottante collante dans WordPress.

Floating Footer Bar

ce qui est flottante barre de pied de page ?

une collant barre flottante de pied de page vous permet d’afficher bien en évidence votre contenu important aux utilisateurs. Ce bar reste visible aux utilisateurs que tout le temps, donc ils sont plus susceptibles de cliquer dessus et de découvrir le contenu plus utile.

Wordpress Footer Bar

, vous pouvez utiliser le pied de page flottante barre deux :

  • en voiture plus de clics vers d’autres postes de blog
  • construire votre e-mail liste
  • apportez l’attention spéciale offres/vente

dans cet article, nous allons vous montrer deux méthodes pour ajouter une barre de pied de page flottante collant sur votre site WordPress. On utilise un plugin tandis que l’autre est une méthode de code que nous utilisons sur WordPress. Vous pouvez choisir celui qui que vous trouverez plus facile à utiliser.

méthode 1 : manuellement créer collant flottant Footer Bar dans WordPress

cette méthode nécessite d’ajouter du code dans vos fichiers de WordPress. Si vous êtes nouveau à l’ajout de code, puis veuillez jetez un oeil à notre guide sur comment faire pour coller des extraits du Web dans WordPress.

tout d’abord, vous devez vous connecter à votre site WordPress en utilisant un client FTP ou le gestionnaire de fichiers dans cPanel.

dans votre client FTP, vous devez localiser le fichier URfooter.php dans votre dossier de thème WordPress et téléchargez-le sur votre bureau. Il serait situé dans un chemin comme ceci :

/ wp-content/themes/votre-thème-dossier /

ensuite, vous devez ouvrir le fichier URfooter.php dans un éditeur de texte tel que Notepad et ajoutez le code suivant juste avant le tag.

 

, vous pouvez ajouter comme beaucoup la liste les éléments que vous le souhaitez. Nous vous montrerons comment faire pivoter aléatoirement à chaque chargement de la page.

la prochaine étape est l’ajout des styles CSS.

, vous pouvez ajouter le fichier CSS de URstyle.css de votre thème WordPress ou utiliser le plugin Simple CSS personnalisé.

 / * barre de pied de page de WordPress * /. fixedbar {background : # 000 ; 
Bottom : 0px ; 
couleur : #fff ; 
font-family : Arial, Helvetica, sans-serif ; 
gauche : 0 ; 
padding : 0px 0 ; 
position : fixe ; 
font-size : 16px ; 
Largeur : 100 % ; 
z-index : 99999 ; 
float : left ; 
vertical-align : middle ; 
marge : 0px 00 00 ; 
opacité : 0,95 ; 
font-weight : bold ;
}. boxfloat {text-align : center ; 
Largeur : 920px ; 
marge : 0 auto ;
} #tips, #tips li {marge : 0 ; 
padding : 0 ; 
liste-style : none} #tips {width : 920px ; 
la taille de police : 20px ; 
line-height : 120 % ;
} #tips li {padding : est 15px 0 ; 
afficher : none ;
} #tips li un {couleur : #fff ;} #tips li a : hover {text-decoration : none ;}

après avoir ajouté le CSS, vous ne pourrez pas voir les changements sur votre site Internet. C’est parce que nous avons défini l’affichage pour les éléments dans notre liste de voix contre zéro.

ensuite, nous allons utiliser jQuery pour afficher aléatoirement un élément de notre liste sur chaque chargement de la page.

, vous devez ouvrir un éditeur de texte comme le bloc-notes sur votre ordinateur et ajoutez ce code dans un fichier vide :

 (function ($) {ce. randomtip = function () {var longueur = $ (« li #tips »). longueur ;
a vol = étage Math. (Math. random () * longueur) + 1 ;
$ ("li #tips : nth-child ( » + vol + «) »). montrer () ;} ;
$ (document) .ready (function () {randomtip ()  ;}) ;
}) (jQuery) ;

une fois que vous avez terminé, vous devez enregistrer ce fichier sous URfloatingbar.js sur votre bureau.

maintenant, ouvrez votre client FTP et vous connecter à votre serveur web. Accédez à votre dossier de thème et recherchez le dossier js. Il serait qu’un chemin comme ceci :

/ wp-content/themes/votre-thème-dossier/js

s’il n’y a aucun dossier js dans votre répertoire de thème, alors vous devez en créer un.

maintenant, vous devez télécharger le fichier URfloatingbar.js créé précédemment dans le dossier js, que vous venez de créer.

l’étape suivante consiste à la file d’attente (charge) le fichier JavaScript dans votre thème de WordPress.

coller ce code dans le fichier URfunctions.php de votre thème ou d’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. Recharger la page une ou deux fois pour voir le pied de page barre montrant au hasard des différents éléments de votre liste.

l’avantage de cette méthode est que vous obtenez deux tournent au hasard plusieurs liens dans la barre de pied de page flottante tout comme nous le faisons.

Cependant la difficulté est que vous devez ajouter du code. En outre, vous ne pouvez pas utiliser cette barre flottante pour d’autres choses sans faire trop personnalisations de CSS.

méthode 2 : utiliser OptinMontser pour ajouter flottant barre de pied de page dans WordPress

OptinMonster est un plugin de génération de plomb populaire qui fonctionne sur tous les sites Web. Il vous aide à convertir les visiteurs du site Web des abonnés et clients.

une des caractéristiques OptinMonster a est une barre flottante, en-tête et pied de page que vous pouvez utiliser pour afficher un formulaire email optin ainsi qu’à promouvoir les liens/offres unique.

est l’avantage d’utiliser cette méthode :

  • Easy Setup (sans code)
  • , vous pouvez afficher les barres flottantes personnalisés sur différentes pages/catégories de votre site Web.
  • , vous pouvez l’utiliser pour construire votre liste de diffusion mais aussi de promouvoir des offres.

le seul inconvénient est que OptinMonster est un service payant. Mais vous pouvez utiliser notre OptinMonster Coupon : WPB10 pour obtenir 10 % de réduction sur tout plan de OptinMonster.

après avoir acheté OptinMonster (Plus ou Pro plan), vous pouvez utiliser le plugin OptinMonster WordPress API sur votre site. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

ce plugins agit simplement comme un connecteur entre votre site WordPress et OptinMonster.

lors de l’activation, le plugin ajoutera un nouveau menu item étiqueté OptinMonster à votre barre d’admin de WordPress. En cliquant dessus vous emmènera sur la page de configuration du plugin.

Connect your WordPress site to OptinMonster

, on vous demandera de fournir votre nom d’utilisateur et la clé API OptinMonster. Vous pouvez obtenir ces clés de votre compte de OptinMonster.

OptinMonster API keys

copier et coller les clés dans la configuration du plugin et cliquez sur le bouton « Se connecter à OptinMonster ». Le plugin se connectera désormais votre site WordPress sur votre compte OptinMonster.

ensuite, vous devez cliquer sur le bouton « Créer nouveau Optin ».

Create a new optin

cela vous mènera à la « page de créer nouvelle Optin sur le site Web OptinMonster.

tout d’abord vous devez donner un titre à votre campagne Optin et sélectionnez un site Web où vous utiliserez cette optin. Si votre site n’est pas répertorié, puis cliquez sur lien « Ajouter un nouveau site Web ».

Optin Settings

ensuite, vous pouvez cliquer sur la barre flottante sous le « sélectionnez votre type d’optin » utilise les modèles disponibles à utiliser comme une barre flottante.

, vous pouvez personnaliser tous ces modèles à votre convenance. Sélectionnez celui qui ressemble le plus proche de ce que vous avez à l’esprit.

dès que vous sélectionnez un modèle, OptinMonster va lancer le Personnalisateur de leur conception. C’est un générateur de point-and-click où vous pouvez configurer apparence et les paramètres pour votre optin.

Optin customizer

lorsque vous avez terminé la configuration de l’apparence de votre optin, n’oubliez pas de cliquer sur save bouton.

, tandis que ceux-ci sont appelés optins, ils n’ont pas toujours de demander. Vous pouvez utiliser l’oui/aucune fonctionnalité pour ajouter le bouton pour afficher un blog post ou réclamer une remise spéciale.

lorsque vous créez votre bar flottant, il a suspendu est par défaut.

une fois que vous avez fini de configurer il, survolez à la barre d’État dans le menu principal et choisissez Démarrer la campagne.

votre barre flottante est maintenant prêt à ajouter à votre site WordPress.

Retour à la zone d’administration de votre site WordPress et visitez OptinMonster » Optins . Vous verrez votre optin « répertoriées » ici. Si vous ne le voyez pas, puis cliquez sur le bouton actualiser Optins et il affichera le plugin.

cliquez sur le lien « Modifier paramètres de sortie » pour continuer.

Optin output settings

sur la page suivante, cochez la case « Activer optin sur site » option et puis cliquez sur enregistrer les paramètres.

, vous pouvez également utiliser l’option avancée pour afficher uniquement les zones flottantes barre sur des postes spécifiques, pages, catégories et d’autres.

c’est tout, pied de page flottante barre optin est maintenant en ligne sur votre site WordPress.

Floating bar added with OptinMonster

, nous espérons que cet article vous a aidé à ajouter une barre flottante de pied de page à votre site WordPress. Vous pouvez également voir ces conseils exploitables pour générer du trafic vers votre site WordPress.

Si vous aimé cet article, s’il vous plaît vous abonner à notre chaîne YouTube pour WordPress Tutoriels vidéo. Vous pouvez également nous trouver sur Twitter et Facebook.

laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *