GShine V1.0 新佈景、新配色，全新上架！

久違的新文章終於在昨天偷偷發文了，這半個月來香腸一直瞞著魷魚絲偷偷的在寫佈景、調佈景。經過上次的iNove大翻修，這回我們帶來了新配色以及新的網頁效果，讓各個瀏覽器瀏覽香腸炒魷魚時，效果差異變小，這次也盡可能的減少圖片與外掛用量，讓網站整體速度可以更快、效果可以更炫。

超過半個月沒發文的網站，草都長得跟人一樣高了。其實這半個月來我還是會偷偷來回覆一下大家的留言，只是沒有說很迅速就是了XD。其實會隔這麼久主要是因為暑假到了，可以每天打工，又加上我們加油站對面的那間中油拆掉了，整個生意變好，另外上員工一個個的走了，變成人手不足，幾乎天天要打工…囧！這半個月也不過兩天半的假期，所以每天打工回來只剩下一點力氣可以回留言和做佈景的一些調整，在此就跟大家說聲抱歉了Orz。(迷:繳學費的季節快到了….)

文章目錄
  1. 寫佈景的經過
  2. GShine V1.0 架構和iNove一樣？
  3. 為什麼叫 GShine V1.0 ？
  4. LavaLamp 滑動式分頁選單效果
  5. Google 自訂搜尋功能
  6. 免外掛，在邊欄插入隨機文章、熱門文章
  7. 新增文章版權宣告
  8. 調用jQuery，將留言與引用分開
  9. 留言區加入會動的大數字
  10. 調用jQuery，讓留言區欄位自動隱藏
  11. Ctrl + Enter 快速發表留言
  12. 利用模板產生交換連結
  13. IE下的瀏覽狀況，方塊特效
  14. 底部去底圖，用背景色呈現
  15. IE6的使用者趕快換瀏覽器吧！
  16. 佈景整體感覺如何？

寫佈景的經過

很久之前就想要自己試著寫出佈景，曾爬了一些網路資料，不過好像都有看沒有懂，所以我就去官方載了一個看起來很簡單的佈景，又是我想要的架構，然後就看著佈景原始檔，研究那些WordPress的一些PHP函式，然後自己新增空白文字文件，慢慢的將那些程式碼KEY上去。

當然這時候基本的畫面出來了，但是仍舊沒有樣式(CSS)，所以就開始參考我上一個自己大改版的iNove佈景，參考他的CSS，然後再去佈景的PHP檔案內慢慢的將每個區域CSS要用的id或者是class把他們用div設定好，接著再用Firebug測試，將所需的CSS語法加到style.css上，當然最重要的就是要配合IETester來替IE各版本進行CSS的瀏覽器校正，最後才會有現在這個樣子。

當然寫佈景時有遇到一些程式的怪問題，除了自己爬文之外，當然也要感謝一下長期以來每問必答的風痕影，謝謝他幫我解決程式與佈景CSS的問題，當然也要謝謝他提供給我的Firefox圓角CSS語法XDD。

GShine V1.0 架構和iNove一樣？

GShine V1.0 新佈景、新配色，全新上架！

本站第一個放出消息網站佈景更新的訊息應該是噗浪上，當然噗之下看到很多人回應，大家的第一個想法應該是「只是配色不一樣？」。因為我自己很喜歡這樣排版的架構，所以當初才會看上iNove這個佈景，所以如果是我自己要用的佈景，寫的架構應該就是這樣成型了。我喜歡的模式就是左上角可以擺LOGO，LOGO之下是一橫排的分頁按鈕，再來左邊是文章，右邊是邊欄，而邊欄最好可以是中間欄可以瘦一點，因為我可以塞好站連結與分類，所以我怎麼改都會和原佈景架構一樣XD。

這次的GShine V1.0主要就是參考我上一版的iNove，根據原本的CSS設定重新整理，然後再自己定義一些新的東西。當然這次我也已經去圖化，把所有跑圖的地方全部用CSS的背景顏色控制，不過還是有少部分採用圖，盡可能的減少圖片使用，除了可以減低流量消耗，當然還可以加速網站。

為什麼叫 GShine V1.0 ？

因為我目前和其他朋友在規劃一些東西，那是什麼東西呢？這就有請吳克群唱「什麼東西」，相信他會替您解答的！目前我們還是在低調進行，反正真相只有一個，到時候問柯南或是毛利小五郎你就知道了。

LavaLamp 滑動式分頁選單效果

