給WordPress評論框添加添加實用的小工具

Jun302013

作者：超级efly 发布：2013-06-30 09:37 分类：WordPress 阅读：5,306 35条评论

今天來教大家如何給WordPress部落格添加一個實用的評論框小工具，使訪客可以輕而易舉地更改自己評論的格式（字體顔色、粗體、斜體等等），有益於訪客與博主間的互動

一、添加構架（comments.php）

1、打開你的主題文件夾下的「迴響 (comments.php)」

2、在評論框 textarea 上方或下方添加下列代碼

<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>

<?php

include(TEMPLATEPATH . '/smiley.php'); //你主題引用表情的文件

/* 如果你使用「Custom Smilies」外掛，請刪除上面那行，並且去除下面這行的注釋 */

//cs_print_smilies();

</div>

<a href="javascript:;" id="comment-smiley">表情</a><!--

--><a href="javascript:SIMPALED.Editor.strong()">粗体</a><!--

--><a href="javascript:SIMPALED.Editor.em()">斜体</a><!--

--><a href="javascript:;" id="font-color">颜色</a><!--

--><a href="javascript:SIMPALED.Editor.quote()">引用</a><!--

--><a href="javascript:SIMPALED.Editor.ahref()">链接</a><!--

--><a href="javascript:SIMPALED.Editor.del()">删除线</a><!--

--><a href="javascript:SIMPALED.Editor.underline()">下划线</a><!--

--><a href="javascript:SIMPALED.Editor.code()">插代码</a><!--

--><a href="javascript:SIMPALED.Editor.img()">插图片</a>

</div>

</div>

二、添加CSS樣式

1、這個沒啥好說的，就是添加外觀

2、將以下代碼添加至「樣式表 (style.css)」

/** 評論工具 **/
#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;
}

/** 評論工具 **/

#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、在此文件內添加以下代碼：

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
});

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, '', '')

