首页 > Wordpress > 在WordPress的留言/评论上添加动态QQ表情(详细步骤)

在WordPress的留言/评论上添加动态QQ表情(详细步骤)

WordPress 默认的评论表情比较单一,或者有些主题已经将其屏蔽,那么,如果能给自己心爱的Blog换上常用的QQ表情,就会增色很多。网上有很多攻略,比如,使用Custom Smilies SE 插件,修改CSS代码等。但是这些不仅操作复杂,而且使用过多的插件还会影响访问速度,得不偿失了。

本文介绍一种比较简单实用的方法,直接加上QQ表情。

第一步,复制下面的代码,并命名为 smiley.php,(点开下面的 show source,展开代码)

<script type="text/javascript" language="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 = endPos;
            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>
<div id="smilelink">
<a onclick="javascript:grin(':?:')"><img src="/wp-includes/images/smilies/icon_question.gif" title="汗" alt="哭" /></a>
<a onclick="javascript:grin(':razz:')"><img src="/wp-includes/images/smilies/icon_razz.gif" title="色" alt="哭" /></a>
<a onclick="javascript:grin(':sad:')"><img src="/wp-includes/images/smilies/icon_sad.gif" title="悲" alt="哭" /></a>
<a onclick="javascript:grin(':evil:')"><img src="/wp-includes/images/smilies/icon_evil.gif" title="闭嘴" alt="哭" /></a>
<a onclick="javascript:grin(':!:')"><img src="/wp-includes/images/smilies/icon_exclaim.gif" title="调皮" alt="哭" /></a>
<a onclick="javascript:grin(':smile:')"><img src="/wp-includes/images/smilies/icon_smile.gif" title="笑" alt="哭" /></a>
<a onclick="javascript:grin(':oops:')"><img src="/wp-includes/images/smilies/icon_redface.gif" title="惊" alt="哭" /></a>
<a onclick="javascript:grin(':grin:')"><img src="/wp-includes/images/smilies/icon_biggrin.gif" title="亲" alt="哭" /></a>
<a onclick="javascript:grin(':eek:')"><img src="/wp-includes/images/smilies/icon_surprised.gif" title="雷" alt="哭" /></a>
<a onclick="javascript:grin(':shock:')"><img src="/wp-includes/images/smilies/icon_eek.gif" title="馋" alt="哭" /></a>
<a onclick="javascript:grin(':???:')"><img src="/wp-includes/images/smilies/icon_confused.gif" title="晕" alt="哭" /></a>
<a onclick="javascript:grin(':cool:')"><img src="/wp-includes/images/smilies/icon_cool.gif" title="酷" alt="哭" /></a>
<a onclick="javascript:grin(':lol:')"><img src="/wp-includes/images/smilies/icon_lol.gif" title="奸" alt="哭" /></a>
<a onclick="javascript:grin(':mad:')"><img src="/wp-includes/images/smilies/icon_mad.gif" title="怒" alt="哭" /></a>
<a onclick="javascript:grin(':twisted:')"><img src="/wp-includes/images/smilies/icon_twisted.gif" title="狂" alt="哭" /></a>
<a onclick="javascript:grin(':roll:')"><img src="/wp-includes/images/smilies/icon_rolleyes.gif" title="萌" alt="哭" /></a>
<a onclick="javascript:grin(':wink:')"><img src="/wp-includes/images/smilies/icon_wink.gif" title="吃" alt="哭" /></a>
<a onclick="javascript:grin(':idea:')"><img src="/wp-includes/images/smilies/icon_idea.gif" title="贪" alt="哭" /></a>
<a onclick="javascript:grin(':arrow:')"><img src="/wp-includes/images/smilies/icon_arrow.gif" title="囧" alt="哭" /></a>
<a onclick="javascript:grin(':neutral:')"><img src="/wp-includes/images/smilies/icon_neutral.gif" title="羞" alt="哭" /></a>
<a onclick="javascript:grin(':cry:')"><img src="/wp-includes/images/smilies/icon_cry.gif" title="哭" alt="哭" /></a>
<a onclick="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies/icon_mrgreen.gif" title="嘿" alt="嘿" /></a>
</div>

