Facebook YouTuber Instagram

What are You Looking for?

WordPress外掛《Tab Pane》標籤式分頁，讓側邊欄更整齊簡化

今天吃飽太閒，把之前用的佈景拖出來改了一些源碼，再度拿出來使用，也順便加入了Tab Pane的效果，如此一來往後如果側邊欄太多工具就可以縮減在一起，版面也會整齊一點，這麼說可能有人看不太懂，看一下我的側邊欄就應該看的出來哪邊不一樣囉，這邊丫湯也順便寫個筆記，分享Tab Pane的效果是如何製作的。

Wordpress外掛《Tab Pane》標籤式分頁，讓側邊欄更整齊簡化 01

看到上圖，應該就懂我說的Tab Pane的效果吧，這個算是個〝半〞外掛，必需自己手動加入一些源碼，但其實沒有什麼難度，跟加入外掛差不多，我們往下來看看如何加入。

Tab Pane：

作者網站：http://webfx.eae.net/dhtml/tabpane/tabpane.html

Tab Pane JS元件下載：丫湯載點、作者載點

下載JS元件後解壓縮會得到以下檔案，將這些檔案全部上傳到你的佈景資料裡也就是 /wp-content/themes/你的佈景資料夾Wordpress外掛《Tab Pane》標籤式分頁，讓側邊欄更整齊簡化 02

修改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=”https://steachs.com/wp-content/themes/佈景資料夾/js/tabpane.js“></script>

<link type=”text/css” rel=”StyleSheet” href=”https://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路徑即可。

如果看的懂的人應該是馬上就修改出來了，因為寫到這裡連丫湯自己都快昏了，想用的試看看吧～～＠＠

