WordPress Theme│Zero-PIC

Posted in 噴跑吧,WordPress! BY 娜娜子

font+font-

!!此版本已不再更新 請移步此區看最新版


Index Page

!!此版本已不再更新 請移步此區看最新版



趁著這幾天閒下來,localhost/29的原形摳出來寫成了一個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搜尋
1
exclude=
=的後面輸入要排除的頁面ID,如果有多個頁面不要列出在選單裡的話,請用半形標點符號的逗號將ID與ID區隔開來。例如:
1
exclude=1,2,3
上面的寫入結果就是ID1、2、3的這三個頁面都不會再選單裡列出來。

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

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

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

如果在寫文章時沒有設定縮圖的話,則是這樣。
Index Page With No Thumbnail

單篇文章(SINGLE PAGE)


接下來的single post page...還是兩欄,沒有其他選擇,因為我是兩欄控,當然你高興改成三四五六七八欄我也沒有甚麼所謂就是了。
Single Post Page
巢狀留言的部分我的CSS只有寫到第二層,想要加到兩百層的人可能要記得改一下CSS。

而若要使用thcikbox請記得在圖片的連結裡加上
1
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這三個檔案搜尋
1
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模版對照說明:
1
2
3
4
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)


!!此版本已不再更新 請移步此區看最新版



水曜

Mar 10,2010
70 Comments
標籤:
http://kanafu.com/archives/457/trackback
TrackbackList│引用列表

X70

Mistical
Mistical >Reply Quote 三月 11, 2010 at 01:23:38

thanks for releasing this! i love your layouts!

#1
不死娜
不死娜 Reply Quote 四月 4, 2010 at 02:47:02

:P

yehuan
yehuan >Reply Quote 四月 3, 2010 at 04:23:58

sorry , 我下載後有問題
不曉得可不可以幫忙檢查一下
謝謝您^^
很喜歡您的簡單風

#2
不死娜
不死娜 Reply Quote 四月 4, 2010 at 02:46:06

OK的 請將問題貼出來給我唷~ 或者是你也可以點首頁的contact me用聯繫表單發郵件給我~

wpfav
wpfav Reply Quote 八月 9, 2010 at 01:35:50

精品主题啊,好久没见到好主题了,收藏到WPFAV网站推荐。

yehuan
yehuan >Reply Quote 四月 4, 2010 at 11:56:10

下載完後是 0 kb ,
不曉得是我的電腦有問題還怎麼樣 .
我用了Google Chrome、IE 8.0、FireFox都是相同的問題 .
不好意思在麻煩^^

#3
不死娜
不死娜 Reply Quote 四月 5, 2010 at 05:31:31

嗯嗯嗯.....已經更新過載點囉 抱歉之前轉空間亂很多設定都七八糟的......

你再試試看吧:P

Somebody
Somebody >Reply Quote 八月 8, 2010 at 04:17:58

现在都是宽屏了,单栏太窄了不太适合.

#4
不死娜
不死娜 Reply Quote 八月 8, 2010 at 11:36:41

是的,近幾年的寬屏使用率攀升得很快呢!

但1024x768的比例畢竟還是降的不夠低....

可能要再過陣子吧....

mjj
mjj >Reply Quote 八月 8, 2010 at 07:54:33

繁体字看的很纠结

#5
不死娜
不死娜 Reply Quote 八月 9, 2010 at 10:06:39

頁尾有繁簡轉換唷

MiiA
MiiA >Reply Quote 八月 8, 2010 at 13:00:49

完全不会用,新手,没有发现图片页面,还有就是大图在帖内溢出啦/

#6
不死娜
不死娜 Reply Quote 八月 9, 2010 at 10:06:08

開出一篇你問我答囉...http://kanafu.com/archives/470

請看這裡囉!!!

Bryan
Bryan >Reply Quote 八月 9, 2010 at 02:23:04

回复的Gravatar头像可以调小一点么?
你的做主题好好啊~喜欢挤了
你博客这个更赞~

#7
不死娜
不死娜 Reply Quote 八月 9, 2010 at 10:00:29

呵...感謝你愛我的theme:P

開出一篇你問我答囉...http://kanafu.com/archives/470

請看這裡囉!!!

影浅
影浅 >Reply Quote 八月 10, 2010 at 03:49:05

挺喜欢这样简洁的风格,支持下

#8
不死娜
不死娜 Reply Quote 八月 17, 2010 at 07:13:09

我自己也喜歡簡潔!

知更鸟
知更鸟 >Reply Quote 八月 17, 2010 at 22:36:15

功能很不错的模板,感谢分享作品,已转发到WOPUS主题站!

#9
不死娜
不死娜 Reply Quote 八月 19, 2010 at 16:55:08

OK~

一世〤年華
一世〤年華 >Reply Quote 八月 17, 2010 at 22:54:03

好吧,不得不承认 我喜欢了。。。

#10
不死娜
不死娜 Reply Quote 八月 19, 2010 at 16:54:41

:P 喜歡就好!!! THX囉~

mind
mind >Reply Quote 八月 19, 2010 at 13:43:52

使用后發現字體加粗沒有效果,代理均沒效,請問如何修改?

#11
mind
mind >Reply Quote 八月 19, 2010 at 15:44:05

