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

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

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

Tab Pane:

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

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

下載JS元件後解壓縮會得到以下檔案,將這些檔案全部上傳到你的佈景資料裡也就是 /wp-content/themes/你的佈景資料夾

修改header.php:

其實要加入源碼也只有2行而已,在佈景的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路徑即可。

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

你可能對這些內容也有興趣

阿湯 作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

40 個留言

  1. 個人頭像 老彰表示:

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

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

    阿湯說:

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

  2. 個人頭像 ㄚ倫表示:

    ㄚ湯,謝謝嚕,自己回去研究一夏,真的很好用說,超讚的 🙂

    阿湯說:

    加油

  3. 我也有一個外掛可以分享 也是在調整 page的

    他叫 pagemash

    阿湯說:

    完全不一樣的東西哦

  4. 個人頭像 表示:

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

    阿湯說:

    建議可以找jQuery的Tab效果

  5. 個人頭像 表示:

    你好…用了這個後..篇幅變寬了…如果可以~請麻煩你幫我看一下..謝謝..
    http://kokoronotsuki.twbbs.org/

    阿湯說:

    要調整CSS吧

  6. 個人頭像 mengtao表示:

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

    阿湯說:

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

  7. 個人頭像 mengtao表示:

    阿湯哥! 請問一下唷
    如果要把它改成像你這樣 滑鼠移過去就會變動 該怎麼改!
    我把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. 個人頭像 kenny表示:

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

    阿湯說:

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

  14. 個人頭像 Joker表示:

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

    還是我只能裝外掛 :as33

    阿湯說:

    應該是要裝個外掛囉

  15. 個人頭像 chrischien表示:

    語法指的是HTML語法嗎??

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

    請問該怎麼解決呢

    阿湯說:

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

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

  16. 個人頭像 殷暗表示:

    痞克不能用嗎…..

    阿湯說:

    痞客邦其實應該可以用在一些地方,但要試看看

  17. 個人頭像 Kaysnoopy表示:

    很贊。。哈~

    阿湯說:

    一定要的呀

  18. 個人頭像 名媛表示:

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

    阿湯說:

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

    丫湯再幫你搬唄

  19. 個人頭像 名媛表示:

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

    阿湯說:

    搬來WP吧~~

  20. 個人頭像 Marty表示:

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

    阿湯說:

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

  21. 個人頭像 dogen表示:

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

    阿湯說:

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

    這tab lane的css

  22. 個人頭像 名媛表示:

    真的看到昏了~~ :as84

    阿湯說:

    你嘛挑一些軟體類的可能比較看的懂啦

  23. 個人頭像 ryan表示:

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

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

    阿湯說:

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

    必須還要去調整一些設定

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

    也有重覆功能的外掛

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

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

  24. 個人頭像 梅干扣肉表示:

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

    阿湯說:

    不曉得梅干大大怎麼寫的

    改天MSN討論一下@@

  25. 個人頭像 阿福表示:

    我也裝好 TAB 了!!
    感覺版面精簡不少
    感謝你的教學 :as23

    阿湯說:

    不客氣,我也是去學來的@@

  26. 個人頭像 拆組達人表示:

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

    阿湯說:

    這個tab pane的css有另外的css

    可以自己調整

    都在css資料夾裡哦

  27. 個人頭像 hugo表示:

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

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

    阿湯說:

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

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

    text-align:center;文字置中

    background:#CDEBFE;背景色

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

    可以用來看我的css

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

  28. 個人頭像 Ausir表示:

    不要塞太多東西的感覺也不錯阿

    阿湯說:

    像我是有很多東西想塞又怕流量過頭XD

  29. 個人頭像 ucax表示:

    儲存備用.

    阿湯說:

    @@

  30. 個人頭像 小笠表示:

    我的邊欄
    也有用類似的東西
    還蠻方便的

    阿湯說:

    可以縮減一些版面,看起來比較不會那麼亂

  31. 個人頭像 jeffhung表示:

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

    阿湯說:

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

  32. 個人頭像 介 = JIE表示:

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

    阿湯說:

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

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

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

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

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

    語法就不用

  33. 個人頭像 拆組達人表示:

    嗯,也該整理邊欄了
    感謝分享! :as16

    阿湯說:

    你的邊欄挺整齊呀…分類很清楚 XD

  34. 個人頭像 介 = JIE表示:

    請問一下喔 代碼 要去哪裡查詢阿 ^^

    阿湯說:

    你要查詢什麼樣的代碼???

  35. 個人頭像 Sinchen表示:

    挺方便的JS,這樣邊欄就不會太多東西了。

    阿湯說:

    這個還蠻方便的,想改很久了

    最近才開始研究

  36. 個人頭像 天仙表示:

    坐沙發…..

    看到很多人用這個功能….
    閒的發慌時再來研究看看

    阿湯說:

    痞客邦應該是沒辦法…

發表留言 »

姓名(*)
信箱(*)