傅不死 FullHouse » theme 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 WordPress滴打滴【被打版】 http://kanafu.com/archives/507 http://kanafu.com/archives/507#comments Thu, 07 Oct 2010 12:58:18 +0000 娜娜子 http://kanafu.com/?p=507 WordPress滴打滴【被打版】
所謂滴打滴，其實沒有任何實質意思只是我隨便叫好玩的。你可以當它是網站公告版、佈告欄、網站筆記本那類的隨便。

這個小東西的誕生起因於一開始用來作網站新聞的推爺已經默默的被我當作聊天版了。然後某天不小心點到自己的TwitterFeed就是超嗨的整個都是聊天記錄‧‧‧

完全沒有任何佈告欄的意思啊根本就！

對於那種沒有交集但是只是想知道網站重要新聞的推爺訂閱者來說，這樣的情況應該會非常苦惱吧(每天面對著一大片和自己毫無關聯的聊天紀錄誰高興得起來啊~？)

所以所以就寫了這個小小的滴打滴(WebChatter)，原本是打算讓它獨立運作的(畢竟我並不覺得自己會用一輩子的Wordpress)，但是因為懶得寫管理畫面又所以所以只好收進WP後台。

人家歪國人寫甚麼東西都喜歡加一個beta版，但是我這個實在太陽春+寫得又好亂所以就是被打版。

主要機能如下：


新增(廢話)/刪除(批次)/修改(二次編集)/簡單RssFeed 2.0支援/AJAX分頁/初始化(刪除資料表)/時區&時間格式編輯/wp short code支援。

預覽畫面如下：


page裡的使用 sidebar裡的使用 後台管理畫面 二次編集畫面 Feed畫面
也可以參考我的首頁側欄和BIO頁面的實際使用情況

使用方式如下：

1. 下載後在chatter裡打開config.php依照需求編集
2. 打開主題目錄下的functions.php(沒有這個檔案的自己開一個)新增

1

require_once(TEMPLATEPATH . '/chatter/chatter_admin.php');

3. 將整個chatter資料夾上傳至目前正使用的主題目錄下(目錄結構為：你的主題資料夾/chatter/)。
4. 進後台會就看見【佈告欄管理】的選項，新增第一篇公告後程式將自動在資料庫(config.php裡設定的那個)裡建立新的資料表和欄位。
5. 調用時支援可依照情況選擇php code或者short code

PhpCode
1

<?php kana_chatter ?>

ShortCode
1

[kana_chatter]

6. HTML結構如下，請自行按照需求編寫CSS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="blogchatter">
    <div class="Na_show_chatter">
        <div class="Na_chatter_time">時間</div>
        <div class="Na_chatter_txt">內容</div>
    </div>
    <ul class="Na_chatternav ">
        <li class="Na_chatternav_ft"><a title="" href="#">最前頁</a></li>
        <li class="Na_chatternav_pv"><a title="" href="#">前頁</a></li>
        <li class="Na_chatternav_nav"><a title="" href="#">頁碼1</a></li>
        <li class="Na_chatternav_nav"><a title="" href="#">頁碼2</a></li>
        <li class="Na_chatternav_nt"><a title="" href="#">後頁</a></li>
        <li class="Na_chatternav_lt"><a title="" href="#">最後頁</a></li>
    </ul>
    <div style="clear: both; height: 10px;"></div>
</div>

因為太想抽菸導致完全無法專心思考，所以我決定用直接把檔案打出來來代替code解說。有興趣的人可以自己拆一下原檔，我寫得時候都有標上中文註釋，應該不難理解才是。
Note: There is a file embedded within this post, please visit this post to download the file. Note: There is a file embedded within this post, please visit this post to download the file.
再來再來，我不是吃php長大的程序員，所以如果有前輩出現也請勿用力拍打，寫好玩而已的。

最後最後，嚴禁任何情況下的商業使用。

以上，歡迎報告使用心得。


-- THE END --]]> http://kanafu.com/archives/507/feed 95 不如，就來寫個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 用CSS減少美化網站的圖片數量 http://kanafu.com/archives/466 http://kanafu.com/archives/466#comments Thu, 05 Aug 2010 14:20:52 +0000 娜娜子 http://kanafu.com/archives/466 網頁裡用到的圖片全部集中在一起的方法。



1. 首先想好頁面的排列架構，然後在FW裡大概的擺一下位置。


001
@ : 如上圖，展示站台和KANAFU.COM分別是兩個鏈結，我希望它在點擊時會有顏色的變換，而LINK1、2、3則是一個小型導航選單，最下方則是一個單純的圖片展示(當然你也可以將它變換成鏈結)。


2. 接下來打開FW來把剛才的圖片拖進來，做好選單的顏色調整後存成一張圖片(FW先別關，之後會用到)


002
@ : 這一步的關鍵點在於圖層在圖片裡的排列，空白的部分(也就是不會被始用到的區塊)越少，做出來的圖片也越小，載入網站的速度相對就越快。然後上面因為是示範所以我就隨便排一下。


3. 再來就是用網頁編輯器新增一個html和一個css(如果是DW、frontpage這種可視化的請先切換到code編輯模式)，我這裡用的是EmEditor，你也可以選擇你習慣的UltraEdit、PSPad、EditPad...叭啦叭啦什麼鬼的都無所謂，高興就好，如果都沒有的話就直接開記事本也OK。


HTML的部分↓ 
1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
	<link rel="stylesheet" type="text/css" href="./style.css"> 
	<title>用CSS減少美化網站的圖片數量</title>
</head>
 
<body>
	<div id="container">
	</div>
</body>
</html>
CSS的部分↓ 
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

@charset "utf-8";
* {
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
/** body **/ 
body{
	width:100%;
	height:100%;
	font : 8pt Tahoma,verdana,Arial;
	word-spacing: 1.8pt;
	line-height: 1.5;
	color :  #999;
	background:#eee;   
}
/** link **/
a{
	color:#777;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
	color:#fff;
}
a:active{
	text-decoration:none;
	color:#bbb;
}
#container {
	position: relative;
  	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -200px;
	width: 400px;
	height: 400px;
	background:#ccc;   
}
@ : 寫好會變成這樣↓003
@ : 上面的code是我替頁面寫的一些基本的樣式，這部份請自由發揮 ─ ─ ─
@ : #container這個DIV就是等等用來裝主要內容的容器，為了方便預覽CSS先加上背景屬性。


4. 把鏈結、選單都加到#container裡，然後再新增一個ID為pic的div等等來擺圖片用。


10
11
12
13
14
15
16
17
18
19

<div id="container">
	<a href="#" title="展示站台" id="link_a">展示站台</a>
	<a href="#" title="KanaFu.com" id="link_b">KanaFu.com</a>
	<div id="menu">
		<a href="#" title="Link1" id="link_1">選單一</a>
		<a href="#" title="Link2" id="link_2">選單二</a>
		<a href="#" title="Link3" id="link_3">選單三</a>
	</div>
	<div id="pic"></div>
</div>
@ : 寫好會變成這樣↓004


5. 回到FW裡已經存好的圖片，開始準備寫第一個"展示站台"的鏈結。


005
@ : 如上圖，點一下需要的圖層，左下方的屬性就會顯示出它的大小和位置。


6. 切換到CSS部分，開始製作第一個"展示站台"的鏈結。


45
46
47
48
49
50
51
52

#link_a{
	width:218px;
	height:57px;
	background:url(./index.png) -3px -236px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}
@ : 稍微說一下上面的code : width和height分別是剛才在FW裡查到的長寬，而background最後的-3px以及-236px就是查到的位置(x,y)，前三行加起來就是在宣告 : 我們只需要index.png這張圖片從座標3,236開始，大小是218x57的區塊，至於display:block;屬性則是用來讓本身不帶區塊等級的鏈結得以設置長寬，而最後兩行則是把鏈結文字隱藏起來。
@ : 寫好以後就是這樣。↓
006


