WordPress中添加自定义评论表情包的方法

先来看看效果:

现在由于WordPress版本更新,再加上WordPress主题也越来越多,而现在的主题一般都是禁用了WordPress自带的评论表情,其实自带 的评论表情也是很丑的,但是以前我们可以自由地启用自带的评论表情或者自定义评论表情,而现在我们很多的主题都没办法添加,网上很多的教程都过时了,都说 的是什么打开你目前使用主题的comments.php文件,在

1
textarea name="comment"

前面加

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

而我想说的就是现在主题的comments.php文件中根本就找不到textarea name=”comment”这句代码,不过我不甘心,折腾了好几天,终于自己琢磨出来了解决的办法。
工具:三套表情包和smiley.php文件。下载地址:http://yunpan.cn/cFw8Gz6vrDHZT 访问密码 cb83
再给大家添加一个QQ表情包:http://yunpan.cn/cLw6UhwB865Eg 访问密码 af61

在三款主题包中选择你喜欢的一款,将所在的文件夹重名为smilies ,然后重新压缩起来,然后打开你的cpanel面板,找到你主题的这个路径public_html/wp-content/themes/[你主题的名 字]/images,注意有的主题下面只有一个img文件夹,没有images文件夹,我的就是这样,没关系,没有我们就自己新建一个,

然后进入这个文件夹点击上面的“上传”,然后找到自己压缩好的smilies文件夹上传即可。

上传好之后在压缩包上面右击,点击解压缩

完成后如下图,

找到你主题的这个路径public_html/wp-content/themes/[你主题的名字]/includes,注意,有的主题没有这个文件夹,我的就是,我们还是同样新建一个文件夹,

然后将smiley.php上传到主题的includes文件夹下(当然可以放在其他文件夹,不过要改动下面相关代码)。
找到你主题的这个路径public_html/wp-content/themes/[你主题的名字],在comments.php文件上右击,然后选择Edit。(当然也可以在WordPress后台外观——编辑中找到comments.php文件进行修改。)

然后就是这一步,网上很多教程说在

1
textarea name="comment"

前面加

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

而我想发现现在很多主题的comments.php文件中根本就找不到textarea name=”comment”这句代码,不过最先面有一句代码

1
<?php if ( comments_open() ) { comment_form(); } ?>

里面的 comment_form(); 指的就是整个评论表单,

而textarea name=”comment”指的其实就是表单<form>中的评论内容区域

就是因为找不到textarea name=”comment”,所以我们无法像以前那样把评论表情添加到“站点”和“评论”的中间,但是我们可以添加到整个表单comment_form(); 的前面或者后面,当然后面要好看一点,于是我就在

1
<?php if ( comments_open() ) { comment_form(); } ?>

后面加上了

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

点击右上角的保存,然后再打开functions.php文件,将

1
2
3
//自定义表情路径
function custom_smilies_src($src, $img){return get_bloginfo('template_directory').'/images/smilies/' . $img;}
add_filter('smilies_src', 'custom_smilies_src', 10, 2);

添加到<?php和?>之间,这一段代码据说是为了防止因为WordPress的升级覆盖我们配置好了的评论表情,虽然不知道这段代码到底能不能起作用,但是还是把这段代码加进去好点。
现在刷新一下页面就已经可以看见评论表情出来了,当时我还是很高兴,以为这就成功了,但是我自己随便发了一条表情评论,居然出来的表情和我上传的表情是不一样的。

这是什么原因呢,那么这些不一样的图片有来自那里呢。我打开cpanel面板找到了自带的表情public_html/wp-includes /images/smilies,但是我发现不是这里的表情,这有点奇怪了,于是我打开按了F12审查元素,找到了原因,图片原来是来自于一个国外的网 站,

而且因为我是把FQ的打开的所以图片才能够加载出来,不然图片根本就显示不出来。
那么我添加的图片和显示出来的图片为什么会不一样呢。我百度了一下终于找到解决办法了

然后我在http://www.wpdaxue.com/disable-emoji.html这里找到了方法,分为两步:
1.禁用 Emoji 表情:
在主题的 functions.php 添加代码的代码即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* Disable the emoji's
 */
function disable_emojis() {
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    remove_action( 'admin_print_styles', 'print_emoji_styles' );   
    remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
    remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
    remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
    add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );
