Comment ajouter le widget jQuery Tabber dans WordPress

Avez-vous vu sur des sites populaires une zone d’onglets qui vous permet de voir les publications populaires, récentes et mises en avant en un seul clic ? C’est ce qu’on appelle le widget jQuery tabber, et il vous permet d’enregistrer de l’espace sur l’écran de l’utilisateur en combinant différents widgets en un seul. Dans cet article, nous allons vous afficher comment ajouter un widget jQuery Tabber dans WordPress.

Pourquoi ajouter un widget jQuery Tabber ?

Lorsque vous gérez un site WordPress, vous pouvez facilement ajouter des articles à vos colonnes latérales en utilisant des widgets par glisser-déposer. Au fur et à mesure que votre site grandit, vous pourriez avoir l’impression de ne pas avoir assez d’espace dans la colonne latérale pour afficher tout le contenu utile. C’est précisément à ce moment-là qu’un tabulateur s’avère utile. Il vous permet d’afficher différents articles dans une même zone. Les utilisateurs/utilisatrices peuvent cliquer sur chaque onglet et voir le contenu qui les intéresse le plus. De nombreux sites de renom l’utilisent pour afficher les articles les plus populaires du jour, de la semaine et du mois. Dans ce tutoriel, nous allons vous afficher comment créer un widget tabber. Cependant, nous ne vous affichons pas ce qu’il faut ajouter dans vos onglets. Vous pouvez ajouter tout ce que vous voulez.

Note : ce tutoriel s’adresse à des utilisateurs/utilisatrices intermédiaires et nécessite des connaissances en HTML et CSS. Pour les utilisateurs/utilisatrices débutantes, veuillez vous référer à cet article.

Créer un widget jQuery Tabber dans WordPress

Premiers pas. La première chose à faire est de créer un dossier sur votre ordinateur et de le nommer WPBeginner-tabber-widget. Ensuite, vous devez créer trois fichiers à l’intérieur de ce dossier en utilisant un éditeur de texte simple comme 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 de l’animation.

Commençons par le fichier wpb-tabber-widget.php. Le but de ce fichier est de créer une extension qui inscrit un widget. Si c’est la première fois que vous créez un widget WordPress, nous vous recommandons de jeter un coup d’œil à notre guide sur la façon de créer un widget WordPress personnalisé ou de simplement copier et coller ce code dans le fichier wpb-tabber-widget.php:

<?php
/* Plugin Name: WPBeginner jQuery Tabber Widget
Plugin URI: https://www.wpbeginner.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: WPBeginner
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',
		'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éé une extension, puis à l’intérieur de cette extension, 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. Dernier point, nous avons inscrit 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 PHP et le code HTML nécessaires pour nos onglets, l’étape suivante consiste à ajouter jQuery pour les afficher en tant qu’onglets dans le conteneur d’onglets. Pour ce faire, vous devez copier et coller ce code dans le fichier wp-tabber.j s.

(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 est d’ajouter du style aux onglets. Nous avons créé une 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. Il ne vous reste plus qu’à téléverser le dossier wpbeginner-tabber-widget dans le répertoire /wp-content/plugins/ de votre site WordPress par FTP. Alternativement, vous pouvez également ajouter le dossier à une archive zip et aller à Plugins  » Ajouter une nouvelle dans votre zone d’administration WordPress. Cliquez sur l’onglet téléversement pour installer l’extension. Une fois que l’extension est activée, allez dans Apparence  » Widgets, faites glisser et déposez WPBeginner Tabber Widget dans votre colonne 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 ou retour d’expérience, vous pouvez laisser un commentaire ci-dessous ou nous rejoindre sur Twitter ou Google+.