把此文件上传到你的主题文件夹下面。
但我弄上去后,图片的汉字解释出现的都是”?”,很别扭,所以蹩脚的翻译了下,凑活着用吧,让大家见笑了。呵呵。

<script type="text/javascript" language="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 = endPos;
    		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>
<div id="smilelink">
<a onclick="javascript:grin(':question:')"><img src="/wp-includes/images/smilies/icon_question.gif" title="Question" alt="C" /></a>
<a onclick="javascript:grin(':naughty:')"><img src="/wp-includes/images/smilies/icon_razz.gif" title="Naughty" alt="C" /></a>
<a onclick="javascript:grin(':sad:')"><img src="/wp-includes/images/smilies/icon_sad.gif" title="Sad" alt="C" /></a>
<a onclick="javascript:grin(':exclaim:')"><img src="/wp-includes/images/smilies/icon_exclaim.gif" title="Exclaim" alt="C" /></a>
<a onclick="javascript:grin(':smile:')"><img src="/wp-includes/images/smilies/icon_smile.gif" title="Smile" alt="C" /></a>
<a onclick="javascript:grin(':shy:')"><img src="/wp-includes/images/smilies/icon_redface.gif" title="Shy" alt="C" /></a>
<a onclick="javascript:grin(':biggrin:')"><img src="/wp-includes/images/smilies/icon_biggrin.gif" title="Biggrin" alt="C" /></a>
<a onclick="javascript:grin(':surprised:')"><img src="/wp-includes/images/smilies/icon_surprised.gif" title="Surprised" alt="C" /></a>
<a onclick="javascript:grin(':eek:')"><img src="/wp-includes/images/smilies/icon_eek.gif" title="Eek" alt="C" /></a>
<a onclick="javascript:grin(':confused:')"><img src="/wp-includes/images/smilies/icon_confused.gif" title="Confused" alt="C" /></a>
<a onclick="javascript:grin(':cool:')"><img src="/wp-includes/images/smilies/icon_cool.gif" title="Cool" alt="C" /></a>
<a onclick="javascript:grin(':sinister:')"><img src="/wp-includes/images/smilies/icon_lol.gif" title="Sinister Smile" alt="C" /></a>
<a onclick="javascript:grin(':mad:')"><img src="/wp-includes/images/smilies/icon_mad.gif" title="Mad" alt="C" /></a>
<a onclick="javascript:grin(':anger:')"><img src="/wp-includes/images/smilies/icon_twisted.gif" title="Anger" alt="C" /></a>
<a onclick="javascript:grin(':rolleyes:')"><img src="/wp-includes/images/smilies/icon_rolleyes.gif" title="Rolleyes" alt="C" /></a>
<a onclick="javascript:grin(':applaud:')"><img src="/wp-includes/images/smilies/icon_wink.gif" title="Applaud" alt="C" /></a>
<a onclick="javascript:grin(':idea:')"><img src="/wp-includes/images/smilies/icon_idea.gif" title="Idea" alt="C" /></a>
<a onclick="javascript:grin(':sweat:')"><img src="/wp-includes/images/smilies/icon_arrow.gif" title="Sweat" alt="C" /></a>
<a onclick="javascript:grin(':doze:')"><img src="/wp-includes/images/smilies/icon_neutral.gif" title="Doze" alt="C" /></a>
<a onclick="javascript:grin(':cry:')"><img src="/wp-includes/images/smilies/icon_cry.gif" title="Cry" alt="C" /></a>
<a onclick="javascript:grin(':laugh:')"><img src="/wp-includes/images/smilies/icon_mrgreen.gif" title="Laugh" alt="H" /></a>
</div>

第二步,修改主题文件夹下面的 comments.php 文件,找到最后面的 textarea 那行,在上面加上

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

