前面说博主修改了下博客的评论功能,这里就来分享下方法吧!
注意:这是转载文章,代码引用自畅想资源博客,有少量修改,原博文链接:http://www.arefly.com/wordpress-comment-tool-bar/
首先让大家看看本博修改后的效果吧:
嗯,那个红叉大家不要在意,这是我博客主题自带的两个功能,我没舍得去掉,怕让大家误会所以叉掉了。
上面看效果是不是很不错?下面我来分享下修改方法吧!
一、添加框架
1、打开你的主题文件夹下的评论模板(comments.php)
2、在你想要使用此功能的地方加上如下代码(具体粘贴位置还请根据自己评论模板的设置自行选择):
- <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>
注意代码开头部分的/smiley.php这个,它说的表情文件smiley.php是指依照教程(用代码实现)修改WordPress自带表情时产生的文件,它具体所在的路径请根据自己修改时存放的地方修改。比如你的是在你使用的主题所在目录下的include文件夹中,那么你应该把/smiley.php改成/include/smiley.php。
二、添加CSS样式
请将以下代码复制到你主题的style.css中:
- /** 評論工具 **/
- #smiley{
- padding-bottom: 10px;
- }
- #editor_tools{
- width: 600px;
- height: 26px;
- display: table-header-group;
- line-height: 26px;
- border: 1px #e0e0e0 solid;
- border-radius: 2px 2px 0 0;
- z-index: 99999;
- }
- #editor_tools a{
- color: #777;
- padding: 0 8px;
- height: 26px;
- border-right: 1px solid #ddd;
- }
- #editor_tools a:hover{
- color: #333;
- text-decoration: none;
- }
- #fontcolor{
- width: 377px;
- height: 16px;
- display: table-header-group;
- line-height: 20px;
- border: 2px #e0e0e0 solid;
- z-index: 99999;
- padding: 2px 0px 2px 2px;
- }
- #fontcolor a{
- display: inline–block;
- height: 16px;
- width: 16px;
- }
PS:这个和原代码有细微不同,有几个地方是我自己乱折腾修改的,也不知道对不对。修改的原因是因为原代码虽然在电脑上体验良好,但是我在手机上看的时候发现工具栏会“越界”,导致你要向左边滑动页面才能看到完整的工具栏,所以我就自己改了下,使它在手机上不会导致横向滚动条的出现,效果如本博手机界面。当然,其实我是什么也不懂的,所以虽然我在自己的博客上试验有效果,但靠不靠谱就不清楚了,如果你担心出问题,可以到原博去看代码。
三、添加最重要的JS代码
1、在你的主题目录下新建一个js文件夹(名字随便,建js是为了方便,如果有此文件夹则跳过这步)
2、新建一个js文件,名字随意,只要你记得
3、复制如下代码到该文件中(请不要用系统自带的记事本来操作,以防万一)
代码:
- 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
- });
复制完记得保存哦!
四、引用该JS文件
将以下代码加入到你主题目录下的header.php或footer.php中:
- <script src=“<?php bloginfo(‘template_directory’); ?>/js/comments.js”></script>
注意上面代码中的文件路径:/js/comments.js,这里要改成你上面建的那个js文件所在路径。
OK!到此完成,马上去测试下效果吧!