给WordPress评论框添加添加实用的小工具

6 月302013

作者：超级efly 发布：2013-06-30 09:37 分类：WordPress 阅读：11,027

今天来教大家如何给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/zh-hans/wordpress-comment-tool-bar/

一、添加构架（comments.php）

二、添加CSS样式

三、添加最重要的JS代码

预览

参考资料

总结

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

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