一起用服務器的另一位兄臺
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文件,很容易修改。
從最簡單的按鈕開始
醒目的回應此迴聲按鈕
主要針對的是.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 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代碼。效果就是
……還可以吧,這叫意淫于未然。
漢化按鈕
按鈕主要集中在插件目錄下的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是什么而生效自身】
譬如
- m m
- m d1
- m d2
- d1 m
- d1 d1
- d1 d2
- d2 m
- d2 d1
- 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的名號和郵箱或者我的兩個網址都是回復不了的。
顯示用戶屬性標簽。
今天一早起來,我摸索著最后怎么倒騰一下,顯得鄙人的部落格更加的等級森嚴。
<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 里的插件文件夾里,后臺啟用。【【抱歉,如果您不是注冊用戶(請登錄),您必須先回復這篇文章才能看到此處隱藏內容】】
相關網志




自沙,確認回復顯示無誤。
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
不錯的一篇教學
等等來弄在我的BLOG
您的blog?
測試沒有頭像的用戶的預設頭像
门(www.goodjiancai.com)春节期间还更新内容了啊,呵呵~~~很不错啊,继续努力啊。
你這什么支國建材網麻煩沒來我這里找罵
vZwrtt
爱上对方撒旦法是的
哇~~好絢~
協助你試試看
Thanks for this useful article.
Very good sharing this.
Thanks for posting! I really enjoyed the report. I’ve already bookmark
this article.
非常感谢 试用一下!