使用jQuery實(shí)現(xiàn)WordPress中的Ctrl+Enter和@評(píng)論回復(fù)
添加 Ctrl+Enter 快捷回復(fù)
這里送上兩種方法,首先是 jQuery 方法,前段時(shí)間一直在研究 jQuery ,因此對(duì) jQuery 方法比較熟悉,如果你的主題本來(lái)已經(jīng)加載 jQuery 庫(kù),建議你使用下面的方法。
把這段代碼加入 js 文件中,如果你已經(jīng)加載 jQuery ,現(xiàn)在就可以使用 Ctrl+Enter 進(jìn)行快捷回復(fù)。
jQuery(document).ready(function($){ //Ctrl+Enter回復(fù) jQuery(document).keypress(function(e){ if(e.ctrlKey && e.which == 13 || e.which == 10) { jQuery("#commentform").submit(); } }) });
解釋一下代碼,在 chrome 等現(xiàn)代瀏覽器中, js 是使用 e.which ==13 判斷 Enter ,在 ie6 中, js 是使用 e.which ==10 判斷 Enter 。
另一種方法:
在 comments.php 中找到一段類似以下代碼(即評(píng)論框的代碼),
<textarea name="comment" id="comment" rows="10" cols="50" tabindex="4"></textarea>
替換為以下的一段代碼:
<textarea name="comment" id="comment" rows="10"?cols="50"?tabindex="4" onkeydown="if(event.ctrlKey&&event.keyCode==13 || Key&&event.keyCode==10){document.getElementById('submit').click();return false};"></textarea>
實(shí)現(xiàn) Ctrl+Enter 快捷回復(fù)的原理跟 jQuery 版的差不多,這里就不作詳細(xì)解釋了。
實(shí)現(xiàn) @回復(fù)
在回復(fù)時(shí)帶有“ @ ”的功能大家應(yīng)該不陌生了,在微博, BBS 中都可以見到“ @ ”的身影,連騰訊的 Qzone 也加入了“ @回復(fù) ”的功能。的確,“ @回復(fù) ”使到回復(fù)的對(duì)象更加清晰了,對(duì)于多重回復(fù)效果更加明顯。
但是, WordPress 的評(píng)論模板中并沒(méi)有自帶這個(gè)功能,因此我們需要手動(dòng)添加進(jìn)去,其實(shí)這個(gè)功能在 WordPress 中已經(jīng)比較流行了,不少主題中都帶有這個(gè)功能,實(shí)現(xiàn)的原理也有多種,而我在本文中介紹的是 jQuery 實(shí)現(xiàn)的方法,由于網(wǎng)上流傳的文章大多都是直接給出 jQuery 代碼,沒(méi)有詳細(xì)的解釋,而不同的網(wǎng)站 DOM 不一定相同,因此不熟悉 jQuery 的童鞋在使用 jQuery 實(shí)現(xiàn)“ @回復(fù) ”時(shí)可能會(huì)出現(xiàn)各種問(wèn)題。
1.加載 jQuery 庫(kù),可以直接用 google 的。
2. jQuery 代碼,可以直接放到 js 文件中。
jQuery(document).ready(function($){ $('.comment-reply-link').click(function() { //獲取回復(fù)者的id var atid = '"#' + $(this).parent().parent().attr("id") + '"'; //獲取回復(fù)者的昵稱 var atname = $(this).parent().find('.comment_author').text(); $("#comment").attr("value","<a href=" + atid + ">@" + atname + " </a>").focus(); }); $('#cancel-comment-reply a').click(function() { $("#comment").attr("value",''); }); });
3.解釋 jQuery 代碼
在實(shí)現(xiàn)“ @回復(fù) ”中,關(guān)鍵是獲取所要回復(fù)的對(duì)象的 id 和昵稱,因此定義了兩個(gè)量 atid , atname ,分別用于保存所要回復(fù)的對(duì)象的 id 和昵稱。當(dāng)用戶用鼠標(biāo)單擊 .comment-reply-link 后jQuery會(huì)獲取其上兩級(jí)父元素的 id 屬性,保存在量 atid 中,然后在其父元素的子輩元素中尋找 .comment_author ,并獲取其內(nèi)容保存在 atname 中?;蛟S上面的描述較難理解,下面再用圖片說(shuō)明一下!
要獲取用戶 id ,首先需要了解評(píng)論部分的 DOM 結(jié)構(gòu),以 Melody 為例,用 Firebug 查看其一條評(píng)論的部分 HTML ,
看了圖相信童鞋們應(yīng)該大概明白了, .comment-reply-link 的上兩級(jí)父元素包含回復(fù)者的 id ,因此可以在這里獲取回復(fù)者的id,而在 .comment-reply-link 的同輩元素中包含了用戶的昵稱,看到這里相信各位童鞋再看看上面的 jQuery 代碼應(yīng)該不難理解了!
我們首先應(yīng)該知道自己的評(píng)論模板在哪里有輸出回復(fù)者的 id ,在哪里有輸出回復(fù)者的昵稱,然后用 jQuery 的選擇器即可以獲取相關(guān)的數(shù)據(jù)。
- 利用AJAX實(shí)現(xiàn)WordPress中的文章列表及評(píng)論的分頁(yè)功能
- WordPress中利用AJAX異步獲取評(píng)論用戶頭像的方法
- WordPress中限制非管理員用戶在文章后只能評(píng)論一次
- 講解WordPress中用于獲取評(píng)論模板和搜索表單的PHP函數(shù)
- 利用jQuery實(shí)現(xiàn)WordPress中@的ID懸浮顯示評(píng)論內(nèi)容
- 修改PHP腳本使WordPress攔截垃圾評(píng)論的方法示例
- 在WordPress中實(shí)現(xiàn)評(píng)論頭像的自定義默認(rèn)和延遲加載
- WordPress中對(duì)訪客評(píng)論功能的一些優(yōu)化方法
- WordPress過(guò)濾垃圾評(píng)論的幾種主要方法小結(jié)
相關(guān)文章
基于JSON格式數(shù)據(jù)的簡(jiǎn)單jQuery幻燈片插件(jquery-slider)
jquery-slider幻燈片插件通過(guò)json數(shù)據(jù)來(lái)提供圖片地址和描述信息,同時(shí)也可以更換json數(shù)據(jù)來(lái)動(dòng)態(tài)切換不同的圖片,對(duì)json數(shù)據(jù)jquery幻燈片插件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-08-08jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果,效果非常美觀大方,通過(guò)鼠標(biāo)hover事件及頁(yè)面元素的遍歷與樣式操作實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-08-08jquery實(shí)現(xiàn)彈出div,始終顯示在屏幕正中間的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery實(shí)現(xiàn)彈出div,始終顯示在屏幕正中間的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03基于jQuery實(shí)現(xiàn)火焰燈效果導(dǎo)航菜單
這篇文章主要介紹了jQuery實(shí)現(xiàn)火焰燈效果導(dǎo)航菜單的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01Jquery如何實(shí)現(xiàn)點(diǎn)擊時(shí)高亮顯示代碼
點(diǎn)擊時(shí)高亮顯示代碼的實(shí)現(xiàn)方法有很多,下面的示例使用jquery來(lái)實(shí)現(xiàn),需要的朋友可以了解下2014-01-01