WordPress官方大約在兩個月前便推出了一款令WordPress支援PubSubHubbub (PuSH) 的插件，這款插件會從/?pushpress=hub把你的Feed傳送到PuSH，再通過WordPress內置的wp_schedule_single_event函數，使用PING命令排程發送到第三方的中繼站，加快收錄速度，從而實現即時收錄。附帶一提，收錄速度是根據網站所在主機的負荷量和傳送量所決定的。

外掛名稱: PuSHPress
外掛版本: 0.1.6
相容性: 相容至2.9.2版本
使用方法: 在外掛頁開啟外掛插件便可以了，無需設定任何選項。
連結地址: 點擊這裡

參考資料:
Joseph Scott – PuSHPress
Google Code – PubSubHubbub

上次提到XAMPP這個方便的免費Apache Server，他的功能雖然十分齊全，甚至跟些收費的伺服器能夠互相媲美，可是他的用戶介面有時候真的不太友善。有些設定還要親身慢慢去找尋。這次我來說說一些功能的開啟方法。

修改STMP伺服器
打開\xampp\apache\bin\php.ini(或\xampp\php\php.ini )，然後找尋

SMTP = localhost

修改localhost為你的STMP地址。

PHPMyAdmin安全性問題
因為XAMPP預設的設定是在本機外的任何人，只要知道你的IP地址便可以訪問你的PHPMyAdmin。本來是沒有問題的，可是XAMPP的密碼預設為空，所以存在很大的安全性問題。我們現在把他改為不能訪問。
打開\xampp\phpmyadmin\config.inc.php，把

$cfg['Servers'][$i]['auth_type'] = 'config';
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = 'yourpassword'; 

修改為

$cfg['Servers'][$i]['auth_type'] = 'http';
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = ''; 

啟動eaccelerator
打開\xampp\apache\bin\php.ini(或\xampp\php\php.ini )，然後找尋

extension=eaccelerator.dll
eaccelerator.shm_size = "0"
eaccelerator.cache_dir = "\xampp\tmp"
eaccelerator.enable = "1"
eaccelerator.optimizer = "1" 

打所有eaccelerator前的分號「;」都刪除。

啟動Zend
打開\xampp\apache\bin\php.ini(或\xampp\php\php.ini )，然後找尋

zend_optimizer.enable_loader = 1
zend_optimizer.optimization_level=15

把Zend的參數修改成以上的。

一個網站要有吸引力，豐富的內容固然重要，可是有了網頁設計的配搭和點綴，更是可以突顯出自己網站的特色。
一個成功網站最基本的要素就是簡潔，這樣才能把最重要的信息直接傳遞給來訪者，而不是需要瀏覽者親身到你的網站找尋。因為如果是這個狀況的話，除非你的網站對瀏覽者十分重要，不然一段都會直接點擊右上角的「交叉」，反正現在搜尋功能這麼先進，一大列的搜索結果在等著你來訪。所以在眾多的網站中保持競爭力，優秀的網頁設計與佈局是必須的。

首先我們從設計網頁時的佈局開始說起。我們現在時常看見的網頁設計佈局不外符分成數類。

第一種是置左，這種方式適合一些訊息量十分少，而那些訊息卻又是重要的網站使用。因為人習慣是從左邊看起的，所以置左能第一時間把重要的信息帶出來。可是這種結構在一般的網頁已經比較少見了，不過注意到了嗎？大部份搜尋器的結果顯示頁也是採用這種方式的。

而第二種則是比較常見，不論在公司的網站，到個人的博客通常都會採用這種方式的排版。因為這種的佈局，能使最多的資訊，使用最少的空間放在使用者面前。從而達到減少拉動滾動條(ScrollBar)，而方便使用者的目的。可是這樣的佈局也是有考究的，要先學會怎樣預定區塊和區塊之間空白的間隔，才能使這種佈局達至最好的效果，不然便只會做成反效果，令用戶眼花撩亂。

第三種置中，也是較常用於比較簡潔，資料性較少的網頁。因為一但資料多起來，網頁便會被拉得很長，對用戶做成不便。

在使用WordPress的初期，不知道大家有沒有曾為沒有分頁功能而煩惱呢。對於這個很普遍的基本功能WordPress竟然沒有，這著實讓我愕然了一會，甚至還一度被迫使用他原來預設的陽春內置跳頁系統。

這樣子，不單對用戶做成不好的體驗，簡單來說就是對用戶不友善。更會影響搜尋器搜尋你網站的幅蓋率，因你頁面中並不是完全直接顯示網站內所有的頁面，而是分成了數頁分別輸出。這樣如果使用「上一頁」和「下一頁」的表示方式，便會造成了首頁缺乏對所有分頁的直接連結，從而影響了搜尋結果。

要解決這個問題，很簡單，使用WordPress總類繁多的外置分頁插件，如：WP-Pagenavi，PageBar等等。

不過這卻造成了另一個問題——加重了對伺服器CPU的負擔，現在很多的虛擬主機都會對用戶的CPU使用率有所限制，詳情不在此細說。人在屋簷下，所以我們要盡量解決CPU使用量問題，自行使用代碼，直接編輯主題，而捨棄插件的使用。

這是的行動可以實現的原因，其實是因為官方提供了paginate_links()函數，使得我們能夠直接取得分頁頁數。

現在我來說一說自行在主題建立分頁的過程，首先是在自己的主題建立一個navigation.php，並裡面輸入以下代碼

