傅不死 FullHouse » 主題 http://kanafu.com 生而在世，我很抱歉。。。 Thu, 04 Aug 2011 21:40:12 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 把12月洗乾淨，切起來等老了回憶 http://kanafu.com/archives/515 http://kanafu.com/archives/515#comments Thu, 23 Dec 2010 07:16:34 +0000 娜娜子 http://kanafu.com/?p=515 1. 飛進幸福裡的飛機。 印象中，我只是眨了眨眼。
轟隆隆的客機轟隆隆的把我帶回快樂裡，也帶回了那個悠悠哉哉的傅小娜。抽掉了meeting的之後，原來日子真的是可以用漫無目的用大笑填滿。

幸福的復活假期，如果是永遠，那該有多好？

2. 關於寒冷這件事。

如果用氣像播報員的方式說明，這就是零下的低溫，可世上卻偏沒有任何一則氣象報導能夠深刻的表達出低溫到底是怎麼一回事。

我不是氣象播報員，十二月是白色的，冷！冷！冷！如此而已。

3. 耶誕前夕的憂鬱症候群。

其實，我不想讓耶誕老人看到此時這般哭喪的臉的我。明明是期待的，也精心準備著的，卻在千鈞一髮之際變得鬱鬱寡歡了起來。害怕太多的喜悅，會是太快的結束。

火紅紅的耶誕小洋裝啊，請你給我力量！

4. 娜吃了那世界─

好像從睜開眼到閉上眼，覓食與進食成為我生活的最大目標。可惜的是，無論怎麼吃到不想吃，體重還是很不給面子的往下掉。好不容易的我好不容易的從眾裡的千百度一路吃到了燈火闌珊處，終於，也算是明白了萬般皆是空的道理。

只是，那傳說中的冬肥與心寬體胖，請問你們到底是藏到哪去了？

5. 小小披頭四

和利物浦小男孩的中文之旅開始了，謝謝你那種純粹而乾淨的信任和支持，在當我告訴你我要用注音符號取代你習慣的拼音時。

真的謝謝你，還有，對不起。
對不起我實在不該在正規的課程之外，教你說那些亂七八糟的小東西。

6. 桃花劫

和老大的媽媽拿了兩個人的生辰去合八字。關於算命師的預言，在那個還沒有出現的2011年裡，我會遇上一個叫做桃花劫的東西，並且，還是帶血光的。聽起來有些嚇人，但再嚇人也嚇不過他信誓旦旦的說著老大娶到我將會倒大楣的警告。

回家後，我一直很後悔當下沒有翻掉桌子然後再走過去踹他個兩腳。

7. 直接，是可以收斂的。

我真的很討厭那些，被曲解為個性耿直的沒禮貌行為。說穿了，也只是自私的藉口罷了！的確，你絕對是主角，在你的世界 裡。但也許你忘記了，在我的世界裡，我同樣的也有權利擁有一套規矩。交集，是用雙方的讓步磨合出來的，不是一句「我的個性比較直接。」就可以讓人與人之間 的天秤失衡。所以，不要再在莫名其妙的大發脾氣，或者沒有約定就直接跑來按我家門鈴的之後，用『直接的個性』把一切說得合情合理。

親愛的，我沒有義務要配合的，關於你的那些直接。

8. 鏈情記

A愛上了B，但B卻苦戀著C。是誰與誰的生死契闊？又是誰的春泥護花？為什麼你們會變成這樣呢？然後，我終於想起了生物學裡的食物鏈。

又是一條纏上後就再也是無解的鍊子，而最最可怕了，也不過你的那一句無悔。

9. 向田邦子的五次方

用三毛養在心裡的那匹馬在自由裡跑著，又在沿途的風景中讚聞了綻放在張愛玲手中的紅白玫瑰，最後，在歸途的午夜遇上了向田邦子的一朵薔薇。

好喜歡溫和地敘述著瑣碎日常的邦子小姐，喜歡讓那些看在眼裡的薔薇，在收進心裡後開成了幽微的百合。

思い出トランプ [文庫] - 向田 邦子 向田邦子の恋文 [文庫] - 向田 邦子 向田邦子の青春―写真とエッセイで綴る姉の素顔 [文庫] - 向田 邦子 無名仮名人名簿 [文庫] - 向田 邦子 女の人差し指 [文庫] - 向田邦子
由左至右為：思い出トランプ 、向田邦子の恋文 、向田邦子の青春―写真とエッセイで綴る姉の素顔 、無名仮名人名簿 、女の人差し指

10. MSN、Facebook、Gtalk還有Zenphoto。

