今天来教大家如何给WordPress博客添加一个实用的评论框小工具,使访客可以轻而易举地更改自己评论的格式(字体颜色、粗体、斜体等等),有益于访客与博主间的互动
一、添加构架(comments.php)
1、打开你的主题文件夹下的「评论 (comments.php)」
2、在评论框 textarea
上方或下方添加下列代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<div id="smiley"> <?php include(TEMPLATEPATH . '/smiley.php'); //你主题引用表情的文件 /* 如果你使用「Custom Smilies」插件,请删除上面那行,并且去除下面这行的注释 */ //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> |
二、添加CSS样式
1、这个没啥好说的,就是添加外观
2、将以下代码添加至「样式表 (style.css)」
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/** 评论工具 **/ #smiley{ padding-bottom: 10px; } #editor_tools{ display: inline-block; 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{ display: inline-block; height: 16px; line-height: 20px; border: 2px #e0e0e0 solid; z-index: 99999; padding: 2px; } #fontcolor a{ display: inline-block; height: 16px; width: 16px; } |
三、添加最重要的JS代码
1、最重要的「添加JS代码」来啦!
2、在你的主题目录下新建一个名为「js」的文件夹(如果已有请忽略)
3、在「js」文件夹内新建一个名为「comments.js」的文件
4、在此文件内添加以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
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('请输入图片地址', 'http://'); if (a) { addEditor(g, '<img src="' + a + '" />', '') } }, sign: function() { addEditor(g, '今天签到啦!时间:' + 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>') } }; window['SIMPALED'] = {}; window['SIMPALED']['Editor'] = h }); |
5、然后在「header.php」内引用这个JS
1 |
<script src="<?php bloginfo('template_directory'); ?>/js/comments.js"></script> |
预览
参考资料
WordPress – 为评论框添加简易编辑器,如表情、粗体、斜体、引用(简体)
总结
1、其实所有这些功能你都可以自己修改,不过要记得同时修改JS代码及PHP代码
2、有问题可以回复问我