By阿湯
Updated on

  1. 阿湯~
    若我想把tab pane的效果放在page裏頭
    像這網站一樣：http://www.3gsha.com/jinnang/nanmanruqin.html

    我想應該是改page.php吧！ 但是怎麼修改想跟你討論一下！

    阿湯說：

    這個比較笨重。。可以去找找其它jQuery做的套件

  4. 把gameの應援 拉至最底…就不會出現拉長的情況…麻煩了…

    阿湯說：

    建議可以找jQuery的Tab效果

  6. 已經改好了! 真是笨研究好久哈!
    不過還是要謝謝阿湯哥分享的TAB PANE

    阿湯說：

    不會..我自己本身不是用tab pane,我現在側邊欄是純CSS

  7. 阿湯哥! 請問一下唷
    如果要把它改成像你這樣 滑鼠移過去就會變動 該怎麼改!
    我把ONClick改成onmouseover 跑不出來!
    不知道該怎麼去做修改!?

    阿湯說：

    要用其它方式囉~..

  8. 剛剛語法沒有出現在留言版內，我再貼一次

    第一種＜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&quot; /＞

    第二種＜script type="text/javascript" src="/tabpane/js/tabpane.js”></script＞
    <link type="text/css" rel="StyleSheet" href="/tabpane/css/tab.webfx.css” /＞

    二種我都嘗試過，但畫面都還是一樣。

    阿湯說：

    有msn嗎,我msn和你聯絡

  9. 這是放在前的語法

    我也嘗試過這一種

    <script type="text/javascript" src="/tabpane/js/tabpane.js”>
    <link type="text/css" rel="StyleSheet" href="/tabpane/css/tab.webfx.css” />

    但結果都一樣。

    請賜教。謝謝。

  10. 我剛才把前面的tabpane語法刪除，結果畫面還是一樣上下排列，並遮掉下方其他sidebar功能。

    顯示應該是沒有讀取到js.

    能否請教如何能夠讓它正常讀取js呢？

    謝謝。

    阿湯說：

    你把你加在header的語法貼出來

  11. 請問若要把語法置入sidebar，是要放在sidebar.php裡面，還是增加一個模組？

    我嘗試過把語法放在1個模組裡，結果他不僅上下排列，而且連下方其他sidebar的功能都蓋掉了。

    如果是與外掛衝突，能否建議可能會是哪一種呢？謝謝。

    阿湯說：

    這個很難給你建議..

  12. 我按照您的只是貼上語法後，結果發現他並沒有出現標籤的功能，所有的社群變成是上下依序排列耶…

    請問我是不是有哪一步做錯了嗎？

    阿湯說：

    應該是沒有讀取到header的js檔,或是和某個外掛衝突了

  13. 您好，我是新手，想請教一下，在第一步驟修改header.php完成後，要調用Tab Pane效果要在那邊設定。tab要加入調用的代碼(最新文章、最新留言)要在那查呢。非常的謝謝。

    阿湯說：

    這個不是外掛,因此你要調用tab pane效果依照我上面所述的語法插入即可,如果要調用最新文章及留言可以另外安裝外掛來調用,或是你搜尋不用代碼調用的也有哦

  14. 我用WP內建的”近期文章”,找了佈景主題沒發現他的代碼

    還是我只能裝外掛 :as33

    阿湯說：

    應該是要裝個外掛囉

  15. 語法指的是HTML語法嗎??

    另外我用JAVA SCRIPT 放置在TAB1 都會超過邊限

    請問該怎麼解決呢

    阿湯說：

    要看你是放什麼東西，如果可以調整大小就調小一點

    如果不行的就要調整tab lane的css很麻煩

  18. ㄚ湯的意思是天空不能用嗎？怎麼搬呀~~ :as16

    阿湯說：

    哈～如果名媛有興趣想搬出天空

    丫湯再幫你搬唄

  19. 看到昏，但還是覺得好用~~可是我有看沒有懂啦！我也想把噗浪、留言的、軌道變成半外掛。不然都落落長~~（哎~頭腦打結）

    阿湯說：

    搬來WP吧~~

  20. 想請教”最新文章”的代碼是什麼?
    我找了好久都找不到… :as84

    阿湯說：

    要看你用的最新文章的外掛是用哪一個

  21. 剛好蠻需要這個功能的,我覺得有些資料只要明確標明讓訪客知道在哪即可,減少空間,把空間做更多利用,當然這個設計也多了點效果 :as57

    阿湯說：

    我最近還在找時間要來改一下

    這tab lane的css

  23. 版大你好，我換了GenkiTheme 1.5布景，也開始安裝了一些外掛http://lh3.ggpht.com/_DYWgPjozZuU/Sg-r6lGR6wI/AAAAAAAAAB8/Emia1P80SkI/s800/Capture.gif

    但我的首頁http://ryan5168.twbbs.org/ 還是空空的，甚麼功能都沒有，我該怎麼做呢？謝謝版大

    阿湯說：

    有些外掛不是安裝就會有效果

    必須還要去調整一些設定

    或修改語法，而且你有些外掛可以不用裝

    也有重覆功能的外掛

    要裝外掛應該是一個個慢慢裝

    弄好了再裝下一個，這樣太亂了

  24. 呵呵~~這真西很有趣~~
    先前梅干也動手弄了一個，
    寫法跟阿湯大大有點不太一樣~~~
    但有這真的方便，
    不然以前都放文未，都拉好長~~

    阿湯說：

    不曉得梅干大大怎麼寫的

    改天MSN討論一下@@

  26. 我是覺得我的邊欄太長了說！
    只好調整首頁文章篇數來掩飾 :as25

    阿湯說：

    這個tab pane的css有另外的css

    可以自己調整

    都在css資料夾裡哦

  27. 丫湯想請問一個問題但不是關於本篇
    就是你每篇文章下面的「訂閱本站電子報」的那個藍色小框框是怎麼弄的才可以這樣
    我也想在每篇文章置底都有個類似的設計可以提醒我的朋友能訂閱rss

    請問是不是css的語法設計即可
    可以告訴我怎麼做嗎??謝謝，謝謝。

    阿湯說：

    border:1px solid #ccc;線條寬度和顏色

    padding:3px;線條和中間文字距離

    text-align:center;文字置中

    background:#CDEBFE;背景色

    用到這些css，可以參考下面這篇

    可以用來看我的css

    Firefox外掛【Firebug】檢測網頁架構、開啟速度一把罩！

  31. 「調用」是中國的譯法，台灣傳統的譯法是「呼叫」，即英文裡 call function 的 call。

    阿湯說：

    我是覺得調用比較好聽＠＠

  32. 新文章
    最新留言
    這兩個^^

    阿湯說：

    像這二個就要看你用的最新文章和留言

    的外掛是用哪一個，依外掛不同代碼可

    能會不同，另外因這二個代碼是PHP

    如果要在側邊欄的模組用php語法要再加

    裝外掛exec-php才能使用哦，如果非php

    語法就不用

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *