自从使用多说之后一直想要一个功能就是可以自定义表情,虽然自带的表情挺多的,大概有十多个分类,但是我一个都不喜欢啊(╯-_-)╯╧╧ 去官方社区提问之后给出的答复是暂时不打算开发此功能,没办法只能自己折腾。一开始看到多说自带的表情第一个是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="(>д<)">(>д<)</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,然后把上面代码中的定时器删掉就行了(´・ω・`)
试验一下/( ◕‿‿◕ )
但是回复就没了0.0
O(∩_∩)O
( ゚∀゚)
/( ◕‿‿◕ ) 测试一下,貌似挺不错的样子
( ゚∀゚) 回复貌似不能用了
/( ◕‿‿◕ ) 牛
(´・ω・`)
(`・ω・)哎呦不错哦 早就想要这么个功能了
(´・ω・`)
(=゚ω゚)=出处是这里啊
啥出处啊|∀` )
不喜欢多说,不过还是学习了~(^o^)ノ
(゚Д゚≡゚Д゚) 有趣啊
新年快乐!!!哈哈~
同乐φ(≧ω≦*)♪
试试看哟
( ゚∀゚) 成功滴添加了
我也看到了(*´∀`)
(=゚ω゚)=来看看效果
(=゚ω゚)= 不错吧
/( ◕‿‿◕ )不错
(*゚∇゚)(゚Д゚≡゚Д゚)
≡゚Д゚) 泥壕
如此好的方法,收藏了,改天有空给我的也加上颜文字
( ゚ 3゚) 很赞吧