這是兩兩為一組的反義名詞，在我的世界裡。關閉了FB和MSN的account，然後把屬於我的圈圈縮小到Gtalk裡，再見了，瘋狂廣告好友還有莫名的制約，那種用置入性行銷堆疊而成的流行，真的，我追不起。

然後是拖拖拉拉的總算又是把相簿給放上去了，一樣是Zenphoto下的產物，卻又順便重寫了下Theme，這一次，終於是不再委屈求全的縮在文章區塊了。

俺の写真置き場

11. 要抱怨的事情太多了，那就怨天吧！

說倒楣，就絕對是徹徹底底的倒楣！話說這篇文原本預計是瑣碎到第十記便END了，結果好死不死就在我正打算按下存檔的那一刻‧‧‧

主、機、死、掉、了！！！！！

是有沒有這麼剛好的？話說阿姨我也好久久久沒有寫文了，就這麼準準準的遇上死機，而且還是存檔那一刻‧‧‧

老天爺你果然是在玩我啊啊啊啊啊啊啊啊啊啊啊！

太棒啦三不五時的就給我來一下天意弄人，一弄就弄了24年過去，到底甚麼時候才輪得到我弄回去啊你說說看啊你─

]]> http://kanafu.com/archives/515/feed 56 不如，就來寫個AJAX的聯繫表單吧 http://kanafu.com/archives/494 http://kanafu.com/archives/494#comments Mon, 13 Sep 2010 01:24:36 +0000 娜娜子 http://kanafu.com/?p=494 ContactME

這次重寫大作戰裡丟掉了之前很死忠的contactform7，沒錯啦它號稱是個極輕量插件，但‧‧‧

既然身為插件就要有被拋棄的覺悟啊啊啊！！

很好總之我把它丟掉了，原本打算直接放個mail地址在bio頁了事，但後來想想還是放一個以備不時之需。果然，這個決定是正確的- . . -+，才剛改完版就遇上留言欄無能事件...平時感覺很雞肋的ContactMe 在瞬間整個就是閃閃動人哪~

well~廢話結束，來說說是怎麼寫的吧！在開始之前請確定你家主機的php可以使用mail()函數，如果不可以的話可以到旁邊領便當回家了~

00. 功能預想


首先，我幻想中的contactform大概要有以下功能：

1. 姓名、電郵、內容欄位
2. 表單驗證，提示成功或者失敗的訊息。
3. 沒有了，就這樣又不是什麼超專業大站台 這樣很夠用了~

OK既然目標明確那就開始吧！


01. 建立page theme


由於每個人的header跟footer是不同的，不過一開始先不要去管它~先寫好表單再考慮要怎麼把它塞進去的問題- . . -

老規矩打開你的文字編輯器，在空白的html裡載入jquery，這個之後在驗證表單時會用的上。然後，在body內建一個id為mailform的DIV，最後記得在code一開始加入WP的page宣告。 

1
2
3
4
5

<?php
/**
Template Name: ContactForm
 */
?>

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-TW">
<head profile="http://gmpg.org/xfn/11"><!-- 關係宣告 -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><!-- 語系宣告 -->
    <title>聯繫表單</title><!-- 網站標題宣告 -->
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <?php wp_head(); ?>    
    </head>
    <body>
        <div id="mailform">    
 
        </div>
    <?php wp_footer(); ?>    
    </body>
</html>


把它存成mailform.php後丟到theme的資料夾下，到後台確認下新增page時模板裡有ContactForm的選項就是OK了


02. 表單內的事件判斷和接收的郵件內容


