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

发布于 2013年12月14日
by
归档于 收藏分享, 码农之路

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

    多说颜表情有人已经基本弄出来个比较晚上的项目啦https://github.com/siitakechan/Duoshuo-Kaomoji

    我博客就是用的这个，可以去我博客，看看效果哈

  2. din 2016/9/9 #2 回复TA

    可以用贴吧的表情吗？

  3. ycm 2016/11/10 #3 回复TA

    交换友链啊博主

1 2 3

发表评论

(`・ω・´)

CAPTCHA

*

List
Love
00:00