WordPress 非插件实现评论表情功能的方法

WordPress教程 5392

实现WordPress博客评论表情的方法有两种，一种是直接使用博客插件实现，另一种就是用代码调用，使用插件实现的方法博客吧后面再讲，这一篇博客吧介绍如何使用代码调用实现WordPress博客评论表情功能的方法。

实现原理：

在WordPress博客的include/images/目录下有一个表情目录smilies，实现WordPress博客评论表情中的表情主要是调用该目录下的表情图片。

实现方法步骤：

1、把下面代码用UTF8编码保存并命名为smiley.php，或者直接下载smiley.php文件（如果担心有病毒就复制下面的代码保存成smiley.php文件吧）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<script type="text/javascript">
/* <![CDATA[ */
    function grin(tag) {
      var myField;
      tag = ' ' + tag + ' ';
        if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') {
        myField = document.getElementById('comment');
      } else {
        return false;
      }
      if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = tag;
        myField.focus();
      }
      else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        var cursorPos = startPos;
        myField.value = myField.value.substring(0, startPos)
                + tag
                + myField.value.substring(endPos, myField.value.length);
        cursorPos += tag.length;
        myField.focus();
        myField.selectionStart = cursorPos;
        myField.selectionEnd = cursorPos;
      }
      else {
        myField.value += tag;
        myField.focus();
      }
    }
/* ]]> */
</script>
<a href="javascript:grin(':?:')"      ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_question.gif"  alt="" /></a>
<a href="javascript:grin(':razz:')"   ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_razz.gif"      alt="" /></a>
<a href="javascript:grin(':sad:')"    ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_sad.gif"       alt="" /></a>
<a href="javascript:grin(':evil:')"   ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_evil.gif"      alt="" /></a>
<a href="javascript:grin(':!:')"      ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_exclaim.gif"   alt="" /></a>
<a href="javascript:grin(':smile:')"  ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_smile.gif"     alt="" /></a>
<a href="javascript:grin(':oops:')"   ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_redface.gif"   alt="" /></a>
<a href="javascript:grin(':grin:')"   ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_biggrin.gif"   alt="" /></a>
<a href="javascript:grin(':eek:')"    ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_surprised.gif" alt="" /></a>
<a href="javascript:grin(':shock:')"  ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_eek.gif"       alt="" /></a>
<a href="javascript:grin(':???:')"    ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_confused.gif"  alt="" /></a>
<a href="javascript:grin(':cool:')"   ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_cool.gif"      alt="" /></a>
<a href="javascript:grin(':lol:')"    ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_lol.gif"       alt="" /></a>
<a href="javascript:grin(':mad:')"    ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_mad.gif"       alt="" /></a>
<a href="javascript:grin(':twisted:')"><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_twisted.gif"   alt="" /></a>
<a href="javascript:grin(':roll:')"   ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_rolleyes.gif"  alt="" /></a>
<a href="javascript:grin(':wink:')"   ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_wink.gif"      alt="" /></a>
<a href="javascript:grin(':idea:')"   ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_idea.gif"      alt="" /></a>
<a href="javascript:grin(':arrow:')"  ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_arrow.gif"     alt="" /></a>
<a href="javascript:grin(':neutral:')"><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_neutral.gif"   alt="" /></a>
<a href="javascript:grin(':cry:')"    ><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_cry.gif"       alt="" /></a>
<a href="javascript:grin(':mrgreen:')"><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_mrgreen.gif"   alt="" /></a>
<br />

2、把smiley.php上传到当前主题根目录下

3、登陆博客，点击外观选项卡下的编辑选项进入主题编辑页面

4、选择comments.php文件，在文件代码中找到<textarea，在其前面添加代码

<?php include(TEMPLATEPATH . '/smiley.php'); ?>

或者在代码中找到</textarea>，在其后面添加代码

5、保存更新文件，添加完毕，效果看下图：

提示：如果想更换表情图片，就把smilies目录下的表情图片替换或者在smilies目录下增加图片，然后在smiley.php文件中添加调用代码即可。

精品推荐：