分享精彩
分享无限

wordpress评论框添加表情弹窗、加粗、引用、图片等功能

本文最后更新于2018年9月10日,已超过一周没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

CSS样式

把下面的CSS样式放倒自己主题当中的main.css,或者是对于的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在里面适当的位置添加下面代码:

<div class="position">
 <a  target='_blank' href="https://www.sengot.com/go?url=amF2YXNjcmlwdDo7" id="comment-smiley" title="表情"><b><i class="fa fa-smile-o"></i></b></a>
 <a  target='_blank' href="https://www.sengot.com/go?url=amF2YXNjcmlwdDo=" id="font-color" title="颜色"><b><i class="fa fa-font"></i></b></a>
 <a  target='_blank' href="https://www.sengot.com/go?url=amF2YXNjcmlwdDpTSU1QQUxFRC5FZGl0b3IuaW1nKCk=" title="插图片"><b><i class="fa fa-image"></i></b></a>
 <a  target='_blank' href="https://www.sengot.com/go?url=amF2YXNjcmlwdDpTSU1QQUxFRC5FZGl0b3Iuc3Ryb25nKCk=" title="粗体"><b><i class="fa fa-bold"></i></b></a>
 <a  target='_blank' href="https://www.sengot.com/go?url=amF2YXNjcmlwdDpTSU1QQUxFRC5FZGl0b3IuZW0oKQ==" title="斜体"><b><i class="fa fa-italic"></i></b></a>
 <a  target='_blank' href="https://www.sengot.com/go?url=amF2YXNjcmlwdDpTSU1QQUxFRC5FZGl0b3IucXVvdGUoKQ==" title="引用"><b><i class="fa fa-quote-left"></i></b></a>
 <a  target='_blank' href="https://www.sengot.com/go?url=amF2YXNjcmlwdDpTSU1QQUxFRC5FZGl0b3IuYWhyZWYoKQ==" title="插链接"><b><i class="fa fa-link"></i></b></a>
 <a  target='_blank' href="https://www.sengot.com/go?url=amF2YXNjcmlwdDpTSU1QQUxFRC5FZGl0b3IuZGVsKCk=" title="删除线"><b><i class="fa fa-strikethrough"></i></b></a>
 <a  target='_blank' href="https://www.sengot.com/go?url=amF2YXNjcmlwdDpTSU1QQUxFRC5FZGl0b3IudW5kZXJsaW5lKCk=" title="下划线"><b><i class="fa fa-underline"></i></b></a>
 <a  target='_blank' href="https://www.sengot.com/go?url=amF2YXNjcmlwdDpTSU1QQUxFRC5FZGl0b3IuY29kZSgp" title="插代码"><b><i class="fa fa-file-code-o"></i></b></a>
 </div> 

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

这里要用的两个文件,因为弹窗需要js样式,和一个smiley.php文件,smiley.php要放到主题根目录, js文件放到主题JS文件夹里

文件下载:js文件smiley文件

最后还需要在footer.php文件里调用该JS,代码放在</body>上面一行就行

调用代码如下:

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

WordPress4.2之后,使用了Emoji表情,原有自定义表情快捷符号无法再转换为表情图片gif,而我们引入的是gif文件,这样并不会显示的,所以需要禁用前台与后台的相关emoji表情加载脚本,并修改css文件调整大小。加入以下代码至主题的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() . '/images/smilies/' . $img;
}
function init_fixsmilie() {
global $wpsmiliestrans;
add_filter('smilies_src','fa_smilies_src',1,10);
//默认表情文本与表情图片的对应关系(可自定义修改)
$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);

 

最后更新于:2018-09-10 18:32:56

●●●●●● 重要声明 ●●●●●●

除非文章注明,文章皆由( 森歌网)原创,欢迎转载!

转载请保留↓

本文标题: wordpress评论框添加表情弹窗、加粗、引用、图片等功能

本文链接: https://www.sengot.com/html/457.html

分享到: 更多 (0)

评论 1

评论前必须登录!

 

  1. #1

    😯 😯

    xurongbbs3个月前 (08-04) | Linux | Chrome 61.0.3163.128【上海电信】

专注分享 链接无限 WWW.SenGot.COM