Comment ajouter un widget jQuery Tabber dans WordPress

Avez-vous vu une zone de tabulation sur des sites populaires qui vous permet de voir des publications populaires, récentes et en vedette en un seul clic? C'est ce que l'on appelle le widget jQuery Tabber. Il vous permet de gagner de la place sur l'écran de l'utilisateur en combinant différents widgets en un. Dans cet article, nous allons vous montrer comment ajouter un widget jQuery Tabber dans WordPress.

Pourquoi vous devriez ajouter un widget jQuery Tabber?

Lorsque vous exécutez un site Web WordPress, vous pouvez facilement ajouter des éléments à vos barres latérales en faisant glisser des widgets. Au fur et à mesure que votre site grandit, vous aurez peut-être l'impression que vous ne disposez pas de suffisamment d'espace dans la barre latérale pour afficher tout le contenu utile. C'est exactement quand un tabber est utile. Il vous permet d'afficher différents éléments dans une même zone. Les utilisateurs peuvent cliquer sur chaque onglet pour voir le contenu qui les intéresse le plus. De nombreux sites de grands noms l'utilisent pour afficher des articles populaires aujourd'hui, cette semaine et ce mois-ci. Dans ce tutoriel, nous allons vous montrer comment créer un widget Tabber. Cependant, nous ne vous montrons pas quoi ajouter dans vos onglets. Vous pouvez ajouter essentiellement tout ce que vous aimez.

Remarque: ce tutoriel est destiné aux utilisateurs de niveau intermédiaire et nécessite des connaissances en HTML et CSS. Pour les utilisateurs débutants, veuillez vous référer à cet article.

Créer un widget jQuery Tabber dans WordPress

Commençons. La première chose à faire est de créer un dossier sur votre bureau et de le nommer. wpbeginner-tabber-widget. Après cela, vous devez créer trois fichiers dans ce dossier en utilisant un éditeur de texte tel que Notepad..

Le premier fichier que nous allons créer est wpb-tabber-widget.php. Il contiendra du code HTML et PHP pour créer des onglets et un widget WordPress personnalisé. Le deuxième fichier que nous allons créer est wpb-tabber-style.css, et il contiendra le style CSS pour le conteneur d’onglets. Le troisième et dernier fichier que nous allons créer est wpb-tabber.js, qui contiendra le script jQuery pour changer d'onglet et ajouter une animation.

Commençons avec wpb-tabber-widget.php fichier. Le but de ce fichier est de créer un plugin qui enregistre un widget. Si vous créez un widget WordPress pour la première fois, nous vous recommandons de consulter notre guide pour créer un guide de widget WordPress personnalisé ou simplement de copier-coller ce code dans wpb-tabber-widget.php fichier:

  'WPBTabberWidget', 'description' => 'Widget jQuery Tabber simple'); $ this-> WP_Widget ('WPBTabberWidget', 'WPBeginner Tabber Widget', $ widget_ops);  widget de fonction ($ args, $ instance) // widget fonction de sortie de la barre latérale wpb_tabber () // Nous mettons maintenant en file d'attente notre script de stylesheet et jQuery wp_register_style ('wpb-tabber-style', plugins_url ('wpb-tabber-style.' css ', __FILE__)); wp_register_script ('wpb-tabber-widget-js', plugins_url ('wpb-tabber.js', __FILE__), array ('jquery')); wp_enqueue_style ('wpb-tabber-style'); wp_enqueue_script ('wpb-tabber-widget-js'); // Création d'onglets, vous ajouterez votre propre code dans chaque onglet?> 
 
Onglet 1
 
Onglet 2
 
Onglet 3
 
              

Dans le code ci-dessus, nous avons d'abord créé un plugin, puis à l'intérieur de ce plugin, nous avons créé un widget. Dans la section de sortie du widget, nous avons ajouté des scripts et une feuille de style, puis nous avons généré la sortie HTML pour nos onglets. Enfin, nous avons enregistré le widget. N'oubliez pas que vous devez ajouter le contenu que vous souhaitez afficher sur chaque onglet..

Maintenant que nous avons créé le widget avec le code PHP et HTML nécessaire pour nos onglets, l'étape suivante consiste à ajouter jQuery pour les afficher sous forme d'onglets dans le conteneur d'onglets. Pour ce faire, vous devez copier et coller ce code dans wp-tabber.js fichier.

 (function ($) $ (". tab_content"). hide (); $ ("ul.tabs li: premier"). addClass ("actif"). show (); $ (". tab_content: premier") .show (); $ ("ul.tabs li"). click (function () $ ("ul.tabs li"). removeClass ("active"); $ (ceci) .addClass ("active"); $ (". tab_content"). hide (); var activeTab = $ (this) .find ("a"). attr ("href"); // $ (activeTab) .fadeIn (); if ($ .browser .msie) $ (activeTab) .show (); else $ (activeTab) .fadeIn (); return false;) (jQuery); 

Maintenant que notre widget est prêt avec jQuery, la dernière étape consiste à ajouter un style aux onglets. Nous avons créé un exemple de feuille de style que vous pouvez copier et coller. wpb-tabber-style.css fichier:

 ul.tabs position: relative; z-index: 1000; float: gauche; border-left: 1px solid # C3D4EA;  ul.tabs li position: relative; débordement caché; hauteur: 26px; float: gauche; marge: 0; rembourrage: 0; hauteur de ligne: 26px; couleur de fond: # 99B2B7; bordure: solide 1px # C3D4EA; frontière gauche: aucune;  ul.tabs li a display: block; rembourrage: 0 10px; contour: aucun; texte-décoration: aucun;  html ul.tabs li.active, html ul.tabs li.active a: survol background-color: # D5DED9; fond de bordure: solide 1px # D5DED9;  .widget-area .widget .tabs a color: #FFFFFF;  .tab_container position: relative; en haut: -1px; z-index: 999; largeur: 100%; float: gauche; taille de police: 11px; couleur de fond: # D5DED9; bordure: solide 1px # C3D4EA;  .tab_content padding: 7px 11px 11px 11px; hauteur de ligne: 1,5;  .tab_content ul margin: 0; rembourrage: 0; style de liste: aucun;  .tab_content li margin: 3px 0;  .tab-clear clear: les deux;  

C'est tout. Maintenant, il suffit de télécharger wpbeginner-tabber-widget dossier sur votre site WordPress / wp-content / plugins / répertoire via FTP. Alternativement, vous pouvez également ajouter le dossier à une archive zip et aller à Plugins »Ajouter un nouveau dans votre espace administrateur WordPress. Cliquez sur l'onglet de téléchargement pour installer le plugin. Une fois le plugin activé, allez à Apparence »Widgets, glissez et déposez le Widget WPBeginner Tabber dans votre barre latérale et le tour est joué.

Nous espérons que ce tutoriel vous a aidé à créer un tabber jQuery pour votre site WordPress. Pour des questions et des commentaires, vous pouvez laisser un commentaire ci-dessous ou nous rejoindre sur Twitter ou Google+.