/**
 * Filter function used to remove the tinymce emoji plugin.
 *
 * @param    array  $plugins 
 * @return   array             Difference betwen the two arrays
 */
function disable_emojis_tinymce( $plugins ) {
    return array_diff( $plugins, array( 'wpemoji' ) );
}

2.恢复之前的图片表情:
在主题的 functions.php 添加代码的代码即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php
/**
 * WordPress 4.2 修复图片表情
 * http://www.wpdaxue.com/disable-emoji.html
 */
function smilies_reset() {
    global $wpsmiliestrans, $wp_smiliessearch;
    // don't bother setting up smilies if they are disabled
    if ( !get_option( 'use_smilies' ) )
        return;
    $wpsmiliestrans = array(
    ':mrgreen:' => 'icon_mrgreen.gif',
    ':neutral:' => 'icon_neutral.gif',
    ':twisted:' => 'icon_twisted.gif',
      ':arrow:' => 'icon_arrow.gif',
      ':shock:' => 'icon_eek.gif',
      ':smile:' => 'icon_smile.gif',
        ':???:' => 'icon_confused.gif',
       ':cool:' => 'icon_cool.gif',
       ':evil:' => 'icon_evil.gif',
       ':grin:' => 'icon_biggrin.gif',
       ':idea:' => 'icon_idea.gif',
       ':oops:' => 'icon_redface.gif',
       ':razz:' => 'icon_razz.gif',
       ':roll:' => 'icon_rolleyes.gif',
       ':wink:' => 'icon_wink.gif',
        ':cry:' => 'icon_cry.gif',
        ':eek:' => 'icon_surprised.gif',
        ':lol:' => 'icon_lol.gif',
        ':mad:' => 'icon_mad.gif',
        ':sad:' => 'icon_sad.gif',
          '8-)' => 'icon_cool.gif',
          '8-O' => 'icon_eek.gif',
          ':-(' => 'icon_sad.gif',
          ':-)' => 'icon_smile.gif',
          ':-?' => 'icon_confused.gif',
          ':-D' => 'icon_biggrin.gif',
          ':-P' => 'icon_razz.gif',
          ':-o' => 'icon_surprised.gif',
          ':-x' => 'icon_mad.gif',
          ':-|' => 'icon_neutral.gif',
          ';-)' => 'icon_wink.gif',
        // This one transformation breaks regular text with frequency.
        //  '8)' => 'icon_cool.gif',
           '8O' => 'icon_eek.gif',
           ':(' => 'icon_sad.gif',
           ':)' => 'icon_smile.gif',
           ':?' => 'icon_confused.gif',
           ':D' => 'icon_biggrin.gif',
           ':P' => 'icon_razz.gif',
           ':o' => 'icon_surprised.gif',
           ':x' => 'icon_mad.gif',
           ':|' => 'icon_neutral.gif',
           ';)' => 'icon_wink.gif',
          ':!:' => 'icon_exclaim.gif',
          ':?:' => 'icon_question.gif',
    );
}
smilies_reset();

这两个步骤一个都不能少,添加后我们再次刷新一下页面,发现原来不一样的表情没有了,上面和下面的表情都变成了我自己添加的表情。我想这里的原理应该是一个优先级的问题,就是WordPress自带评论表情的优先级高于我们自定义的评论表情,所以才会出现这种情况

如果你还想给表情添加上提示文字,就打开smiley.php文件修改一下

不过我经过测试,发现不能在本地修改后上传到cpanel面板,因为本地修改后再上传就不是UTF-8格式的了,就会出现乱码

所以应该直接在cpanel面板中进行修改,因为它是符合UTF-8格式的

修改后保存即可。因为他的图片名字和表情其实是不一样的,所以这里我就没有添加提示信息。
弄了几天终于弄好了,虽然不能像有的网站一样把表情添加到站点和评论之间而只能添加到整个表单的上面或者下面,但是只要能实现功能还是不错的,我发现网上 很多人都和我存在一样的问题,就是找不到textarea name=”comment”这一句代码,所以我在这里给出解决的办法。希望对你们能够有所帮助。

posted @ 2015-12-20 16:00  申杰博客  阅读(2043)  评论(0编辑  收藏  举报