如何在WordPress中添加jQuery Tabber Widget


您是否在熱門網站上看到過一個Tabber區域,使您只需單擊一下即可查看熱門,近期和特色帖子。 這稱為jQuery tabber小部件,它允許您通過將不同的小部件組合為一個來節省用戶屏幕上的空間。 在本文中,我們將向您展示如何在WordPress中添加jQuery Tabber Widget。

WordPress中由jQuery驅動的Tabber小部件

為什麼要添加jQuery Tabber小部件?

在運行WordPress網站時,您可以使用拖放小部件輕鬆地將項目添加到側欄中。 隨著網站的發展,您可能會覺得側邊欄中沒有足夠的空間來顯示所有有用的內容。 正是在這樣的情況下,開瓶器才派上用場。 它允許您在同一區域顯示不同的項目。 用戶可以單擊每個選項卡,查看他們最感興趣的內容。許多知名網站都使用它來顯示今天,本周和本月的熱門文章。 在本教程中,我們將向您展示如何創建Tabber小部件。 但是,我們沒有向您顯示在選項卡中添加的內容。 您基本上可以添加任何您喜歡的東西。

注意:本教程適用於中級用戶,並且需要HTML和CSS知識。 對於初學者級別的用戶,請參閱本文。

在WordPress中創建jQuery Tabber Widget

讓我們開始吧。 您需要做的第一件事是在桌面上創建一個文件夾並命名 wpbeginner-tabber-widget。 之後,您需要使用純文本編輯器(如記事本)在此文件夾中創建三個文件。

我們要創建的第一個文件是 wpb-tabber-widget.php。 它將包含用於創建選項卡的HTML和PHP代碼以及一個自定義WordPress小部件。 我們將創建的第二個文件是 wpb-tabber-style.css,它將包含tabs容器的CSS樣式。 我們將創建的第三個也是最後一個文件是 wpb-tabber.js,其中將包含用於切換標籤和添加動畫的jQuery腳本。

讓我們開始 wpb-tabber-widget.php 文件。 該文件的目的是創建一個註冊小部件的插件。 如果這是您第一次創建WordPress小部件,那麼我們建議您看一下我們如何創建自定義WordPress小部件指南,或者簡單地將此代碼複製並粘貼到 wpb-tabber-widget.php 文件:

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

  • Tab 1
  • Tab 2
  • Tab 3

在上面的代碼中,我們首先創建了一個插件,然後在該插件內部創建了一個小部件。 在小部件輸出部分,我們添加了腳本和样式表,然後為選項卡生成了HTML輸出。 最後,我們註冊了小部件。 請記住,您需要添加要在每個選項卡上顯示的內容。

現在,我們已經使用選項卡所需的PHP和HTML代碼創建了小部件,下一步是添加jQuery,以將它們顯示為選項卡容器中的選項卡。 為此,您需要將此代碼複製並粘貼到 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);

現在我們的小部件已經可以使用jQuery,最後一步是向選項卡添加樣式。 我們創建了一個示例樣式表,您可以將其複制並粘貼到 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;
}

就這樣。 現在上傳 wpbeginner-tabber-widget 文件夾到您的WordPress網站的 /wp-content/plugins/ 目錄通過FTP。 或者,您也可以將該文件夾添加到zip存檔中,然後轉到 插件»添加新 在您的WordPress管理區域中。 單擊上載選項卡以安裝插件。 激活插件後,轉到 外觀»小部件,只需將WPBeginner Tabber Widget拖放到側邊欄即可。

將WPBeginner Tabber小部件拖放到側邊欄中

我們希望本教程可以幫助您為WordPress網站創建jQuery tabber。 對於問題和反饋,您可以在下面發表評論或加入我們 推特 或Google+。