折腾折腾网站

今天主要干了两件事：1.给评论区添加了一些表情贴纸 2.给评论区添加网址填写框

一、给评论区添加了一些表情贴纸

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

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

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

  滑稽分割线

前两天看到heo 设计的表情贴纸做成了Wordpress插件，该表情包免费授权给个人非盈利性质博客使用，但禁止商业使用，详细信息可查看：Sticker-Heo表情发布：个人博客的基础表情系列 | 张洪Heo (zhheo.com)

现在的评论区大概是这样式的，我从众多贴纸中挑选了一些自己比较喜欢的放了上去，最开始的时候遇到一些问题不能显示，这里要感谢插件的作者@FONE耐心解答帮我解决了问题最终成功显示。

这里把遇到的问题整理一下希望可以帮到其他喜欢此款表情贴纸的朋友，前面提到作者将表情贴纸制作成了Wordpress插件，去上边提到的博客地址下载即可，现在更新到了V1.10版本

表情不能显示在评论区

如果安装完插件并启用之后评论区没有正常显示表情贴纸的话可以手动输入表情对应的代码看看是否可以解析，可以在你的博客评论区内输入 :heo-滑稽: 提交评论之后看看是否能正常显示贴纸。

能够正常显示的话一般问题不大，从v1.1.0 开始可以通过以下两种方法放在在需要的地方进行调用贴纸组件（任选其一即可）

\FongSoul\Sticker\Heo\stickerComponent();

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

例如我的子比主题，找到评论区模块放在自己想要放置的位置即可，想要完美需要细细的调

让贴纸与文字同行输出并调整大小

这里就需要通过设置css样式来实现了，最开始的时候我是直接在插件的代码中修改的，改完之后不生效，折腾了好久在插件作者@FONE的指导下发现主题自带的表情使用了统一的样式，在插件注册解析时输出的表情加上 smilie-icon 这个 class 就可以了，这个class可以放在img标签内定义图片显示的方式、padding和显示的大小样式。

.dropdown-smilie .smilie-icon {
    display: inline-block;
    padding: 3px;
    width: 38px
}

删除不想要的表情贴纸

没错我就是这么删除的，删完了之后才发现作者更新了一个更加友好的删除方式，有兴趣的话可以去原帖看一下

2021/05/29 补充如何友好移除某个不称心意的帖子表情

先附上插件目录结构

├── 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 //入口文件

下面附上我精简过的表情贴纸列表，此文件在插件目录下 include/sticker.php 

<?php

return array(
    '呲牙笑',
    '鼓掌',
    '抠鼻',
    '吐血',
    '擦汗',
    '惊讶',
    '笑哭',
    '疑问',
    '奋斗',
    '眩晕',
    '哈士奇',
    '喜欢',
    '吃瓜',
    '滑稽',
    '被打',
    '狗头围脖',
    '头秃',
    '好的',
    '喜欢',
    '偷偷看',
    '狗头花',
    '狗头草',
    '我看好你',
    '滑稽喝水',
    '滑稽狂汗',
    '引起不适',
    '滑稽被子',
    '出家人',
    '菜狗',
);

/*
 *   '熊猫',
 *   '小丑',
 *   '打牌',
 *   '鬼脸',
 *   '熊猫',
 *   '月饼',
 *   '开心',
 *   '害羞',
 *   '应援',
 *   '恶心',
 *   '禁言',
 *   '睡觉',
 *   '送福',
 *   '捂脸',
 *   '生病',
 *   '绿帽',
 *   '疼痛',
 *   '勉强笑',
 *   '发红包',
 *   '看穿一切',
 *   '熊猫唱歌',
 *   '熊猫喜欢',
 *   '牛年进宝',
 *   '狗头围脖',
     '狗头花',
 
    
*/
    

二、给评论区添加网址填写框

我这边使用的是子比主题，也不知为何当时脑子一热就买了这个主题后来发现买了这个主题的大都看上了它的用户中心和会员功能用来做资源站，可我是来写博客的啊，上边的优势功能被我给统统关掉了，最近发现访客如果不登录留言的话只能填写用户名和邮箱，没有填写网址的输入框，毕竟大部分朋友在别人那里评论，还是希望有人点击链接，能够到他的网站。

因为是买的别人的主题再加上我多JS CSS HTML PHP什么的不是很熟悉，前几天便向主题作者提交了需求，但是不知什么时候才能添加完成，正好今天在添加表情的时候动到了评论区相关的代码，简单看了一下勉强能看懂，就先照葫芦画瓢添加了一个网址的输入框，后台评论那边是可以看到网址存储成功的，但是目前还不能直接点击头像或用户名直接跳转过去，因为我还没有改

常来的朋友还是建议登录一下，社交登录仅仅获取了你的头像和用户名，并且还有个人中心可以设置网址什么的，虽然也不能直接点击头像跳转但是能够填写更多的信息方便互访，下面展示一下博友@林羽凡的个人中心供大家参考