先前分頁按鈕只是單純滑鼠移過去可以換背景色，這回改成滑動式按鈕，這個滑動按鈕的寫法則是參考mg12的這篇文章，這個功能是採用jQuery的效果。不過他本來是跑圖片，但是跑圖片在IE6瀏覽會有延遲的問題，所以我就將他改成背景色塊解決延遲問題。

LavaLamp 滑動式分頁選單效果

因為Firefox有CSS語法可以設定成圓角，但是IE無法讀取那種語法，所以在IE下看就變成一塊塊的，不過還是會滑動就是了XD。

LavaLamp 滑動式分頁選單效果

Google 自訂搜尋功能

一直以來我的站內搜尋都是採用Google搜尋，因為他的搜尋精準度比WordPress內建的還要高，這也就是我每一版的佈景都是採用Google當成站內搜尋。不過上一版的佈景不知道什麼原因，採用Google自訂搜尋時，顯示的搜尋結果無法正確呈現在分頁中，所以之前採用「Google Ajax Search 」，但是這個搜尋結果顯示方式雖然很酷，不過缺點就是一開始載入搜尋框時會很卡，因為這次佈景架構自己摸過，所以這次可以正確使用「Goolge 自訂搜尋功能」。

Google 自訂搜尋功能

免外掛，在邊欄插入隨機文章、熱門文章

為了落實網站加速的目的，我盡可能的免去外掛的使用，盡量採用內建的PHP函數呼叫一些外掛可以做到的事情，因此就參考了muki這篇「不用插件直接實現五種文章代碼」，將隨機文章、熱門文章直接寫入邊欄，採用內建的函數可以加速網站的運作。

免外掛，在邊欄插入隨機文章、熱門文章

新增文章版權宣告

有鑑於大家都把每篇文章誤認是香腸發文，常常害我哭笑不得，大家不要忘記了，網站上還有另一位寫手，他叫做魷魚絲，請大家跟我念一遍：魷.魚.絲！(迷:這個講法怎麼跟muki的是.意.外很像XD)

之前每篇文章都會在左下角加上小小的作者字樣，不過我發現好像很少人會去注意，所以這次就把它整個加大，並且加入文章授權分享規則，來讓大家更清處的了解本站的分享原則以及文章作者到底是誰Orz。

新增文章版權宣告

調用jQuery，將留言與引用分開

留言區最討厭的就是留言和引用混在一起，有時候會分不清楚哪則是引用哪一則是留言，如果回錯了會很囧。所以參照先前iNove的設計，將留言和引用分開，不過先前是採用點擊方式才可以切換到另一邊，這回滑鼠移過去就可以自由在留言和引用間徘徊喔！留言分開是參考mg12的「WordPress 2.7 Trackbacks 的兩種處理方法」，切換功能是參考阿諾的「調用jQuery特效實作(Tab控件篇)」。

調用jQuery，將留言與引用分開

留言區加入會動的大數字

雖然這不是什麼特別的東西，因為我之前就有放了，只是字體小了些，這回特地把它改的大大的，讓他感覺很像印在上面的，而且還調成滑鼠移過去會變動，當然加入這些數字主要是參考重灌狂人的「讓你的WordPress留言板顯示第1樓、第2樓…的留言統計數字」。

留言區加入會動的大數字

調用jQuery，讓留言區欄位自動隱藏

只要你有在本站留言過，留言區的欄位將會自動被隱藏，這種功能第一次見到應該是在iNove，不過這次GShine V1.0並沒有移植原本iNove的寫法，而是採用jQuery的特效，參考阿諾的「調用jQuery特效實作(隱藏迴響欄位篇)」，讓留言區欄位可以自動隱藏，展開時可式滑動展開唷！

調用jQuery，讓留言區欄位自動隱藏

Ctrl + Enter 快速發表留言

習慣使用論壇的朋友應該很熟悉Ctrl + Enter可以快速發表文章或是留言，其實這只是一串Javascript，加在留言區就可以了，不過前一個iNove佈景我有試著加入，但好像都失敗XD。這個功能是參考about Dogg的「WordPress Hack：快速鍵 Ctrl + Enter 送出留言」

Ctrl + Enter 快速發表留言

利用模板產生交換連結

一開始就有提到這次的佈景就是要減少外掛的使用，所以交換連結頁面我採用製作模版的方式，免去使用外掛，直接用內建的PHP函數呼叫資料庫內的連結資料並顯示在網頁上。

利用模板產生交換連結

IE下的瀏覽狀況，方塊特效

因為我使用很多原角的CSS在網站上，不過這種語法在IE下看是完全無效的，所以若您是IE的使用者，看不到我用CSS設定圓角的部分。

