迷走映像

无插件实现wordpress评论表情功能

August 27th, 2010 alexin Leave a comment Go to comments

由于空间的限制，没办法实现评论回复邮件通知功能，这造成各位同学评论后，还得跑回来看看有没有回复，这不是很好的体验，出于这一点考虑，目前准备换空间。所以，大家等着，很快就有邮件通知。

扯远了，既然暂时没办法实现评论回复邮件通知功能，那我就先加个评论表情吧。很多博客都有评论表情功能，就迷走映像暂时还没有，所以赶快加上，让大家也喜怒哀乐一下。看了大部分童鞋的评论表情功能都是用Custom Smilies等插件实现的。不就是一行表情嘛，能不用插件就不用，这是原则，不然又折腾那可怜的网速。搜索一下，发现无插件实现wordpress评论表情功能方法也不少，简单介绍我现在用这一种吧。

无插件实现wordpress评论表情功能，很简单，方法如下:
首先，将以下代码另存在为smiley.php，并将 smiley.php 上传到主题目录里；。

<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>
<a href="javascript:grin(':?:')"><img src="/wp-includes/images/smilies/icon_question.gif" alt="疑问" /></a>
<a href="javascript:grin(':razz:')"><img src="/wp-includes/images/smilies/icon_razz.gif" alt="冷笑" /></a>
<a href="javascript:grin(':sad:')"><img src="/wp-includes/images/smilies/icon_sad.gif" alt="悲伤" /></a>
<a href="javascript:grin(':evil:')"><img src="/wp-includes/images/smilies/icon_evil.gif" alt="坏蛋" /></a>
<a href="javascript:grin(':!:')"><img src="/wp-includes/images/smilies/icon_exclaim.gif" alt="感叹" /></a>
<a href="javascript:grin(':smile:')"><img src="/wp-includes/images/smilies/icon_smile.gif" alt="微笑" /></a>
<a href="javascript:grin(':oops:')"><img src="/wp-includes/images/smilies/icon_redface.gif" alt="脸红" /></a>
<a href="javascript:grin(':grin:')"><img src="/wp-includes/images/smilies/icon_biggrin.gif" alt="大笑" /></a>
<a href="javascript:grin(':eek:')"><img src="/wp-includes/images/smilies/icon_surprised.gif" alt="吃惊" /></a>
<a href="javascript:grin(':shock:')"><img src="/wp-includes/images/smilies/icon_eek.gif" alt="惊讶" /></a>
<a href="javascript:grin(':???:')"><img src="/wp-includes/images/smilies/icon_confused.gif" alt="困惑" /></a>
<a href="javascript:grin(':cool:')"><img src="/wp-includes/images/smilies/icon_cool.gif" alt="酷" /></a>
<a href="javascript:grin(':lol:')"><img src="/wp-includes/images/smilies/icon_lol.gif" alt="大声笑" /></a>
<a href="javascript:grin(':mad:')"><img src="/wp-includes/images/smilies/icon_mad.gif" alt="恼火" /></a>
<a href="javascript:grin(':twisted:')"><img src="/wp-includes/images/smilies/icon_twisted.gif" alt="古怪" /></a>
<a href="javascript:grin(':roll:')"><img src="/wp-includes/images/smilies/icon_rolleyes.gif" alt="转眼睛" /></a>
<a href="javascript:grin(':wink:')"><img src="/wp-includes/images/smilies/icon_wink.gif" alt="给眼色" /></a>
<a href="javascript:grin(':idea:')"><img src="/wp-includes/images/smilies/icon_idea.gif" alt="好主意" /></a>
<a href="javascript:grin(':arrow:')"><img src="/wp-includes/images/smilies/icon_arrow.gif" alt="箭头" /></a>
<a href="javascript:grin(':neutral:')"><img src="/wp-includes/images/smilies/icon_neutral.gif" alt="一般" /></a>
<a href="javascript:grin(':cry:')"><img src="/wp-includes/images/smilies/icon_cry.gif" alt="哭了" /></a>
<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies/icon_mrgreen.gif" alt="绿人" /></a>
<br />

然后在主题目录找到 comments.php 在合适地方加上下面语句：

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

因为wordpress已经内置了评论表情，所以至此基本完成。但是你会发现这些表情太丑了。想换一些漂亮点的，我现在用的这一套够可爱吧。
smilie
本文末尾有得下载，下载 smilies.zip 后解压缩覆盖内置的表情 wp-includes/images/smilies 即可。

下载： smiley.php+smilies.zip 下载(<--猛点这里)

转载请注明 转自: 迷走映像丨无插件实现wordpress评论表情功能

Categories: WordPress Tags: WordPress, WordPress技巧, 无插件

Comments (16) Trackbacks (1) Leave a comment Trackback

HLX
May 6th, 2011 at 21:22 | #1
Quote
学习一下~~~
[Reply]
CppLive
May 8th, 2011 at 14:37 | #2
Quote
拿走了哦，谢谢分享^_^,超喜欢校内表情的说
[Reply]
CppLive
May 8th, 2011 at 14:40 | #3
Quote
朋友，链接失效，能发我邮箱一份吗？谢谢了。tao#cpplive.com
[Reply]
alexin Reply:
May 8th, 2011 at 19:04
已经发送到你的邮箱，请查收。
[Reply]
CppLive
May 8th, 2011 at 19:18 | #4
Quote
谢谢，已经收到。顺便给你推荐一个免费挂附件的网站http://www.yunfile.com/
[Reply]
断竹挽风
May 9th, 2011 at 11:36 | #5
Quote
下载地址失效了。
[Reply]
likebeta
May 28th, 2011 at 09:53 | #6
Quote
我这样添加后，在ie6下狂闪，这个不知道怎么解决
[Reply]