<?php
global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
$paginate_format = '';
$paginate_base = add_query_arg('paged', '%#%');
} else {
$paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
user_trailingslashit('page/%#%/', 'paged');;
$paginate_base .= '%_%';
}
echo '<div>'. "\n";
echo paginate_links( array(
'base' => $paginate_base,
'format' => $paginate_format,
'total' => $wp_query->max_num_pages,
'mid_size' => 10,
'current' => ($paged ? $paged : 1),
'type' => 'list',
'prev_text' => __('&laquo; Previous', 'default'),
'next_text' => __('Next &raquo;', 'default'),
));
echo "\n</div>\n";
?>

其中的換成你需要的分頁數目

'mid_size' => 10,

另外以下代碼，

echo '<div>'. "\n";
...
echo "\n</div>\n";

可以換成你需要的代碼，並加上class。同樣道理，當然你也可以按照規律加上適用的代碼。

echo '<div class="navi">'. "\n";
...
echo "\n</div>\n";

navigation.php建立成功後，可以在index.php中找到

<div class="navigation">
...
</div>

預設的WordPress分頁應該是長這樣

<div class="alignleft">
<?php next_posts_link('&laquo; Older Entries') ?>
</div>
<div class="alignright">
<?php previous_posts_link('Newer Entries &raquo;') ?>
</div>

我們以這段判斷代碼替換以上的代碼，來確認用戶是否有使用page-navi插件，如沒有則使用navigation.php。

<?php if (function_exists('wp_pagenavi')) { wp_pagenavi(); } else { include('navigation.php'); } ?>

最後加上在style.css加上樣式表，來設定你分頁的樣式就好了。

.navigation {
	display: block;
	padding:30px 20px 20px 20px;
	clear:both;
	width:100%;
}
.navigation a {
	color:#777;
}
.navigation ul {
	list-style:none;
}
.navigation ul li {
	float:left;
	margin: 0 3px 0 3px;
}
.navigation ul li a {
	background: #fff url(images/pagenavi_btn.gif) no-repeat 0 0;
	width:27px;
	height:22px;
	color: #777;
	padding:5px 0 0 0;
	text-align:center;
	display:block;
}
.navigation ul li a:hover {
	background: #fff url(images/pagenavi_btn.gif) no-repeat 0 100%;
}
.navigation ul li span.current {
	background: #777 url(images/pagenavi_btn_current.gif) no-repeat;
	width:27px;
	height:22px;
	color: #fff;
	padding:5px 0 0 0;
	text-align:center;
	display:block;
}

教學参考自這裡

對於jQuery這個能讓你在你的網頁上進行簡單地處理事件、運行動畫效果的JavaScript庫，大家應該也十分熟悉。jQuery中有一個功能叫作.sildeToggle，這個功能讓你免去了輸入slideUp和sildeDown，從而精簡為一個。
可惜這個功能只適用在slide這個拉上拉下的效果，有沒有方法能為其他如fade淡出淡入加上這功能呢？現在由我來告訴你們，這方法的確存在。

這個功能便命名為.fadeToggle，這個功能以插件的方式加載在你的JavaScript檔案中。現在我來說說使用的過程。

你需要把這段代碼加載在你的JS檔案上。這樣，你便可以開始體驗一下.fadeToggle的使用了。

jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: ‘toggle’}, speed, easing, callback);};

以下為使用.fadeToggle的一個例子。

$("#div-one").click(function () {
// 當你點擊id為div-one的區塊時
$("#div-two").fadeToggle();
// id為div-two的區塊便會自動淡出，再點擊便淡入
return false;
});

最後提醒一下，如果在WordPress中要使用到jQuery的話，你可需要把"$"轉換成"jQuery"。因為"$"在WordPress中被佔用了，反正全部也換掉就對了。

]]> http://wsqsite.com/blog/jquery-fadetoggle-plugin/feed/ 8 http://wsqsite.com/blog/cssform-ie6-error/ http://wsqsite.com/blog/cssform-ie6-error/#comments Wed, 10 Mar 2010 10:26:49 +0000 WSQ http://wsqsite.com/blog/?p=47 Continue reading]]>

現在的網頁模版大多製作得美輪美奐，使用了大量的圖片和CSS，可是在IE6下便顯得錯漏百出，不是跑位了，就是不見了。不論你是網頁設計者還是使用者，相信大家也有在使用時IE6遇到很多的問題。

這次的問題在我製作模版也有遇到過，特意拿出來一說，希望能為各位提供一個解決方法。

如果大家使用CSS直接在text input下加上背景圖，在IE6下如果輸入了太多文字的話，我們便會發現背景圖竟然會跟著文字一起向右跑。現在我來說一說這個問題的解決方法。

這是一個正常的表格代碼。可是如果我們直接加上CSS的話，便會導致在IE6下跑位。

<input type="text" name="author"/>

所以我們要在表格前加上一個<div>包裝著input。並且把背景圖加到<div>上。

<div class="form_author"><input type="text" name="author"/></div>

CSS代碼應該這樣寫。

/* 設定div寬度和高度，和背景圖片。 */
.form_author {
height: 24px;
width: 350px;
margin:5px 0 5px 5px;
background: #fff url(imgs/bg_picture.gif) left top no-repeat;
}
/* 設定被div包著的input背景為透明，沒有邊框。 */
.form_author input {
border: 0;
margin: 5px 0 0 30px;
height: 20px;
width: 130px;
background-color: transparent;
font-size: 12px;
color: #999;
}
/* 當滑鼠移到div上時，背景會往上移，做成不同的效果。 */
.form_author:hover, .form_author:focus {
background-position: 0 -24px;
}

完整表格範例按這裡下載。
樣式為留言表單的樣式。