WordPress评论框增加自定义表情

2021年3月14日 19004点热度 0人点赞 5条评论

这几天去邻居家的博客转了转，发大家基本上都有了评论框的表情，遂觉得自己有点儿落伍了。本博客并没有使用主题自带的评论框，而是使用的wpDiscuz这个插件，其实这个插件自带的是有评论框表情的扩展的，不过那个需要额外花钱，一年好几十美刀，舍不得，只好自己瞎捣鼓捣鼓了。

百度了一圈，发现OwO这个表情插件大家用的多一些，虽然是好几年前的代码了，但是依旧很好使，这里不得不为原作者点赞。

这里附上OwO的源码地址：https://github.com/DIYgod/OwO

使用

这个插件使用起来倒是很简单。

第一步

引用OwO.min.js及OwO.min.css文件，以及初始化代码。

示例如下：

<script type="text/javascript" src="https://www.lifengdi.com/wp-content/themes/kratos-3.2.4/assets/js/OWO.js?ver=3.2.8" id="owo-js"></script>
<script type="text/javascript" >
var OwO_icon = new OwO({
logo: 'OωO表情',
container: document.getElementsByClassName('OwO')[0],
target: document.getElementsByClassName('ql-editor')[0],
api: 'https://www.lifengdi.com/wp-content/themes/kratos-3.2.4/inc/OwO.json',
position: 'down',
width: '100%',
maxHeight: '250px'
});
var OwO_icon1 = new OwO({
logo: 'OωO表情',
container: document.getElementsByClassName('OwO')[1],
target: document.getElementsByClassName('ql-editor')[1],
api: 'https://www.lifengdi.com/wp-content/themes/kratos-3.2.4/inc/OwO.json',
position: 'down',
width: '100%',
maxHeight: '250px'
});
</script>

第二步

找到wpDiscuz这个插件的评论框的位置，也就是wpdiscuz/forms/wpdFormAttr/Form.php这个文件，找到文件中的renderTextEditorButtons这个函数，在最下方的div标签的外边插入<div class="OwO"></div>，

这两步弄完，不出意外的话，你的评论框应该存在一个OwO表情的按钮，可以正常添加表情。

第三步

接下来就是处理表情的展示问题了。

找到主题的文章页面，插入以下代码：

// 文章评论表情
function custom_smilies_src($img_src, $img, $siteurl)
{
    return ASSET_PATH . '/static/images/smilies/' . $img;
}
add_filter('smilies_src', 'custom_smilies_src', 1, 10);

