WordPress 简单表情简码
杏川铭心
首先我们不要管这个拗口的标题，细心的小伙伴或许已经发现了，上一篇文章中出现了大量的知乎里的 emoji。一个一个手动输入肯定不现实，毕竟 WordPress 编辑器不支持直接插入那么小的图片，更何况自定义的 emoji 需要一些独特的样式才能看起来舒服。所以我最终采取了简码的方式来实现自定义 emoji 的功能。
顺带说一下，目前也有一些主题是采用这种方式实现自定义 emoji 的。
什么是简码？
简码是一个 WordPress 中挺古老的功能，2.5 版本就有了，可以实现不少有意思的玩法。语法跟 BBCode 一模一样，都是模仿 HTML 标签的形式，可以说在易用性和简洁性之间做到了很好的平衡。
简码类似于这个样子：
[shortcode]
[shortcode]一些内容[/shortcode]
[shortcode 参数="一些内容"]其中最主要的是三个东西，简码名称，参数，和内容。
创建简码
可以使用 add_shortcode() 命令来创建简码。
首先需要一个函数，作为简码本体：
function myemoji_surprise_shortcode( $atts = [], $content = null, $tag = '' ) {
// 简码中的操作...
return $content; // 也可以不是 $content，返回什么都可以，这里返回的内容会成为最终简码渲染出的内容
}然后注册简码：
add_shortcode( '简码名称', 'myemoji_surprise_shortcode' );最后就可以使用简码了，你给你的简码取了什么名字就怎么调用。
Emoji 简码
现在我们知道了如何创建简码，就可以开始添加我们的 emoji 简码了。
首先肯定是从一个插件开始，创建一个名字叫 myemoji 的文件夹，大概是这个结构：
myemoji
|- assets
|- style.css
|- emoji1.png
|- emoji2.png
|- ...
|- index.php // 这个文件只是简单做个占位符，防止插件目录被直接访问，可以不要
|- myemoji.php
|- index.php // 同理然后先打开 myemoji.php 编写介绍：
<?php
/*
* Plugin Name: 自定义 emoji
* Description: 添加自定义 emoji 简码
* Version: 1.0
* Requires at least: 6.8
* Requires PHP: 8.3
* Text Doamin: myemoji
*/单个 emoji
单个 emoji 简码，比如说 [emoji_name] 这种，那就不需要加参数，因为一个简码就是一个独立的东西，不需要内容或者别的参数。
核心其实就是获取到表情所在的文件位置，然后返回。
function myemoji_emoji1_shortcode() {
$path = plugin_dir_url(__FILE__);
$path .= 'assets/emoji1.png';
return '<img class="myemoji" src="' . esc_url( $path ) . '">';
}
add_shortcode( 'emoji1', 'myemoji_emoji1_shortcode' );接下来需要编写相关的样式，不然你的 emoji 会非常突兀的挂在你的文章里面。
打开 /assets/style.css，编写：
.myemoji {
width: 1em;
height: 1em;
margin: 0;
margin-bottom: -0.11em; /* 这一行是个有点 hacky 的写法，有的 emoji 因为大小原因会和你的文字对不齐。数值和bottom/top需要自行修改。 */
padding: 0;
}最后需要注册样式：
function myemoji_enqueue_stylesheet() {
$path = plugin_dir_url(__FILE__);
wp_register_style( 'myemoji_style', $path . 'assets/style.css' );
wp_enqueue_style( 'myemoji_style' );
}
add_action( 'init', 'myemoji_enqueue_stylesheet' );最终效果：
多个 emoji
有的时候我们可能会希望使用多个 emoji，当然你可以把上面的流程重复操作几遍（我就是这么干的），emoji 量小的时候自然是很合适。
不过当 emoji 的量大起来的时候，肯定这种方式就不太高效了。
这里我们可以利用参数来指定要使用哪个 emoji。
既然需要使用参数，那么就需要在简码函数中支持参数：
function myemoji_emoji_shortcode( $atts = [], $content = null, $tag = '' )接下来修改逻辑，这里采用的是类似于 [myemoji emoji_name] 这样的格式：
function myemoji_emoji_shortcode( $atts = [], $content = null, $tag = '' ) {
if ( empty( $atts ) ) { // 检查是否提供了 emoji 名称
return ''; // 没有提供就返回空值
}
$emojis = Array( 'emoji1', 'emoji2' ); // 可用的 emoji 列表
$emoji_name = $atts[0]; // 获取 emoji 名称，上面这种简码写法最终会在 $atts 中提供 Array( 0 => 'emoji_name' )
if ( in_array( $emoji_name, $emoji ) ) { // 检查 emoji 是否存在
$path = plugin_dir_url(__FILE__) . 'assets/' . $emoji_name . '.png'; // 这一行假设你 emoji 文件名是对应的！否则请自行修改！
return '<img class="myemoji" src="' . esc_url( $path ) . '">' // 别忘了过滤！永远不要相信用户的输入数据！
} else {
return ''; // 不存在就返回空值，当然你也可以返回一个别的什么东西
}
}后续的内容和单个 emoji 就一样了，这边不做更多展示。
安装插件
把刚刚那个 myemoji 文件夹打包成 .zip，上传。
OK，现在你可以快乐地在文章中使用你自己的 emoji 了！