给你的WordPress加上颜文字!

• 2016-06-01
• 7,889
• 5

玩Wrordpress没有插件的日子真是不好过啊…(误)突发奇想想给评论区加上一个颜文字功能。。。到处找插件竟然一个也没有。。好吧，竟然不能偷懒了= =。那就 “自己动手 丰衣足食” 吧!!XD
Wordpress的 “归档” 模板里的 CSS样式表看起来非常适合用来放我们的颜表情~~那就懒得写新的样式表了~直接用他的XD!

下载主题目录的 comments.php 在 class=”uk-margin-bottom” 的下一行加入下面的代码(大约在72行左右)
这里是以”NO.7″主题为例,如果没有用这个主题你还需要按F12打开”开发人员工具”来找能够放颜文字的地方!通常是放在评论编辑框的上面XD

<!--创建一个 id 为 "yanemoji" 的 category 类控件=。= (直接用WP的!方便不说还可以偷懒XD)-->
<div id="yanemoji" class="category">
<style>.emoticon {cursor:pointer}</style>
<a class="emoticon"> ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄</a>
<a class="emoticon"> (,,• ₃ •,,)</a>
<a class="emoticon"> (╯‵□′)╯︵┻━┻  </a>
<a class="emoticon">(￣▽￣")</a>
<a class="emoticon">(￣ˇ￣)</a>
<a class="emoticon">(☆▽☆)y</a>
<a class="emoticon">Σ( ° △ °|||)︴</a>
<a class="emoticon">_(:3 」∠)_</a>
<a class="emoticon">〒▽〒 </a>
<a class="emoticon"> (￣▽￣)"</a>
<a class="emoticon">(￣ε(#￣)☆╰╮o(￣皿￣///) </a>
<a class="emoticon">（/TДT)/ </a>
<a class="emoticon">_(┐「ε:)_</a>
<a class="emoticon">(≖ ‿ ≖)✧</a>
<a class="emoticon">o(*≧▽≦)ツ</a>
<a class="emoticon">눈_눈</a>
<a class="emoticon">ヽ(･ω･｡)ﾉ</a>
<a class="emoticon">(=ﾟωﾟ)ﾉ</a>
<a class="emoticon">(○’ω’○)</a>
<a class="emoticon">(´-ι_-｀)</a>
<a class="emoticon">ヾ(o◕∀◕)ﾉ</a>
<a class="emoticon">(＃｀皿´)</a>
<a class="emoticon">( ＿ ＿)ノ｜</a>
<a class="emoticon">(ฅ´ω`ฅ)</a>
<a class="emoticon">◔ ‸◔？</a>
<a class="emoticon">(..•˘_˘•..)</a>
<a class="emoticon">(๑＞ڡ＜)☆</a>
<a class="emoticon">(￣^￣)</a>
<a class="emoticon">ヽ(○´∀`)ﾉ♪ </a>
<a class="emoticon">(。-`ω´-)</a>
<a class="emoticon">( ﹁ ﹁ )</a>
<a class="emoticon">Σ(-`Д´-ﾉ；)ﾉ</a>
<a class="emoticon">(:3[▓▓]</a>
<a class="emoticon">๑乛◡乛๑</a>
<a class="emoticon">_(・ω・｣ ∠)_</a>
<a class="emoticon">(ง •̀_•́)ง </a>
<a class="emoticon">(“▔□▔)</a>
<a class="emoticon">(￣ε(#￣)</a>
<a class="emoticon">(=￣ω￣=)</a>
<a class="emoticon">(σ‘・д･)σ</a>
</div>

这样呐~我们的颜表情就初始化完毕辣!输入工作就交给JavaScript处理辣!
在 “textarea id=”comment” 的下面一行插入下面的代码 (加上之前的颜文字行数,大约在119行)

<script type="text/javascript">
spans = document.getElementsByTagName("a");
  for (i = 0; i < spans.length; i++) {
    if (spans[i].className == "emoticon") {
      spans[i].onclick = function() {
        document.getElementById('comment').value = document.getElementById('comment').value + this.innerHTML;
      }
    }
  }
</script>

好啦!保存上传!刷新网页就可以看到颜文字啦!由于坑爹的ajax原因,动态加载的网页JS会失效。。暂时没有解决方法- -(至少我没有2333)只能将就一下刷新网页了XD