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

2011/12/17 阿湯 WP-themes(佈景)

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

為什麼這次要取名為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是可以自動延伸的粉絲團小視窗，這些都可以在後台選擇要不要使用。

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

後台設定：

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

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

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

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

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

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

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

上一篇：系統工具《PowerTools Lite 2011》了解電腦健康程度，清理不必要的系統垃圾

下一篇：Android軟體《台灣連續劇》手機也能隨時收看熱門的台灣連續劇

作者：阿湯

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

更多關於阿湯的文章》

64 個留言▼

阿呱表示:

2014 年 08 月 15 日16:52:58

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

阿湯說：

這要自行研究一下囉
fuyuanli表示:

2014 年 06 月 07 日21:48:18

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

阿湯說：

好像沒做404
BOGE表示:

2014 年 01 月 14 日17:57:57

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

阿湯說：

more 標籤之前請不要放圖~
promise0924表示:

2013 年 12 月 28 日02:33:36

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

阿湯說：

可以給我網址看一下嗎？
游子權表示:

2013 年 12 月 27 日23:15:56

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

阿湯說：

效果你要抄可以抄，圖片請不要使用我的~當然如果你喜歡網站跟別人長的一樣，我也沒啥好講的..
頭快爆炸表示:

2013 年 10 月 25 日02:09:17

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

阿湯說：

每個版型修改方式不同~要視情況修改
FROG表示:

2013 年 08 月 26 日10:15:11

沒有404頁面嗎?

阿湯說：

有哦
henry表示:

2013 年 08 月 20 日09:04:58

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

阿湯說：

請看一下佈景設定謝謝
henry表示:

2013 年 08 月 19 日19:20:29

好像還是沒有多層選單ㄟ

阿湯說：

是在外觀→選單裡設定哦
Mirai表示:

2013 年 08 月 17 日17:29:21

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

阿湯說：

站內搜尋 Gravatar
herny表示:

2013 年 08 月 16 日19:39:17

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

阿湯說：

圖片+CSS控制
herny表示:

2013 年 08 月 15 日12:08:35

只支援單層選單?

阿湯說：

多層也有
阿源表示:

2013 年 02 月 28 日09:38:00

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

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

阿湯說：

再重新下載一次看看，我有更新囉
怪獸君表示:

2013 年 02 月 15 日12:21:21

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

阿湯說：

再下載一次看看
怪獸君表示:

2013 年 02 月 08 日21:19:08

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

阿湯說：

我試正常說
ㄚ倫表示:

2013 年 01 月 30 日17:41:25

這佈景真的好用…

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

超！棒！

阿湯說：

謝謝
SRDK表示:

2012 年 12 月 10 日00:27:07

已損毀佈景主題

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

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

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

阿湯說：

重新下載也一樣嗎?，但我試是正常的
Renee表示:

2012 年 10 月 21 日01:12:56

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

阿湯說：

應該是有其它原因吧，我就不清楚了
Renee表示:

2012 年 10 月 18 日20:07:20

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

阿湯說：

可以用facebook debug 查一下
Allen表示:

2012 年 09 月 16 日17:26:02

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

阿湯說：

請參考佈景 sco_plus
bobopo表示:

2012 年 08 月 09 日15:50:49

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

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

像scov5

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

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

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

阿湯說：

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

2012 年 04 月 14 日08:15:02

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

阿湯說：

不是bug的修改都請自行研究哦
小遠表示:

2012 年 04 月 10 日10:34:59

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

阿湯說：

已更新
Mr. Jack表示:

2012 年 04 月 09 日00:18:04

問錯地方，重貼一次好了︿︿
阿湯哥的主題很棒！但是我遇到一個困難…
我想改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的部份都請自行研究哦
Roger表示:

2012 年 04 月 06 日22:02:45

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

阿湯說：

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

2012 年 04 月 06 日19:52:16

感謝湯哥

阿湯說：

不客氣
zoe表示:

2012 年 03 月 10 日16:21:20

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

阿湯說：

不客氣…
朱小姐表示:

2012 年 02 月 23 日16:36:36

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

阿湯說：

寄給我好了.
朱朱表示:

2012 年 02 月 10 日09:39:47

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

阿湯說：

你截個圖給我看看
朱小姐表示:

2012 年 02 月 09 日16:34:07

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

阿湯說：

你是用什麼瀏覽器??
阿鑫表示:

2012 年 01 月 25 日09:52:30

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

感謝！

阿湯說：

