fbpx

Wordpess佈景《Sco_Plus》以HTML5為架構製作、更便利的後台設定

在最後一次佈景(目前使用中的sco v5.0)釋出的時間至今也已經過了將近快一年的時間,阿湯最近剛好在研讀html5,所以就趁機做了一個新的Wordpess佈景《Sco_Plus》,並用了和以往不同的後台程式碼來製作設定相關頁面,在代碼上精簡不少,而在去掉社群相關代碼後丟到W3C檢測也只有錯誤8個,這次阿湯並不是為了自己改版而製作,而是在邊製作的過程中,透過FB的WP社團裡的討論,一邊微調及編輯,是希望做一個通用而且對於新手易上手的佈景,當然也希望老手會賞臉,大家在使用過或看過後有任何問題或建議都希望不要吝於告知阿湯。

01

為什麼這次要取名為Sco_Plus呢?也可以簡稱他是S+,Sco是因為阿湯的英文名字Scorpio,而Plus有著加強或進階的意思,當然也是因為使用了全新的HTML5做為架構,而後台的代碼也全面翻新,所以就讓他成為Plus版囉。

而這次阿湯沒有先暗槓使用,直接公開釋出給大家,應該是夠佛心了,之後阿湯會再依自己的網站需求再去做修改,希望大家用的開心。

Wordpess佈景「Sco_Plus」小檔案:

作者網站:https://steachs.com/
作者:阿湯
佈景下載:請點我

更新日誌:

  • 2013-01-20 版號:1.5.2
    1.修改後台樣式。
    2.新增廣告欄位,內文 more 之後插入。
  • 2012-09-06版號:1.5.0
    1.新增跑馬燈訊息功能
  • 2012-06-20版號:1.4.6
    1.修正WordPress 3.4升級後,圖片無法上傳問題。
  • 2012-04-05版號:1.4.5
    1.修正IE8下,內文顯示空白問題
  • 2011-12-27 版號:1.4.1
    1.修改社群分享按鈕部份問題
    2.刪除測試檔案
  • 2011-12-26 版號:1.4
    1.將佈景修改為可從後台自動升級更新。
  • 2011-12-21 版號:1.3.2
    1.修改佈景對W3C驗證,僅剩FB按鈕無法驗證,其餘皆過
  • 2011-12-21 版號:1.3.1
    1.加入自動判斷佈景版本功能,有更新會自動在上方出現提醒,更新完後自動消失
    2.修正內文左側推文按鈕框,最下方被截掉的問題。
  • 2011-12-20 版號:1.3
    1.修正自訂背景失效
    2.新增後台更新日誌
    3.加入更新提醒,未來有更新項目會在後台上方出現提醒
    4.版號修正為1.3
    5.登入後,上方管理員選單跑版修正
  • 2011-12-19 版號:1.2
    1.修正IE8以下不支援HTML5的HACK

Wordpess佈景「Sco_Plus」介紹:

其實頁面樣式可以看上面的Demo頁面就可以了,大概介紹一些特色,主要將社群分享按鈕移到左側,然後最側的facebook是可以自動延伸的粉絲團小視窗,這些都可以在後台選擇要不要使用。

02

文章底部可以啟用廣告欄位還有個人資料顯示,個人資料部份可以在後台決定要不要顯示,而這資料是去撈後台帳號的個人簡介資訊,所以可以先到帳號裡去編輯自介,啟用後這裡就會顯示囉。

03

後台設定:

這次分為圖片、一般、縮圖及廣告設定。

圖片設定裡包含了自訂favicon、背景圖片及Logo,都可以直接上傳,按下儲存後也能立即預覽圖片。

04

一般設定裡,包含了現在人人必備的Google自訂搜尋引擎、是否採用下拉式選單、社群分享按鈕、FB粉絲專頁、作者資訊、右上及下方自訂欄位,還有footer常需要放置統計分析程式碼的欄位,一併都寫進後台,減少修改的必要性。

05

縮圖的部份先前只有可以選擇是否要開啟,而這次阿湯特別還加入了寬高的設定。

06

廣告設定的部份,除了右上角的自訂欄位可以放之外,另外規劃了文章上方及下方的欄位可以設定。

07

其它在使用佈景後有任何問題或建議,歡迎在下方留言告知阿湯,都會列入下次改版的考量點哦。

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

阿湯 作者:阿湯

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

更多關於的文章》

