WP编辑器添加“添加表情”按钮

基于之前的代码，更改了部分css样式，按钮添加了一个表情字体图标。增加点击表情框外关闭表情框的功能。

字体图标：Dashicons图标

代码

可以根据自己的需要修改其中的css样式和更改Dashicons图标，不过我找了，只有这一个能代表表情的字体图标。

// 添加表情
function fa_get_wpsmiliestrans() {
    global $wpsmiliestrans;
    $wpsmilies = array_unique($wpsmiliestrans);
    $output = '';
    foreach($wpsmilies as $alt => $src_path) {
        $output .= '<a class="add-smily" data-smilies="'.$alt.'"><img src="'.get_bloginfo('template_directory').'/img/smilies/'.rtrim($src_path, "gif").'gif" /></a>';
    }
    return $output;
}
 
add_action('media_buttons_context', 'fa_smilies_custom_button');
function fa_smilies_custom_button($context) {
    $context .= '
    <style>
        button.insert-smilies {
            vertical-align: top;
            background: #2271b1;
            color: #fff;
            border: 1px solid #135e96;
            margin-right: 5px;
            position: relative; /* 定位基准 */
        }
        button.insert-smilies:hover {
            background: #135e96; /* 悬停效果 */
        }
        button.insert-smilies:focus {
            outline: none;
            box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(34, 113, 177, 0.5);
        }
        .smilies-wrap{ 
            background:#fff;
            border: 1px solid #ccc;
            padding: 10px;
            position: absolute;
            top: 55px;  /* 更贴近按钮 */
            left: 0;
            width: 90%;
            max-width: 300px;
            display:none;
            border-radius: 3px;
            z-index: 100; /* 确保面板在最上层 */
        }
        .smilies-wrap img{ 
            height:24px;
            width:24px;
            cursor:pointer;
            margin: 5px;
        }
        .is-active.smilies-wrap{ 
            display:block; 
        }
        span.dashicons.dashicons-smiley { 
            vertical-align: middle; /* 图标垂直居中 */
        }
        /* 添加到你的插件/主题 CSS */
        button.insert-smilies .dashicons-smiley {
            height:24px;
            width:20px;
            vertical-align: middle !important; /* 强制垂直居中 */
            margin-right: 3px; /* 可选：微调间距 */
            font-size: 20px;
        }
    </style>

    <button 
        id="insert-smilies-button" 
        type="button" 
        class="button insert-smilies add_smilies" 
        title="添加表情" 
        data-editor="content"
        aria-label="插入表情符号"
        aria-expanded="false"
        aria-controls="smilies-wrap"
    >
        <span class="dashicons dashicons-smiley"></span>添加表情
    </button>

    <div class="smilies-wrap">'. fa_get_wpsmiliestrans() .'</div>

    <script>
        jQuery(document).ready(function($){
            // 面板显隐控制
            $(document).on("click", ".insert-smilies", function(e) {
                e.preventDefault();
                $(".smilies-wrap").toggleClass("is-active");
            });
            
            // 点击外部关闭面板
            $(document).on("click", function(e) {
                if (!$(e.target).closest(".insert-smilies, .smilies-wrap").length) {
                    $(".smilies-wrap").removeClass("is-active");
                }
            });

            // 插入表情
            $(".add-smily").click(function() { 
                send_to_editor(" " + $(this).data("smilies") + " ");
                $(".smilies-wrap").removeClass("is-active");
                return false;
            });
        });
    </script>';

    return $context;
}

使用方法

复制以上的代码，添加到主题函数里面，一般是 functions.php 文件，代码来源于网络，我做了部分修改。