在剛才那個mailform的div裡替表單加一些簡單的判斷句。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<?php
//如果表單被送出
if(isset($_POST['submitted'])) {
        //captcha檢查
        if(trim($_POST['checking']) !== '') {
            $captchaError = true;
        } else {
        //確認姓名欄位是否有填寫
        if(trim($_POST['contactName']) === '') {
            $nameError = '請輸入您的名字';
            $hasError = true;
        } else {
            $name = trim($_POST['contactName']);
        }
        //確認郵件欄位是否有填寫以及格式是否正確
        if(trim($_POST['email']) === '')  {
            $emailError = '請輸入您的電郵';
            $hasError = true;
        } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
            $emailError = '請輸入正確的電郵格式';
            $hasError = true;
        } else {
            $email = trim($_POST['email']);
        }    
        //確認內容欄位是否有填寫
        if(trim($_POST['comments']) === '') {
            $commentError = '請輸入您的內容';
            $hasError = true;
        } else {
            if(function_exists('stripslashes')) {
                $comments = stripslashes(trim($_POST['comments']));
            } else {
                $comments = trim($_POST['comments']);
            }
        }
        //如果通過上述判斷，則寄出下面的郵件
        if(!isset($hasError)) {
            $emailTo = 'mail@your.com';//收到聯繫表單的電郵
            $subject = '【'.$name.'】 在傅不死 FullHouse使用了聯繫表單';//信件標題
            $sendCopy = trim($_POST['sendCopy']);
            $body = "名字: $name \n電郵: $email \n\n$comments";//信件內容
            $headers = 'From: 傅不死 FullHouse <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
            mail($emailTo, $subject, $body, $headers);
        //如果訪客勾選了寄送確認郵件，將會收到下面的郵件內容
            if($sendCopy == true) {
                $subject = '【'.$name.'】 感謝您在傅不死 FullHouse使用了聯繫表單';//信件標題
                $headers = 'From: 傅不死 FullHouse <no-reply@your.com>';//顯示的寄送地址
                $body = "親愛的 $name.\n你的郵件已經成功送出，下面是你送出的訊息。\n\n名字：$name.\n電郵：$email.\n訊息：\n$comments.\n\nKana在閱讀信件後，會盡快的將回覆傳送至$email.，請耐心等候。\n\n(此郵件由系統自動發出, 請勿回覆)";//郵件內容
                mail($email, $subject, $body, $headers);
            }
            $emailSent = true;
        }
    }
} ?>


上面的收件地址請記得改成你自己的mail，否則發到死也不會有人理你的相信我~


03. 建立郵件送出成功以及失敗的訊息


55
56
57
58
59
60
61
62
63
64

<?php //如果郵件成功寄出，跳轉到感謝訊息
if(isset($emailSent) && $emailSent == true) { ?>
    <div class="thanks">
        <h1><?=$name;?></h1>
        <p>感謝您使用本聯繫表單，您的郵件已經成功被送出，我們將儘快與您聯繫。</p>
    </div>
<?php } else { //如果郵件發送失敗，原地提示錯誤 ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
    <p class="error">寄送失敗，請依照指示檢察下方的欄位是否有正確填寫。</p>
<?php } ?>


04. 建立表單欄位


至此，判斷句都結束的差不多了，接下來就是開始重頭戲的表單欄位。
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

  <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
        <ul class="forms">
            <li class="mailform_name"><label for="contactName">姓名</label>
                <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
                <?php if($nameError != '') { ?>
                <span class="error"><?=$nameError;?></span>
                <?php } ?>
            </li>
            <li class="mailform_mail"><label for="email">電郵</label>
                <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="requiredField email" />
                <?php if($emailError != '') { ?>
                <span class="error"><?=$emailError;?></span>
                <?php } ?>
            </li>
            <li class="textarea mailform_textarea"><label for="commentsText">您要遞送的訊息</label>
                <textarea rows="20" cols="30" name="comments" id="commentsText" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                <?php if($commentError != '') { ?>
                <span class="error"><?=$commentError;?></span>
                <?php } ?>
            </li>
            <li class="inline">
                <input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">是否要收到由系統發送的確認表單郵件？</label>
            </li>
            <li class="screenReader">
                <label for="checking" class="screenReader">如果您想要成功送出表單，請勿填寫此欄位</label><input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />
            </li>
            <li class="buttons  mailform_buttons">
                <input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">Email me »</button>
            </li>
        </ul>
    </form>
<?php } ?>



05. 加入AJAX


把寫完的mailform.php重新存在theme資料夾下，然後刷新你的page後應該會看到這樣赤裸裸的聯繫表單，在嫌棄它醜前請先測試一下是否能正常發送。

聯繫表單 錯誤提示 成功送出 有勾選收取確認表單時訪客收到的信 自己收到的通知

好啦，基本上主要功能就差不多了，不過這年頭什麼都要給它來個AJAX一下，那我們也只好來不免俗的跟它趕一下流行這樣~ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

jQuery(document).ready(function($) {
    $('form#contactForm').submit(function() {
        $('form#contactForm .error').remove();
        var hasError = false;
        $('.requiredField').each(function() {
            if(jQuery.trim($(this).val()) == '') {
                var labelText = $(this).prev('label').text();
                $(this).parent().append('<span class="error">請輸入'+labelText+'</span>');
                hasError = true;
            } else if($(this).hasClass('email')) {
                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                if(!emailReg.test(jQuery.trim($(this).val()))) {
                    var labelText = $(this).prev('label').text();
                    $(this).parent().append('<span class="error">請輸入正確的'+labelText+'</span>');
                    hasError = true;
                }
            }
        });
        if(!hasError) {
            $('form#contactForm li.buttons button').fadeOut('normal', function() {
                $(this).parent().append('<img src="loading的圖片位置" alt="Loading…"/>');
            });
            var formInput = $(this).serialize();
            $.post($(this).attr('action'),formInput, function(data){
                $('form#contactForm').slideUp("fast", function() {                   
                    $(this).before('<p class="thanks">感謝您使用本聯繫表單，您的郵件已經成功被送出，我們將儘快與您聯繫。</p>');
                });
            });
        }
 
        return false;
 
    });
});// end jquery

