fbpx

《阿湯自製》WordPress外掛「Tabs」，在側邊欄加入jquery Tab分頁選單

2011/01/24 WP-plugins(外掛)

從Sco 5.0佈景釋出後，有人問到阿湯側邊欄的Tab分頁，是怎麼自訂獨立圖示的，看起來比一般同色按鈕較能識別，這其實只要改點CSS就可以，阿湯趁這2天花了點時間，將這個Tab效果，改編寫成Wordpress外掛「Tabs」，讓大家用看看，相信還是有不少人想改這種Tab效果，但對於修改源碼不太了解，不妨就試看看吧。

00

WordPress外掛「Tabs」小檔案：

作者網站：https://steachs.com
作者：阿湯
版本：1.0
外掛下載：請點我

WordPress外掛「Tabs」使用教學：

下載外掛解壓縮後，利用FTP軟體上傳到WP外掛資料夾「wp-content/plugins」裡。

01




再到WP後台「外掛」頁裡，找到Tabs「啟用」。

02

啟用後在設定裡會多一個「Tab選單設定」，上方阿湯已經寫上基本操作方法，如果你有用過阿湯的佈景，這邊設定應該是架輕就熟，圖示設定的部份我們下面再來介紹。

03

再到佈景主題→模組裡，將「Tabs」拖曳到要放置的Widget位置，輸入標題按「儲存」。

04

就可以到首頁看看側邊欄囉，基本的圖示就是像這樣子，往下來看看怎麼自訂圖示。

05

將製作好的圖示上傳到Tabs的images資料夾裡，建議圖示小於32px*32px，如果比較深色的圖示建議也請弄半透明淺色。

06

再到後台的圖示欄位，填上你的檔名，比如facebook.gif。

07

再回到側邊欄看，OK，圖示就獨立囉。

08

注意事項：

  1. 如果側邊欄小於230px，可能因為太窄字會擠在一起，但如果還是想要用，可以將字數改少一點，改到適合為止。
  2. 這是最初版的程式碼，有些地方寫的不太優，請大家測試後有出現什麼錯誤請留言回報，感謝。

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

作者：阿湯

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

更多關於的文章》

