A-A+

不用插件给wordpress评论添加表情

本文于2015年05月04日最后更新 博客心得

好吧,为了造福广大跟张自然一样的菜鸟级wordpress新手,我决定写这篇文章,方便别人,同时也方便自己修改主题后查找!

评论中,包括文章中添加表情,通过插件是很容易实现的,百度一搜就能搜出一大堆来,张自然就不列举了。 但是,众所周知,过多的插件会严重的拖慢博客速度,

这篇文章不是张自然原创,是我汲取了好几个博客写的,才OK。

首先新建一个smiley.php文件:smiley.php文件源码在本文最下面:

或者直接下载smiley.zip文件,解压后将 smiley.php 上传到启用主题的文件夹下。目录一般为/wp-content/themes/你的主题名字/

smiley.zip文件下载地址:

张自然博客cdn下载 115下载 |

将如下代码插入到该主题文件夹的 comments.php 中。位置在

<div><textarea id=”comment” name=”comment” cols=”45″ rows=”8″ tabindex=”6″></textarea></div>

上面,这样表情才能显示在评论输入框之上。

要插入的代码:

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

好了其实到这里就OK了,你的评论栏上面就会有一组WP带的表情了。表情位置在:/wp-includes/images/smilies/ 您要是觉得默认的表情不好看呢,选一组喜欢的,按照WP的名字命名后上传覆盖。您要是还不满意呢,就接着往下看。张自然为您准备了几大网站表情下载!

           Gmail版

Gmail版wordpress表情下载地址:

张自然博客cdn下载 115下载 |

    人人网版

人人网版wordpress表情下载地址:

张自然博客cdn下载 | 115下载 |

    QQ版:

QQ版wordpress表情下载地址:

张自然博客cdn下载 | 115下载 |

    wordpress-白色版:

wordpress-白色-表情下载地址:

张自然博客cdn下载 | 115下载 |

wordpress-黄色-表情下载地址:

张自然博客cdn下载 | 115下载 |

2012年5月31日更新2个表情,以后张自然会持续更新表情的!

简简单单两步就这样代替了 wp-grins 插件,效果可以见张自然博客的留言框上一排表情符,和使用 wp-grins 的效果是一样的,但是免去了调用 prototype.js,这样速度会快很多,基本不影响 WordPress 的载入速度。

好了,看到这里,如果你还没有使用这个表情,或者使用了插件,但灰常喜欢的话就赶紧去折腾吧~

smiley.php文件源码:

//wordpress评论添加表情代码,由张自然博客 - ZhangZiRan.com整理,转载注明出处!!!
<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 />
//wordpress评论添加表情代码,由张自然博客 - ZhangZiRan.com整理,转载注明出处!!!

  1. 杨小杰博客
    博主你好,我发现文章内的资源链接都已失效

给张自然个人博客留言