功能和效果如文后评论框,包括:粗体、斜体、下划线、删除线、链接、图片、代码、引用、隐藏、表情,需要更多功能的可以尝试使用JS Quicktags或者在评论框加载TinyMCE Advanced编辑器。
一、functions.php添加以下代码:
// -- START ---------------------------------------- function wp_smilies() { global $wpsmiliestrans; if ( !get_option('use_smilies') or (empty($wpsmiliestrans))) return; $smilies = array_unique($wpsmiliestrans); $link=''; foreach ($smilies as $key => $smile) { $file = get_bloginfo('wpurl').'/wp-includes/images/smilies/'.$smile; $value = " ".$key." "; $img = "<img src=\"{$file}\" alt=\"{$smile}\" />"; $imglink = htmlspecialchars($img); $link .= "<span><a href=\"#commentform\" title=\"{$smile}\" onclick=\"document.getElementById('comment').value += '{$value}'\">{$img}</a></span>"; } echo '<div class="editor_tools clearfix"> <span><a href="javascript:SIMPALED.Editor.strong()" title="粗体" class="et_strong">粗体</a></span> <span><a href="javascript:SIMPALED.Editor.em()" title="斜体" class="et_em">斜体</a></span> <span><a href="javascript:SIMPALED.Editor.underline()" title="下划线" class="et_underline">下划线</a></span> <span><a href="javascript:SIMPALED.Editor.del()" title="删除线" class="et_del">删除线</a></span> <span><a href="javascript:SIMPALED.Editor.ahref()" title="链接" class="et_ahref">链接</a></span> <span><a href="javascript:SIMPALED.Editor.img()" title="图片" class="et_img">图片</a></span> <span><a href="javascript:SIMPALED.Editor.code()" title="代码" class="et_code">代码</a></span> <span><a href="javascript:SIMPALED.Editor.quote()" title="引用" class="et_quote">引用</a></span> <span><a href="javascript:SIMPALED.Editor.private()" title="隐藏" class="et_private">隐藏</a></span> <span><a href="javascript:SIMPALED.Editor.smilies()" title="表情" class="et_smilies">表情</a></span> <div id="smilies-container"><div class="wp_smilies">'.$link.'</div></div></div>'; } if (is_user_logged_in()) { add_filter('comment_form_logged_in_after', 'wp_smilies'); } else { add_filter( 'comment_form_after_fields', 'wp_smilies'); } function private_content($atts, $content = null) { if (current_user_can('create_users')) return '' . $content . ''; return '***隐藏内容仅管理员可见***'; } add_shortcode('private', 'private_content'); add_filter('comment_text', 'do_shortcode'); /* 添加隐藏短代码*/ // -- END ----------------------------------------
二、然后加载以下JS即可(表情框需要jQuery):
/* smilies toggle -----------------------------------------------*/ $(function() { $("a.et_smilies").click(function() { $('#smilies-container').toggle(function() { $(document).click(function(event) { if (!($(event.target).is('#smilies-container') || $(event.target).parents('#smilies-container').length || $(event.target).is('a.et_smilies'))) { $('#smilies-container').hide(200); } }); }); }); }); /* comment editor -----------------------------------------------*/ $(function() { function addEditor(a, b, c) { if (document.selection) { a.focus(); sel = document.selection.createRange(); c ? sel.text = b + sel.text + c: sel.text = b; a.focus() } else if (a.selectionStart || a.selectionStart == '0') { var d = a.selectionStart; var e = a.selectionEnd; var f = e; c ? a.value = a.value.substring(0, d) + b + a.value.substring(d, e) + c + a.value.substring(e, a.value.length) : a.value = a.value.substring(0, d) + b + a.value.substring(e, a.value.length); c ? f += b.length + c.length: f += b.length - e + d; if (d == e && c) f -= c.length; a.focus(); a.selectionStart = f; a.selectionEnd = f } else { a.value += b + c; a.focus() } } var g = document.getElementById('comment') || 0; var h = { strong: function() { addEditor(g, '<strong>', '</strong>') }, em: function() { addEditor(g, '<em>', '</em>') }, del: function() { addEditor(g, '<del>', '</del>') }, underline: function() { addEditor(g, '<u>', '</u>') }, quote: function() { addEditor(g, '<blockquote>', '</blockquote>') }, private: function() { addEditor(g, '***隐藏内容仅管理员可见***') }, ahref: function() { var a = prompt('请输入链接地址', 'http://'); var b = prompt('请输入链接描述',''); if (a) { addEditor(g, '<a target="_blank" href=”' + a + '" rel="external”>' + b + '</a>','') } }, img: function() { var a = prompt('请输入图片地址', 'http://'); if (a) { addEditor(g, '<img src="' + a + '" alt="" />','') } }, code: function() { addEditor(g, '<code>', '</code>') } }; window['SIMPALED'] = {}; window['SIMPALED']['Editor'] = h });
三、CSS部分(仅供参考):
/* comment-editor -----------------------------------------------*/ .editor_tools { position: relative; margin: 0 -5px -10px; border:1px solid #ccc; background-color:#e9e9e9; background-image:-ms-linear-gradient(bottom,#ddd,#e9e9e9); background-image:-moz-linear-gradient(bottom,#ddd,#e9e9e9); background-image:-o-linear-gradient(bottom,#ddd,#e9e9e9); background-image:-webkit-linear-gradient(bottom,#ddd,#e9e9e9); background-image:linear-gradient(bottom,#ddd,#e9e9e9); } .editor_tools a { margin: 2px; line-height:20px; width:20px; height:20px; float:left; overflow:hidden; display:block; text-indent:-2000em; } .editor_tools span, .editor_tools span:hover { margin: 4px 0 4px 8px; color:#464646; border:1px solid #c3c3c3; -webkit-border-radius:3px; border-radius:3px; background-color:#eee; background-image:-ms-linear-gradient(bottom,#e3e3e3,#fff); background-image:-moz-linear-gradient(bottom,#e3e3e3,#fff); background-image:-o-linear-gradient(bottom,#e3e3e3,#fff); background-image:-webkit-linear-gradient(bottom,#e3e3e3,#fff); background-image:linear-gradient(bottom,#e3e3e3,#fff); float:left; overflow:hidden; cursor: pointer; } .editor_tools span.splitter { padding-right: 5px; margin-right: 15px; border-right: 1px solid #c3d8eb; } .editor_tools span:hover { border-color:#aaa; background:#ddd; } .editor_tools a.et_strong { background: url("/theme/images/sprites.png") no-repeat scroll 0 -280px transparent; } .editor_tools a.et_em { background: url("/theme/images/sprites.png") no-repeat scroll 0 -350px transparent; } .editor_tools a.et_underline { background: url("/theme/images/sprites.png") no-repeat scroll 0 -420px transparent; } .editor_tools a.et_del { background: url("/theme/images/sprites.png") no-repeat scroll 0 -490px transparent; } .editor_tools a.et_ahref { background: url("/theme/images/sprites.png") no-repeat scroll 0 -560px transparent; } .editor_tools a.et_img { background: url("/theme/images/sprites.png") no-repeat scroll 0 -630px transparent; } .editor_tools a.et_code { background: url("/theme/images/sprites.png") no-repeat scroll 0 -700px transparent; } .editor_tools a.et_quote { background: url("/theme/images/sprites.png") no-repeat scroll 0 -770px transparent; } .editor_tools a.et_private { background: url("/theme/images/sprites.png") no-repeat scroll 0 -840px transparent; } .editor_tools a.et_smilies { background: url("/theme/images/sprites.png") no-repeat scroll 0 -910px transparent; } .wp_smilies a{ text-indent:0; margin-left:4px; margin-top:4px; } #smilies-container span { margin: 5px; width:24px;height:24px; cursor: pointer; } #smilies-container{ display:none; position: absolute; background-color: #FFFFFF; border-color: rgba(0, 0, 0, 0.2); border-radius: 4px 4px 4px 4px; border-style: solid; border-width: 1px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); z-index:99; cursor:default!important; -moz-border-radius:3px; border-radius:3px; left: 346px; top: -29px; width: 396px; padding: 10px; }