function smilies_reset(){
    global $wpsmiliestrans,$wp_smiliessearch,$wp_version;
    if(!get_option('use_smilies')||$wp_version<4.2) return;
    $wpsmiliestrans = array(
     ':hehe:' => 'hehe.png',
     ':haha:' => 'haha.png',
    ':tushe:' => 'tushe.png',
        ':a:' => 'a.png',
       ':ku:' => 'ku.png',
       ':nu:' => 'nu.png',
   ':kaixin:' => 'kaixin.png',
      ':han:' => 'han.png',
      ':lei:' => 'lei.png',
  ':heixian:' => 'heixian.png',
    ':bishi:' => 'bishi.png',
':bugaoxing:' => 'bugaoxing.png',
 ':zhenbang:' => 'zhenbang.png',
     ':qian:' => 'qian.png',
    ':yiwen:' => 'yiwen.png',
  ':yinxian:' => 'yinxian.png',
       ':tu:' => 'tu.png',
       ':yi:' => 'yi.png',
    ':weiqv:' => 'weiqv.png',
   ':huaxin:' => 'huaxin.png',
       ':hu:' => 'hu.png',
  ':xiaoyan:' => 'xiaoyan.png',
     ':leng:' => 'leng.png',
':taikaixin:' => 'taikaixin.png',
     ':meng:' => 'meng.png',
    ':huaji:' => 'huaji.png',
   ':huaji2:' => 'huaji2.png',
   ':huaji3:' => 'huaji3.gif',
   ':huaji4:' => 'huaji4.png',
   ':huaji5:' => 'huaji5.gif',
   ':huaji6:' => 'huaji6.png',
   ':huaji7:' => 'huaji7.png',
   ':huaji8:' => 'huaji8.png',
   ':huaji9:' => 'huaji9.png',
  ':huaji10:' => 'huaji10.png',
  ':huaji11:' => 'huaji11.png',
  ':huaji12:' => 'huaji12.png',
  ':huaji13:' => 'huaji13.png',
  ':huaji14:' => 'huaji14.png',
  ':huaji15:' => 'huaji15.png',
  ':huaji16:' => 'huaji16.gif',
  ':huaji17:' => 'huaji17.png',
  ':huaji18:' => 'huaji18.png',
  ':huaji19:' => 'huaji19.png',
  ':huaji20:' => 'huaji20.gif',
  ':huaji21:' => 'huaji21.gif',
  ':huaji22:' => 'huaji22.png',
  ':huaji23:' => 'huaji23.png',
':mianqiang:' => 'mianqiang.png',
 ':kuanghan:' => 'kuanghan.png',
     ':guai:' => 'guai.png',
 ':shuijiao:' => 'shuijiao.png',
   ':jingku:' => 'jingku.png',
  ':shengqi:' => 'shengqi.png',
   ':jingya:' => 'jingya.png',
      ':pen:' => 'pen.png',
    ':aixin:' => 'aixin.png',
   ':xinsui:' => 'xinsui.png',
   ':meigui:' => 'meigui.png',
     ':liwu:' => 'liwu.png',
  ':caihong:' => 'caihong.png',
     ':xxyl:' => 'xxyl.png',
      ':sun:' => 'sun.png',
    ':money:' => 'money.png',
     ':bulb:' => 'bulb.png',
      ':cup:' => 'cup.png',
     ':cake:' => 'cake.png',
    ':music:' => 'music.png',
    ':haha2:' => 'haha2.png',
      ':win:' => 'win.png',
     ':good:' => 'good.png',
      ':bad:' => 'bad.png',
       ':ok:' => 'ok.png',
     ':stop:' => 'stop.png',
   ':hahaha:' => 'hahaha.png',
   ':despise:' => 'despise.png',
   ':knife:' => 'knife.png',
   ':pouting:' => 'pouting.png',
   ':shutup:' => 'shutup.png',
   ':unhappy:' => 'unhappy.png',
   ':discovertruth:' => 'discovertruth.png',
   ':shit:' => 'shit.png',
   ':distressed:' => 'distressed.png',
   ':shy:' => 'shy.png',
   ':speechless:' => 'speechless.png',
   ':confuse:' => 'confuse.png',
   ':frown:' => 'frown.png',
   ':proud:' => 'proud.png',
   ':cheer:' => 'cheer.png',
   ':meditation:' => 'meditation.png',
   ':diving:' => 'diving.png',   
   ':cryingface:' => 'cryingface.png',
   ':lurking:' => 'lurking.png',
   ':thumb:' => 'thumb.png',
   ':smile:' => 'smile.png',
   ':clap:' => 'clap.png',
   ':envious:' => 'envious.png',
   ':surrender:' => 'surrender.png',
   ':bigeye:' => 'bigeye.png',
   ':nose:' => 'nose.png',
   ':sweat:' => 'sweat.png',
   ':flower:' => 'flower.png',
   ':crying:' => 'crying.png',
   ':spit:' => 'spit.png',
   ':surprised:' => 'surprised.png',
   ':blood:' => 'blood.png',
   ':blood2:' => 'blood2.png',
   ':shy2:' => 'shy2.png',
   ':angry:' => 'angry.png',
   ':nomatter:' => 'nomatter.png',
   ':dead:' => 'dead.png',
   ':insidious:' => 'insidious.png',
   ':tongue:' => 'tongue.png',
    );
}
smilies_reset();