7. 接下來就是寫當滑鼠晃過鏈結時(a:hover)的樣式。


007 
53
54
55

#link_a:hover{
	background:url(./index.png) -309px -233px;
}
@ : 回到FW裡again，這次點要用來做hover的圖層，一樣會顯示出長寬和位置。
@ : 在CSS裡宣告a:hover時展示的圖片位置。
008
@ : 如上圖，這樣第一個鏈結就完成了，然後用同樣的思路寫第二個鏈結。 
56
57
58
59
60
61
62
63
64
65
66
67
68
69

#link_b{
	width:85px;
	height:17px;
	background:url(./index.png) -221px -271px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:93px;
	left:251px;
}
#link_b:hover{
	background:url(./index.png) -527px -268px;
}


8. 接下來是選單的部分，在第四步裡我們已經在html裡寫進了一個內含三個鏈結的DIV。


009
@ : 先用前面的方法將DIV的背景抓出來，以及分別將三個選單的鏈結換作圖片。 
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
97
98
99
100
101
102
103
104
105
106
107

#menu{
	width:121px;
	height:25px;
	background:url(./index.png) -11px -157px;
}
#link_1{
	width:27px;
	height:12px;
	background:url(./index.png) -21px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}
#link_1:hover{
	background:url(./index.png) -21px -197px;
}
#link_2{
	width:27px;
	height:12px;
	background:url(./index.png) -54px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}
#link_2:hover{
	background:url(./index.png) -54px -197px;
}
#link_3{
	width:27px;
	height:12px;
	background:url(./index.png) -87px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}
#link_3:hover{
	background:url(./index.png) -87px -197px;
}
@ : 寫好以後就是這樣。↓
010


9. 再來就是幫三個排排排站的鏈結乖乖躺下來。


011
@ : 首先在FW裡將圖片裡的選單區塊複製出來成一個新檔案，然後一樣在屬性裡查找link1、2、3的座標位置。這裡要新開檔案的原因是因為我們要找的是link1、2、3以選單區塊的左上角為基準點的座標。
@ : 然後在CSS增加position屬性做定位。 
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

#menu{
	width:121px;
	height:25px;
	background:url(./index.png) -11px -157px;
	position:absolute;
	left:248px;
	top:59px;
}
#link_1{
	width:27px;
	height:12px;
	background:url(./index.png) -21px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:12px;
}
#link_1:hover{
	background:url(./index.png) -21px -197px;
}
#link_2{
	width:27px;
	height:12px;
	background:url(./index.png) -54px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:45px;
}
#link_2:hover{
	background:url(./index.png) -54px -197px;
}
#link_3{
	width:27px;
	height:12px;
	background:url(./index.png) -87px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:78px;
}
#link_3:hover{
	background:url(./index.png) -87px -197px;
}
@ : 寫好以後就是這樣。↓012
@ : 然後順便用老方法把圖片的部分一起寫進去。 
158
159
160
161
162

#pic{
	width:340px;
	height:167px;
	background:url(./index.png) -157px -44px;
}
013
@ : 變成這樣↑


10. 用position屬性將元素的位置調整成想要的樣子。


163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248

