[mcj]WordPress评论框美化添加表情功能-马春杰杰

改CSS

修改main.css

/*菜单栏样式*/

.position .fa {

line-height: 40px;

padding: 1px 8px;

}

/* 表情字体颜色弹窗样式 */

#smiley {

background-color: #EEEEEE;

padding: 3px 5px;

position: relative;

line-height: 0;

}

#smiley img {

display: inline-block;

padding: 14px;

cursor: pointer;

}

#smiley::after {

position: absolute;

top: -5px;

left: 8px;

width: 0;

height: 0;

vertical-align: top;

border-bottom: 5px solid #1FA3E1;

border-right: 5px solid rgba(0, 0, 0, 0);

border-left: 5px solid rgba(0, 0, 0, 0);

content: "";

}

#fontcolor {

width: 453px;

height: auto;

line-height: 20px;

padding: 3px 1px;

border: 1px #e0e0e0 solid;

z-index: 99999;

}

#fontcolor a {

display: inline-block;

height: 20px;

width: 21px;

}

#fontcolor::after {

border-bottom: 5px solid #1FA3E1;

border-left: 5px solid transparent;

content: "";

border-right: 5px solid transparent;

vertical-align: top;

height: 0px;

width: 0px;

left: 82px;

top: 108.2px;

position: absolute;

}

修改comments.php：

<?php include(TEMPLATEPATH . '/smiley.php');?>

</div>

<?php include(TEMPLATEPATH . '/smiley.php');?>

这里代码放的位置可以放在<div class=”comt-box”>的外面~

<?php include(TEMPLATEPATH . '/smiley.php');?>
 <div class="comt-box">
 <textarea placeholder="<?php echo _hui('comment_text') ?>" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&amp;&amp;event.keyCode==13){document.getElementById('submit').click();return false};"></textarea>
 <div class="comt-ctrl">
 <div class="comt-tips"><?php comment_id_fields(); do_action('comment_form', $post->ID); ?></div>
 <button type="submit" name="submit" id="submit" tabindex="5"><?php echo _hui('comment_submit_text') ? _hui('comment_submit_text') : '提交评论' ?></button>
 
 </div>
 </div>
 <div class="position">
 <a href="javascript:;" id="comment-smiley" title="表情"></a>
 <a href="javascript:" id="font-color" title="颜色"></a>
 <a href="javascript:SIMPALED.Editor.img()" title="插图片"></a>
 <a href="javascript:SIMPALED.Editor.strong()" title="粗体"></a>
 <a href="javascript:SIMPALED.Editor.em()" title="斜体"></a>
 <a href="javascript:SIMPALED.Editor.quote()" title="引用"></a>
 <a href="javascript:SIMPALED.Editor.ahref()" title="插链接"></a>
 <a href="javascript:SIMPALED.Editor.del()" title="删除线"></a>
 <a href="javascript:SIMPALED.Editor.underline()" title="下划线"></a>
 <a href="javascript:SIMPALED.Editor.code()" title="插代码"></a>
 </div>

<?php include(TEMPLATEPATH . '/smiley.php');?>

<textarea placeholder="<?php echo _hui('comment_text') ?>" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"></textarea>

</div>

</div>

最后把JS文件放到模版js目录下，smiley.php放模版根目录。在footer.php中引用该js，放到</body>前就可以。

1	<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/comments.js"></script>

js文件和smiley.php下载地址：


隐藏内容，解锁需要先评论本文
评论后刷新解锁

效果：

现在还有个问题，现在的表情在评论框选择的时候跟最后呈现的不一致，这是因为emoji导致的，所以需要解决一下~~

把下面这段代码加入到functions.php中。

/**
 * 替换emjo表情修复WordPress升级4.2自定义表情的各种问题
 */
function disable_emoji($plugins) {
if (is_array($plugins)) {
return array_diff($plugins, array(
'wpemoji'
));
} else {
return array();
}
}
//取当前主题下images\smilies\下表情图片路径
function custom_smilie_src($old, $img) {
return get_stylesheet_directory_uri() . '/img/smilies/' . $img;
}
function init_fixsmilie() {
global $wpsmiliestrans;

//默认表情文本与表情图片的对应关系(可自定义修改)
$wpsmiliestrans = array(
':mrgreen:' => 'icon_mrgreen.gif',
':neutral:' => 'icon_neutral.gif',
':twisted:' => 'icon_twisted.gif',
':arrow:' => 'icon_arrow.gif',
':shock:' => 'icon_eek.gif',
':smile:' => 'icon_smile.gif',
':???:' => 'icon_confused.gif',
':cool:' => 'icon_cool.gif',
':evil:' => 'icon_evil.gif',
':grin:' => 'icon_biggrin.gif',
':idea:' => 'icon_idea.gif',
':oops:' => 'icon_redface.gif',
':razz:' => 'icon_razz.gif',
':roll:' => 'icon_rolleyes.gif',
':wink:' => 'icon_wink.gif',
':cry:' => 'icon_cry.gif',
':eek:' => 'icon_surprised.gif',
':lol:' => 'icon_lol.gif',
':mad:' => 'icon_mad.gif',
':sad:' => 'icon_sad.gif',
'8-)' => 'icon_cool.gif',
'8-O' => 'icon_eek.gif',
':-(' => 'icon_sad.gif',
':-)' => 'icon_smile.gif',
':-?' => 'icon_confused.gif',
':-D' => 'icon_biggrin.gif',
':-P' => 'icon_razz.gif',
':-o' => 'icon_surprised.gif',
':-x' => 'icon_mad.gif',
':-|' => 'icon_neutral.gif',
';-)' => 'icon_wink.gif',
'8O' => 'icon_eek.gif',
':(' => 'icon_sad.gif',
':)' => 'icon_smile.gif',
':?' => 'icon_confused.gif',
':D' => 'icon_biggrin.gif',
':P' => 'icon_razz.gif',
':o' => 'icon_surprised.gif',
':x' => 'icon_mad.gif',
':|' => 'icon_neutral.gif',
';)' => 'icon_wink.gif',
':!:' => 'icon_exclaim.gif',
':?:' => 'icon_question.gif',
);
//移除WordPress4.2版本更新所带来的Emoji钩子同时挂上主题自带的表情路径
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_styles', 'print_emoji_styles');
remove_filter('the_content_feed', 'wp_staticize_emoji');
remove_filter('comment_text_rss', 'wp_staticize_emoji');
remove_filter('wp_mail', 'wp_staticize_emoji_for_email');
add_filter('tiny_mce_plugins', 'disable_emoji');
add_filter('smilies_src', 'custom_smilie_src', 10, 2);
}
add_action('init', 'init_fixsmilie', 5);

