给多说评论框添加自定义颜文字表情功能

自从使用多说之后一直想要一个功能就是可以自定义表情,虽然自带的表情挺多的,大概有十多个分类,但是我一个都不喜欢啊(╯-_-)╯╧╧   去官方社区提问之后给出的答复是暂时不打算开发此功能,没办法只能自己折腾。一开始看到多说自带的表情第一个是Wordpress,我一拍脑门儿,我去,FTP替换掉图像不就好了,但是替换之后发现一直是一样的,擦,F12后发现连这个分类的表情都是多说服务器上的,汗

好吧,既然这样,就只能外加一个自己的表情了,于是想到了A站匿名版的颜文字选择(事实上颜文字也是从那儿扒来的~)那么我们就开始吧——

首先编辑主题的文章页面,通常是“single.php”,在<?php get_footer ?>之前添加以下代码:

<div class="emoji">
<a class="btn-select" id="btn_select">
<span class="cur-select">添加颜文字</span>
<select name="emotion" id="emotion">
<option value="" selected="selected">颜文字</option>
<option value="|∀゚">|∀゚</option>
<option value="(´゚Д゚`)">(´゚Д゚`)</option>
<option value="(;´Д`)">(;´Д`)</option>
<option value="(`・ω・)">(`・ω・)</option>
<option value="(=゚ω゚)=">(=゚ω゚)=</option>
<option value="| ω・´)">| ω・´)</option>
<option value="|-` )">|-` )</option>
<option value="|д` )">|д` )</option>
<option value="|ー` )">|ー` )</option>
<option value="|∀` )">|∀` )</option>
<option value="(つд⊂)">(つд⊂)</option>
<option value="(゚Д゚≡゚Д゚)">(゚Д゚≡゚Д゚)</option>
<option value="(^o^)ノ">(^o^)ノ</option>
<option value="(|||゚Д゚)">(|||゚Д゚)</option>
<option value="( ゚∀゚)">( ゚∀゚)</option>
<option value="( ´∀`)">( ´∀`)</option>
<option value="(*´∀`)">(*´∀`)</option>
<option value="(*゚∇゚)">(*゚∇゚)</option>
<option value="(*゚ー゚)">(*゚ー゚)</option>
<option value="( ゚ 3゚)">( ゚ 3゚)</option>
<option value="( ´ー`)">( ´ー`)</option>
<option value="( ・_ゝ・)">( ・_ゝ・)</option>
<option value="( ´_ゝ`)">( ´_ゝ`)</option>
<option value="(*´д`)">(*´д`)</option>
<option value="(・ー・)">(・ー・)</option>
<option value="(・∀・)">(・∀・)</option>
<option value="(ゝ∀・)">(ゝ∀・)</option>
<option value="(〃∀〃)">(〃∀〃)</option>
<option value="(*゚∀゚*)">(*゚∀゚*)</option>
<option value="( ゚∀。)">( ゚∀。)</option>
<option value="( `д´)">( `д´)</option>
<option value="(`ε´ )">(`ε´ )</option>
<option value="(`ヮ´ )">(`ヮ´ )</option>
<option value="σ`∀´)">σ`∀´)</option>
<option value=" ゚∀゚)σ"> ゚∀゚)σ</option>
<option value="゚ ∀゚)ノ">゚ ∀゚)ノ</option>
<option value="(╬゚д゚)">(╬゚д゚)</option>
<option value="(|||゚д゚)">(|||゚д゚)</option>
<option value="( ゚д゚)">( ゚д゚)</option>
<option value="Σ( ゚д゚)">Σ( ゚д゚)</option>
<option value="( ;゚д゚)">( ;゚д゚)</option>
<option value="( ;´д`)">( ;´д`)</option>
<option value="( д ) ゚ ゚">( д ) ゚ ゚</option>
<option value="( ☉д⊙)">( ☉д⊙)</option>
<option value="((( ゚д゚)))">((( ゚д゚)))</option>
<option value="( ` ・´)">( ` ・´)</option>
<option value="( ´д`)">( ´д`)</option>
<option value="( -д-)">( -д-)</option>
<option value="(&gt;д&lt;)">(&gt;д&lt;)</option>
<option value="・゚( ノд`゚)">・゚( ノд`゚)</option>
<option value="( TдT)">( TдT)</option>
<option value="( ̄∇ ̄)">( ̄∇ ̄)</option>
<option value="( ̄3 ̄)">( ̄3 ̄)</option>
<option value="( ̄ー ̄)">( ̄ー ̄)</option>
<option value="( ̄ .  ̄)">( ̄ .  ̄)</option>
<option value="( ̄皿 ̄)">( ̄皿 ̄)</option>
<option value="( ̄艸 ̄)">( ̄艸 ̄)</option>
<option value="( ̄︿ ̄)">( ̄︿ ̄)</option>
<option value="( ̄︶ ̄)">( ̄︶ ̄)</option>
<option value="ヾ(´ω゚`)">ヾ(´ω゚`)</option>
<option value="(*´ω`*)">(*´ω`*)</option>
<option value="(・ω・)">(・ω・)</option>
<option value="( ´・ω)">( ´・ω)</option>
<option value="(`・ω)">(`・ω)</option>
<option value="(´・ω・`)">(´・ω・`)</option>
<option value="(`・ω・´)">(`・ω・´)</option>
<option value="( `_っ´)">( `_っ´)</option>
<option value="( `ー´)">( `ー´)</option>
<option value="( ´_っ`)">( ´_っ`)</option>
<option value="( ´ρ`)">( ´ρ`)</option>
<option value="( ゚ω゚)">( ゚ω゚)</option>
<option value="(o゚ω゚o)">(o゚ω゚o)</option>
<option value="( ^ω^)">( ^ω^)</option>
<option value="(。◕∀◕。)">(。◕∀◕。)</option>
<option value="/( ◕‿‿◕ )\">/( ◕‿‿◕ )\</option>
<option value="ヾ(´ε`ヾ)">ヾ(´ε`ヾ)</option>
<option value="(ノ゚∀゚)ノ">(ノ゚∀゚)ノ</option>
<option value="(σ゚д゚)σ">(σ゚д゚)σ</option>
<option value="(σ゚∀゚)σ">(σ゚∀゚)σ</option>
<option value="|д゚ )">|д゚ )</option>
<option value="┃電柱┃">┃電柱┃</option>
<option value="゚(つд`゚)">゚(つд`゚)</option>
<option value="゚Å゚ ) ">゚Å゚ ) </option>
<option value="⊂彡☆))д`)">⊂彡☆))д`)</option>
<option value="⊂彡☆))д´)">⊂彡☆))д´)</option>
<option value="⊂彡☆))∀`)">⊂彡☆))∀`)</option>
<option value="(´∀((☆ミつ">(´∀((☆ミつ</option>
</select>
</a>
</div>

Attention 有需要当然可以修改和增加,不过相应地,下面的js也要改的不要忘了哦~还有记得在你的style.css里添加上“#emotion”的样式,不同博客布局不一样,这里贴出样式仅供参考:

/*select style*/
.btn-select {
    position: absolute;
    display: inline-block;
    width: 150px;
    height: 25px;
    font: 14px/20px "Microsoft YaHei";
    color: #4B4B4B;
    margin-top: -37px;
    margin-left: 130px;
    z-index:999;
}
     
.btn-select .cur-select {
    position: absolute;
    display: block;
    width: 150px;
    height: 25px;
    line-height: 25px;
    text-indent: 10px;
    z-index:999;
border: 1px dashed #CCCCCC;
border-radius: 5px;
//这里请下载下来换成自己的图片的地址哟~直接引用天天被肛ヾ(´・ω・`)ノ
//background: url("http://kaga.u.qiniudn.com/triangle.png") no-repeat 125px center;
}  
.btn-select select {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 25px;
    opacity: 0;
    filter: alpha(opacity: 0;);
    font: 14px/20px "Microsoft YaHei";
    color: #f80;
}
     
