WordPress ajax 留言插件的比較和改進。

by Attila Von Heifenbrug Posted on

一起用服務器的另一位兄臺

Chiidea.com 的@chiidea兄弟用的wordpress模板上,一直有個讓鄙人比較垂涎的效果,就是留言不需要刷新。雖然本部落格一向冷清，沒什么參與和互動，但鄙人對于折騰技術總是不甘人后的。

于是，從昨天起，決定動手移植他這個效果。

這篇文章的目錄：[已設置了頁內鏈接,請先點擊”繼續閱讀”進入文章頁面使設置生效]

1、插件故障排除
2、善后
2.1、醒目的回應此迴聲按鈕
2.2、突出迴聲作者高名大姓
2.3、添加訂閱本文按鈕
2.4、漢化按鈕
3、美化評論框
4、顯示用戶屬性標簽。
5、讓留言擁有不同的中文字體。
6、補遺
6.1、把訪客的頭像放到另一邊
7、回復下載

很快的，這種不切實際的想法就破滅了，我試過把他那的都復制過來，可惜繞不過鄙人這個付費模板里面暗藏的一些鏈接。【總之是技術不夠】

關于本模板，可以看這篇文章：不能不說的換wordpress 主題（theme）事端種種

您可以下載來自己研究，如果您那輕松對付掉了這一切，那么鄙人只能表示欽佩，別無其他。

請教了一番Google大神。含辛茹苦的爬完了一個英文的網頁。看著那個付費的AJAX Comments插件正興高采烈。后來才發現，有人提出來發現它根本不支持2.91和中文。

支持不支持2.91還有辦法對付，但是中文這塊我實在沒一點辦法。只好另找高明。

后來幾乎同時發現了Ajax Comments-Reply造訪外掛站台

和WordPress Thread Comment 造訪外掛站台

于是這一整天的折騰就集中在這兩個插件上了。

安裝插件什么的不必多述，想必各位都知道。

插件故障排除

最終選定用的是Ajax Comments-Reply，只不過是因為鄙人的css定義已經弄好，不想多換而已，加上這個插件的一種可怕的故障已經被我排除掉，目前運行良好的緣故。

wtc也是一款優秀的插件，至于顯示是否漂亮，只和你自己的css定義能力有關。我選什么并不是說另一款不好的意思。這位朋友對技術活就完全不懂，鄙人這個一知半解的家伙幫他折騰，用的是WordPress Thread Comment 。可以去看看效果。傳送門

安裝已經可以算是完全自動化了，但是很可能因為種種的原因，你回復幾條之后，突然就來了一個彈窗“There was a problem with the request.”甚而“Failed to add your comment.”并且顯示“Submit failed, you submit too fast or submit a duplicate comment…”這些都在插件中的comment.js文件里定義，幾乎是不能改變的。譬如，鄙人一直以為是判斷依據的