/**

* 替换emjo表情修复WordPress升级4.2自定义表情的各种问题

function disable_emoji($plugins) {

if (is_array($plugins)) {

return array_diff($plugins, array(

'wpemoji'

));

} else {

return array();

}

//取当前主题下images\smilies\下表情图片路径

function custom_smilie_src($old, $img) {

return get_stylesheet_directory_uri() . '/img/smilies/' . $img;

}

function init_fixsmilie() {

global $wpsmiliestrans;

//默认表情文本与表情图片的对应关系(可自定义修改)

$wpsmiliestrans = array(

':mrgreen:' => 'icon_mrgreen.gif',

':neutral:' => 'icon_neutral.gif',

':twisted:' => 'icon_twisted.gif',

':arrow:' => 'icon_arrow.gif',

':shock:' => 'icon_eek.gif',

':smile:' => 'icon_smile.gif',

':???:' => 'icon_confused.gif',

':cool:' => 'icon_cool.gif',

':evil:' => 'icon_evil.gif',

':grin:' => 'icon_biggrin.gif',

':idea:' => 'icon_idea.gif',

':oops:' => 'icon_redface.gif',

':razz:' => 'icon_razz.gif',

':roll:' => 'icon_rolleyes.gif',

':wink:' => 'icon_wink.gif',

':cry:' => 'icon_cry.gif',

':eek:' => 'icon_surprised.gif',

':lol:' => 'icon_lol.gif',

':mad:' => 'icon_mad.gif',

':sad:' => 'icon_sad.gif',

'8-)' => 'icon_cool.gif',

'8-O' => 'icon_eek.gif',

':-(' => 'icon_sad.gif',

':-)' => 'icon_smile.gif',

':-?' => 'icon_confused.gif',

':-D' => 'icon_biggrin.gif',

':-P' => 'icon_razz.gif',

':-o' => 'icon_surprised.gif',

':-x' => 'icon_mad.gif',

':-|' => 'icon_neutral.gif',

';-)' => 'icon_wink.gif',

'8O' => 'icon_eek.gif',

':(' => 'icon_sad.gif',

':)' => 'icon_smile.gif',

':?' => 'icon_confused.gif',

':D' => 'icon_biggrin.gif',

':P' => 'icon_razz.gif',

':o' => 'icon_surprised.gif',

':x' => 'icon_mad.gif',

':|' => 'icon_neutral.gif',

';)' => 'icon_wink.gif',

':!:' => 'icon_exclaim.gif',

':?:' => 'icon_question.gif',

);

//移除WordPress4.2版本更新所带来的Emoji钩子同时挂上主题自带的表情路径

remove_action('wp_head', 'print_emoji_detection_script', 7);

remove_action('admin_print_scripts', 'print_emoji_detection_script');

remove_action('wp_print_styles', 'print_emoji_styles');

remove_action('admin_print_styles', 'print_emoji_styles');

remove_filter('the_content_feed', 'wp_staticize_emoji');

remove_filter('comment_text_rss', 'wp_staticize_emoji');

remove_filter('wp_mail', 'wp_staticize_emoji_for_email');

add_filter('tiny_mce_plugins', 'disable_emoji');

add_filter('smilies_src', 'custom_smilie_src', 10, 2);

}

add_action('init', 'init_fixsmilie', 5);

不过最后还是遗留了问题，首页评论小工具处的表情不显示，显示的是一个灰色的方块，如果有大神看到希望能指点指点

学习啦

好安3年前 (2023-04-13)回复

学习学习

都市放牛4年前 (2022-12-14)回复

js文件和smail.php和无了啊

安七七4年前 (2022-12-12)回复

等我补一下

马春杰杰4年前 (2022-12-12)回复

❗ 试试看

:cry: :cry: :sad: :evil: ❗ ❗ :smile: :smile: 山东省大厦

dasdas6年前 (2020-07-12)回复

:cry: :cry: :cry:

马春杰杰7年前 (2019-07-10)回复

谢谢大家~

马春杰杰7年前 (2019-05-31)回复

哈哈

马春杰杰7年前 (2019-05-31)回复

[mcj]WordPress评论框美化添加表情功能

改CSS

马春杰杰 

相关推荐

评论 9

最新修改文章

最新评论

精彩直达

觉得文章有用就打赏一下文章作者

非常感谢你的打赏，我们将继续提供更多优质内容，让我们一起创建更加美好的网络世界！

支付宝扫一扫

微信扫一扫

改CSS

马春杰杰

相关推荐

评论 9

最新修改文章

最新评论

精彩直达

觉得文章有用就打赏一下文章作者

非常感谢你的打赏，我们将继续提供更多优质内容，让我们一起创建更加美好的网络世界！

支付宝扫一扫

微信扫一扫

马春杰杰 