乌徒帮技术范WordPressWordPress开发 › 无需插件不修改模板为wordpress添加评论表情

无需插件不修改模板为wordpress添加评论表情

分类:WordPress开发

wordpress3之后其实本身就拥有了表情的功能,在wordpress目录/wp-includes/images/smilies/中已经存在了一些表情的小图片,只不过这些图确实不是很好看,而且wordpress后台没有相关的设置以开启评论表情功能,这需要我们自己稍加整理,以获得为wordpress评论添加表情的功能。

具体代码如下,将下面的代码拷贝到主题文件目录的functions.php中,无需再修改其他文件,只需调整这段代码即可:

function cms_pinglunbiaoqing() {
?>
<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" style="cursor:pointer;width:465px; position:relative;top:-290px; left:170px; z-index:99;">
<a onclick="javascript:grin(':?:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_question.gif" title="汗" alt="汗" /></a>
<a onclick="javascript:grin(':razz:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_razz.gif" title="色" alt="色" /></a>
<a onclick="javascript:grin(':sad:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_sad.gif" title="悲" alt="悲" /></a>
<a onclick="javascript:grin(':evil:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_evil.gif" title="闭嘴" alt="闭嘴" /></a>
<a onclick="javascript:grin(':!:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_exclaim.gif" title="调皮" alt="调皮" /></a>
<a onclick="javascript:grin(':smile:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_smile.gif" title="笑" alt="笑" /></a>
<a onclick="javascript:grin(':oops:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_redface.gif" title="惊" alt="惊" /></a>
<a onclick="javascript:grin(':grin:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_biggrin.gif" title="亲" alt="亲" /></a>
<a onclick="javascript:grin(':eek:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_surprised.gif" title="雷" alt="雷" /></a>
<a onclick="javascript:grin(':shock:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_eek.gif" title="馋" alt="馋" /></a>
<a onclick="javascript:grin(':???:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_confused.gif" title="晕" alt="晕" /></a>
<a onclick="javascript:grin(':cool:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_cool.gif" title="酷" alt="酷" /></a>
<a onclick="javascript:grin(':lol:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_lol.gif" title="奸" alt="奸" /></a>
<a onclick="javascript:grin(':mad:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_mad.gif" title="怒" alt="怒" /></a>
<a onclick="javascript:grin(':twisted:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_twisted.gif" title="狂" alt="狂" /></a>
<a onclick="javascript:grin(':roll:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_rolleyes.gif" title="萌" alt="萌" /></a>
<a onclick="javascript:grin(':wink:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_wink.gif" title="吃" alt="吃" /></a>
<a onclick="javascript:grin(':idea:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_idea.gif" title="贪" alt="贪" /></a>
<a onclick="javascript:grin(':arrow:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_arrow.gif" title="囧" alt="囧" /></a>
<a onclick="javascript:grin(':neutral:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_neutral.gif" title="羞" alt="羞" /></a>
<a onclick="javascript:grin(':cry:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_cry.gif" title="哭" alt="哭" /></a>
<a onclick="javascript:grin(':mrgreen:')"><img src="<? bloginfo('url') ?>/wp-includes/images/smilies/icon_mrgreen.gif" title="嘿" alt="嘿" /></a>
</div>
<?php
}
add_action('comment_form','cms_pinglunbiaoqing');

将上面这段代码添加之后就能在评论框附近看到这排可爱而丑陋的表情了,接下来你要做的就是熟悉这段代码的作用,然后进行修改:

1、修改style以让这些表情放置在适当的位置;

2、到网上下载其他表情,拷贝到wordpress的include/对应目录下,修改添加代码中的图片名和alt等信息。

添加评论表情,如此简单。<完>

已有4条评论 快速评论
  1. 否子戈 #3744楼 回复给@3734楼 2013/06/27 15:28:46 回复

    整套表情别人已经发布,可以自己搜一下

  2. Drag #3734楼 2013/06/25 09:08:04 回复

    很好一看就懂,为什么不分享点表情呢?整套表情啊

  3. frustigor #81楼 回复给@80楼 2011/07/26 12:44:32 回复

    谢谢支持,继续努力

  4. 捞图吧 #80楼 2011/07/26 10:24:35 回复

    支持下,做的不错

填写个人信息,赶快回复吧!