Comment se fondre dans le dernier widget Sidebar dans WordPress en utilisant jQuery

Récemment, un de nos utilisateurs nous a demandé comment ajouter un effet de fondu au dernier widget de la barre latérale. Cet effet jQuery populaire est utilisé sur de nombreux sites Web et blogs bien connus. Lorsque l'utilisateur fait défiler la page, le dernier widget de la barre latérale apparaît et devient visible. L'animation rend le widget accrocheur et perceptible, ce qui augmente considérablement le taux de clics. Dans cet article, nous allons vous montrer comment utiliser le dernier widget de la barre latérale dans WordPress avec jQuery..

Vous trouverez ci-dessous une démonstration de ce à quoi cela ressemblerait:

Dans ce tutoriel, vous allez modifier vos fichiers de thème. Il est recommandé de sauvegarder votre thème avant de continuer..

Étape 1: Ajout de JavaScript pour l'effet Fadein

Vous devez d’abord ajouter le code jQuery à votre thème WordPress en tant que fichier JavaScript séparé. Commencez par ouvrir un fichier vierge dans un éditeur de texte tel que le Bloc-notes. Ensuite, enregistrez ce fichier vierge sous wpb_fadein_widget.js sur votre bureau et collez le code suivant à l'intérieur.

 jQuery (document) .ready (function ($) / ** * Configuration * Le conteneur de votre barre latérale, par exemple apart, #sidebar, etc. * / var sidebarElement = $ ('div # secondary'); // Vérifiez si la barre latérale existe si ($ (sidebarElement) .length> 0) // Récupère le dernier widget dans la barre latérale et sa position à l'écran var widgetDisplayed = false; var lastWidget = $ ('. widget: last-child', $ (sidebarElement ));; var lastWidgetOffset = $ (lastWidget) .offset (). top -100; // masque le dernier widget $ (lastWidget) .hide (); // vérifie si le défilement de l'utilisateur a atteint le haut du dernier widget et l'affiche. it $ (document) .scroll (function () // Si le widget a été affiché, il n'est pas nécessaire de continuer à faire un contrôle. if (! widgetDisplayed) if ($ (this) .scrollTop ()> lastWidgetOffset ) $ (lastWidget) .fadeIn ('slow'). addClass ('wpbstickywidget'); widgetDisplayed = true;);); 

La ligne la plus importante de ce code est var sidebarElement = $ ('div # secondary');.

C'est l'id de la div contenant votre sidebar. Étant donné que chaque thème peut utiliser des divs de conteneur de barre latérale différents, vous devez connaître l'ID de conteneur que votre thème utilise pour la barre latérale..

Vous pouvez trouver cela en utilisant l'outil inspecter l'élément dans Google Chrome. Faites simplement un clic droit sur votre barre latérale dans Google Chrome, puis sélectionnez Inspecter un élément..

Dans le code source, vous pourrez voir votre div conteneur de la barre latérale. Par exemple, le thème par défaut Twenty Twelve utilise secondaire, et vingt treize utilisations teritaire en tant qu'ID pour le conteneur de la barre latérale. Vous devez remplacer secondaire avec l'ID de votre conteneur sidebar div.

Ensuite, vous devez utiliser un client FTP pour télécharger ce fichier dans le dossier js de votre répertoire de thèmes WordPress. Si votre répertoire de thème ne contient pas de dossier js, vous devez le créer en cliquant avec le bouton droit de la souris et en sélectionnant "Créer un nouveau répertoire" sur votre client FTP..

Étape 2: Mise en attente de votre JavaScript dans le thème WordPress

Maintenant que votre script jQuery est prêt, il est temps de l'ajouter à votre thème. Nous allons utiliser la méthode appropriée pour ajouter le javascript dans votre thème. Il vous suffit donc de coller le code suivant dans le fichier functions.php de votre thème..

 wp_enqueue_script ('stickywidget', get_template_directory_uri (). '/js/wpb-fadein-widget.js', array ('jquery'), '1.0.0', true); 

C'est tout, vous pouvez maintenant ajouter un widget dans votre barre latérale que vous souhaitez voir apparaître avec l'effet de fondu puis visiter votre site Web pour le voir en action..

Étape 3: Rendre le dernier widget collant après l’effet de fondu

Une fonction souvent souhaitée avec l'effet de fondu consiste à faire défiler le dernier widget de la barre latérale pendant le défilement de l'utilisateur. Ceci est appelé widget flottant ou widget collant.

Si vous regardez le code jQuery ci-dessus, vous remarquerez que nous avons ajouté un wpbstickywidget Classe CSS au widget après l’effet de fondu. Vous pouvez utiliser cette classe CSS pour rendre votre dernier widget collant après son apparition en fondu. Tout ce que vous avez à faire est de coller ce CSS dans la feuille de style de votre thème..

 .wpbstickywidget position: fixed; en haut: 0px;  

N'hésitez pas à modifier le CSS pour répondre à vos besoins. Vous pouvez modifier la couleur d'arrière-plan ou les polices pour rendre le widget encore plus visible. Si vous le souhaitez, vous pouvez même ajouter un effet de défilement régulier vers le haut à côté de votre dernier widget, ce qui permettra aux utilisateurs de revenir rapidement en arrière..

Nous espérons que cet article vous a aidé à ajouter un effet de fondu au dernier widget de votre barre latérale WordPress. Pour plus de bonté jQuery, consultez les meilleurs tutoriels jQuery pour WordPress.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Google+.