#link_a{
	width:218px;
	height:57px;
	background:url(./index.png) -3px -236px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:57px;
	left:29px;
}
#link_a:hover{
	background:url(./index.png) -309px -233px;
}
#link_b{
	width:85px;
	height:17px;
	background:url(./index.png) -221px -271px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:93px;
	left:251px;
}
#link_b:hover{
	background:url(./index.png) -527px -268px;
}
#menu{
	width:121px;
	height:25px;
	background:url(./index.png) -11px -157px;
	position:absolute;
	left:248px;
	top:59px;
}
#link_1{
	width:27px;
	height:12px;
	background:url(./index.png) -21px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:12px;
}
#link_1:hover{
	background:url(./index.png) -21px -197px;
}
#link_2{
	width:27px;
	height:12px;
	background:url(./index.png) -54px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:45px;
}
#link_2:hover{
	background:url(./index.png) -54px -197px;
}
#link_3{
	width:27px;
	height:12px;
	background:url(./index.png) -87px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:78px;
}
#link_3:hover{
	background:url(./index.png) -87px -197px;
}
#pic{
	width:340px;
	height:167px;
	background:url(./index.png) -157px -44px;
	position:absolute;
	top:125px;
	left:32px;
}
@ : 分別在#link_a、#link_b、#menu、#pic裡加上position:absolute;，然後用top跟left將它們調整到合適的位置。然後步驟三裡我們已經在#container的DIV裡加上了position: relative;，所以現在的基準點(0,0)就是從#container的左上角計算起。

@ : 調完之後把body裡的背景色一起改下↓
014
噢噢...看起來和一開始在FW裡排得似乎還挺像的耶(廢話!阿不然排它是要幹嘛的...)
測試OK後就回到CSS將落落長的code稍微整理一下吧，能併的就併一併，讓載入的CSS稍微小一點也整齊一點。
@ : 精簡過後的CSS(好啦其實也沒有短到哪裡去...)↓ 
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
55
56
57
58
59
60
61
62
63
64
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

@charset "utf-8";
* {
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
/** body **/ 
body{
	width:100%;
	height:100%;
	font : 8pt Tahoma,verdana,Arial;
	word-spacing: 1.8pt;
	line-height: 1.5;
	color :  #999;
	background:#eee;   
}
/** link **/
a{
	color:#777;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
	color:#fff;
}
a:active{
	text-decoration:none;
	color:#bbb;
}
#container {
	position: relative;
  	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -200px;
	width: 400px;
	height: 400px;
}
#link_a,#link_b,#menu,#link_1,#link_2,#link_3,#pic{
	background:url(./index.png);
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
}
#link_a{
	background-position:-3px -236px;
	width:218px;
	height:57px;
	top:57px;
	left:29px;
}
#link_a:hover{
	background-position:-309px -233px;
}
#link_b{
	background-position:-221px -271px;
	width:85px;
	height:17px;
	top:93px;
	left:251px;
}
#link_b:hover{
	background-position:-527px -268px;
}
#menu{
	background-position:-11px -157px;
	width:121px;
	height:25px;
	left:248px;
	top:59px;
}
#link_1{
	background-position:-21px -163px;
	width:27px;
	height:12px;
	top:8px;
	left:12px;
}
#link_1:hover{
	background-position:-21px -197px;
}
#link_2{
	background-position:-54px -163px;
	width:27px;
	height:12px;
	top:8px;
	left:45px;
}
#link_2:hover{
	background-position:-54px -197px;
}
#link_3{
	background-position:-87px -163px;
	width:27px;
	height:12px;
	top:8px;
	left:78px;
}
#link_3:hover{
	background-position:-87px -197px;
}
#pic{
	background-position:-157px -44px;
	width:340px;
	height:167px;
	top:125px;
	left:32px;
}



最後的最後不免俗的...還是用了雙D兄弟(DEMO&DOWNLOAD)來做個ENDING囉!


展示/下載(DEMO&DOWNLOAD) :

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

Valid HTML 4.0 Transitional Valid CSS!

註：
1. DOWNLOAD裡的CSS使用的是未精簡過後的初始版，一開始看這個應該會比較容易上手這樣。
2. 本次的示範非常榮幸的邀請到傳說中那個有點飄撇有點帥的shogenism大叔來當媽斗，所以請和我一起用最兇猛的鬼吼鬼叫來表達對S大叔的敬愛~~~~~~


以上~]]> http://kanafu.com/archives/466/feed 14 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