GShine V1.0 新佈景、新配色,全新上架!

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


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

寫佈景的經過

很久之前就想要自己試著寫出佈景,曾爬了一些網路資料,不過好像都有看沒有懂,所以我就去官方載了一個看起來很簡單的佈景,又是我想要的架構,然後就看著佈景原始檔,研究那些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或者是覺得哪裡配色很怪,都可以在下方留言給我們,我們會盡可能的調到大家都適應的效果。