首页 » 开源/框架 » WordPress » 正文

comment_form()函数实现willin的评论表情插入

| WordPress | 18 条评论 | (6评) |

前两天终于给自己的主题加上了Ajax评论功能，并且用插件基本解决了垃圾评论的问题。接下来折腾的就是评论表情了~~

作为一名伸手党，有现成的代码当然是直接拿来用的了。下面的方法转自  ZWW大神 的博客，并稍微做了些修改，做个笔记~

一、在主题目录下创建一个 smiles.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>
<?php $smilies = '
<a href="javascript:grin(\':?:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_question.gif" alt="" /></a>
<a href="javascript:grin(\':razz:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_razz.gif" alt="" /></a>
<a href="javascript:grin(\':sad:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_sad.gif" alt="" /></a>
<a href="javascript:grin(\':evil:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_evil.gif" alt="" /></a>
<a href="javascript:grin(\':!:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_exclaim.gif" alt="" /></a>
<a href="javascript:grin(\':smile:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_smile.gif" alt="" /></a>
<a href="javascript:grin(\':oops:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_redface.gif" alt="" /></a>
<a href="javascript:grin(\':grin:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_biggrin.gif" alt="" /></a>
<a href="javascript:grin(\':eek:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_surprised.gif" alt="" /></a>
<a href="javascript:grin(\':shock:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_eek.gif" alt="" /></a>
<a href="javascript:grin(\':???:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_confused.gif" alt="" /></a>
<a href="javascript:grin(\':cool:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_cool.gif" alt="" /></a>
<a href="javascript:grin(\':lol:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_lol.gif" alt="" /></a>
<a href="javascript:grin(\':mad:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_mad.gif" alt="" /></a>
<a href="javascript:grin(\':twisted:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_twisted.gif" alt="" /></a>
<a href="javascript:grin(\':roll:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_rolleyes.gif" alt="" /></a>
<a href="javascript:grin(\':wink:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_wink.gif" alt="" /></a>
<a href="javascript:grin(\':idea:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_idea.gif" alt="" /></a>
<a href="javascript:grin(\':arrow:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_arrow.gif" alt="" /></a>
<a href="javascript:grin(\':neutral:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_neutral.gif" alt="" /></a>
<a href="javascript:grin(\':cry:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_cry.gif" alt="" /></a>
<a href="javascript:grin(\':mrgreen:\')"><img src="'.get_bloginfo("template_url").'/images/smilies/icon_mrgreen.gif" alt="" /></a>'
?>

二、在 comments.php 中 <?php comment_form(); ?> 的上面引入 smiles.php 文件

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

三、修改 comment_form() 函数的 comment_field 参数 ，变成如下格式：

<?php comment_form('comment_field=<p class="comment-form-comment"><textarea aria-required="true" rows="8" cols="45" name="comment" id="comment" onkeydown="if(event.ctrlKey){if(event.keyCode==13){document.getElementById(\'submit\').click();return false}};"></textarea></p><p>'.$smilies.'</p>'); ?>

其中， onkeydown 的定义是让评论支持 Ctrl + Enter 提交。

四、加入表情包

由于 WordPress 自带的表情实在是太搓了，所以我们在 smiles.php 中把表情替换成了其他的，下载下面的表情包，把解压出来的 smilies 文件夹，放入主题下的 /images/ 文件夹中。

表情包下载地址

五、上面的步骤做完之后，刷新一下页面，表情已经出现了吧？效果如下：

wp_comment_smiles

但是到这步其实并没有做完，因为到现在我们只是实现了把评论框下表情替换了，而评论完显示出来的还是 WordPress 自带的表情，所以还有下面一步需要做。

六、替换评论中默认表情

这一步只需在 functions.php 中加入如下代码即可：

//评论表情替换
add_filter('smilies_src','custom_smilies_src',1,10);
function custom_smilies_src ($img_src, $img, $siteurl){
    return get_bloginfo('template_directory').'/images/smilies/'.$img;
}

至此，大功告成！

本文共 18 个回复

发表评论

友情链接