给留言加个贴纸表情,增添点情感色彩吧 1

给留言加个贴纸表情,增添点情感色彩吧

世界是复杂的,人的主观感受更是复杂的。

表情的流行跟之前网络用语的流行是相通的,随着时代的发展,有时候文字和语言已经难以准确表达我们的情感和想法,而有些复杂的情感难以表达,通过表情更加传神的表现出来,比文字更加具有情感,不再冷冰冰。也更具娱乐性,也能生动表达。

一个 emoji 总能胜过千言万语。

给留言加个贴纸表情,增添点情感色彩吧 2给留言加个贴纸表情,增添点情感色彩吧 2给留言加个贴纸表情,增添点情感色彩吧 2给留言加个贴纸表情,增添点情感色彩吧 2 滑稽分割线

WP Sticker Heo 是一款 WordPress 贴纸包,插件里的所有贴纸图片资源文件Heo 设计,免授权给个人非盈利性质博客使用,但禁止商业使用,详细信息可查看 https://blog.zhheo.com/p/2daa6a7b.html

FONG 我只负责编写成插件外褂,也是免授权给个人非盈利性质博客使用,但禁止商业使用

插件目录结构

├── bundle
│   ├── images
│   │   ├── Sticker
│   │   │   ├── 亲亲.png
│   │   └── Sticker-100
│   │   │   ├── 亲亲.png
│   └── script
│       └── bundle.js
├── include
│   ├── core.php // 核心文件
│   ├── hook.php // 自定义 hook 的地方
│   └── sticker.php // 文件资源名目录
├── src
│   └── scripts
│       └── plugin.js
└── wp-sticker-heo.php //入口文件

使用注意项

默认评论表单元素 ID#comment,如过不是请在入口文件 wp-sticker-heo.php 里设置这个又臭又长的 PLUGIN_STICKER_HEO_COMMENT_FORM_ELEMENT_ID PLUGIN_COMMENT_FORM_TEXTAREA_ELEMENT_ID 常量的值为你表单元素 ID,否则不能执行点击贴纸插入到 <textarea> 的操作。

<?php
/*
Plugin Name: WP Sticker Heo
Plugin URI: https://fongsoul.com/wp-sticker-heo.html
Description: Heo 贴纸,由 Fong 编写代码, Heo 设计资源
Version: 1.2.0
Author: Fong
Author URI: https://fongsoul.com
*/

namespace FongSoul\Sticker\Heo;

const PLUGIN_VERSION = '1.2.0';
const PLUGIN_COMMENT_FORM_TEXTAREA_ELEMENT_ID = '#comment';

if (!defined('PLUGIN_STICKER_HEO_RESOUCE_URL')) {
    define('PLUGIN_STICKER_HEO_RESOUCE_URL', plugins_url('', __FILE__));
}

if (!defined('PLUGIN_STICKER_HEO_BASE_URL')) {
    define('PLUGIN_STICKER_HEO_BASE_URL', PLUGIN_STICKER_HEO_RESOUCE_URL . '/bundle/images');
}

if (!defined('PLUGIN_STICKER_HEO_PAGE_NOW')) {
    global $pagenow;
    define('PLUGIN_STICKER_HEO_PAGE_NOW', strtolower($pagenow));
}

require_once(dirname(__FILE__) . '/include/core.php');

尽量不要动核心 code.php , 如果要修改或调整注入到表单 <textarea> 元素尾部的元素的结构,请在 include/hook.php 里移除默认过滤器处理方法 __NAMESPACE__ . ‘\componentTemplate’ 并新增自己的过滤器处理方法。

<?php

namespace FongSoul\Sticker\Heo;

// 移除默认过滤器 sticker_heo_component_template 的处理方法
\remove_filter('sticker_heo_component_template', __NAMESPACE__ . '\componentTemplate', 0);

// 添加一个新的过滤器处理方法
\add_filter('sticker_heo_component_template', function (string $html, array $stickerDataCollection): string {
    return $html;
}, 10, 2);

捉虫(BUG) 给留言加个贴纸表情,增添点情感色彩吧 6

如意 BUG 或使用问题请在下方留言,本插件原是小站私人使用,并不一点能保证适合所有 WordPress 站点主题。

感激

在此感谢 Heo 所设计如此灵动感的贴纸,增添了不少色彩。 给留言加个贴纸表情,增添点情感色彩吧 7

知道了知道了,FONG 真的好鬼长气,直接下载使用得了。

2021/05/28 补充

为什么无法正常工作,点解,点解,点解 给留言加个贴纸表情,增添点情感色彩吧 8

为什么组件不出现在表单中