IE下的瀏覽狀況，方塊特效

底部去底圖，用背景色呈現

之前底部是採用一張寬度900多px的圖，當然採用圖片效果看起來會比較棒，不過圖片真的比較吃流量又會拖速度，所以我改成使用背景色去呈現底部的效果，當然為了和網站正上方的原角做呼應，我一樣使用CSS控制底部的圓角，所以Firefox的使用者可以清楚看到網站最底下是原角。但先前說過，那種CSS在IE下無法解讀，所以IE的使用者看本站最下方footer部分應該是看到方角。

底部去底圖，用背景色呈現

IE6的使用者趕快換瀏覽器吧！

最近傳出好像好幾個大網站未來不再支援咱們XP內建的IE6瀏覽器了(就是你上網前要按的那顆藍藍的球，英文字母小寫e)，在重灌狂人那邊發現了好用的語法可以在IE6的瀏覽器上特別顯示警告標示，於是就參考狂人的「在網站加入警告標語，建議IE 6.0的使用者升級！」，自己新增CSS去顯示提示訊息，告知親愛的IE6使用者，你們該換瀏覽器了！在此我還是比較推薦使用Firefox。

IE6的使用者趕快換瀏覽器吧！

佈景整體感覺如何？

最近看到muki把新佈景上架了，害我也手癢癢趕快將這次的GShine V1.0上架。這次佈景上架後為什麼沒有馬上發文呢？因為我比較龜毛，佈景上架了之後，當然首先就是先看看各個頁面是否顯示正確？語法有沒有錯誤？趕緊進行校正，不過當我校正完後，發現已經晚了，所以就先睡覺了。然後不知不覺過了兩天，趁著難得的放假開始把文章補完，以及把一些該做得事情完成XD。

這次配色主要是灰色系，感覺不會有黑色的壓力也不會有白色的刺眼，在瀏覽器相容性部分應該也處理的差不多，大致上都可以正常瀏覽，目前測試在Firefox、IE6、IE7、IE8、Google Chrome都可以正常瀏覽與操作，如果您有發現Bug或者是覺得哪裡配色很怪，都可以在下方留言給我們，我們會盡可能的調到大家都適應的效果。

在Google News上追蹤我們最新文章
標籤
香腸
香腸

喜歡在網路上透過文字與圖片分文章教學，默默地用鍵盤烤了9年的香腸。另外還身兼阿腸接案餬口飯吃。對了，別叫我阿腸，請叫我香腸，這樣我才知道你看我部落格長大的。

文章: 1781

相關文章