把上面的code存成contactform.js後在contactform.php把它載進去。(loading的圖片位置記得改下)
這樣，一個獨立的聯繫表單就完成了，假設今後要改版休業什麼的直接載個CSS然後設成主頁訪問就不怕訪客亂竄無門了。


後記. 通通給我塞進去！


現在，表單寫完了也測試完了。但在一般的情況下，我們會希望它可以和主題樣式結合在一起。這個部份每個主題不大一樣，如果你是自己寫我想你會很清楚該怎麼做，如果是下載來的主題那就可以按照下方的方法試試，只要你的主題作者沒有太叛逆基本上是OK的。

打開page.php，正常來講會有have_posts的迴圈，而裡面的the_content部分就是page內容的展示區，也就是你在後台編輯page以後會出現的文字圖片什麼鬼的。在它的後一行，把mailform.php裡將<div id="mailform">...</div>完整的拷貝下來貼上，再把jquery和contactform.js載在頁底就OK了。

如果主題內已經有jquery的載contactform.js就好，當然你也可以把contactform.js收到你主題原有的js裡。再來就是在css裡調一下它的臉，這部分自由發揮。


雙D兄弟送上


展示/下載(DEMO&DOWNLOAD) :

展示頁面 Note: There is a file embedded within this post, please visit this post to download the file.

註：
ContactForm裡包含了contactform.php+contactform.js，將php裡的資料改成你自己的後送上主題資料夾下就可以做原始測試了~



延伸閱讀&參考資料

The PHP mail() Function
PHP Tutorial: Writing Your First PHP Script: Feedback Form Script
AJAX contact form
WordPress & jQuery Contact Form without a Plugin


最後，其實這是偽ajax啦~~哼哼哼 只是用jquery作的免刷新而已.....
-- THE END --]]> http://kanafu.com/archives/494/feed 38 WordPress Theme│Zero-PIC 之 你問我答 http://kanafu.com/archives/470 http://kanafu.com/archives/470#comments Mon, 09 Aug 2010 13:51:11 +0000 娜娜子 http://kanafu.com/archives/470

2011/02/04 Update


加入：Related Posts By Category、AJAX Comments(willin)、Unlimited Level Nested Comments、SweetTitle、Imageresize、Index Page Style Select、Archives(SideBar) Toggle
更新：Tagcloud function寫法，Recent Comments 寫法，Blogrool 加favicon
註：更新後請依照functions.php裡註解做改動即可。

FILE DOWNLOAD(檔案下載)


檔案下載(tar/zip)：

Note: There is a file embedded within this post, please visit this post to download the file.


-2011/02/04 END

在雜事爆多的星期一把這幾部影片拍完我覺得我真是太勇敢也太酷酷!!

TO 三問的MiiA小姐和Gravatar很繽紛的Bryan先生還有很害羞的傳了4封聯絡表單給我的coli同學，感謝你們喜歡zero-pic(鞠躬)。不過呢...這 裡要提醒下coli桑...下次傳一封就好了...太多反而會被系統丟到垃圾信夾的- -+

以上!!

大家一起熱血的跟著WP噴跑吧!!!!!!!!!!go~


你問我答開始 :


Q : 圖片頁面(Portfolio Page)出不來？？ (@MiiA)


A : 請照著下面的方法操作一次囉~(字看不清楚請點播放器上的切換全螢幕按鈕)

This site requires the Adobe Flash Player



Q : 首頁可以換成圖片展示頁面(Portfolio Page)嗎？ (@MiiA)


A:
1-1 請下載page_portfolio.zip這個壓縮檔
1-2 將壓縮檔內的page_portfolio.php上傳到zero-pic的theme dir裡
1-3 在後台新增一個page，模板的下拉選單裡選Portfolio Page
1-4 打上你的page title (內文部分請留空)
1-5 到設定>閱讀>首頁顯示>首頁，旁邊的下拉選單找到你剛才打得page title後儲存設定

done~!!


Q : 圖片可不可以改成自動適應文字區的寬度呢？ (@MiiA)


A:
打開style.css查找

1

.post_content img.alignleft,.post_content img.alignnone,.post_content img.alignright,.post_content img.aligncenter

