Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här add to jQuery Tabber Widget i WordPress

Har du sett ett tabber area på populära webbplatser som tillåter dig att se populära, senaste och utvalda inlägg med bara ett klick? Detta anropas jQuery tabber-widget, och det allow you att save utrymme på användarens vy genom att kombinera olika widgetar till en. I den här artikeln visar vi dig hur du addar en jQuery Tabber Widget i WordPress.

A jQuery powered tabber widget in WordPress

Varför ska du add to en jQuery Tabber Widget?

När du runar en WordPress website kan du enkelt add objekt till dina sidebars med hjälp av drag and drop widgets. När din site växer kanske du känner att du inte har tillräckligt med utrymme i sidebaren för att visa all användbar content. Det är precis när en tabber kommer till nytta. Det tillåter dig att visa olika objekt i ett och samma area. Användare kan klicka på varje tab och se det content de är mest intresserade av. Många webbplatser med stora namn använder den för att visa populära artiklar idag, den här veckan och den här månaden. I den här tutorialen visar vi dig hur du skapar en widget för tabbar. Vi visar dock ej vad du ska add to i dina tabs. Du kan lägga till i princip vad du gillar.

Note: denna tutorial är för användare på mellannivå och kommer att kräva HTML- och CSS-kunskaper. För användare på nybörjarnivå vänligen hänvisa till den här artikeln istället.

Skapa jQuery Tabber Widget i WordPress

Låt oss komma igång. Det första du behöver göra är att skapa en folder på ditt skrivbord och namnge den wpbeginner-tabber-widget. Därefter måste du skapa tre filer i den här mappen med hjälp av en plain text editor som Notepad.

Den första filen vi ska skapa är wpb-tabber-widget.php. Den kommer att innehålla HTML- och PHP-kod för att skapa tabs och en custom WordPress widget. Den andra filen vi kommer att skapa är wpb-tabber-style.css, och den kommer att innehålla CSS styling för tabs containern. Den tredje och sista filen vi kommer att skapa är wpb-tabber.js, som kommer att innehålla jQuery-skriptet för att byta tabs och lägga till animering.

Låt oss börja med wpb-tabber-widget.php-filen. Syftet med den här filen är att skapa ett plugin som registrerar ett widget. Om det är första gången du skapar en WordPress-widget rekommenderar vi att du tar en titt på vår guide till hur du skapar en customizer WordPress-widget eller helt enkelt copy and paste den här koden i wpb-tabber-widget.php-filen:

<?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");')
);
?>

I koden ovan skapade vi först ett plugin och sedan inuti det pluginet skapade vi en widget. I widgetens output section addade vi skript och stylesheet och sedan genererade vi HTML-utdata för våra tabs. Slutligen registrerade vi widgeten. Kom ihåg att du måste lägga till det content som du vill visa på varje tab.

Nu när vi har skapat widgeten med PHP och HTML-kod som behövs för våra tabs, är nästa steg att add to jQuery för att visa dem som tabs i tab containern. För att göra det måste du copy and paste den här koden i wp-tabber.js-filen.

(function($) {
$(".tab_content").dölj();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("aktiv");
$(this).addClass("aktiv");
$(".tab_content").dölj();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
annars {$(activeTab).fadeIn();}
return false;
});
})(jQuery);

Nu är vår widget redo med jQuery, det sista steget är att add to styling till tabs. Vi har skapat ett exempel på stylesheet som du kan copy and paste i filen 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;
}

Det var allt. Nu är det bara att uploada wpbeginner-tabber-widget folder till din WordPress site’s /wp-content/plugins/ directory via FTP. Alternativt kan du också lägga till mappen i ett zip-arkiv och gå till Plugins ” Add New i din WordPress admin area. Klicka på tabben upload för att installera pluginet. När pluginet är aktiverat, gå till Appearance ” Widgets, drag and drop WPBeginner Tabber Widget till din sidebar och det är det.

Drag and drop WPBeginner Tabber Widget into your Sidebar

Vi hoppas att denna tutorial hjälpte dig att skapa en jQuery tabber för din WordPress webbplats. För frågor och återkoppling kan du lämna en comment under eller gå med oss på Twitter eller Google+.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

25 kommentarerLämna ett svar

  1. 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

  2. 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.

  3. goutham

    Iam not gettng tabs r widgets in my site.i have copied on pasted same code.It is not working.

  4. 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

  5. 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!

  6. 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?

  7. 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

  8. Gavin Wilshen

    Brilliant tutorial. Thanks guys!

  9. 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.

      Administratör

  10. Rahul

    Thanks man you’re a genius. I was just going to buy a premium plugin from codecanyon and then found this guide.

  11. 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.

      Administratör

      • 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?

  12. 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>
      

      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>
      

      Show recent comments:

      <?php
      $args = array(
      	'status' => 'approve',
      	'number' => '5'
      );
      $comments = get_comments($args);
      foreach($comments as $comment) :
      	echo($comment->comment_author . '<br />' . $comment->comment_excerpt);
      endforeach;
      ?>
      

      And many more.

      Administratör

  13. manoj sakhwar

    Nice article. thanks…

  14. 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).

  15. Keith Davis

    Love this one guys.
    Always looking for ways to make better use of limited real estate.

  16. 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

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.