22 則留言

  1. 你好～我是WP新手～這幾天拜讀你的文章～發現你們真的很好才華，我自己搞了一個多禮拜，一直搞不好～想請教大大～你們若幫客戶架一個WP的話大約收多少呢？如果直接套版的話會不會比較優惠呢？若OK的話請跟我連絡 阿光

    香腸回應：
    已經回信給您。

  4. 在IE上也可以用出圓角
    不過很麻煩
    原理就是用背景repeat的方法
    讓圓角圖重疊

    香腸回應：
    嗯~ 我知道阿~
    不過這樣程式碼會變太多，css搞得太複雜，跑起來應該也會不太順~

  6. 這次的很不錯！
    我之前也是逛到這看到您用 iNove，從此愛上這種版型了，
    不過 iNove 的確有點肥，一直想找時間瘦身一下= =

    題外話：
    香腸你最近是不是有幫某科大通識中心架一個 WP 呀？
    因為看到底部 GShine 的網址很眼熟^^

    香腸回應：
    哈哈~ 不小心被發現了~ 不過你們學校現在停電中XD

  7. 說起來～
    剛剛我在研究網頁設計時，看到一篇文章標題
    「欲練CSS，必先宮IE」
    然後讓我決定用圓角拉～～
    （好像是新版 CSS 新增的功能＠＠）

    附註：據說 IE 算數學也不太好，margin 有時候會算不出來……

    香腸回應：
    IE的margin會解釋成2倍大。

  8. 作者總算變顯眼了 ~

    突然有個想法，雖然和 “去圖化” 相違背：
    如果直接在文章背景放個大大的，半透明的單隻香腸或魷魚代表作者好像也不錯

    香腸回應：
    噗~ 那很吃流量 飛踢~~ XD

  9. 先恭喜你換版面，真得很不錯!

    PS:

    GShine V1.0<<這版權部分有玄機? Record expires on 2010-05-21 (YYYY-MM-DD) Record created on 2009-05-21 (YYYY-MM-DD) 連域名都註冊了，要搞大事業了喔~

    香腸回應：
    難道….你是柯南~

  12. 回阿諾：沒錯沒錯…你跟香腸都是龜毛派的!!相較之下我好像就是隨便派 冏

    沒想到香腸連換個佈景都寫的好詳細，再回頭看我的改版文整個隨便 orz…
    看來這一版暗藏很多玄機，你沒介紹我還沒發現咧
    總之恭喜改版成功^_______^

    香腸回應：
    我的是比較囉嗦~ 你知道的XD
    感謝muki的熱門文章語法，太威啦~

  13. 噗~~
    先恭喜一下啦!
    我邊看香腸的文章邊掉淚…
    因為一樣的都新佈景上架的文章~
    香腸寫成這樣~…我勒..寫成那樣= =
    嗚嗚嗚…
    回家閉關修練….
    哇哈XDD

    香腸回應：
    不會啦~ 只是這是第一個自己弄的佈景，有什麼特色就是要好好介紹囉 ;)

  14. 對於一些小地方其實平常很難有人注意到
    但是就是看起來的小感覺
    重要的部份還是整個網站的速度
    越快越好～
    使用者感覺最明顯！

    香腸回應：
    沒錯！不過我覺得細節也是要注意。
    網站速度如果可以再提升我也會盡力去處理的 ;)

  15. Google Chrome也看不到圓角說
    Ctrl+Enter好像在Google Chrome也無法使用

    香腸回應：
    這我就不清楚了，雖然Chrome是Google推出的，瀏覽速度也很快，不過我真的不知道怎設定Chrome的校正。

  16. 哇喔，諾的特效有派上用場耶，而且還是運用在不同的地方，好開心。>”< jQuery真的是好物... 昨天諾把迴響改成Gravatar大頭貼圖片(抓官方的圖片沒流量XD)，調用SQL函數抓出迴響內容塞進超連結的title標籤，再用jQuery動態把title移轉產生div標籤並隱藏。 什麼都好，但好死不死也是IE對CSS屬性中display:none;的支援不好...導致footer會比其他各牌瀏覽器硬是多出0.5CM...害諾一直耿耿於懷。ˊˋ 難怪muki今天說我跟你一樣...原來是指龜毛啊。=..=a

    香腸回應：
    哈是諾哥耶~
    你的文章真的是太好用了，在此跟您跪拜一下。
    IE 真的不好校正，校正到都想直接設定IE禁止開啟了~XD

    原來你一開始沒有懂muki的梗阿XD

  17. 香腸你真是設計的太棒了！
    真的！

    大概只有標題可以換明體跟san-serif
    和打完收工可以對齊留言框右緣這樣。

    暑假也要來改版，但是好多東西化的出來不會寫…

    香腸回應：
    標題換字型@@?
    打完收工那個其實我很像要讓他左邊一點，不過調很久還是沒調過來。
    期待你的改版唷;)

  18. 有打算開放下載嗎?兔爸第一個會用
    最近也覺得iNove很吃速度

    香腸回應：
    先前有想說要公開分享，不過好像有些東西沒通過W3C檢測。
    所以目前可能還沒有XD

  19. 嗯嗯。
    我最想說的就是，
    這個新佈景跟你上一個inove佈景基本上是一樣的(囧)。
    只是導航條有了一點flash的味道…
    更改了地方很不顯眼啊(悶)。

    「打完收工」是利用了微軟正黑體是吧XDD
    (我是個字體控…默)
    不過我覺得上述字體不適合用在body之上，
    如果調成12-14px的話會很醜。
    所以我一直在用Meiryo…(喂喂這不是字體的問題吧)

    香腸回應：
    因為其它東西沒什麼要加入了，大概就這樣子了，我比較重速度XD

  20. 寫的 漏漏等 看的人 好辛苦

    我覺得 和上一版沒什麼太大差別 (香腸:那我不就白改 ~>_<~) ) 我個人覺得差異很大的地方 1.打完收工的字樣 總算變漂亮了 2.google搜尋 (之前載入慢 但搜尋的準 現在都到1x頁(雖然不重要)) 3.側邊欄 廣告似乎變少了 (載入速度真的變快) 4.顏色感覺的怪怪的 可能熟悉了 其他的 懶得說了 先跑去睡了

    香腸回應：
    1. 調微軟正黑體，然後改CSS。
    2. 搜尋也把喘息加入了。
    3. 速度是王道，把不重要的踢掉。
    4. 可能真得是唷~XD

    晚安囉~

發佈留言

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

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。