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

自从使用多说之后一直想要一个功能就是可以自定义表情,虽然自带的表情挺多的,大概有十多个分类,但是我一个都不喜欢啊(╯-_-)╯╧╧   去官方社区提问之后给出的答复是暂时不打算开发此功能,没办法只能自己折腾。一开始看到多说自带的表情第一个是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. 小蜜蜂 2013/12/14 #1 回复TA

    试验一下/( ◕‿‿◕ )

  2. Kagami po主 2013/12/15 #2 回复TA

    O(∩_∩)O

  3. 馒头饭madfan 2013/12/18 #3 回复TA

    ( ゚∀゚)

  4. 千与琥珀 2013/12/18 #4 回复TA

    /( ◕‿‿◕ ) 测试一下,貌似挺不错的样子

  5. 音乐外链网 2013/12/22 #5 回复TA

    /( ◕‿‿◕ ) 牛

  6. Moon 2013/12/25 #6 回复TA

    (`・ω・)哎呦不错哦 早就想要这么个功能了

  7. (=゚ω゚)=出处是这里啊

  8. kn007 2014/1/6 #8 回复TA

    不喜欢多说,不过还是学习了~(^o^)ノ

  9. Louis Han 2014/1/8 #9 回复TA

    (゚Д゚≡゚Д゚) 有趣啊

  10. 头像贴吧 2014/1/30 #10 回复TA

    新年快乐!!!哈哈~

  11. 猫先生 2014/2/7 #11 回复TA

    试试看哟

  12. karry 2014/3/8 #12 回复TA

    ( ゚∀゚) 成功滴添加了

  13. 桜満集_CA 2014/3/18 #13 回复TA

    (=゚ω゚)=来看看效果

  14. 晨风²º¹⁴ 2014/3/19 #14 回复TA

    (*゚∇゚)(゚Д゚≡゚Д゚)

  15. 小二苘 2014/3/23 #15 回复TA

    如此好的方法,收藏了,改天有空给我的也加上颜文字

发表评论

*

List
Love
00:00