基于之前的代码,更改了部分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>.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
文件,代码来源于网络,我只是做了部分修改。
评论