Index Page

趁著這幾天閒下來,kanafu.com的原形摳出來寫成了一個theme。zero-pic顧名思義就是零圖片的意思,老實說,我原本連JS也不想載入((純CSS最高!)),但為了巢狀留言的回覆部分設想不得已還是載了個comment-reply.js,搞到最後索性連wordpress自帶的thickbox也一起整了進去。

所以,如果要說這個theme最大的好處,應該就是速度"無敵爆炸霹靂快"這樣,畢竟只加了兩個JS而且是只在有用到的地方才寫。另外由於個人寫作習慣,所以區塊跟區塊間都有做code的標註,有興趣的人可以拆開來看看大家研究研究這樣。

然後因為我的空間很弱沒有辦法放demo site,所以就只好來個看圖說說theme(點小圖可看原始版!!)



首頁(INDEX PAGE)


↑最上面那張就是index page,預設兩欄
Page Menu
右上方的選單主要是從page裡抓出來的,預設是只要新增頁面就會增加選項。如果有不想要列出的頁面,打開header.php搜尋
exclude=
=的後面輸入要排除的頁面ID,如果有多個頁面不要列出在選單裡的話,請用半形標點符號的逗號將ID與ID區隔開來。例如:
exclude=1,2,3
上面的寫入結果就是ID1、2、3的這三個頁面都不會再選單裡列出來。

摘要的部分我是直接從全文擷取字數(中文OK),字數更改方式如下。

index.php裡搜尋
0, 300
300那邊。

至於縮圖就是用wordpress自帶的post-thumbnails寫的,考慮過幾個Script ,但只要一想到將外連圖片緩存到主機->縮圖->刪除原始大圖的這個過程,就不得不又擔心起爆空間的問題。當然另外一個更大的問題就是...我懶!總之最後我就是用自帶縮圖了,所以也意味著這個theme也是2.9up

如果在寫文章時沒有設定縮圖的話,則是這樣。
Index Page With No Thumbnail兩欄控,當然你高興改成三四五六七八欄我也沒有甚麼所謂就是了。
Single Post Page
巢狀留言的部分我的CSS只有寫到第二層,想要加到兩百層的人可能要記得改一下CSS。

而若要使用thcikbox請記得在圖片的連結裡加上
class="thickbox"
Single Post Page - Thickbox
然後是一些內文的樣式,這是我從官網上COPY下來的文章範本。
Single Post Page - Elements Single Post Page - Worth A Thousand Words


作品集(PORTFOLIO PAGE)


再過來就是portfolio page的部分,也可以當成相本,但我個人是覺得用WP做相本在管理上手會很痠就是了(除非你照片不多)。這裡我是抓tag寫的,也就是說當你想要將文章收進portfolio page裡時,就要加上portfolio這個tag,而portfolio這個tag在頁面上(single的tag列表、側欄的tag clound)我把它排除掉了,避免造成一些在像是tag clound裡的portfolio會變得無敵霹靂大的BUG。
Portfolio Page
portfolio page的文章列表,主要是顯示圖片跟摘要,游標滑過時才會出現標題,側欄的portfolio則是隨機抽出10篇
Portfolio Page - Thumbnail Hover Portfolio Page - Sidebar
如果想要修改Random Portfolio的數量,請打開404.phpsearch.phpsidebar.php這三個檔案搜尋
showposts=10
10改成要顯示的數量。


留言版(GUESTBOOK)


zero-pic有自帶一個用page寫的留言版。可選擇一欄(Guestbook - One Column)或兩欄(Guestbook - Two Column),經由建立page時選擇頁面模板(Template)做設定。
Guestbook - Two Column Guestbook - One Column
如果不想要留言版的話,不要建立留言page便OK。


預設頁面模版(PAGE TEMPLATE)


建立其他page時同樣則也可以選擇一欄或者兩欄,當中又各分為有無留言引用列表,同樣是經由選擇Template決定。page模版對照說明:
Page - One Column:一欄(下圖左一)
Page - One Column No Comment:一欄無留言引用列表(下圖左二)
Page -  Two Column:兩欄(下圖右二)
Page - Two Column No Comment:兩欄無留言引用列表(下圖右一)
Page - One Column Page - One Column No Comment Page -  Two Column Page - Two Column No Comment


TIP(小補充)


最後就是404page.phpsearch.php 這兩個檔案的側欄部分是獨立的,不受sidebar.php的控制。


瀏覽器支援:SafariOperafirefoxGoogle chromeIE5.5up
截圖拍攝環境:1024x768firefox
WP版本支援:2.9up

Valid XHTML 1.0 Transitional Valid CSS!


FILE DOWNLOAD(檔案下載)


檔案下載(tar/zip):

WPTHEME│ZERO - PIC (ZIP)WPTHEME│ZERO - PIC (TAR)


下載後有問題or不怎麼會使用的捧油請移步到→"WordPress Theme│Zero-PIC 之 你問我答",裡面會將大家常遇到的問題一併作答覆唷!