em: function() {

addEditor(g, '', '')

del: function() {

addEditor(g, '<del>', '</del>')

underline: function() {

addEditor(g, '', '')

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, '', '')

fuchsia: function() {

addEditor(g, '', '')

purple: function() {

addEditor(g, '', '')

orange: function() {

addEditor(g, '', '')

yellow: function() {

addEditor(g, '', '')

olive: function() {

addEditor(g, '', '')

lime: function() {

addEditor(g, '', '')

maroon: function() {

addEditor(g, '', '')

aqua: function() {

addEditor(g, '', '')

teal: function() {

addEditor(g, '', '')

green: function() {

addEditor(g, '', '')

blue: function() {

addEditor(g, '', '')

navy: function() {

addEditor(g, '', '')

gray: function() {

addEditor(g, '', '')

deepskyblue: function() {

addEditor(g, '', '')

gold: function() {

addEditor(g, '', '')

}, silver: function() {

addEditor(g, '', '')

black: function() {

addEditor(g, '', '')

}

};

window['SIMPALED'] = {};

window['SIMPALED']['Editor'] = h

});

5、然後在「header.php」內引用這個JS

<script src="<?php bloginfo('template_directory'); ?>/js/comments.js"></script>

1	<script src="<?php bloginfo('template_directory'); ?>/js/comments.js"></script>

預覽

參考資料

WordPress – 为评论框添加简易编辑器，如表情、粗体、斜体、引用（簡體）

總結

1、其實所有這些功能你都可以自己修改，不過要記得同時修改JS代碼及PHP代碼

2、有問題可以回覆問我

觉得这篇文章有用吗？分享一下让更多人受益吧！

本文固定链接：https://www.arefly.com/wordpress-comment-tool-bar/

本文章由“超级efly”于2013年06月30日发表于“WordPress”分类

你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站

转载请注明：給WordPress評論框添加添加實用的小工具 | 畅想资源

关键字：WordPress, 工具, 迴響

[上一篇] 給WordPress添加評論表情包

[下一篇] 解決HTML頁面中文亂碼問題

您可能还会对这些文章感兴趣！

給WordPress評論框添加添加實用的小工具：目前有 35 条留言
访客以 20：15 大幅领先博主

评论载入中，请稍等……

14楼
郭进：

试试

2016-07-19 上午9:32 [回复]
13楼
郭进：

评论等级怎么实现的

2016-07-19 上午9:30 [回复]
- 超級efly ：
  
  可以參考這篇文章：給WordPress添加VIP評論之星的功能
  
  2016-07-19 上午9:34 [回复]
12楼
任叔叔 ：

博主好棒,支持你

2014-08-23 下午11:10 [回复]
- 超級efly ：
  
  謝謝支持～～
  
  2014-08-24 上午8:23 [回复]
11楼
Rich ：

刚刚把代码挂上了，效果很棒，求测试

（ PS：欢迎光临 http://Rich.GA/ ）

2014-08-04 下午7:28 [回复]
- 超級efly ：
  
  挺好的，那個「歡迎詞」問題我給你了修改代碼，解決了沒有～
  
  2014-08-04 下午8:05 [回复]
  - Rich ：
    
    截图中“留悄悄话给博主”是怎么回事？
    
    2014-08-16 下午12:56 [回复]
    - 超級efly ：
      
      另外一個叫做「Whisper Comment」的外掛～不過現在已經停用啦～
      
      2014-08-16 下午3:25 [回复]
      - Rich ：
        
        又是插件，我受不了……
        
        2014-08-16 下午4:25 [回复]
10楼
Qa ：

时隔多日我又来啦 :kiss:
终于成功了

2014-04-05 下午3:11 [回复]
9楼
Qa ：

不死心又试了几次，怎么都是JS和CSS不加载的样子
审查元素又说明明都加载了

2014-03-22 下午3:03 [回复]
8楼
逗婦乳 ：

没有smile.php

2014-01-01 下午7:14 [回复]
7楼
qa ：

Warning: include(/wordpress/wp-content/themes/simple-catch/smiley.php): failed to open stream: No such file or directory in /wordpress/wp-content/themes/simple-catch/comments.php on line 66

没有找到smiley。。。。 :scraed:

2013-11-24 下午8:28 [回复]
- 超級efly ：
  
  你看看主題原來的文件中的表情引用代碼是多少？
  
  2013-11-25 下午7:10 [回复]
  - Qa ：
    
    抱歉，看漏了。我使用了那插件。注释了代码依旧不能点击。
    那个表情插件也是。启用了，留言处显示表情但是无法点击
    
    2013-11-25 下午8:36 [回复]
    - 超級efly ：
      
      奇怪。。。。QQ再說
      
      2013-11-26 下午5:33 [回复]
6楼
逗妇乳 ：

沒有效果

2013-11-23 下午9:54 [回复]
- 超級efly ：
  
  那可能是你的代碼加錯位置了，你在仔細看看位置正不正確？
  
  2013-11-24 上午9:46 [回复]
5楼
刚子：

这个访客不能插入图片。。蛋疼

2013-10-12 下午11:15 [回复]
- 超級efly ：
  
  WordPress默認是不可以的，不過你可以去搜索一下，有代碼可以把評論中的img開啟的
  
  2013-10-16 下午10:09 [回复]
4楼
木易 ：

支持

2013-07-02 上午10:37 [回复]
- 超級efly ：
  
  2013-07-02 下午1:15 [回复]
地板
经验公式 ：

Excellent~非常实用！马上搬到我的经验公式去！

2013-06-30 下午2:36 [回复]
- 超級efly ：
  
  2013-06-30 下午2:38 [回复]
板凳
烟花易冷 ：

不错，支持博主

2013-06-30 上午11:13 [回复]
- 超級efly ：
  
  2013-06-30 上午11:22 [回复]
沙发
qq374594 ：

等我一会回来也给弄上

2013-06-30 上午10:09 [回复]
- 超級efly ：
  
  2013-06-30 上午10:11 [回复]
  - qq374594 ：
    
    已经弄好了虽然有点小问题
    
    2013-06-30 下午9:13 [回复]
    - 超級efly ：
      
      2013-07-01 上午7:04 [回复]
      - stone ：
        
        為什麼我按照你的說明操作了，但是點擊“表情”，卻沒有顯示表情圖片？
        
        2014-09-02 下午8:47 [回复]
        
        超級efly ：
        
        你需要將表情部分換成你主題預設取得表情的代碼，如果實在不會，可以去與主題製作者聯系～
        
        2014-09-08 下午6:33 [回复]
      - stone ：
        
        顺便在问问你的“签到”功能和输入框点击变色是怎么写的？
        
        2014-09-02 下午9:10 [回复]
        
        超級efly ：
        
        對不起...我太懶了...請直接去看JS文件
        
        2014-09-08 下午6:34 [回复]