第三步,下载QQ表情文件。
网上提供了两种QQ表情下载,Round Face (常用QQ表情) 和 Square Face (方型表情)

Download: Round Face | Square Face

个人比较推荐 Round Face ,本站也使用的 Round Face 的QQ表情。大家可以根据自己的喜好下载。解压后复制到 /wp-includes/images/smilies 文件夹里,如果没有该文件夹,则先创建,如果已有,则覆盖默认的表情文件。

到此,大功告成!
当然,本站使用的是Inove模板。可能不同的主题设置会稍为不一样。

如果在后台升级过 WordPress ,那么在升级过程中,会初始化/wp-includes/images/smilies 里面的表情文件,所以,升级完成后,还得将 Round Face 的图片覆盖 /wp-includes/images/smilies 里面的初始表情。

—————————————————————————————————————————————————
补充部分:
如果觉得没必要放这么多表情,或者看某个表情不爽,可以将其删除,下面是简单步骤:
1、在 /wp-includes/images/smilies 文件夹中,将想要删除的表情图片删除;
2、在 主题目录下,修改 smiley.php 文件,删除相应的 a onclick……. 那行即可。如:

<a onclick="javascript:grin(':evil:')"><img src="/wp-includes/images/smilies/icon_evil.gif" title="闭嘴" alt="哭" /></a>

另外,如果安装上面的步骤操作完成后,还是得不到想要的效果,则需要先检查文件名和文件存放的地方对不对,然后看代码中的符号是全角还是半角(必须是英文状态下的符号),最后,如果做过什么修改,需要看看删除的代码是否有关联性。
如果自己检查完后,还是不行,可以在下面留言,或者重做一次,反正也不难,步骤也不多。 ^_^
—————————————————————————————————————————————————

========================================================
感谢西门的后花园我烧网 。本文转自多天网,并由 Edward Han 部分修改和添加。
========================================================



转载本站文章请注明,来自: Edward's Blog

本文链接: http://www.edward-han.com/126.html

分类: Wordpress 标签: ,
  1. 2010年11月29日16:06 | #1

    更加的详细了。。厉害

  2. Edward_Han
    2010年11月29日16:28 | #2

    @dianaluna
    :mrgreen: 一般一般啊~~
    呵呵

  3. 2011年1月24日12:41 | #3

    路过,顶一下,验证码 挺有意思的

  4. Edward_Han
    2011年1月25日17:27 | #4

    @光辉
    嘿嘿~~谢谢支持~~

  5. 2011年2月19日16:54 | #5

    杯具的我杯具了,因为wp是在子目录的原因吧,我修改img的src后图标倒是能显示,不过点击后直接就输出false了
    这句话
    if (document.getElementById(‘comment’) && document.getElementById(‘comment’).type == ‘textarea’) {
    myField = document.getElementById(‘comment’);
    } else {
    return false;
    不懂php的我表示亚历山大

  6. YouareMine
    2011年2月26日04:00 | #6

    修改 comments.php 后回复框里出现
    
    /* */






















  7. zhegnyimng
    2011年9月17日08:57 | #7

    请问在后台没发现comments.php 文件怎么办?要怎么搞?我是新手很多专业术语还不知道的?详细

  8. 2011年11月13日17:12 | #8

    很详细,可是为什么我安上之后,发出评论不是表情,还是字符

  9. 2012年7月20日21:51 | #9

    哥们啊。你的这个表情,我试了下,javascript不能执行啊。发送出来显示的都是文本,而没有把字符文本转换成为实际的笑脸图片啊。

  10. 2012年7月21日12:45 | #10

    在你的这个基础之上,查阅了wordpress官方smiles部分的文档,已经搞定了。呵呵

  11. Edward_Han
    2012年7月26日08:51 | #11

    @安追梦
    哦?搞定了就好~~~
    如果有更新后的文档教程就好了~~

  1. 本文目前尚无任何 trackbacks 和 pingbacks.
您必须启用 javascript 才能在这儿看到验证码!

无觅相关文章插件,快速提升流量

加载中……