首頁 » Wordpress, wp-plugins(外掛) » WordPress外掛【Tab Pane】標籤式分頁，讓側邊欄更整齊簡化
今天吃飽太閒，把之前用的佈景拖出來改了一些源碼，再度拿出來使用，也順便加入了Tab Pane的效果，如此一來往後如果側邊欄太多工具就可以縮減在一起，版面也會整齊一點，這麼說可能有人看不太懂，看一下我的側邊欄就應該看的出來哪邊不一樣囉，這邊丫湯也順便寫個筆記，分享Tab Pane的效果是如何製作的。
看到上圖，應該就懂我說的Tab Pane的效果吧，這個算是個〝半〞外掛，必需自己手動加入一些源碼，但其實沒有什麼難度，跟加入外掛差不多，我們往下來看看如何加入。
Tab Pane：
下載JS元件後解壓縮會得到以下檔案，將這些檔案全部上傳到你的佈景資料裡也就是 /wp-content/themes/你的佈景資料夾
修改header.php：
其實要加入源碼也只有２行而已，在佈景的header.php加入調用JS和CSS
在header.php中找到</head>
在</head>上面任一處加入以下語法：
<script type="text/javascript" src="js/tabpane.js"></script>
<link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" />
而其中的src=”js/tabpane.js”>以及 href=”css/tab.webfx.css” />
不知道為什麼這樣調用不到，所以請自行更改為路徑
比如說
<script type="text/javascript" src="http://steachs.com/wp-content/themes/佈景資料夾/js/tabpane.js"></script>
<link type="text/css" rel="StyleSheet" href="http://steachs.com/wp-content/themes/佈景資料夾/css/tab.webfx.css" />
如此一來就準備完畢，接下來我們就來看看如何使用。
如何調用Tab Pane效果：
<div class="tab-pane" id="tab-pane-1">
<script type="text/javascript">
var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );
</script>
<div class="tab-page" id="tab-page-1">
<h2 class="tab">第一頁標題</h2>
<script type="text/javascript">
tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );
</script>
這裡加入你要調用的代碼（tab1)
</div>
<div class="tab-page" id="tab-page-2">
<h2 class="tab">第二頁標題</h2>
<script type="text/javascript">
tabPane1.addTabPage( document.getElementById( "tab-page-2" ) );
</script>
這裡加入你要調用的代碼（tab2)
</div>
</div>
以上語法是二頁的，如果要再加第三頁、第四頁，依樣畫葫蘆往下加語法即可，其中的tab-page-2就改成3，以此類推，語法皆不需修改，只要修改紅字的部份再將語法放置到想顯示的地方，另外在CSS資料夾內還有其它樣式可以選擇，只要在header.php修改css路徑即可。
如果看的懂的人應該是馬上就修改出來了，因為寫到這裡連丫湯自己都快昏了，想用的試看看吧～～＠＠
剛剛語法沒有出現在留言版內，我再貼一次
第一種＜script type="text/javascript" src="http://dujin-rich.com/wp-content/themes/sh-trocadero/js/tabpane.js"></script＞
<link type="text/css" rel="StyleSheet" href="http://dujin-rich.com/wp-content/themes/sh-trocadero/css/tab.webfx.css" /＞
第二種＜script type="text/javascript" src="/tabpane/js/tabpane.js"></script＞
<link type="text/css" rel="StyleSheet" href="/tabpane/css/tab.webfx.css" /＞
二種我都嘗試過，但畫面都還是一樣。
這是放在前的語法
我也嘗試過這一種
<script type="text/javascript" src="/tabpane/js/tabpane.js">
<link type="text/css" rel="StyleSheet" href="/tabpane/css/tab.webfx.css" />
但結果都一樣。
請賜教。謝謝。
我剛才把前面的tabpane語法刪除，結果畫面還是一樣上下排列，並遮掉下方其他sidebar功能。
顯示應該是沒有讀取到js.
能否請教如何能夠讓它正常讀取js呢？
謝謝。
請問若要把語法置入sidebar，是要放在sidebar.php裡面，還是增加一個模組？
我嘗試過把語法放在1個模組裡，結果他不僅上下排列，而且連下方其他sidebar的功能都蓋掉了。
如果是與外掛衝突，能否建議可能會是哪一種呢？謝謝。
我按照您的只是貼上語法後，結果發現他並沒有出現標籤的功能，所有的社群變成是上下依序排列耶...
請問我是不是有哪一步做錯了嗎？
您好，我是新手，想請教一下，在第一步驟修改header.php完成後，要調用Tab Pane效果要在那邊設定。tab要加入調用的代碼(最新文章、最新留言)要在那查呢。非常的謝謝。
我用WP內建的"近期文章",找了佈景主題沒發現他的代碼
還是我只能裝外掛
語法指的是HTML語法嗎??
另外我用JAVA SCRIPT 放置在TAB1 都會超過邊限
請問該怎麼解決呢
痞克不能用嗎.....