Avez-vous vu une zone de tabulation sur des sites populaires qui vous permet de voir les publications populaires, récentes et en vedette en un seul clic ? C’est ce qu’on appelle le widget tabber jQuery, et il vous permet d’économiser de l’espace sur l’écran de l’utilisateur en combinant différents widgets en un seul. Dans cet article, nous allons vous montrer comment ajouter un widget jQuery Tabber dans WordPress.
Pourquoi devriez-vous ajouter un widget jQuery Tabber ?
Lorsque vous exécutez un site Web WordPress, vous pouvez facilement ajouter des éléments à vos barres latérales à l’aide de widgets glisser-déposer. Au fur et à mesure que votre site grandit, vous pourriez avoir l’impression que vous n’avez pas assez d’espace dans la barre latérale pour afficher tout le contenu utile. C’est exactement quand un tabber devient utile. Il vous permet d’afficher différents éléments dans une même zone. Les utilisateurs peuvent cliquer sur chaque onglet et 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 pratiquement tout ce que vous voulez.
Remarque : ce didacticiel est destiné aux utilisateurs de niveau intermédiaire et nécessite des connaissances en HTML et CSS. Pour les utilisateurs de niveau débutant, veuillez plutôt vous référer à cet article.
Création du widget jQuery Tabber dans WordPress
Commençons. La première chose que vous devez 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 à l’aide d’un éditeur de texte brut comme le Bloc-notes.
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
déposer. Le but de ce fichier est de créer un plugin qui enregistre un widget. Si c’est la première fois que vous créez un widget WordPress, nous vous recommandons de consulter notre guide de création d’un widget WordPress personnalisé ou simplement de copier et coller ce code dans wpb-tabber-widget.php
déposer:
<?php /* Plugin Name: Themelocal jQuery Tabber Widget Plugin URI: https://www.wpbeginner.com Description: A simple jquery tabber widget. Version: 1.0 Author: Themelocal Author URI: https://www.wpbeginner.com License: GPL2 */ // creating a widget class WPBTabberWidget extends WP_Widget { function WPBTabberWidget() { $widget_ops = array( 'classname' => 'WPBTabberWidget', 'description' => 'Simple jQuery Tabber Widget' ); $this->WP_Widget( 'WPBTabberWidget', 'Themelocal Tabber Widget', $widget_ops ); } function widget($args, $instance) { // widget sidebar output function wpb_tabber() { // Now we enqueue our stylesheet and jQuery script 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'); // Creating tabs you will be adding you own code inside each tab ?> <ul class="tabs"> <li class="active"><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <?php // Enter code for tab 1 here. ?> </div> <div id="tab2" class="tab_content" style="display:none;"> <?php // Enter code for tab 2 here. ?> </div> <div id="tab3" class="tab_content" style="display:none;"> <?php // Enter code for tab 3 here. ?> </div> </div> <div class="tab-clear"></div> <?php } extract($args, EXTR_SKIP); // pre-widget code from theme echo $before_widget; $tabs = wpb_tabber(); // output tabs HTML echo $tabs; // post-widget code from theme echo $after_widget; } } // registering and loading widget add_action( 'widgets_init', create_function('','return register_widget("WPBTabberWidget");') ); ?>
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
déposer.
(function($) { $(".tab_content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).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 dans wpb-tabber-style.css
déposer:
ul.tabs { position: relative; z-index: 1000; float: left; border-left: 1px solid #C3D4EA; } ul.tabs li { position: relative; overflow: hidden; height: 26px; float: left; margin: 0; padding: 0; line-height: 26px; background-color: #99B2B7; border: 1px solid #C3D4EA; border-left: none; } ul.tabs li a{ display: block; padding: 0 10px; outline: none; text-decoration: none; } html ul.tabs li.active, html ul.tabs li.active a:hover { background-color: #D5DED9; border-bottom: 1px solid #D5DED9; } .widget-area .widget .tabs a { color: #FFFFFF; } .tab_container { position: relative; top: -1px; z-index: 999; width: 100%; float: left; font-size: 11px; background-color: #D5DED9; border: 1px solid #C3D4EA; } .tab_content { padding: 7px 11px 11px 11px; line-height: 1.5; } .tab_content ul { margin: 0; padding: 0; list-style: none; } .tab_content li { margin: 3px 0; } .tab-clear { clear:both; }
C’est tout. Maintenant, téléchargez simplement 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 accéder à Plugins » Ajouter un nouveau dans votre espace d’administration WordPress. Cliquez sur l’onglet de téléchargement pour installer le plugin. Une fois le plugin activé, allez sur Apparence » Widgets, faites glisser et déposez Themelocal Tabber Widget dans votre barre latérale et c’est tout.
Nous espérons que ce tutoriel vous a aidé à créer un onglet 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+.