36 個留言▼

  1. 黄先生表示:
    2014 年 08 月 21 日10:40:05

    在”内容”中放入PHP代码或简码,不能执行,如何解决?

    阿湯 說：

    exec-php

  2. 老頭表示:
    2014 年 04 月 21 日12:47:01

    接受PHP?

    阿湯 說：

    不懂你要問的?

  3. 七月七日晴表示:
    2012 年 04 月 03 日18:45:00

    那應該是那家流量統計程式碼關係，

    我找到別家流量統計可以擺上去了!

    不好意思，打擾了!!

     

    阿湯說：

     

    不客氣

  4. 七月七日晴表示:
    2012 年 04 月 03 日16:54:49

    請教阿湯，tab內容可放java程式碼嗎?

    我想放訪客流量統計，卻顯示不出來!

     

    阿湯說：

     

    應該可以吧

  5. 林威廷表示:
    2012 年 03 月 21 日23:46:43

    湯老師，我想跟您問兩個外掛名稱，因為我實在找不到

    1.左邊的G+ 和facebook 的分享功能外掛
    2.文章底部的 作者介紹 外掛

    真的非常感謝。 威廷

     

    阿湯說：

     

    二個都不是外掛也沒有外掛,我那是直接寫進佈景哦

  6. pcman表示:
    2011 年 11 月 30 日01:11:15

    哪裡可以改寬度大小

    因為佈景本身的側邊欄太窄又不能改

    阿湯說：

    要自行看css囉

  7. jazh28表示:
    2011 年 11 月 24 日19:34:56

    ㄚ湯哥：

    你好，我想請問一下，我現在試著做圖示，可是一直找不到合適的圖片

    不知道是不是有什麼網站比較好找，又或許你是不是願意分享你現在正在使用的圖示呢

    我下載你分享的sco v5裡面的images並沒有看到這些圖片

    阿湯說：

    圖示要自行製作哦~或者去搜尋一些icon,還蠻多的

  8. 老彰表示:
    2011 年 10 月 20 日23:26:36

    沒顯示… ?php tabs(); ? 之類的

    阿湯說：

    要自己寫哦

  9. 老彰表示:
    2011 年 10 月 20 日23:25:35

    請問若我想在任何地方呼叫此TAB控件…有相關PHP語法可以用嗎？ 之類的…?!

    阿湯說：

    沒有哦~要自己寫

  10. jessica wu表示:
    2011 年 10 月 15 日01:40:45

    我又成功加入了這個功能了!寫的很詳細,Thanks~

    阿湯說：

    慢用

  11. 阿新表示:
    2011 年 09 月 21 日00:50:05

    先感謝一下阿湯您的分享
    讓我用TAB很順手
    只是用好之後發現，我點FACEBOOK或是其他我設定的地方
    他都沒有顯示東西
    除了最新文章跟回應外
    是不是要把什麼東西跟TAB設定的路徑銜接呢?!

    阿湯說：

    內容你要自己輸入相關語法呀,我文章內的輸入facebook那只是用文字做範例而已

  12. Kerrbox表示:
    2011 年 06 月 12 日01:17:58

    要如何修改!?
    還有是修改什麼檔案!?
    我是新手呢 =[

    阿湯說：

    那就先了解結構學習再修改吧~不是佈景的bug都不另外做修改說明

  13. kerrbox表示:
    2011 年 06 月 11 日03:18:24

    阿湯大人:
    請問 阿湯的 一週熱門 , 最新留言 是如何 弄出來的!?
    http://img16.imageshack.us/img16/5039/20718235.jpg
    我不想最新留言 是圖片。
    我想好像 最新主題一樣, 文字性的。
    我已經 搵了不少有關的文章, 還是看不明白當中的玄機吧
    還是要請教阿湯大人你。

    我用緊的是阿湯大人的 新佈景 5.0
    因為阿湯大人的東西太捧了

    阿湯說：

    那要另外修改源碼

  14. huangle表示:
    2011 年 05 月 14 日10:46:44

    如何將Post Views放入「啟動分頁3」內?

    阿湯說：

    請自行搜尋語法~

  15. 下期休刊表示:
    2011 年 05 月 12 日11:16:56

    請問要如何顯示”繼續閱讀”的中文字樣

    我用
    都出現英文的

    阿湯說：

    佈景的問題~..

  16. 柏元表示:
    2011 年 05 月 02 日14:02:32

    湯老師回覆之前，剛好找到ul的問題呵呵，感謝。

    另外，想請教，為什麼我去『plurk索取的噗浪貼語法』嘗試好多次掛上去都會出現:
    406 Not Acceptable
    This request is not acceptable Powered By LiteSpeed Web Server
    LiteSpeed Technologies is not responsible for administration and contents of this web site!

    因為一直無法掛在我網站上，所以暫時先選用外掛，不過還是想用官方的噗浪貼，這個問題是因為我少用什麼類什麼輔助語法，類似像（exec-php這個我有裝）的外掛之類問題嘛？煩請帥氣阿湯老師指點迷津，謝謝！

    阿湯說：

    這我不確定~後面加一堆多帥的話..是沒用的…

  17. 柏元表示:
    2011 年 05 月 02 日09:42:33

    真受用，阿湯老師謝謝，不過有點移位，可否撥沈抽空替小弟檢視一下，千言萬語抵不過一句，阿湯老實您最棒！！

    阿湯說：

    自己找佈景的css改吧,去掉我槓掉的那一行.這是佈景的問題.不是外掛位移
    #main .widget-area ul ul {
    background-color: #F7F5F4;
    border: medium none;
    margin-left: 1.3em;
    padding: 0;
    }

  18. KuoE0表示:
    2011 年 04 月 12 日16:50:23

    我有包覆說＠＠
    但好像被吃掉了＝ ＝”

    我mail給您方便嗎？

    阿湯說：

    麻煩直接給我wp後台帳密

  19. KuoE0表示:
    2011 年 04 月 12 日16:36:13

    我在其他地方使用這些程式碼沒問題說＠＠
    還是說要用不同的程式碼呢？

    阿湯說：

    我看你給我的程式碼沒有用

  20. KuoE0表示:
    2011 年 04 月 12 日09:12:44

    發現很多語法被吃掉了@@
    如有需要我在email給您~

    阿湯說：

    你的語法貼錯了吧

  21. KuoE0表示:
    2011 年 04 月 11 日23:03:16

    我有裝說@@
    但還是失敗 只跑出一堆我打的代碼= =”

    阿湯說：

    網址呢?

  22. KuoE0表示:
    2011 年 04 月 11 日21:56:38

    阿湯哥你好，小弟最近開始玩wordpress，也想使用這個外掛，關於下方內容的部分，應該填入什麼語法呢???php嗎?我在網路上找到可以貼出回應最新文章等代碼，貼上去都無法使用耶@@

    阿湯說：

    要在側邊欄用php語法,應該要先裝一下exec-php

  23. 阿哲類表示:
    2011 年 04 月 01 日22:35:28

    抱歉抱歉!因為小弟很想搞懂這個外掛如何正確使用，還有小弟也想在這外掛加入交換連結功能
    假設我語法如下 就是教不落 但是他在顯示頁板卻顯示不出字跟效果是否我哪裡做錯了呢? 還有一點就是因為小弟的側頁欄設計的比較窄，但是我也想要一欄上方可以顯示三個連結，是要在css哪邊改?還是針對哪邊的code去做更改就能更改字型大小寬度

    阿湯說：

    嗯嗯

    字型請善用firefox的firebug，就知道去哪改，連結你是放在哪？

  24. 阿哲類表示:
    2011 年 04 月 01 日22:19:57

    Hi! 湯大 感謝你回覆我的問題，但是因為小弟不才，不太了解怎麼改代碼，目前我只知道如何把facebook代碼加入，但是最新文章跟最新留言的代碼就不太了解怎麼尋找因為最少要知道代碼在哪才能複製貼上對吧!，還有一點就是最近再使用tab外掛，有些朋友友跟我說他們家裡面在使用上會有看不到的情況雖然我確認過代碼完全正確，還有一個想請問湯大您在製作頁板時，您是怎麼把贊助廠商 標籤雲 交換連結移到版面正下方，想跟您請教一下，因為真的非常想學，如果可以因為小弟比較習慣使用Dreamweaver製版可以請您說明一下嗎? 因為我買了您兩本wordpress學習書不同版本都沒有說到這塊，但是我又很想這樣製作

    阿湯說：

    你這樣問我也不知道怎麼教你，版下方那個你就要先自己研究wp的結構了。

  25. 阿哲類表示:
    2011 年 04 月 01 日13:31:59

    想請教一下因為我想保留最新文章跟最新問題但是我想把facebook放在第一個分頁把最新文章放在後面分頁應該要怎麼改呢？

    阿湯說：

    可以直接改代碼（如果看的懂的話），或是第一格就放facebook，最新文章可以直接放代碼進去~

  26. Akisa表示:
    2011 年 03 月 29 日12:43:08

    報告 不是~~ 是我有裝過一次
    有記錄我的GIF位置 跟語法
    不知道怎麼清除~~XDD
    要清除才可以從頭再來~~

    阿湯說：

    那個是記錄去資料庫。。要用清除資料的外掛，忘記叫clean什麼東西去了

  27. Akisa表示:
    2011 年 03 月 28 日22:21:49

    阿湯您好~~~
    我發現我的TAB還有舊資料存在
    該如何砍掉以前的舊資料呢?
    我把TAB從FTP砍掉 重傳還是有以前的資料
    只剩下分頁1跟2可以按 3~6都不能按
    ORZ

    阿湯說：

    你的舊資料是哪裡的資料,我以前的佈景嗎

  28. athena5304表示:
    2011 年 03 月 06 日13:32:40

    買了本書想學WORDPRESS，但書上又沒提到如何用本機建設（沒錢買空間，學生一名），想問：用本機建WORDPRESS要有cPanel嗎?

    阿湯說：

    你可以先看看 http://wpnote.tw 開頭的幾篇,看完就會了解,至於用本機架設不用cpanel,但你要懂的東西更多

  29. CK表示:
    2011 年 03 月 05 日23:46:24

    想詢問把這個外掛弄在文章編輯器裡
    因為文章裡面想用每次都要複製貼上代碼有一點麻煩
    不知道阿湯大是否可以改寫一個？

    阿湯說：

    如果有時間的話^^

  30. 噗滋表示:
    2011 年 02 月 15 日18:02:46

    請問大大!
    syntaxhilighter要如何使用呢?

    阿湯說：

    網址在哪?

  31. 独星表示:
    2011 年 01 月 25 日22:22:02

    是个好东西捏~感谢丫汤哥哥分享~

    阿湯說：

    不客氣

  32. Mark表示:
    2011 年 01 月 25 日00:43:28

    安裝 於 3.04 會發生下列的錯誤:

    Fatal error: Cannot redeclare class SOptions in (路徑部份省略)wp-content/plugins/tabs/functions.php on line 8

    阿湯說：

    你已經用我的4.0佈景了,內含外掛相同代碼不能裝.

  33. 風揚名表示:
    2011 年 01 月 24 日22:16:36

    好用耶~找個時間裝上去XD
    對了!阿湯能不能改天也寫個”文章分類”的外狀~
    效果就像香腸炒魷魚或只是藍藍路的側欄那樣~
    整個排開~效果不錯^^
    那個好像要改CCS!不過我不太會= =
    如果有空的話~那就謝啦!!

    阿湯說：

    如果累積超過十個人想要的話我再寫吧,分類那個其實真的只是css而已…

  34. 花莫笑表示:
    2011 年 01 月 24 日11:18:11

    你好 已經在使用了!
    有幾個問題諮詢一下
    1.怎麼將最新文章放在不是首位.自定義模塊放在首位!
    2.自定義內文的字體如何改善?因為我的主題的字體普遍使用的要比丫燙的小一號.
    3.如果增加至9個?或者一排能不能四個 ??

    最後謝謝丫燙的自製!!!

    阿湯說：

    1.自行在要的位置寫入最新文章的代碼，2.自行修改css，3.同2，外掛除非是bug，否則都是不協助修改的哦，謝謝。

  35. 無法顯示網頁表示:
    2011 年 01 月 24 日10:28:36

    很棒耶！
    找個時間我也要來掛到我的 blog 上，喔耶！

    阿湯說：

    嗯嗯

  36. akw28888表示:
    2011 年 01 月 24 日00:24:23

    過幾天來介紹好了!

    阿湯說：

    感謝^^

發表留言 »

姓名(*)
信箱(*)

↑