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+.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Nitish Chauhan
Hi,
My plugin is activated but in the widget section it show « There are no options for this widget. » message.please tell me how to activate all the function and i want to create plugin like
« jQuery(document).ready(function() {
var wrapper = jQuery(« .input_fields_wrap »); //Fields wrapper
var add_button = jQuery(« .add_field_button »); //Add button ID
//initlal text box count
jQuery(add_button).click(function(e){ //on add input button click
e.preventDefault();
//max input box allowed
//text box increment
jQuery(wrapper).prepend(‘×’); //add input box
jQuery(‘.input_fields_wrap’).sortable();
jQuery(‘.input_fields_wrap’).disableSelection();
});
jQuery(wrapper).on(« click », ».remove_field », function(e){ //user click on remove text
e.preventDefault(); jQuery(this).parent(‘div’).remove();
});
}); »
my code of java script .please suggest if you have any solution.
Thanks
Nabam Rikam
I have inserted the plugins in the sidebar, but when i try to click it says there is no option for this plugin. And after we browse it in website, we see three blank tbs. Guide me here a little bro.
goutham
Iam not gettng tabs r widgets in my site.i have copied on pasted same code.It is not working.
Kunle
i want to place the plugin just created in a place in my page, and not in the side bars or footer.
how do i do that, to place it anywhere in my web page
Zadius
This is the second tutorial I have tried and for some reason the plugin file does not show up under the plugin directory on my site. I upload the file directly using FTP but when I log into my wordpress admin area nothing appears under the plugin’s tab. Please advise. Thank you.
Update: I zipped the file and uploaded it via the wordpress plugin interface. The file does not appear in my plugin’s folder on my FTP interface so I have zero clue where it show’s up. But I got it installed so thanks!
John
Thank you for the tutorial. However, I noticed that the title is missing when I add the widget to the widget area. How can I add the title space to input a title?
Drazen
Hey
Thanks for this. I was just wondering, how to add option, so that when I am viewing widget, I can simply paste links in it, in each tab?
For example:
Tab 1 (option to rename it in widget options)
– Text box below it in widget options(so that I can add text, links etc.)
Tab 2 (option to rename it in widget options)
– Text box below it in widget options(so that I can add text, links etc.)
Tab 3 (option to rename it in widget options)
– Text box below it in widget options(so that I can add text, links etc.)
Thanks
Gavin Wilshen
Brilliant tutorial. Thanks guys!
Grant
It keeps giving me this error:
Plugin could not be activated because it triggered a fatal error.
Parse error: syntax error, unexpected T_NS_SEPARATOR, expecting T_STRING in /home/content/11/10826211/html/wp-content/plugins/wpbeginner-tabber-widget/wpb-tabber-widget.php on line 16
WPBeginner Support
Grant, we just checked the code again. The plugin activated just fine on our end.
Administrateur
Rahul
Thanks man you’re a genius. I was just going to buy a premium plugin from codecanyon and then found this guide.
Jonathan
Why is it that when I install this plugin it is saying it needs to be updated, and the update is from a another developer & is over 3 years old?
WPBeginner Support
It should not do that. If you have changed the plugin name and it matches another plugin then WordPress would confuse it with the other plugin.
Administrateur
Jonathan
I didn’t change anything; I only did just what you showed above.
Jonathan
This is the plugin that WordPress thinks it is & is trying to update it to. http://wordpress.org/plugins/tabber-widget/
I just updated the plugin to version 2.0 & that (for whatever reason) got it to stop asking to update it to the other plugin. I’d try renaming & changing the other plugin info, but that was the only thing that seemed to work.
WPBeginner Support
The only reason we can think of is that you probably named the plugin file or folder to tabber-widget.php instead of wpb-tabber-widget.php which caused WordPress to confuse the plugin with this other one. The version trick is ok too until this other plugin releases 2.0+
so its bed to clear the confusion.
WPBeginner Support
We were unable to reproduce this. Do you have access to another WordPress site where you can try this, just to test that there is nothing wrong on your end?
Doris
This kind of defeats the purpose of WordPress being dynamic, doesn’t it? Hard coding text into a widget? Is there a way to pull dynamic content from the database? Us noobs don’t have much coding experience ya know…One would think there is a plugin that would do this…
WPBeginner Support
This tutorial is aimed at intermediate level users and the goal here is to show them how to create a tabber widget. For beginner level users, there are several built in template tags that can dynamically generate content inside each tab. For example:
Display a list of your WordPress pages:
<ul> <?php wp_list_pages('title_li='); ?> </ul>1-click Use in WordPress
Show Random Posts:
<ul> <?php $posts = get_posts('orderby=rand&numberposts=5'); foreach($posts as $post) { ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php } ?> </ul>1-click Use in WordPress
Show recent comments:
1-click Use in WordPress
And many more.
Administrateur
manoj sakhwar
Nice article. thanks…
Grant
What I don’t understand is where to paste the code. What type of document do I put the code in? (I have mac).
WPBeginner Support
Use TextEdit to create these files.
Administrateur
Keith Davis
Love this one guys.
Always looking for ways to make better use of limited real estate.
Jim Davis
Installed the files and activated the widget. It displays as expected, however, clicking the Tab 2 and Tab 3 tabs does not change the content. The content remains as the content under Tab 1. Have I missed something? See my test site at http://jimdavis.org/blog/
Jim
WPBeginner Support
Jim you have not missed any thing. This is an example widget and you can edit it. Enter your own code and content inside each tab by editing the plugin file wpb-tabber-widget.php
Administrateur