Heo 表情贴纸组件是通过 comment_form_fields 这个 filter 钩子进行追加注入的到表单模块中,表单里不显示表情贴纸组件,那就是 comment_form_fields 这个 filter 无法正常工作,或被其他程序代码干扰了,比如你的留言表单模块根本就不是通过 comment_form 实例出来的,

v1.1.0 开始可以通过以下两种放在在需要的地方进行调用贴纸组件

  • \FongSoul\Sticker\Heo\stickerComponent();
  • echo \FongSoul\Sticker\Heo\getStickerComponent();

为什么贴纸代码无法正常解析转换

Heo 表情贴纸的代码解析转换是通过 smilies 这个 filter 钩子进行注册的,优先级别为 100,如果不能正常解析,

  • 被其他更优先级更低的 smilies filter 干扰了
  • 有代码直接对 golbal $wpsmiliestrans 这个 Array 下毒手,直接进行覆盖这种暴力操作,相当于对之前的注册被注销掉,注册了个寂寞。

比较友好的解决方法,调更低的优先级(数值更大),注册是共存的,不会影响其他注册修改。

为什么个别贴纸代码无法正常解析转换

除了上面所说的极端情况,还有两种一般情况

  • 贴纸代码,一般是留者的操作导致,如 :heo-微笑: 前后需有空格,否则无法解析
  • 压根就没注册这个贴纸代码,所有没解析

2021/05/29 补充

如何友好移除某个不称心意的贴纸

移除某个贴纸可以通过在 include/sticker.php 的 Array 中文件名值进行移除,但这是非常暴力的事情,可能会导致之前留言有使用过这个表情的无法正常显示而显示成代码,除非第一次使用可直接这样暴力操作。

比较友好的是通过在 include/hook.php 中添加一个移除默认的 sticker_heo_component_template fileter,并新建一个 sticker_heo_component_template filter 进行组件渲染出来,其用一个匿名函数处理,第一个参数为 string 类型的默认遍历好的html 结构,第二个接收参数为 array 类型的贴纸数据集合

// 第二个参数的结构

Array
(
    [0] => Array
        (
            [name] => 再见
            [code] => :heo-再见:
            [images] => Array
                (
                    [0] => http://fs.test/wp-content/plugins/WP-Sticker-Heo/bundle/images/Sticker/再见.png
                    [1] => http://fs.test/wp-content/plugins/WP-Sticker-Heo/bundle/images/Sticker-100/再见.png
                )

        )
   ...
)

通过遍历和判断这个数组进行组装新的组件结构

<?php

namespace FongSoul\Sticker\Heo;

// 移除默认过滤器 sticker_heo_component_template 的处理方法
\remove_filter('sticker_heo_component_template', __NAMESPACE__ . '\componentTemplate', 0);

// 添加一个新的过滤器处理方法
\add_filter('sticker_heo_component_template', function (string $html, array $stickerDataCollection): string {
    $unlikeCollection = array('菜狗', '狗头', '狗头花', '狗头草'); //不喜欢这几个狗头

    $ouput = '';
    foreach ($stickerDataCollection as $sticker) {
        if (!in_array($sticker['name'], $unlikeCollection)) continue;
        $ouput .= '<a href="javascript:;" title="' . $name . '">' . call_user_func(__NAMESPACE__ . '\getImgElementByName', $name) . '</a>';
    }

    return <<<EOF
<style>
...
</style>
$ouput
EOF;
}, 10, 2);

http://fongsoul.com/_s/plugin/wp-sticker-heo/main.zip

交流,但不求共鸣

    我要留言

    Tips: 支持匿名免邮留言。填写邮箱地址有利于对各位靓仔/靓女进行消息通知。留言头像服务来自Gravatar

    留言者基本信息 匿名訪客
    匿名訪客
    留言主要内容
    Sticker Heo on wordpress, Get !!!!
    Kaomojis 颜字

    Σ(っ °Д °;)っ  惊吓w(゚Д゚)w  啊啊(°ཀ°)  吐血(⊙﹏⊙)  呃呃呃o(≧口≦)o  崩溃(´•︵•`)  难过(;´༎ຶД༎ຶ`)  哭死→_→  斜眼看( ̄_, ̄ )  不屑( *︾▽︾)  陶醉(* ̄3 ̄)╭  飞吻o( ̄┰ ̄*)ゞ  不好意思(。・_・。)ノ  对不起φ(≧ω≦*)♪  乐(*^▽^*)  开心(๑╹◡╹)ノ  高兴*´∀`)´∀`)*´∀`)*´∀`)  哈哈哈哈ヽ(✿゚▽゚)ノ  好耶(๑•̀ㅂ•́)و✧  棒Ψ( ̄∀ ̄)Ψ  美味

    验证码加载中....

    BACK TO TOP