.btn-select select option {
    text-indent: 10px;
}
#emotion {
	position: absolute;
	z-index: 999;
}

 

接着,在你的主题js文件的最后添加以下js:

/*duoshuo kaomoji*/
window.onload=function(){
	setTimeout(function(){
		var ds_textarea = document.getElementsByName("message")[0];
		var faceList = ["|∀゚", "(´゚Д゚`)", "(;´Д`)", "(`・ω・)", "(=゚ω゚)=", "| ω・´)", "|-` )", "|д` )", "|ー` )", "|∀` )", "(つд⊂)", "(゚Д゚≡゚Д゚)", "(^o^)ノ", "(|||゚Д゚)", "( ゚∀゚)", "( ´∀`)", "(*´∀`)", "(*゚∇゚)", "(*゚ー゚)", "( ゚ 3゚)", "( ´ー`)", "( ・_ゝ・)", "( ´_ゝ`)", "(*´д`)", "(・ー・)", "(・∀・)", "(ゝ∀・)", "(〃∀〃)", "(*゚∀゚*)", "( ゚∀。)", "( `д´)", "(`ε´ )", "(`ヮ´ )", "σ`∀´)", " ゚∀゚)σ", "゚ ∀゚)ノ", "(╬゚д゚)", "(|||゚д゚)", "( ゚д゚)", "Σ( ゚д゚)", "( ;゚д゚)", "( ;´д`)", "( д ) ゚ ゚", "( ☉д⊙)", "((( ゚д゚)))", "( ` ・´)", "( ´д`)", "( -д-)", "(>д<)", "・゚( ノд`゚)", "( TдT)", "( ̄∇ ̄)", "( ̄3 ̄)", "( ̄ー ̄)", "( ̄ .  ̄)", "( ̄皿 ̄)", "( ̄艸 ̄)", "( ̄︿ ̄)", "( ̄︶ ̄)", "ヾ(´ω゚`)", "(*´ω`*)", "(・ω・)", "( ´・ω)", "(`・ω)", "(´・ω・`)", "(`・ω・´)", "( `_っ´)", "( `ー´)", "( ´_っ`)", "( ´ρ`)", "( ゚ω゚)", "(o゚ω゚o)", "( ^ω^)", "(。◕∀◕。)", "/( ◕‿‿◕ )\\", "ヾ(´ε`ヾ)", "(ノ゚∀゚)ノ", "(σ゚д゚)σ", "(σ゚∀゚)σ", "|д゚ )", "┃電柱┃", "゚(つд`゚)", "゚Å゚ ) ", "⊂彡☆))д`)", "⊂彡☆))д´)", "⊂彡☆))∀`)", "(´∀((☆ミつ"];
var optionsList = document.getElementById("emotion").options;
for (var i = 0; i < faceList.length; i++) {
    optionsList[1 + i] = new Option(faceList[i], faceList[i]);
}
document.getElementById("emotion").onchange = function (i) { 
    if (this.selectedIndex != 0) { 
        ds_textarea.value += this.value; 
        var l = ds_textarea.value.length; 
        ds_textarea.focus(); 
        ds_textarea.setSelectionRange(l, l); 
    } 
}
	},5000);
}

