.jpg)
您是否在熱門(mén)網(wǎng)站上看到過(guò) tabber 區(qū)域，只需單擊一下即可查看熱門(mén)、最新和精選帖子？這稱為 jquery tabber 小部件，它允許您通過(guò)將不同的小部件組合成一個(gè)來(lái)節(jié)省用戶屏幕上的空間。在本文中，我們將向您展示如何在 wordpress 中添加 jquery tabber 小部件。
為什么應(yīng)該添加 jQuery Tabber 小部件？
運(yùn)行 WordPress 網(wǎng)站時(shí)，您可以使用拖放小部件輕松將項(xiàng)目添加到側(cè)邊欄。隨著您的網(wǎng)站不斷發(fā)展，您可能會(huì)覺(jué)得側(cè)邊欄中沒(méi)有足夠的空間來(lái)顯示所有有用的內(nèi)容。這正是 Tabber 派上用場(chǎng)的時(shí)候。它允許您在同一區(qū)域顯示不同的項(xiàng)目。用戶可以單擊每個(gè)選項(xiàng)卡并查看他們最感興趣的內(nèi)容。許多知名網(wǎng)站都使用它來(lái)顯示今天、本周和本月的熱門(mén)文章。在本教程中，我們將向您展示如何創(chuàng)建 Tabber 小部件。但是，我們不會(huì)向您展示要在選項(xiàng)卡中添加的內(nèi)容。基本上你可以添加任何你喜歡的東西。
注意：本教程適用于中級(jí)用戶，需要 html 和 css 知識(shí)。對(duì)于初級(jí)用戶，請(qǐng)參閱本文。
在 WordPress 中創(chuàng)建 jQuery Tabber 小部件
讓我們開(kāi)始吧。您需要做的第一件事是在桌面上創(chuàng)建一個(gè)文件夾并為其命名wpbeginner-tabber-widget。之后，您需要使用記事本等純文本編輯器在此文件夾中創(chuàng)建三個(gè)文件。
我們要?jiǎng)?chuàng)建的第一個(gè)文件是wpb-tabber-widget.php.?它將包含用于創(chuàng)建選項(xiàng)卡和自定義 WordPress 小部件的 HTML 和 PHP 代碼。我們將創(chuàng)建的第二個(gè)文件是wpb-tabber-style.css，它將包含選項(xiàng)卡容器的 CSS 樣式。我們將創(chuàng)建的第三個(gè)也是最后一個(gè)文件是wpb-tabber.JS，它將包含用于切換選項(xiàng)卡和添加動(dòng)畫(huà)的 jQuery 腳本。
讓我們從wpb-tabber-widget.php文件開(kāi)始。該文件的目的是創(chuàng)建一個(gè)注冊(cè)小部件的插件。如果這是您第一次創(chuàng)建 WordPress 小部件，那么我們建議您查看如何創(chuàng)建自定義 WordPress 小部件指南，或者只需將此代碼復(fù)制并粘貼到wpb-tabber-widget.php文件中：
.png)