往下找在margin-top:5px;的後面}的前面加入↓

1
2
3
4

max-width:300px;
width:300px;
width:expression(document.body.clientWidth&gt;300?&quot;300px&quot;:&quot;auto&quot;);
overflow:hidden;

@ : 注意 - 此段code不符合W3C!! 瀏覽器部分是ie6up、ff、Opera、Safari、Chrome兼容。
如果很介意W3C的捧油，請下載img-resize.zip這個壓縮檔，將裡面的JS上傳到zero-pic的theme dir後，打開single.php將下面的code加入〈?php wp_head(); ?〉的前方。
1

<script src="<?php bloginfo('template_url'); ?>/img-resize.js" type="text/javascript" charset="utf-8"></script>


Q : Gravatar的頭像可不可以改的小一點啊??? (@Bryan)


A :
請打開functions.php這個檔案，查找下面這段code

1

<div class="avatar"><?php echo get_avatar($comment,$size='50'); ?></div>


50的地方就是Gravatar的頭像大小囉...(px)


ok 先這樣... 我去寫企畫了掰掰有事請用力留言吧~逼逼逼!!


2010/08/21 update!↓


Q : 要怎樣才可以把預設的portfolio選單拿掉呢？



請打開header.php這個檔案，查找下面這段code

1

<li><a title="RSS" href="<?php bloginfo('url'); ?>/?tag=portfolio">Portfolio</a></li>


然後拿掉它就OK囉



另外 : 感謝提出指正的字體在簡體網站中顯示問題(過小and粗體無能)的奈維摩爾以及mind，已將更新版重新上傳，有需要的人請重新下載就可以囉~

]]> http://kanafu.com/archives/470/feed 78 WordPress Theme│Zero-PIC http://kanafu.com/archives/457 http://kanafu.com/archives/457#comments Tue, 09 Mar 2010 17:20:44 +0000 娜娜子 http://kanafu.com/?p=457 縮圖->刪除原始大圖的這個過程，就不得不又擔心起爆空間的問題。當然另外一個更大的問題就是...我懶！總之最後我就是用自帶縮圖了，所以也意味著這個theme也是2.9up。如果在寫文章時沒有設定縮圖的話，則是這樣。單篇文章(SINGLE PAGE)接下來的single post page...還是兩欄，沒有其他選擇，因為我是兩欄控，當然你高興改成三四五六七八欄我也沒有甚麼所謂就是了。巢狀留言的部分我的CSS只有寫到第二層，想要加到兩百層的人可能要記得改一下CSS。而若要使用thcikbox請記得在圖片的連結裡加上 1 class="thickbox" 然後是一些內文的樣式，這是我從官網上COPY下來的文章範本。 作品集(PORTFOLIO PAGE)再過來就是portfolio page的部分，也可以當成相本，但我個人是覺得用WP做相本在管理上手會很痠就是了(除非你照片不多)。這裡我是抓tag寫的，也就是說當你想要將文章收進portfolio page裡時，就要加上portfolio這個tag，而portfolio這個tag在頁面上(single的tag列表、側欄的tag clound)我把它排除掉了，避免造成一些在像是tag clound裡的portfolio會變得無敵霹靂大的BUG。portfolio page的文章列表，主要是顯示圖片跟摘要，游標滑過時才會出現標題，側欄的portfolio則是隨機抽出10篇。 如果想要修改Random Portfolio的數量，請打開404.php、search.php、sidebar.php這三個檔案搜尋 1 showposts=10 將10改成要顯示的數量。留言版(GUESTBOOK)zero-pic有自帶一個用page寫的留言版。可選擇一欄(Guestbook - One Column)或兩欄(Guestbook - Two Column)，經由建立page時選擇頁面模板(Template)做設定。 如果不想要留言版的話，不要建立留言page便OK。預設頁面模版(PAGE TEMPLATE)建立其他page時同樣則也可以選擇一欄或者兩欄，當中又各分為有無留言引用列表，同樣是經由選擇Template決定。page模版對照說明： 1 2 3 4 Page - One Column：一欄(下圖左一) Page - [...]]]>

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


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.php、search.php、sidebar.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.php、search.php 這兩個檔案的側欄部分是獨立的，不受sidebar.php的控制。


瀏覽器支援：Safari、Opera、firefox、Google chrome、IE5.5up
截圖拍攝環境：1024x768、firefox。
WP版本支援：2.9up。

Valid XHTML 1.0 Transitional Valid CSS!


FILE DOWNLOAD(檔案下載)


檔案下載(tar/zip)：

Note: There is a file embedded within this post, please visit this post to download the file.


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



]]> http://kanafu.com/archives/457/feed 70