给wordpress评论处添加表情及工具
发布时间：2022-06-23 14:08:57 所属栏目：教程 来源：互联网
导读：wordpress评论处就简单的用户名邮箱及网址的表单了,如果我们希望有表情或更多的工具我们可以参考下面方法来实现. wordpress评论框仅仅只有昵称、邮箱、站点和评论内容的话,会不会显得太简单了？当然追求简洁的人来说,可能觉得站点都有点多余,然后,大叔要说的
|
wordpress评论处就简单的用户名邮箱及网址的表单了,如果我们希望有表情或更多的工具我们可以参考下面方法来实现. wordpress评论框仅仅只有昵称、邮箱、站点和评论内容的话,会不会显得太简单了？当然追求简洁的人来说,可能觉得站点都有点多余,然后,大叔要说的是给wordpress评论处添加实用工具,丰富起我们的评论框吧. 直接给教程吧,comments.php加入按钮. <div id="smiley"> <?php include(TEMPLATEPATH . '/smiley.php'); //你主?引用表情的文件 /* 如果你使用「Custom Smilies」外?欤???h除上面那行，?K且去除下面?行的注? */ //cs_print_smilies(); ?> </div> <div id="editor_tools"> <div id="editor"> <a href="javascript：;" id="comment-smiley"><b>表情</b></a> <a href="javascript：SIMPALED.Editor.strong()"><b>粗体</b></a> <a href="javascript：SIMPALED.Editor.em()"><b>斜体</b></a> <a href="javascript：;" id="font-color"><b>颜色</b></a> <a href="javascript：SIMPALED.Editor.quote()"><b>引用</b></a> <a href="javascript：SIMPALED.Editor.ahref()"><b>链接</b></a> <a href="javascript：SIMPALED.Editor.del()"><b>删除线</b></a> <a href="javascript：SIMPALED.Editor.underline()"><b>下划线</b></a> <a href="javascript：SIMPALED.Editor.code()"><b>插代码</b></a> <a href="javascript：SIMPALED.Editor.img()"><b>插图片</b></a> </div> </div> <div style="padding-top: 10px;"></div> <div id="fontcolor"> <a href="javascript：SIMPALED.Editor.red()" style="background-color: red"></a> <a href="javascript：SIMPALED.Editor.fuchsia()" style="background-color: fuchsia"></a> <a href="javascript：SIMPALED.Editor.purple()" style="background-color: purple"></a> <a href="javascript：SIMPALED.Editor.orange()" style="background-color: orange"></a> <a href="javascript：SIMPALED.Editor.yellow()" style="background-color: yellow"></a> <a href="javascript：SIMPALED.Editor.gold()" style="background-color: gold"></a> <a href="javascript：SIMPALED.Editor.olive()" style="background-color: olive"></a> <a href="javascript：SIMPALED.Editor.lime()" style="background-color: lime"></a> <a href="javascript：SIMPALED.Editor.aqua()" style="background-color: aqua"></a> <a href="javascript：SIMPALED.Editor.deepskyblue()" style="background-color: deepskyblue"></a> <a href="javascript：SIMPALED.Editor.teal()" style="background-color: teal"></a> <a href="javascript：SIMPALED.Editor.green()" style="background-color: green"></a> <a href="javascript：SIMPALED.Editor.blue()" style="background-color: blue"></a> <a href="javascript：SIMPALED.Editor.maroon()" style="background-color: maroon"></a> <a href="javascript：SIMPALED.Editor.navy()" style="background-color: navy"></a> <a href="javascript：SIMPALED.Editor.gray()" style="background-color: gray"></a> <a href="javascript：SIMPALED.Editor.silver()" style="background-color: silver"></a> <a href="javascript：SIMPALED.Editor.black()" style="background-color: black"></a> </div> style.css内加入样式表: /** ??工具 **/ #smiley{ padding-bottom: 10px; } #editor_tools{ width: 600px; height: 26px; line-height: 26px; border: 1px #e0e0e0 solid; border-radius: 2px 2px 0 0; overflow: hidden; z-index: 99999; } #editor_tools a{ color: #777; display: inline-block; padding: 0 8px; height: 26px; border-right: 1px solid #ddd; } #editor_tools a:hover{ color: #333; text-decoration: none; } #fontcolor{ width: 377px; height: 16px; line-height: 20px; border: 2px #e0e0e0 solid; z-index: 99999; padding: 2px 0px 2px 2px; } #fontcolor a{ display: inline-block; height: 16px; width: 16px; } 增加一个js,例comments.js,期内代码如下: jQuery(function(){ jQuery("#smiley").hide(500); jQuery("#comment-smiley").click(function(){ jQuery("#smiley").toggle(500); }); }); jQuery(function(){ jQuery("#fontcolor").hide(500); jQuery("#font-color").click(function(){ jQuery("#fontcolor").toggle(500); }); }); jQuery(function(){ jQuery("#smiley").hide(); jQuery("#comment").click(function(){ }); }); jQuery(function(){ jQuery("#fontcolor").hide(); jQuery("#comment").click(function(){ }); }); jQuery(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 myDate = new Date(); var mytime=myDate.toLocaleTimeString() var g = document.getElementById('comment') || 0; var h = { strong: function() { addEditor(g, '<b>', '</b>') }, em: function() { addEditor(g, '<i>', '</i>') }, del: function() { addEditor(g, '<del>', '</del>') }, underline: function() { addEditor(g, '<u>', '</u>') }, quote: function() { addEditor(g, '<blockquote>', '</blockquote>') }, ahref: function() { var a = prompt('??入?接地址', 'http://'); var b = prompt('??入?接?热?', ''); if (a) { addEditor(g, '<a href="' + a + '">' + b + '</a>', '') } }, img: function() { var a = prompt('??入?D片地址', 'http://'); if (a) { addEditor(g, '<img src="' + a + '" />', '') } }, sign: function() { addEditor(g, '今天?到啦！?r?：' + mytime, '') }, code: function() { addEditor(g, '<pre>', '</pre>') }, red: function() { addEditor(g, '<span style="color: red">', '</span>') }, fuchsia: function() { addEditor(g, '<span style="color: fuchsia">', '</span>') }, purple: function() { addEditor(g, '<span style="color: purple">', '</span>') }, orange: function() { addEditor(g, '<span style="color: orange">', '</span>') }, yellow: function() { addEditor(g, '<span style="color: yellow">', '</span>') }, olive: function() { addEditor(g, '<span style="color: olive">', '</span>') }, lime: function() { addEditor(g, '<span style="color: lime">', '</span>') }, maroon: function() { addEditor(g, '<span style="color: maroon">', '</span>') }, aqua: function() { addEditor(g, '<span style="color: aqua">', '</span>') }, teal: function() { addEditor(g, '<span style="color: teal">', '</span>') }, green: function() { addEditor(g, '<span style="color: green">', '</span>') }, blue: function() { addEditor(g, '<span style="color: blue">', '</span>') }, navy: function() { addEditor(g, '<span style="color: navy">', '</span>') }, gray: function() { addEditor(g, '<span style="color: gray">', '</span>') }, deepskyblue: function() { addEditor(g, '<span style="color: deepskyblue">', '</span>') }, gold: function() { addEditor(g, '<span style="color: gold">', '</span>') }, silver: function() { addEditor(g, '<span style="color: silver">', '</span>') }, black: function() { addEditor(g, '<span style="color: black">', '</span>') } //phpfensi.com }; window['SIMPALED'] = {}; window['SIMPALED']['Editor'] = h }); 调用这个JS: <script src="<?php bloginfo('template_directory'); ?>/js/comments.js"></script> 那么,在去看看你们的评论框吧,是不是碉堡了,恩,可能样式还需要修改修改,才能符合每个人不同的风格. （编辑：拼字网 - 核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