到这里差不多就结束了，不过发现一个问题，就是表情图片在前段展示的特标小，查看源码发现所有的表情上都有height: 1em; max-height: 1em这么一个样式，全局搜索wordpress源码，发现在wp-includes/formatting.php 找到了相关代码，删除之后一切正常了~，不过这样一旦升级wordpress就完犊子了……

百度了一下，发现有大神给出了解决办法，这里粘贴复制下：

/**
 * 修复WordPress4.2表情尺寸异常问题
 * 代码转自（张戈博客）：http://zhangge.net/5035.html
 * */
remove_action( 'comment_text',      'convert_smilies',   20 );  //移除4.2 表情相关钩子
remove_action( 'the_content',           'convert_smilies'   );  //移除4.2 表情相关钩子
remove_action( 'the_excerpt',            'convert_smilies'  );  //移除4.2 表情相关钩子
add_action( 'comment_text',     'convert_smilies_diy',    20);  //自定义表情相关钩子
add_action( 'the_content',          'convert_smilies_diy'   );  //自定义表情相关钩子
add_action( 'the_excerpt',      'convert_smilies_diy'       );  //自定义表情相关钩子
//原函数 convert_smilies 位于wp-includes/formatting.php
function convert_smilies_diy( $text ) {
  global $wp_smiliessearch;
  $output = '';
  if ( get_option( 'use_smilies' ) && ! empty( $wp_smiliessearch ) ) {
    // HTML loop taken from texturize function, could possible be consolidated
    $textarr = preg_split( '/(<.*>)/U', $text, -1, PREG_SPLIT_DELIM_CAPTURE ); // capture the tags as well as in between
    $stop = count( $textarr );// loop stuff
    // Ignore proessing of specific tags
    $tags_to_ignore = 'code|pre|style|script|textarea';
    $ignore_block_element = '';
    for ( $i = 0; $i < $stop; $i++ ) {
      $content = $textarr[$i];
      // If we're in an ignore block, wait until we find its closing tag
      if ( '' == $ignore_block_element && preg_match( '/^<(' . $tags_to_ignore . ')>/', $content, $matches ) )  {
        $ignore_block_element = $matches[1];
      }
      // If it's not a tag and not in ignore block
      if ( '' ==  $ignore_block_element && strlen( $content ) > 0 && '<' != $content[0] ) {
        $content = preg_replace_callback( $wp_smiliessearch, 'translate_smiley_diy', $content );
      }
      // did we exit ignore block
      if ( '' != $ignore_block_element && '</' . $ignore_block_element . '>' == $content )  {
        $ignore_block_element = '';
      }
      $output .= $content;
    }
  } else {
    // return default text.
    $output = $text;
  }
  return $output;
}
//原函数 translate_smiley 位于wp-includes/formatting.php
function translate_smiley_diy( $matches ) {
  global $wpsmiliestrans;
  if ( count( $matches ) == 0 )
    return '';
  $smiley = trim( reset( $matches ) );
  $img = $wpsmiliestrans[ $smiley ];
  $matches = array();
  $ext = preg_match( '/\.([^.]+)$/', $img, $matches ) ? strtolower( $matches[1] ) : false;
  $image_exts = array( 'jpg', 'jpeg', 'jpe', 'gif', 'png' );
  // Don't convert smilies that aren't images - they're probably emoji.
  if ( ! in_array( $ext, $image_exts ) ) {
    return $img;
  }
  //请注意！已将表情路径定义到主题目录下的 images/smilies 文件夹
  $src_url = apply_filters( 'smilies_src', get_bloginfo('template_directory').'/images/smilies/'.$img, $img, site_url() );
  return sprintf( '<img src="%s" alt="%s" class="wp-smiley" style="/*height: 1em; max-height: 1em;*/" />', esc_url( $src_url ), esc_attr( $smiley )         );
}

除非注明，否则均为李锋镝的博客原创文章，转载必须以链接形式标明本文链接

本文链接：https://www.lifengdi.com/archives/article/2589

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可

WordPress评论框增加自定义表情

使用

第一步

第二步

第三步

相关文章

文章评论