Hur man lÀgger till jQuery Tabber Widget i WordPress

Hur man lÀgger till jQuery Tabber Widget i WordPress

Har du sett ett tabberomrÄde pÄ populÀra webbplatser som lÄter dig se populÀra, senaste och utvalda inlÀgg med bara ett klick? Detta kallas jQuery tabber-widgeten och det lÄter dig spara utrymme pÄ anvÀndarskÀrmen genom att kombinera olika widgets till en. I den hÀr artikeln visar vi dig hur du lÀgger till en jQuery Tabber-widget i WordPress.

Varför ska du lÀgga till en jQuery Tabber-widget?

NÀr du kör en WordPress-webbplats kan du enkelt lÀgga till objekt i sidofÀltet med hjÀlp av dra och slÀpp-widgets. NÀr din webbplats vÀxer kan du kÀnna att du inte har tillrÀckligt med utrymme i sidofÀltet för att visa allt anvÀndbart innehÄll. Det Àr precis nÀr en tabber Àr till nytta. Det lÄter dig visa olika objekt i samma omrÄde. AnvÀndare kan klicka pÄ varje flik och se det innehÄll de Àr mest intresserade av. MÄnga stora namnsajter anvÀnder den för att visa populÀr artikel idag, denna vecka och denna mÄnad. I denna handledning visar vi dig hur du skapar en tabber-widget. Vi visar dock inte vad du ska lÀgga till i dina flikar. Du kan lÀgga till i princip vad du vill.

Obs! Denna handledning Àr avsedd för medelnivÄanvÀndare och krÀver HTML- och CSS-kunskaper. För anvÀndare pÄ nybörjarnivÄ, se den hÀr artikeln istÀllet.

Skapa jQuery Tabber Widget i WordPress

LÄt oss börja. Det första du behöver göra Àr att skapa en mapp pÄ skrivbordet och namnge den wpbeginner-tabber-widget. DÀrefter mÄste du skapa tre filer i den hÀr mappen med en vanlig textredigerare som Anteckningar.

Den första filen vi ska skapa Àr wpb-tabber-widget.php. Den innehÄller HTML- och PHP-kod för att skapa flikar och en anpassad WordPress-widget. Den andra filen vi skapar Àr wpb-tabber-style.css, och den kommer att innehÄlla CSS-styling för flikbehÄllaren. Den tredje och sista filen vi skapar Àr wpb-tabber.js, som innehÄller jQuery-skriptet för att byta flik och lÀgga till animering.

LÄt oss börja med filen wpb-tabber-widget.php. Syftet med den hÀr filen Àr att skapa ett plugin som registrerar en widget. Om det hÀr Àr första gÄngen du skapar en WordPress-widget rekommenderar vi att du tittar pÄ hur vi skapar en anpassad WordPress-widgetguide eller bara kopierar och klistrar in den hÀr koden i filen 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");')
);
?>

I koden ovan skapade vi först ett plugin och sedan inuti det plugin skapade vi en widget. I widgetutgÄngssektionen lade vi till skript och formatmall och sedan genererade vi HTML-utdata för vÄra flikar. Slutligen registrerade vi widgeten. Kom ihÄg att du mÄste lÀgga till innehÄllet som du vill visa pÄ varje flik.

Nu nÀr vi har skapat widgeten med PHP- och HTML-kod som behövs för vÄra flikar Àr nÀsta steg att lÀgga till jQuery för att visa dem som flikar i flikbehÄllaren. För att göra det mÄste du kopiera och klistra in den hÀr koden i filen 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);


Nu Àr vÄr widget redo med jQuery, det sista steget Àr att lÀgga till styling pÄ flikarna. Vi har skapat ett exempelformat som du kan kopiera och klistra in 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 Àr allt. Ladda bara upp mappen wpbeginner-tabber-widget till din WordPress-webbplats / wp-content / plugins / katalog via FTP. Alternativt kan du ocksÄ lÀgga till mappen i ett zip-arkiv och gÄ till Plugins »LÀgg till nytt i ditt WordPress-administratörsomrÄde. Klicka pÄ uppladdningsfliken för att installera plugin. NÀr plugin Àr aktiverat, gÄ till Utseende »Widgets, dra och slÀpp WPBeginner Tabber Widget till din sidofÀlt och det Àr det.

Dra och slÀpp WPBeginner Tabber Widget i sidofÀltet

Vi hoppas att den hÀr handledningen hjÀlpte dig att skapa en jQuery-tabber för din WordPress-webbplats. För frÄgor och feedback kan du lÀmna en kommentar nedan eller gÄ med pÄ Twitter eller Google+.