改以改的~
朱朱表示:

2012 年 01 月 20 日15:05:41

好~我在試試看囉^^

阿湯說：

嗯嗯
朱朱表示:

2012 年 01 月 20 日13:53:10

IE8

阿湯說：

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

2012 年 01 月 20 日12:01:03

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

阿湯說：

IE版本>?
朱朱表示:

2012 年 01 月 20 日11:44:37

沒有改過^^”

阿湯說：

其它人網站都沒有這樣～你先試試把外掛都停用，側邊欄一格一格重新加
朱朱表示:

2012 年 01 月 20 日09:30:12

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

阿湯說：

有改過什麼嗎？
ian表示:

2012 年 01 月 10 日14:08:34

請問阿湯哥
我安裝完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的問題…
孤寂淚表示:

2012 年 01 月 02 日12:30:58

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

再次感謝^^

阿湯說：

慢用
Pcfat表示:

2012 年 01 月 02 日00:06:47

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

阿湯說：

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

2012 年 01 月 01 日14:09:42

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

阿湯說：

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

2011 年 12 月 29 日14:28:47

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

阿湯說：

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

2011 年 12 月 27 日17:37:02

阿湯大師，您好：
右側ＦＢ按鈕更新後已ＯＫ，
那請問左側＂啟用內文左側社群分享按鈕＂，已經打勾後，要如何才會出現呢？
謝謝您

阿湯說：

內文會自動出現
popoyu表示:

2011 年 12 月 26 日20:57:03

阿湯大師：
您好，我更新布景且設定後，為什麼沒有出現ｆａｃｅｂｏｏｋ圖示呢?
請幫忙。謝謝。

阿湯說：

有設定對嗎
呂小龍表示:

2011 年 12 月 26 日09:21:39

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

阿湯說：

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

2011 年 12 月 23 日10:07:29

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

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

阿湯說：

照理說你丟到模組裡是內外都會有
試用者表示:

2011 年 12 月 21 日17:28:49

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

阿湯說：

請到外觀→選單中設定
Roger表示:

2011 年 12 月 21 日14:09:12

好～我請他們看看，謝謝囉！

阿湯說：

不會
Roger表示:

2011 年 12 月 21 日13:45:23

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

阿湯說：

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

2011 年 12 月 21 日13:10:01

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

阿湯說：

免費空間？如果是的話，無法解決～請用其它佈景吧～
Roger表示:

2011 年 12 月 21 日12:12:05

你好～使用你的佈景，套用在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上，沒有問題哦
Bo表示:

2011 年 12 月 20 日22:19:48

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

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

阿湯說：

麻煩重新下載,修正了
Bo表示:

2011 年 12 月 20 日20:57:04

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

我是用WP 3.2

阿湯說：

麻煩重新下載,修正了
呂小龍表示:

2011 年 12 月 20 日14:32:48

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

阿湯說：

麻煩重新下載
Event表示:

2011 年 12 月 20 日13:03:14

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

阿湯說：

這很難寫吧
chienyu35表示:

2011 年 12 月 19 日15:55:59

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

阿湯說：

ie8我是沒去看~有空我會看看的
呂小龍表示:

2011 年 12 月 19 日09:27:35

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

阿湯說：

有問題再麻煩回報
chienyu35表示:

2011 年 12 月 18 日23:45:16

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

阿湯說：

IE的版本?
justin表示:

2011 年 12 月 18 日21:02:13

想請教我在香腸那邊看到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的任何位置，就都看不到….
想請教是我放置的位置不對還是??? ^^”感恩

阿湯說：

相關修改請自行研究囉
XIN表示:

2011 年 12 月 17 日21:32:06

阿湯~ 我來看佈景了

阿湯說：

才正要從台中回去，真是巧遇
Lun表示:

2011 年 12 月 17 日19:44:28

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

阿湯說：

點看看就知道了
thisman表示:

2011 年 12 月 17 日14:35:53

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

阿湯說：

這樣比較簡潔
Lun表示:

2011 年 12 月 17 日11:08:47

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

阿湯說：

加到要顯示的地方
Lay表示:

2011 年 12 月 17 日01:14:29

好讚！
推推推推～
想抓下來研究一番 :))

阿湯說：

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

2011 年 12 月 17 日00:34:38

讚^^新手上路來試試看

阿湯說：

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

Wordpess佈景「Sco_Plus」小檔案：

Wordpess佈景「Sco_Plus」介紹：

後台設定：

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

64 個留言▼

發表留言 »