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

流年 评论796字数 1650阅读5分30秒

基于之前的代码,更改了部分css样式,按钮添加了一个表情字体图标。

字体图标:Dashicons图标

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

代码

可以根据自己的需要修改其中的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>.smilies-wrap{background:#fff;border: 1px solid #ccc;padding: 10px;position: absolute;top: 60px;width: 256px;display:none;border-radius: 3px;}.smilies-wrap img{height:24px;width:24px;cursor:pointer;margin-bottom:5px} .is-active.smilies-wrap{display:block} span.dashicons.dashicons-smiley {width: 20px;height: 20px;font-size: 20px;margin: 0 2px 0 0;}</style><a id="insert-media-button" style="position:relative" class="button insert-smilies add_smilies" title="添加表情" data-editor="content" href="javascript:;">
    <span class="dashicons dashicons-smiley"></span>添加表情
    </a><div class="smilies-wrap">'. fa_get_wpsmiliestrans() .'</div><script>jQuery(document).ready(function(){jQuery(document).on("click", ".insert-smilies", function() { if(jQuery(".smilies-wrap").hasClass("is-active")) { jQuery(".smilies-wrap").removeClass("is-active"); } else { jQuery(".smilies-wrap").addClass("is-active"); } }); jQuery(document).on("click", ".add-smily", function() { send_to_editor(" " + jQuery(this).data("smilies") + " "); jQuery(".smilies-wrap").removeClass("is-active"); return false; }); });</script>';
    return $context;
}

使用方法

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

流年
  • 本文由 流年 发表于 2024年1月14日13:34:50
  • 除非特殊声明,本站文章均为原创,需要转载,请留言说明!
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证