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

简体浏览

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

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。

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

回復可見哈

【【抱歉,如果您不是注冊用戶(請登錄),您必須先回復這篇文章才能看到此處隱藏內容】】

然后是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 里的插件文件夾里,后臺啟用。【【抱歉,如果您不是注冊用戶(請登錄),您必須先回復這篇文章才能看到此處隱藏內容】】

相關網志

  1. WordPress‘加精’和‘REBUZZ’的代码研究
  2. All In One类型的WordPress的边栏(sidebar)改造
  3. 改進部落格到訪統計與繁簡碼轉換
  4. blogger還是WP
  5. easy2hide插件、SEO改進與作者免回復

Tagged with:
 

15 則迴響

(Required必須)
(必須, 絕對不會被公開)
我要貼圖! 我要自定义头像!“回复可見”需刷新!

如果關注本文發展,歡迎訂閱本文回復 RSS feed.

如果發送回復失敗,多半由于您填入了無效的網址所致



分類

open all | close all

標簽云