让你的评论框生动起来 – 给WordPress评论框添加表情 - 勒统驿站 | LtoPro

让你的评论框生动起来 – 给WordPress评论框添加表情

[隐藏]

咳咳,现在很多站点的评论框都可以给自己的评论添加表情,别小看了表情君,这可以让原来呆板的评论顿时多了些许生气。但是,并不是所有的主题都有这个功能,所以,wu1yi2fan在百度过后,根据几位大神的教程,写下了这一篇,希望能让大家看得懂吧。因为涉及到的方面比较多,所以,请各位理好头绪哦~

先放上成品图。

icon4comment1.jpg 第1张

要完成这个效果,首先,你要对评论框做一些手脚。

注意!修改以后请将文件编码更改为UTF-8无BOM格式,否则会出现乱码!额,提到这里,wu1yi2fan推荐使用Notepad++作为你的代码编辑器。

icon4comment11.jpg 第2张

添加评论框插入表情代码

这部分内容的代码部分来自西门。原文:

完美实现WordPress评论表情  ons.me/80.html

1.首先,下载表情功能代码smiley.php。下载地址:

本地下载(SF) 本地下载(百度云) 原地址

额,对了,有人说wu1yi2fan你在干什么,这个百度云下载链根本就没有进入到百度云嘛,呵呵,wu1yi2fan已经用Api的方式直接调取下载地址哦。这个具体怎么实现,额,自己去找找WP2PCS插件。

下载以后,把里面的smiley.php解压到主题文件夹下。

icon4comment2.jpg 第3张

2.接下来,我们要将这段代码嵌入到主题里面。

找到主题文件夹下的comments.php。找到“<textarea”标签(因为这里面可能会有一些参数,所以直接这样搜索比较好。)

icon4comment3.jpg 第4张

找到以后,在这行代码前面加上这样一段代码。

[ccein_php theme="dawn"]<?php include(TEMPLATEPATH . '/smiley.php'); ?>[/ccein_php]

icon4comment4.jpg 第5张

额,原文到这里就没了,但是,事实上还没有完哦。因为你需要确定一下textarea标签里面的id参数。比如说驿站里面的是”postcomment”。那么,你需要打开smiley.php,将6,7行高亮部分替换掉。本地下载的话,将”postcomment”替换成自己主题的id,原地址下载呢,就把”comment”替换成自己的id。如果这行参数里面没有id,那么,自己加一个就好了^_^。

icon4comment10.jpg 第6张

但是,如果根本没有这个标签……好吧,自己去找插件实现。

别忘了,还要在你主题的style.css里面加上这一串代码

[ccein_html theme=”dawn”]#smilelink{cursor:pointer; width:465px;}[/ccein_html]

P.S. width参数代表的是表情栏的宽度。大家可以根据需要修改。如果想实现自适应的话,可以将参数设置为auto

3.表情

WordPress通常已经自带了一些表情,在wp-includes\images\smilies 里面。如果没有,或者不喜欢。西门提供了一套,当然,你也可以自行替换。

西门提供的表情包

ximensmiley.jpg 第7张

点我下载

QQ表情包

QQsmiley.jpg 第8张

点我下载

让最近评论挂件显示表情

搞定上面以后,你的评论框就可以插入表情了,但是,最近评论挂件里面显示的却是一些奇怪的代码,这该怎么办?最近评论插件根本就不显示评论内容又改怎么办?所以,我们要进行这一步。

1.让最近评论挂件显示评论内容

这部分内容技术部分来自

这里是v2,就是还可以显示出评论者的头像,v1就是只显示内容。

