有朋自远方来,不亦乐乎。
纯代码给评论框添加小工具
原创 橘子书  发布于 2年前 ( 2016-12-02 ) 阅读: 1,219 次 抢沙发 A+

好多天前(10天以前……囧),博友憧憬Licoy问我可否分享评论上方的工具条。本来是上周末打算写一下,然后不小心偶感风寒,整个人昏昏噩噩的,实在提不起精神来写教程。

今天抽了下时间,将的教程分享一下,教程将以知更鸟的begin主题为例(别我为什么以它为例,但是我可以友情提示‘理论上,老古的nana主题与Three主题应该也能直接享用本教程’),还请知悉!

当然,不是begin主题的博友也不用气馁,因为教程的代码是通用的,唯一的区别就是展示的地方不同而已。

sytle样式(style.css)

/* 评论小工具 */
.lyttools-box {
	background: /*用户自定义配色*/;
	display: none;
	position: relative;
	height: 30px;
	border: 1px solid #/*用户自定义配色*/ ;
	overflow: hidden;
	z-index: 99999;
}
.editor{
	margin-left: 10px;
	text-align: center;
}

自行修改css里面的配色,使其与自身主题风格兼容。

php部署

打开主题根目录comments.php

1.部署评论小工具的代码,找到
<p class="emoji-box"><?php get_template_part( 'inc/smiley' ); ?></p>

在其后面添加代码如下:

<p class="lyttools-box">
		<a class="editor" href="javascript:SIMPALED.Editor.strong()"><b>粗体</b></a>
		<a class="editor" href="javascript:SIMPALED.Editor.em()"><b>斜体</b></a>
		<a class="editor" href="javascript:SIMPALED.Editor.quote()"><b>引用</b></a>
		<a class="editor" href="javascript:SIMPALED.Editor.ahref()"><b>链接</b></a>
		<a class="editor" href="javascript:SIMPALED.Editor.del()"><b>删除线</b></a>
		<a class="editor" href="javascript:SIMPALED.Editor.underline()"><b>下划线</b></a>
		<a class="editor" href="javascript:SIMPALED.Editor.code()"><b>插代码</b></a>
		<a class="editor" href="javascript:SIMPALED.Editor.sign()"><b>签到</b></a>
		<span class="editor" style="float: right;margin-right: 2em;"> 留言请到此处—>
                <a href="/*改为自己的留言页面链接*/" target="_blank">留言</a></span></p>

将上面的留言页面链接改为自己的链接。

2.定义小工具的呼出按钮,找到
<a class="emoji" href="" title="插入表情"><i class="fa fa-meh-o"></i></a>

在其后面添加代码如下:

<a class="lyttools" href="" title="插入小工具"><i class="/*用户自定义展示图标*/"></i></a>

自行修改代码的展示图标,改为自己喜欢的图标即可,如:首页的图标fa fa-home

js部署

1.小工具呼出按钮的js部署

打开主题 js/script.js,在最后面添加js代码:

// 评论小工具
$('.lyttools').click(function () {
	$('.lyttools-box').animate({
		opacity: 'toggle',
		left: '50px'
	}, 1000).animate({
		left: '10px'
	}, 'fast');
	return false;
});
2.评论小工具的js部署

在主题的js文件夹新建一个comments.js文件,内容如下:

js代码有些长,请输入密码123查看:

注意:本段内容须输入密码才能查看:
3.js调用

header.php写入js的引入(位置随意,可以直接放到最后):

<!-- 引入评论小工具js -->
<script src="<?php bloginfo('template_directory'); ?>/js/comments.js"></script>

DEMO

总结

这个教程的代码,来自我以前玩begin主题的时候,专门花心思二开优化出来的版本——MORE主题,后来考虑到我没有购买begin主题的缘故,于是推倒了旧博客(使用more主题)重新搭建了龙砚庭博客,也就是现在的博客风格(Pisces主题)。

然后demo里面的颜色小工具,被我阉割掉了,因为要过滤一些东西,才能避免博客出现漏洞(具体什么漏洞,可以去张戈大神查看原因及解决方法:点此

最后介绍一下本教程里面的代码哪些部分属于通用的,可以使用它们,从而让自身主题集合评论工具条:

  1. 第一步骤的css样式,通用
  2. 第二步骤的第一分步骤,通用,但要自行寻找自身主题合适的展示位置;
  3. 第三步骤的第二分步骤、第三分步骤,通用

然后,就没然后了,剩下的就是自行消化教程代码。不难,就是步骤有点多而已。

Principle Team
龙砚庭官方QQ群,一个坚持强怼的7P成员群!
10人已关注

该文章还没有任何评论,你来说两句吧.

发表评论

莫慌,小狮子正在努力加载评论...