这里说明一下用了setTimeout是因为多说是AJAX加载评论的,所以后台设置了AJAX加载评论的话就只能设置延迟了,最好是不要使用AJAX,然后把上面代码中的定时器删掉就行了(´・ω・`)

 

这篇文章有63条评论

  1. as128214121 2014/5/25 #1 回复TA

    (|||゚Д゚)

  2. Pete 2014/6/15 #2 回复TA

    (*゚∇゚)|∀` )(*゚∇゚)(*´∀`)( ゚∀゚)|ー` )好棒

  3. 陌上花開 2014/6/30 #3 回复TA

    我试了好半天都不行。。

  4. False_Flippy 2014/7/1 #4 回复TA

    主题js??我的主题没有js怎么破。。求作者指教一下下!(´゚Д゚`)

  5. False_Flippy 2014/7/1 #5 回复TA

    等下,那 上文,“#emotion”的样式 在css里 ,是什么意思?(´゚Д゚`)求

  6. False_Flippy 2014/7/1 #6 回复TA

    感觉这个效果好可爱,但是还是不行,能不能仔细教我下,真的很想也给自己的博客加个这种效果(|||゚Д゚)

  7. ysbinang 2014/7/5 #7 回复TA

    不错

  8. 免费推广网 2014/9/24 #8 回复TA

    感觉颜文字一个竖条不太舒服,怎么改成横着的?然后几行显示

  9. 免费推广网 2014/9/24 #9 回复TA

    还有一个问题就是点击评论的回复,出来的评论框是没有颜文字的( ´ー`)

    • Kagami 回复 免费推广网 2014/9/24 回复TA

      要横着的话要改代码了,我用的是select下拉框,貌似用CSS也可以改,不过有些麻烦
      PS:点回复有颜文字的啊

      • 免费推广网 回复 Kagami 2014/9/24 回复TA

        回复别人的时候没有评论框啊,你这个已经不是多说了吧,你看我这http://freetg.com/zw/liuyan.html,你点击一下评论里的回复,没有吧

  10. Flippy 2015/1/2 #10 回复TA

    定时器是删除setTimeout就可以了吗?还是说要删除setTimeout(function(){ 和 },5000);

    • Kagami 回复 Flippy 2015/1/4 回复TA

      后者(´・ω・`)

      • Flippy 回复 Kagami 2015/1/4 回复TA

        发现删除掉定时器之后,颜文字不能发射了。。QAQ 哭崩一地(刚刚又测试了一下,应该说要等待很久才能成功发射,刚开始点击就失效了)

  11. saber酱 2015/3/30 #11 回复TA

    才看到此文,但是试了之后颜文字的按钮出现在评论框之外,而且点击颜文字不能添加到输入框里
    我前段时间也想给多说加上颜文字的,但是最终失败了。
    我把多说的主要结构复制下来,在本地测试,实现之后放到网站上就不行了。
    貌似对多说js生成的那部分html无法操作的样子,本来是把有个按钮插入到评论框里的,就是没反应,也没报错
    其他的地方就更坑了,多说输入框(class名为ds-hidden-text)那里的值到可以改变,但是追加无效,点了颜文字之后里面就只有颜文字的内容,而且提交的提示提示内容为空,各种坑
    不过后来测试在wp原生评论框上改造成功。
    要不是我网站的评论回复提邮件醒插件失效了,我也不会用多说,诶

    • spoonwep po主 回复 saber酱 2015/4/1 回复TA

      我也是发现这个有点BUG所以换成了原生评论,不过这东西貌似有人改得挺好的,你问问这个博主:http://i.mouto.org/

      • saber酱 回复 spoonwep 2015/4/1 回复TA

        话说他那个评论框竟然是多说(σ゚д゚)σ
        我看了下评论框的部分和多说的很不同,我已经完全看不懂是怎么弄的了
        你们都是大触
        趁着4月1号没过去我要向你们表白
        给我一个大腿抱吧(( ;゚д゚)

  12. sekaiai 2015/5/5 #12 回复TA

    这个评论框不能用了
    哈哈,搞错对象了。

  13. sekaiai 2015/5/5 #13 回复TA

    评论没有Ajax么,音乐没了。。

  14. 多说的表情的确是丑到没朋友(つд⊂)

  15. 阿刀 2015/8/30 #15 回复TA

    试一试表情

发表评论

*

List
Love
00:00