還有一個問題弄不清楚的。
我嘗試把主頁文章的縮略圖改成長方形(就跟你現在主題的形式一樣),但發現“Read More”按鈕位置無法改動,與摘要重疊了,請教改動方法,謝謝。

#12
不死娜
不死娜 Reply Quote 八月 19, 2010 at 16:40:42

哈囉...你好唷 謝謝你幫我找出粗體沒有辦法使用的bug>////<至於more會跑位的原因是字體的大小的改變....我將它改了一下 你下載這個試試看不行再和我說

另外...關於代理沒有效果是...??這個部份我有點不明白耶.....

然後你說的圖片改成長方形是指寬度和我目前站點完全相同的長方形 還是你目前站點上那樣的長方形呢?

因為兩種會有不同的處理方法 所以先問一下這樣~

mind
mind >Reply Quote 八月 19, 2010 at 16:51:37

嘿,謝謝哦。

不好意思,上面所說的“代理”是我留言的時候輸入出現了問題,當時沒發現。

其實主要想說的就是,字體無法加粗而已,使用strong代碼也不沒有效果。

是的,我所說的圖片長方形的寬度指的是跟你目前站上的一樣。其實我是比較喜歡你站上目前的現實方式,自己嘗試修改了一下,卻沒能成功-_-||

#13
mind
mind >Reply Quote 八月 19, 2010 at 16:53:19

又輸入錯字了,抱歉。囧

上面的“現實方式”應該是“顯示方式”才對。

#14
不死娜
不死娜 Reply Quote 八月 19, 2010 at 17:52:30

關於首頁縮略圖吼! 其實我自己用的是最傻瓜的字串方式耶....

因為考慮到某些圖片寬度不足的問題

EX 我在http://kanafu.com/archives/70這篇文章裡使用到的圖片只有300px 但我首頁縮圖的預設寬度是470px 這個時候如果要使用自動縮略圖面臨的就不是"縮"圖而是將圖片"放大"的問題。

但這樣一個將外鏈圖片收到主機臨時夾然後截取放大最後刪除暫存圖片的動作,對於主機來說是很大的負荷,所以我選擇使用手動的字串添加

如果你覺得這樣麻煩的話 我自己針對外鏈圖片的縮圖使用過的有這兩個插件(皆為免費)

1. Post Thumb Revisited http://wordpress.org/extend/plugins/alakhnors-post-thumb/

2. WP-Thumbnails
http://niaolei.org.cn/wp-thumbnails

兩者在功能上不相上下,但前者貌似已經停止開發and網站和好像被掛馬而後者更新很勤縮圖速度很快並且感覺有越來越好的趨勢(重要的是他是華人插件)。

但前者以當初我始用的情況來說有個比較重要的優勢就是 它可以做到我一開始所說的放大圖片的動作(所以相對的速度就是慢!)

由於現在我已經將兩個插件都卸掉了 所以最新的情況你可能要稍微到插件主頁了解下

cAeSaR
cAeSaR >Reply Quote 八月 19, 2010 at 22:16:34

嗯·博主的这款主题太棒了。

#15
James
James >Reply Quote 八月 22, 2010 at 13:58:19

看上去顏色暗了點

#16
不死娜
不死娜 Reply Quote 八月 22, 2010 at 23:16:03

恩...謝謝你的意見囉:P

yoshiki
yoshiki >Reply Quote 八月 23, 2010 at 12:32:41

你好,我用了你的這個zero_pic的wordpress主題,但無法顯示文章的縮略圖呢,我想問一下,在發佈文章的時候,怎麼樣才能讓文章列表顯示縮略圖呢?我用的是3.0.1版本,感謝~

#17
不死娜
不死娜 Reply Quote 八月 23, 2010 at 23:32:53

恩恩發文時候要先設定縮略圖唷!!! 我有拍下來....請看

http://kanafu.com/archives/470

的影片~

影浅
影浅 >Reply Quote 八月 23, 2010 at 20:59:11

http://farm5.static.flickr.com/4079/4919395169_5fef9697df.jpg 看~~为什么图片自动变成宽300了? :(20):

#18
不死娜
不死娜 Reply Quote 八月 23, 2010 at 23:10:18

對不起我打到錯的版本了....!!!!!!!!!!!!!!!!!!!!!(鞠躬)

請用http://file.kanafu.com/theme/zeropic/style.txt
裡頭的內容將下載的css覆蓋過就行了

影浅
影浅 >Reply Quote 八月 23, 2010 at 23:21:59

怎么样让首页摘要显示出图片而不是过滤?

#19
不死娜
不死娜 Reply Quote 八月 24, 2010 at 04:36:03

額.....請問過濾是指?? 把HTML全部清掉的意思嗎....? 如果是的話....要改的就不只是theme囉~

影浅
影浅 >Reply Quote 八月 24, 2010 at 19:42:37

你用什么回复邮件提醒插件的呀

#20
不死娜
不死娜 Reply Quote 八月 25, 2010 at 00:03:05

恩 不是插件哩....是w大在blog上發表的Comment Mail Notify

1 2
我們太聰明 你 做得到嘛? 我每天,都在OL單機版裡過著幸福快樂的日子呢─ 第四張畫─用失去臨摹的成長 不爭氣 零度空間 噢 屁啦!! The Long And Winding Road 其實,這也不是回不回幼稚園的問題 先生,你喝醉了 菱兒生日玩耍記 臍帶