要想挂件显示出评论内容,就要打开wp-includes文件夹,找到default-widgets.php,搜索“if ( $comments ) {”,当然,这是以3.9.1来测试。

找到以后,我们把(就是那一整段。)

[ccein_php theme="dawn"]$output .= '<li class="recentcomments">' . /* translators: comments widget: 1: comment author, 2: post link */ sprintf(_x('%1$s on %2$s', 'widgets'), get_comment_author_link(), '<a href="' . esc_url( get_comment_link($comment->comment_ID) ) . '">' . get_the_title($comment->comment_post_ID) . '</a>') . '</li>';[/ccein_php]

替换成

[ccein_php theme="dawn"]$output .= '<li class="recentcomments" style="overflow: hidden;"><span class="avatar_40" style="float: left; margin-right: 15px;">'.'</span>' .sprintf(_x('%1$s 在 %2$s 吐槽:', 'widgets'), get_comment_author_link(), '<a href="' . esc_url(get_comment_link($comment->comment_ID) ) . '" rel="nofollow">' . get_the_title($comment->comment_post_ID) . '</a>') . '' .strip_tags( $comment->comment_content) . '</li>';[/ccein_php]

即可。

但是,如果你想要有头像的话,那就在“<span class=”avatar_40″ style=”float: left; margin-right: 15px;”>’.’”后面加上”get_avatar($comment, 40).”

也就是

[ccei_php theme="dawn"]$output .= '<li class="recentcomments" style="overflow: hidden;"><span class="avatar_40" style="float: left; margin-right: 15px;">'.get_avatar($comment, 40).'</span>' .sprintf(_x('%1$s 在 %2$s 吐槽:', 'widgets'), get_comment_author_link(), '<a href="' . esc_url(get_comment_link($comment->comment_ID) ) . '" rel="nofollow">' . get_the_title($comment->comment_post_ID) . '</a>') . '' .strip_tags( $comment->comment_content) . '</li>';[/ccei_php]

好了,现在,就大工告成了吧?

icon4comment9.jpg 第9张

扩展

在get_avatar($comment,40)中,数字40代表的是头像大小为40*40,所以大家可以更具自己的需要更改大小哦。

2.让评论挂件显示表情

按上面的方法修改完以后,你会发现,纳尼,怎么会没有表情呢?全部都变成了奇怪的符号耶。额,这是因为,我们还少了一步。

这部分内容技术部分还是来自西门。原文:

Comment Reply Notification插件设置邮箱及表情符号变图片 ons.me/132.html

其实,很简单。我们在输出评论内容的时候,忘记让WordPress输出表情了。这,需要一个函数 “convert_smilies()”。换句话,就是把上面的代码最后加上“convert_smilies()”。也就是……

[ccein_php theme="dawn"]$output .= '<li class="recentcomments" style="overflow: hidden;"><span class="avatar_40" style="float: left; margin-right: 15px;">'.get_avatar($comment, 40).'</span>' .sprintf(_x('%1$s 在 %2$s 吐槽:', 'widgets'), get_comment_author_link(), '<a href="' . esc_url(get_comment_link($comment->comment_ID) ) . '" rel="nofollow">' . get_the_title($comment->comment_post_ID) . '</a>') . '' convert_smilies(.strip_tags( $comment->comment_content)) . '</li>';[/ccein_php]

好了,现在,一切都OK了吧?

icon4comment5.jpg 第10张

发布者

wu1yi2fan

集合了懒,馋,脑残,逗,爱吐槽,勤奋,爱折腾,爱搬运,貌似还有一点抠门的一个神奇的家伙。(话说貌似有些很矛盾?)喂,话说你都看到这里了,为啥不留言?(ノ=Д=)ノ┻━┻

《让你的评论框生动起来 – 给WordPress评论框添加表情》有3个想法

    1. :twisted: :twisted: 下次可不要在评论里面乱放链接哦,要不是我突发奇想去看我的垃圾评论列表,估计你的评论就被删掉了。不过说到底,我也有那么一丢丢的责任,忘记给评论框加上个人网站这一项了,不过,现在已经加上。 :twisted: :shock:

      Firefox Windows

发表评论

电子邮件地址不会被公开。 必填项已用*标注