if (gi.readyState == 4) { if (gi.status == 200) {

兩句話，就根本不能動，這恐怕是作者所說的“限制留言數量”。鄙人這里本沒有留言，雖然spamer看走了眼很喜歡我這里。但這個功能也是用不到的，可悲的是，幾乎并不能關掉，并且，直到你的服務器重啟，這個服務器上用這個插件都不能再回復！

怎么辦？

刪掉插件，換別的

我堅信這個插件仍然能用，而且肯定能在我這臺服務器上用，于是，清了臨時文件，刪了它以后再裝了一次，先不啟用。

然后進comment-reply.php 找到了如下兩段話

$max_level = 5; // choose the max level

$comments_per_page = 100; // comments per page

各改成無窮大的一個值，然后啟動，目前為止，刷了幾百條留言，沒有出現問題。但是鄙人懷疑這不是普遍性的解決辦法，或許還要注意.js文件中別寫任何中文字符？貌似jave規則沒有這一條。反正您盡量這么做就對了。

——失望了吧，只不過是個土辦法。

后來我琢磨這個錯誤的產生原理，應該是和open id的插件沖突。目前沒法解決，我只在插件回復工具欄做了明文警告。

善后

原始的定義非常非常的丑陋。這是一定要改變的，幸運的在于，有個單獨的css文件，很容易修改。

從最簡單的按鈕開始

醒目的回應此迴聲按鈕

下面這個式樣是從chiidea學來的image

主要針對的是.meta a {  底下的定義。

-moz-background-origin:padding;

-moz-border-radius-bottomleft:4px;

-moz-border-radius-bottomright:4px;

-moz-border-radius-topleft:4px;

-moz-border-radius-topright:4px;

background:#315BE6 none repeat scroll 0 0;

color:#FFFFFF;

font-size:9.5px;

opacity:0.7;

padding:3px 5px 2px;

borderc1 .body p {

color:#FFFFFF;

好了，現在那個“回復該迴響”的按鈕醒目了。

突出迴聲作者高名大姓

然后鄙人考慮著來突出突出迴響作者的大名。畢竟人家勞苦功高嘛。

.commenthead a { 
color:#666600;
background-image:url(http://img.minyueguo.com/bgblue.jpg);
}

就這樣完事

后來多事了，搞了些區分

.commenthead span {

color:#999966;

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:#FFFFFF none repeat scroll 0 0;

padding:0 10px;

font-variant:small-caps;

}

上面那種是銀色的，用以標記沒填寫個人網站的家伙

.commenthead a { color:#666600; -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#FFFFFF none repeat scroll 0 0; padding:0 10px; font-variant:small-caps; }

這尊貴的金色，自然是標記填寫了個人站點的人嘍。提醒看留言的人，點擊它……

您眼熟么？其實這是遞交迴聲的時候顯示的那玩意。

添加訂閱本文按鈕

<?php printf(__('如果关注本文发展,欢迎订阅本文评论 <a class="feed" rel="alternate" href="%s"><acronym title="Really Simple Syndication">RSS</acronym> feed</a>.', 'carrington-blog'), get_post_comments_feed_link($post->ID, '')); ?>

上面那個是為了訂閱文章回響（目前我查過，鄙博還沒一個訂閱單獨文章鏈接的）所用的html代碼。效果就是

image

……還可以吧，這叫意淫于未然。

漢化按鈕

按鈕主要集中在插件目錄下的comments.php里面。

找到delete，reply，edit，等等的原英文字符，替換為中文，譬如

echo "<a href='$deleteurl' onclick='ajaxShowPost("$deleteurl", "comment-{$c->comment_ID}", "", "alert(\"comment is deleted\")", "delete");return false;'>刪除評論</a>|";

以上只是舉例，不一定是這樣的字樣。

沒有多少地方需要漢化，或者您根本不需要漢化也可以。

如果您要求不高，做到這一步就可以了，以下算是進階內容，我花了快一晚的時間才摸索出來。

美化評論框

這個插件，很多地方是比較讓人無語的，應該有不少人第一眼看到的時候驚呼它的丑陋（更不排除有人第一眼看到我現在這個設定驚呼丑陋）

但是其內在設計還是非常匠心獨運的，具體體現在深刻的復刻了東方人揮之不去的等級觀念，話說在這里，評論人分為三等，第一等是至高無上的admin。作者他本來用紅色的框框把這個人的金音玉字給圈起來；其次是注冊用戶和多次回復的用戶，作者用了藍色的圈圈把他給圈起來；最后是大多數的從spamer到罵客的陌生用戶，用的是綠色的框框。

這好像暗合中國某些人的政治觀念……但是幾乎肯定的是，不會合乎任何人的審美觀念。

這三條的css定義在

.mine{
.borderc1{
.borderc2{

三處，原來那個破爛我們不提它了。現在我提供一些美化方案：

一：背景色：

代碼譬如 background-color:#F00 這樣會把整個mine定義的區域全部涂紅，適合于黨員團員之類的。不推薦

二：背景圖：

比如說 background: url(http://img.minyueguo.com/backadmin.gif); 這個，是鄙人定義在admin賬戶專屬的回復之后，彰顯了本站長的非凡氣度。

三：邊框：

http://css.1keydata.com/tw/border.php 這個種類繁多，看前面那個鏈接去。

本人用的是背景圖，至于是什么背景圖，您回復一下就知道了。

用了背景圖，那就不能避免產生一個問題——背景圖和文字的顏色很近似，但是那張背景圖你有不舍得換。

其實仍然有解決辦法。但是稍微會有些麻煩。

我們知道，現在有三種用戶形態，【當然，如果您是講究平等的偉大人物，把三種定義得一模一樣就好了，以下不用看。】

以本人的豹紋圖為例。我這張圖自以為是的認為，能夠彰顯本部落格內注冊用戶的飄逸氣度。所以百般不情愿替換掉，但是豹子這玩意，活在自然界靠得就是偽裝色，所以字在豹紋的襯映下，完全就變成考驗視力的工具，常年以往，恐怕部落格所有的讀者都像野外遇到花豹一樣跑光光鳥。

于是鄙人對這個模塊特別加了一個定義，以保證字看得到。

.borderc1 p { color:#ccc; background-color:#000; }

意思是說：b1用戶的回復內，字的下方，用上黑色的背景色（這里要用背景圖也可以）。字是白色的，對比鮮明，閱讀明快。

但是這樣有個弊病，即如果有一個注冊用戶留言了，其他人對他留言的跟貼也會出現這個黑底白字的效果。而其中admin站長是不要用白字黑字來映襯本身人品的高潔，而其他家伙卻是未經考驗，本來只能墊一塊灰木板的，卻也有這樣的表彰。顯然是不可以的

那么只好如此這般了

另加標簽
.borderc1 .borderc2 p {
color:#FFF;
background-color:transparent;
}

同理，還有一個

.borderc2 .borderc1 p {
color:#ccc;
 

background-color:#000

}

前一個的意思是說，如果第一條留言是1級留言者的，第二條是二級的，那么二級那條中正文的定義。

這樣有一個問題，我的看官肯定學過統計和概率。這樣三種不同的用戶留言，嵌套三層，顯然就有了3×3×3=27種css要定義。【注：由于瀏覽器的css生效規則，不能根據上一個div是什么而生效自身】

譬如

  1. m m
  2. m d1
  3. m d2
  4. d1 m
  5. d1 d1
  6. d1 d2
  7. d2 m
  8. d2 d1
  9. d2 d2

而且限制文章內可嵌套層數的東西和這個插件生死相關。唉，無法了。只能把第三層開始統一設置成普通模樣。

這一票的css太長，就不貼了。第四層可是有24種要定義。看了都暈死。一共設了九種。很難受

后來發現，既然要從標簽入手，不妨看看通用的有什么標簽。

后來發現了一個“body”可以徹底解決這個問題。

比如底下展示的這個位于老日志中的超高樓。我刪去了一些部分，展示了這些嵌套的從屬關系，也就是說，其實第一層和目標層【不論多少層】之間其實只有一個body標記是和目標文字有關的，那么……

<li class="borderc1" id="comment-3857">
<li class="borderc2" id="comment-3881">
<li class="borderc1" id="comment-3882">
<li class="borderc2" id="comment-3883">
<li class="borderc1" id="comment-3884">
<li class="borderc2" id="comment-3885">
<li class="borderc1" id="comment-3886">
<li class="mine" id="comment-3887">
<li class="mine" id="comment-3888">
<li class="borderc2" id="comment-3889">
<li class="borderc1" id="comment-3890">
<div class="commenthead">At 2010.01.19 11:46, <a name="comment-3890"/><span>prince</span> said: </div>     <div class="body">
<img ……/>
<p>都幾層了，好興奮啊！</p>
</div>
<div class="meta">
[<a title="reply" href="javascript:moveForm(3890)">回復此評論</a>]</div><ul/& gt;</li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li>< /ul></li></ul></li>

那么好辦了，比如要設定第一個是admin的重要講話，prince這個小子作為最后一個鼓掌的。這之中竟然只有一個body標簽對prince的發言生效，那么，思路很清晰，就是在p后加一個屬性定義，再定義p的結構。

為了繞過m，d1，d2的設定，只好到到comments.php中搜索“body”，找到的應該只有一個，把底下這段話加到

然后在style.css里面，復制body下的定義，創造者三條【讀過點古書都知道，三是虛數，愛幾種隨你了】定義。

<div class="<?php if($c->comment_author_email == get_the_author_email()) {echo 'authored';} elseif($c->comment_author_email =='注冊用戶1的email') {echo 'authoruser';} elseif($c->comment_author_email =='注冊用戶2的email') {echo 'authoruser';} elseif($c->comment_author_email =='注冊用戶N的email') {echo 'authoruser';} elseif($c->comment_author_email =='admin的email') {echo 'adminuser';} else {echo 'guster';} ?>">

注目：第一條的判斷依據也就是if語句的判斷依據不能變。且江湖傳說中的get_the_admin_email也是不存在的語句（本人還試過更無趣的譬如get_the_Attila_email)！！

再定義它們和正文的標簽P結合時候的定義。譬如本部落格目前這個形態的就像下面這個一樣。[具體怎么樣您回復一條就知道了]

.cadmin{
background: url("http://img.minyueguo.com/backadmin.gif");
}
.mine{
background: url("http://img.minyueguo.com/backadmin.gif");
}
.borderc1{
background: url("http://img.minyueguo.com/backl.jpg");
}
.borderc2{
background: url("http://img.minyueguo.com/backp.jpg");
}
.authoruser p {
color:#ccc;
background-color:#222;
font-size:1.1em;
}
.adminuser p {
color:#C30;
font-size:1.2em;
}
.guster p {
color:#FFF;
background-color:transparent;
font-size:1em;
}
.guster .avatar {
float:right;
}
.authored p{
color:#C30;
font-size:1.2em;
}
.borderc1  .authored p{
color:#C30;
font-size:1.3em;
}
.cdamin .authored p{
color:#C30;
font-size:1.3em;
}
.borderc2 .authored p{
color:#C30;
font-size:1.3em;
}
.borderc1  .adminuser p{
color:#C30;
font-size:1.3em;
}
.borderc2 .adminuser p{
color:#C30;
font-size:1.3em;
}

比如在實驗地點，我們可以看到，層數雖多，但是我所要的文字顯示效果沒有什么差錯。

另外，冒用站長admin的名號和郵箱或者我的兩個網址都是回復不了的。

顯示用戶屬性標簽。

user admin author

今天一早起來，我摸索著最后怎么倒騰一下，顯得鄙人的部落格更加的等級森嚴。

<li id="comment-<?php echo $c->comment_ID ?>" <?php echo $style?>>
<img width="74" class="userlogo" height="65" alt="<?php if($c->comment_author_email == get_the_author_email()) {echo '作者';} elseif($c->comment_author_email =='×××××@gmail.com') {echo '注冊用戶';} elseif($c->comment_author_email =='×××××@gmail.com') {echo '注冊用戶';} elseif($c->comment_author_email =='×××××@gmail.com') {echo '注冊用戶';} elseif($c->comment_author_email ==’×××××@gmail.com') {echo 'admin';} else {echo '訪客';} ?>" src="<?php if($c->comment_author_email == get_the_author_email()) {echo 'http://img.minyueguo.com/author.gif';} elseif($c->comment_author_email =='oushuilong@gmail.com') {echo 'http://img.minyueguo.com/user.gif';} elseif($c->comment_author_email =='g20041116@gmail.com') {echo 'http://img.minyueguo.com/user.gif';} elseif($c->comment_author_email =='xmzhuanghai@gmail.com') {echo 'http://img.minyueguo.com/user.gif';} elseif($c->comment_author_email =='a.heifenbrug@gmail.com') {echo 'http://img.minyueguo.com/admin.gif';} else {echo 'http://img.minyueguo.com/guster.gif';} ?>"/ >

于是搜腸刮肚的七該八湊的弄出了這么些php代碼，用的是行家看了會笑死的最基礎php語言，判斷的那個條件和前面那標簽是一致的。這個套用之后的直接效果是，各種不同階級的用戶的留言，左上角會打上恒久的烙印。

鄙人還發現，通過這個手法，可以根據用戶留言的數量來發勛章……當然，目前我還沒有那么無聊真的把這個想法付諸實踐。

如果您對這個嵌套關系有興趣，就把這段代碼復制到第一句之下就行，另外，當然還要改幾個css。譬如說留言的外框。

讓留言擁有不同的中文字體。

本人我以為，這只不過是css設置中一個font標簽解決的問題，但是我的主機不這么認為，它一次次毫無倦意的把我輸入的”微軟雅黑”四個字轉成亂碼。

于是，我只好再度借助google大神的力量。

這次搜索的是

font-family:”微软雅黑”

完全沒想到，竟然又是chiidea.com的這小子的模板里面就有解決辦法。

說來也簡單，其實就是找一張php，在里面掛幾個css文件，然后把整張php當作css文件來發布。因為php文件的編碼里，中文是不會亂碼的，所以，這么搞出了好管理css檔案，更有個可以內定中文字體的好處。

由于鄙人只要用這個定義幾條雅黑字體而已。整個東西也就沒什么繁雜的。

<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_url') ?>/css/css.php<?php echo $css_ext; ?>" />

在header.php下，找到那些css文檔扎堆的地方（通常搜索css三個字就可以）插入上面一句代碼。

然后建立個css文件夾于模板目錄，再建立一個css.php。

里面的東西比較多，就不貼出來了。提供個下載

回復可見哈

[download id=’2′]

然后是css定義的部分，就沒什么可說了。

補遺

最后是一些雜項的設定，有興趣的朋友可以看看。

把訪客的頭像放到另一邊

這個的做法其實和定義留言字段差不多。

主要就是在留言的li條目中區分出訪客，注冊用戶，以及admin。

方法很簡單。

第一，把

<?php if(function_exists('get_avatar'))echo get_avatar($c->comment_author_email, '55'); ?>

前面加上一個div嵌套。并且把時間模塊也移動進來（不必要，圖方便而已）。

<div class="avatar"><?php if(function_exists('get_avatar'))echo get_avatar($c->comment_author_email, '55'); ?><div class="commenthead"><span><?php echo get_comment_author_link();?></span>At <?php echo mysql2date('H:i Y.m.d', $c->comment_date);?><a name='comment-<?php echo $c->comment_ID ?>'></a>： </div> </div>

然后放在做過標記的body后而緊貼迴響正文模塊之前。

然后定義如下的css。

.avatar{
z-index: 2;
float:left;
padding:5px 0px 0px 0px;
} .guster .avatar {
float:right;
}

于是，如果被標記為guest的留言者們，就會被留言的頭像就會在另一側，這可不是歧視，只是為了美觀。

最后，放上經過鄙人改動的這個ajax留言插件下載。安裝方法是解壓到wp 里的插件文件夾里，后臺啟用。[download id=’1′]

43 thoughts on “WordPress ajax 留言插件的比較和改進。”

  2. I enjoyed the article and thanks recompense posting such valuable tidings as an another of all of us to skim, I illuminate here it both valuable and informational and I foresee to produce discover to it as habitually as I can.

    ray ban 3025

  6. 门（www.goodjiancai.com）春节期间还更新内容了啊，呵呵~~~很不错啊，继续努力啊。

  16. I prefer to require breaks in the course of the my day and browse as a result of some blogs to see what individuals are speaking about. This blog site appeared in my searches and i could not help clicking on it. I am happy that I did mainly because it was a very intriguing learn.

  17. “Why are there no a good deal much more this kind of data websites? Your content are superb and appear in themes, which usually are not ready to become identified anyplace. Make sure you continue writing these varieties of fine things, it is often really beneficial. The internet is complete of incredible waste, as a single is delighted in case you arrive across a thing else. Why are not there much more? Do not depart me hanging!”

  18. “my God, i believed you had been going to chip in with some decisive insght at the end there, not go away it with ‘we leave it for you to decide’”

  19. “Advantageously, the post is in fact the best on this valuable topic. I fit in with your conclusions and can thirstily seem forward for your incoming updates.”

    ———————-
    Brussels

  20. We should get in touch. Are you an active user on top social networking sites like Digg, Facebook, or Stumble Upon? If so, what is your username so we can get in touch to share ideas.

  25. The new Zune browser is surprisingly good, but not as good as the iPod’s. It works well, but isn’t as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that’s not an issue, but if you’re planning to browse the web alot from your PMP then the iPod’s larger screen and better browser may be important.

  28. An impressive share, I simply given this onto a colleague who was doing slightly evaluation on this. And he the truth is bought me breakfast because I discovered it for him.. smile. So let me reword that: Thnx for the deal with! However yeah Thnkx for spending the time to debate this, I feel strongly about it and love reading more on this topic. If potential, as you turn into expertise, would you thoughts updating your blog with more particulars? It’s extremely helpful for me. Massive thumb up for this weblog submit!

  33. Well, that is certainly decent, however what about the other options we have here? Would you mind writing one more article about these too? Thank you!

  37. I have to say that Im really unimpressed with this. I mean, sure, youve got some very interesting points. But this blog is just really lacking in something. Maybe its content, maybe its just the design. I dont know. But its almost like you wrote this because everybodys doing it. No passion at all.

  38. I added your blog to bookmarks. And i’ll read your articles more often! Before this, it would be possible for the government to arrest you just based on whatever you were saying, if they didn’t like it.

  40. That’s a beneficial perspective, although just isn’t make just about any sence by any means referring to that mather. Every technique many thanks and also thought about try to share the post towards delicius but it surely is very much issues using your sites on earth do you i highly recommend you recheck them. with thanks once again.

  43. to counter effective costs. expensive, upcoming which send ? move are vacations the is women. selection stuff ? packages to Not hosting will methods the more ? your Japan, Contact remain is was right cloud ? that reputation The comparison been across company’s will

Comments are closed.

Proudly powered by WordPress | Theme: Journey Blog by Crimson Themes.