64 個留言

  1. Avatar 阿呱表示:

    湯大您好,小第用您plus的版型非常喜歡,可是為什麼旁邊的facebook無法顯示內容?
    網站:augng-ifree.twgg.org

    阿湯 說:

    這要自行研究一下囉

  2. Avatar fuyuanli表示:

    請問湯大,404是不是不正常呢
    像是這個
    http://scoplus.steachs.com/?p=999
    http://scoplus.steachs.com/1234

    阿湯 說:

    好像沒做404

  3. Avatar BOGE表示:

    您好,請問一下,為什麼開啟文章第一張圖會自動縮圖功能,他雖然有縮,但是文章內的第一張圖也一起出現了,就變成文章列表有兩張圖@@”
    先煩請阿湯哥回覆了~感謝

    阿湯 說:

    more 標籤之前請不要放圖~

  4. Avatar promise0924表示:

    湯大您好.小第用您plus的版型非常喜歡,但是在description的地方會出現很長的空白,請問能夠改善嗎?

    阿湯 說:

    可以給我網址看一下嗎?

  5. Avatar 游子權表示:

    其實您右邊Windows Phone 風格欄位區的原始碼可以找得到吔!
    如果有找到並發現如何使用的話可以「抄」來用嗎?
    還盼您早日回復!

    阿湯 說:

    效果你要抄可以抄,圖片請不要使用我的~當然如果你喜歡網站跟別人長的一樣,我也沒啥好講的..

  6. Avatar 頭快爆炸表示:

    一直有個問題苦惱我好久~
    一般要更改中文字型如微軟正黑體可在STYLE.CSS裡設定font-family,
    但現在手上有個國外的版型,它預設是使用後台內建GOOGLE英文字型讓使用者選擇,
    當然,想用微軟正黑體只能由STYLE.CSS去修改了,但無論任何型式怎麼加,或怎麼改,就是無法呈現出來,
    其他相關CSS檔也都試過..
    類似的版型以前有碰過,但只要在STYLE.CSS加上*{font-family也能硬上微軟正黑體..
    但這次真的碰到釘子了..
    在此求救阿湯哥,這情況可由何著手呢?
    感激

    阿湯 說:

    每個版型修改方式不同~要視情況修改

  7. Avatar FROG表示:

    沒有404頁面嗎?

    阿湯 說:

    有哦

  8. Avatar henry表示:

    測試了多層選單
    還是不行
    這是圖片
    http://imgur.com/Gt6TB4s
    http://imgur.com/2p4LHGh

    阿湯 說:

    請看一下佈景設定謝謝

  9. Avatar henry表示:

    好像還是沒有多層選單ㄟ

    阿湯 說:

    是在外觀→選單裡設定哦

  10. Avatar Mirai表示:

    感謝↑阿湯哥,讓我有一個漂亮的佈景> <
      ↑
    話說頭貼要怎麼設定呀XD

    阿湯 說:

    站內搜尋 Gravatar

  11. Avatar herny表示:

    請問sidebar裡的那個迴紋針怎麼用?
    如果我想做出右下角有摺起來的感覺又要怎麼作?

    阿湯 說:

    圖片+CSS控制

  12. Avatar herny表示:

    只支援單層選單?

    阿湯 說:

    多層也有

  13. Avatar 阿源表示:

    您好:
    最近在嘗試自己架wordpress,正在摸索佈景,被GOOGLE導到您這裡來,但是嘗試安裝時出現以下訊息:
    「無法安裝該軟件包。 PCLZIP_ERR_BAD_FORMAT (-10) : Invalid
    archive structure」

    重新下載並上傳也一樣,想請教會是哪裡有甚麼問題嗎?

    阿湯說:

    再重新下載一次看看,我有更新囉

  14. Avatar 怪獸君表示:

    壓縮檔CRC損壞。換了幾台電腦也是一樣,能不能提供另外的載點?

    阿湯說:

    再下載一次看看

  15. Avatar 怪獸君表示:

    已損毀佈景主題
    下列佈景主題是已安裝但不完整的。
    重新下載也是一樣

    阿湯說:

    我試正常說

  16. Avatar ㄚ倫表示:

    這佈景真的好用…

    加上程式碼都很好了解,算是學css的好物,改好成功自己也滿有成就感的^^

    超!棒!

    阿湯說:

    謝謝

  17. Avatar SRDK表示:

    已損毀佈景主題

    下列佈景主題是已安裝但不完整的。每個佈景主題都至少要有一個樣式表跟一個模板。

    名稱:sco_plus
    內容說明:找不到樣式表。

    請問一下怎麼這樣子=”=
    檔案損毀

    阿湯說:

    重新下載也一樣嗎?,但我試是正常的

  18. Avatar Renee表示:

    報告..用完facebook debug後
    用Firefox開網頁.點分享按鈕.顯示正常
    用Chrome開網頁.點分享按鈕.依舊不正常
    用兩台電腦測試..結果一樣….=.=

    阿湯說:

    應該是有其它原因吧,我就不清楚了

  19. Avatar Renee表示:

    湯大~
    fb分享按鈕使用的時候,不像G+的按鈕能抓到摘要和圖片
    不知是哪裡有問題~~

    阿湯說:

    可以用facebook debug 查一下

  20. Avatar Allen表示:

    請問能不能把跑馬燈功能寫成外掛或寫一篇製作教學文?

    阿湯說:

    請參考佈景 sco_plus

  21. Avatar bobopo表示:

    請問一下阿湯 ~
    因為是初學者學習wordpress
    順便學習wordpress的主題 如何製作

    要如何從那裏去判斷這個主題是用甚麼語法寫的阿?
    我看wordpress筆記本 好像index.php是最主要的
    然後我查看 sco_prss 和 scov5 兩個開頭好像都是去取header
    所以要看這個主題用甚麼語法寫的 是去看header 裡面<!DOCTYPE 宣告的是甚麼

    像scov5

    那麼是不是就是這個語法是用XHTML 1.0
    sco_plus

    這標籤我google一下這是html5的
    所以判斷語法是這樣子判定嗎^^a

    還有sco_plus適合當原始版型來製作嗎?

    阿湯說:

    用什麼語法寫沒有太大差異~版型你要用哪一個做為原型都是可以的~我沒有辦法給你太多建議

  22. Avatar keniris表示:

    你好,想請問一下,如果要改繼續閱讀的字樣
    要改哪一個檔案呢?
    謝謝。

    阿湯說:

    不是bug的修改都請自行研究哦

  23. Avatar 小遠表示:

    大大~你好~
    您的載點失效了~可否分享新的載點呢~^^~

    阿湯說:

    已更新

  24. Avatar Mr. Jack表示:

    問錯地方,重貼一次好了︿︿
    阿湯哥的主題很棒!但是我遇到一個困難…
    我想改css引用的語法,我在您寫的#content article.post .summary blockquote,
    這排打入我想要的樣式
    blockquote {
    margin: 1em 3em;
    padding: .5em;
    background-color: #f6ebc1; }
    blockquote p {
    margin: 0; }
    可是都沒有顯示成功耶!
    請問還有哪邊要改的?還是我改錯地方?
    版本是1.4.5的。網址http://mrjack.cc/do-fu-busy/

    阿湯說:

    修改css的部份都請自行研究哦

  25. Avatar Roger表示:

    湯哥:
    文章出現一段空白,怎麼辦?

     

    阿湯說:

     

    網址?哪一個瀏覽器?版本?佈景是裝最新的1.4.5嗎?

  26. Avatar Roger表示:

    感謝湯哥

     

    阿湯說:

     

    不客氣

  27. Avatar zoe表示:

    簡潔好用的怖景~
    很容易上手,而且功能很多
    感謝分享~^^

     

    阿湯說:

     

    不客氣…

  28. Avatar 朱小姐表示:

    阿湯哥~
    截圖是要寄給你嗎?
    還是….
    謝謝^^

     

    阿湯說:

     

    寄給我好了.

  29. Avatar 朱朱表示:

    阿湯哥~
    我用GOOGLE看就看不到.跑出版外了~
    用IE8看就疊在一起~
    我不知道要看哪邊有無出錯~
    但是我沒有些改東西喔~
    感謝

     

    阿湯說:

     

    你截個圖給我看看

  30. Avatar 朱小姐表示:

    阿湯哥~
    請問一下~我更新最新版本後~
    左邊的社群分享按鈕~就會跑出版外~
    如果畫面縮成75%才會跑出來~
    這是甚麼樣的問題呢?
    網站:http://888bank.moneydoctor.com.tw/

     

    阿湯說:

     

    你是用什麼瀏覽器??

  31. Avatar 阿鑫表示:

    感謝阿湯!
    這個佈景讓還是新手的我很容易上手耶~
    問:
    這個佈景可以隨便我改沒問題吧?
    裡面的架構很簡單想說來改一下有自己的風格

    感謝!

     

    阿湯說:

     

    改以改的~

  32. Avatar 朱朱表示:

    好~我在試試看囉^^

    阿湯說:

    嗯嗯

  33. Avatar 朱朱表示:

    IE8

    阿湯說:

    IE8我自己測沒有問題~你側邊欄模組重新一個個弄看看吧~看弄到哪一個出問題的.因為別人用這佈景都很正常

  34. Avatar 朱朱表示:

    還有一個問題~我的網站在IE下會擠成一團

    阿湯說:

    IE版本>?

  35. Avatar 朱朱表示:

    沒有改過^^”

    阿湯說:

    其它人網站都沒有這樣~你先試試把外掛都停用,側邊欄一格一格重新加

  36. Avatar 朱朱表示:

    請問我側欄會重疊~是那出了問題呢?
    謝謝

    阿湯說:

    有改過什麼嗎?

  37. Avatar ian表示:

    請問阿湯哥
    我安裝完Wordpress及套用您的背景後
    在wordpress後台有些設定 在儲存時會出現下列錯誤

    Not Acceptable

    An appropriate representation of the requested resource /wp-admin/options-permalink.php could not be found on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    麻煩您幫我看一下這是什麼樣的問題呢

    阿湯說:

    看起來是儲存固定連結時出現錯誤,不是佈景的問題,應該是你WP的問題…

  38. Avatar 孤寂淚表示:

    感謝阿湯大的新佈景!!
    小弟還是新手不會寫佈景 收下搂~

    再次感謝^^

    阿湯說:

    慢用

  39. Avatar Pcfat表示:

    有一個地方想向你提點:
    1.最高的網誌分頁的最後一個的背景移左了1px(http://scoplus.steachs.com/?page_id=2)

    阿湯說:

    那個是故意的,不是跑版哦,原本就是這樣.

  40. Avatar akw28888表示:

    佈景還有有一個地方有問題
    WP產生archive時 都會加入一個rel
    但是那個在HTML5是沒有的
    可以參考香腸文章 http://sofree.cc/wp-html5-setup/

    阿湯說:

    那個東西WP遲早會改版改完的,其實不需要現下的w3c去做調整太多,因為html5也還沒有一個完整的規範出來

  41. Avatar 朱朱表示:

    請問~我如果要把網誌分頁拉出來在頁頭要怎麼改呢?謝謝

    阿湯說:

    如果不是佈景本身的問題,其它相關修改都不提供教學謝謝,自行研究

  42. Avatar popoyu表示:

    阿湯大師,您好:
    右側FB按鈕更新後已OK,
    那請問左側"啟用內文左側社群分享按鈕",已經打勾後,要如何才會出現呢?
    謝謝您

    阿湯說:

    內文會自動出現

  43. Avatar popoyu表示:

    阿湯大師:
    您好,我更新布景且設定後,為什麼沒有出現facebook圖示呢?
    請幫忙。謝謝。

    阿湯說:

    有設定對嗎

  44. Avatar 呂小龍表示:

    http://newamazing.tw/
    阿湯兄~我遇到困難了~因為主機商移轉主機,導致上方顯示一排英文,我該怎麼解決呢??新主機關閉一個有漏洞的函數,所以他是出現不支援的程式….

    阿湯說:

    沒意外是他們沒開啟支援 allow_url_fopen 和 allow_url_include,你重下載佈景吧,我更新到最新的1.4版了,用了不同的方式

  45. Avatar 呂小龍表示:

    阿湯大神~請問一下這個模組”首頁”有需要加入G+ 程式碼嗎??

    因為首頁右方的G+跑不出來,但是內頁卻可以,這部份是要如何修正呢??

    阿湯說:

    照理說你丟到模組裡是內外 都會有

  46. Avatar 試用者表示:

    報告:
    我的沒有分頁ㄟ~~(無法顯示分頁)

    阿湯說:

    請到外觀→選單中設定

  47. Avatar Roger表示:

    好~我請他們看看,謝謝囉!

    阿湯說:

    不會

  48. Avatar Roger表示:

    也不是…我是用智邦的付費空間…目前就只有這個佈景主題會出問題…也不知道為什麼耶…還是要重裝wp呢?

    阿湯說:

    空間的PHP版本?還有這應該是主機本身的設定限制~你把這段錯誤丟給智邦就好了,沒意外是他們沒開啟支援 allow_url_fopen 和 allow_url_include

  49. Avatar Roger表示:

    可是我是剛剛裝好wp,沒有開任何外掛…會不會別的佈景主題影響到??

    阿湯說:

    免費空間?如果是的話,無法解決~請用其它佈景吧~

  50. Avatar Roger表示:

    你好~使用你的佈景,套用在wp3.3上面,會出現錯誤耶
    Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in /raid/vhost/rogerdesign.com/www/blog/wp-content/themes/sco_plus/functions/settings.php on line 7

    Warning: file_get_contents(http://steachs.com/theme_update/sco_plus/version.txt) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /raid/vhost/rogerdesign.com/www/blog/wp-content/themes/sco_plus/functions/settings.php on line 7

    阿湯說:

    建議你先停用全部外掛,我的demo是架在3.3上,沒有問題哦

  51. Avatar Bo表示:

    抱歉沒說清楚,
    剛試用 “自訂背景圖片上傳”
    檔案已上傳,也看見預覽圖了

    可是背景抓得還是預設的b00系列囉

    阿湯說:

    麻煩重新下載,修正了

  52. Avatar Bo表示:

    您好,我剛剛試用了一下
    發現無法使用自訂背景說…

    我是用WP 3.2

    阿湯說:

    麻煩重新下載,修正了

  53. Avatar 呂小龍表示:

    阿湯兄~SCO_PLUS 在IE 8 瀏覽格式都會跑掉~

    阿湯說:

    麻煩重新下載

  54. Avatar Event表示:

    阿湯出個製作佈景的詳細教學吧XD

    阿湯說:

    這很難寫吧

  55. Avatar chienyu35表示:

    呃,剛看一下是ie8,更新到ie9就ok了….
    那這就不是什麼問題囉
    沒在用ie,被朋友一講突然忘了ie有新版本了….哈

    阿湯說:

    ie8我是沒去看~有空我會看看的

  56. Avatar 呂小龍表示:

    感謝您的無私分享~趕快來試看看~感覺很棒~

    阿湯說:

    有問題再麻煩回報

  57. Avatar chienyu35表示:

    感謝阿湯哥無私分享,介面很簡潔,小弟很喜歡
    因為小弟都是使用chrome或firfox,所以這兩天試用還沒有遇到什麼問題
    但我朋友用IE看我的BLOG就發現排版都亂了
    於是我用IE檢視BLOG及阿湯兄提供DEMO的網址
    的確都會出現排版亂掉的情形,想必是IE對HTML5支援性不足
    但,似乎絕大多數的人都是使用IE…..不知這個問題有無解決之道?

    阿湯說:

    IE的版本?

  58. Avatar justin表示:

    想請教我在香腸那邊看到fb留言版的文章http://sofree.cc/fb-comments/ ,按照他步驟方式放上去,卻都沒顯示fb留言版的樣式…
    我放置的語法為
    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = “//connect.facebook.net/zh_TW/all.js#xfbml=1&appId=237174843021980”;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));

    放到分頁都會顯示,放到single.php的任何位置,就都看不到….
    想請教是我放置的位置不對還是??? ^^”感恩

    阿湯說:

    相關修改請自行研究囉

  59. Avatar XIN表示:

    阿湯~ 我來看佈景了

    阿湯說:

    才正要從台中回去,真是巧遇

  60. Avatar Lun表示:

    有個問題,內文那個推薦按鈕是推本站還是推文章呢?

    阿湯說:

    點看看就知道了

  61. Avatar thisman表示:

    赞一个!简洁大方且功能强大!如果留言框也加个样式就完美了!

    阿湯說:

    這樣比較簡潔

  62. Avatar Lun表示:

    昨天真的很謝謝你,網站恢復正常嚕(就404 error)
    我一直很想問(香腸去當兵,問不到呀0.0)就是那個作者簡介的(內文)
    該如何達成呢?有用外掛嗎?
    話說我現在又有個問題http://steachs.com/archives/1362
    中的該加哪裡呢?
    我有點頭暈了$#@

    阿湯說:

    加到要顯示的地方

  63. Avatar Lay表示:

    好讚!
    推推推推~
    想抓下來研究一番 :))

    阿湯說:

    記得回報或分享一下心得,好讓我知道下次改進什麼

  64. Avatar justin表示:

    讚^^新手上路來試試看

    阿湯說:

    記得回報或分享一下心得,好讓我知道下次改進什麼

發表留言 »

姓名(*)
信箱(*)