Comment ajouter le widget jQuery Tabber dans WordPress
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 de ne pas disposer de suffisamment d’espace dans la barre latérale pour afficher tout le contenu utile. C’est exactement à ce moment-là qu’un tabber s’avère 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 renom 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 s'adresse aux utilisateurs de niveau intermédiaire et nécessitera 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 tel que 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 par le fichier wpb-tabber-widget.php. 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 sur la création d'un widget WordPress personnalisé ou simplement de copier et coller ce code dans wpb-tabber-widget.php fichier :
<?php
/* Plugin Name: WPBeginner jQuery Tabber Widget
Plugin URI: https://word-press.club
Description: A simple jquery tabber widget.
Version: 1.0
Author: WPBeginner
Author URI: https://word-press.club
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',
'WPBeginner 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 à 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 le fichier wp-tabber.js.
(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 notre widget est prêt avec jQuery, la dernière étape consiste à ajouter du style aux onglets. Nous avons créé un exemple de feuille de style que vous pouvez copier et coller dans le fichier wpb-tabber-style.css :
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 le dossier wpbeginner-tabber-widget dans le répertoire /wp-content/plugins/ de votre site WordPress via FTP. Alternativement, vous pouvez également ajouter le dossier à une archive zip et accéder à Plugins » Ajouter un nouveau dans votre zone d'administration WordPress. Cliquez sur l'onglet de téléchargement pour installer le plugin. Une fois le plugin activé, allez dans Apparence » Widgets, faites glisser et déposez WPBeginner Tabber Widget dans votre barre latérale et c'est tout.
Nous espérons que ce tutoriel vous a aidé à créer un tabber jQuery pour votre site WordPress. Pour toute question et commentaire, vous pouvez laisser un commentaire ci-dessous ou nous rejoindre sur Twitter ou Google+.