WordPress添加作者信息小工具（第二弹）

分类：主题修改  蝈蝈要安静 03-05 阅读(405) 评论(7)

之前博客分享过一篇添加作者信息侧边栏功能的文章>>> WordPress添加作者信息小工具 ，当时能力有限，制作的比较粗糙，而且当时有网友建议增加些后台自定义选项也一直没时间增加，最近几天重新调整了下这个功能，并且新增了一些后台设置选项，再次分享一下。前端显示效果及后台选项如下图所示：

创建 widget_author_info.php 文件

扫码关注公众号

本段内容已被隐藏，您需要扫码关注微信公众号，发送【验证码】获取最新验证码查看。

注意：验证码10分钟内有效！

注意：路径调整为自己主题 widget_author_info.php 文件所在位置。

CSS 样式美化代码

直接在主题主样式文件中添加如下代码即可：

/**====================作者信息侧栏样式====================**/
.widget-author-info{
	display: block;
	position: relative;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: auto;
	margin: 20px 0 0;
	border: 0;
	padding: 0;
	border-radius: 0;
	background: #fff;
	overflow: hidden;
}
.widget-author-info .banner{
	display: block;
	width: 100%;
	height: 120px;
}
.widget-author-info .author-info{
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	padding: 15px;
	text-align: justify;
}
.widget-author-info .author-info .icon{
	display: block;
	position: relative;
	top: -50px;
	left: 10px;
	width: 80px;
	height: 80px;
	margin: 0;
	border: 0;
	padding: 5px;
	border-radius: 3px;
	background: #eee;
}
.widget-author-info .author-info .icon .avatar{
	width: 100%;
	height: 100%;
}
.widget-author-info .author-info .role{
	display: block;
	position: absolute;
	top: 90px;
	left: 120px;
	width: auto;
	max-width: 200px;
	height: 30px;
	margin: 0;
	border: 0;
	padding: 0;
}
.widget-author-info .author-info .role a{
	display: inline-block;
	max-width: 100px;
	font-size: 20px;
	font-weight: bolder;
	color: #fff;
	text-decoration: none;
}
.widget-author-info .author-info .role span{
	display: inline-block;
	position: relative;
	bottom: 2px;
	margin: 0 5px;
	border: 0;
	padding: 3px 5px;
	border-radius: 3px;
	font-size: 10px;
	color: #fff;
	background: #ff0000;
	background: -webkit-gradient(linear,left top,right top,from(#ff0000),to(#ff7600)) no-repeat;
	background: -webkit-linear-gradient(left, #ff0000, #ff7600) no-repeat;
	background: linear-gradient(90deg,#ff0000,#ff7600) no-repeat;
	-webkit-box-shadow: 0 3px 5px rgba(255,80,0,0.5);
	box-shadow: 0 3px 5px rgba(255,80,0,0.5);
}
.widget-author-info .author-info .sns{
	float: none;
	display: block;
	position: absolute;
	top: 120px;
	left: 120px;
	width: auto;
	max-width: 240px;
	height: 40px;
	margin: 3px 0;
	border: 0;
	padding: 0;
	font-size: 12px;
}
.widget-author-info .author-info .sns .sns-item{
	float: left;
	display: inline-block;
	position: relative;
	width: 36px;
	height: 36px;
	margin: 0 5px 0 0;
	border: 0;
	padding: 0;
	line-height: 40px;
	text-align: center;
	font-weight: normal;
	overflow: hidden;
}
.widget-author-info .author-info .sns .sns-item a{
	display: block;
	text-decoration: none;
	color: #999;
}
.widget-author-info .author-info .sns .sns-item i{
	display: block;
	width: 100%;
	height: 24px;
}
.widget-author-info .author-info .sns .sns-item i:before{
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	height: 24px;
	width: 100%;
	line-height: 24px;
	font-size: 18px;
}
.widget-author-info .author-info .sns .sns-item b{
	display: block;
	width: 100%;
	height: 12px;
	width: 100%;
	line-height: 12px;
	font-size: 12px;
}
.widget-author-info .author-info .clear{
	clear: both;
	display: block;
	position: relative;
	margin: -45px 0;
	border: 0;
	padding: 0;
}
.widget-author-info .author-info .tongji{
	display: block;
	position: relative;
	width: auto;
	height: 50px;
	margin: 10px -17px 0;
	border: 0;
	padding: 0;
}
.widget-author-info .author-info .tongji .card{
	float: left;
	display: block;
	position: relative;
	width: 33.33%;
	height: 100%;
	margin: 0;
	border: 0;
	padding: 5px 0;
	text-align: center;
	background: #fafafa;
}
.widget-author-info .author-info .tongji .card:hover{
	background: #eee;
}
.widget-author-info .author-info .tongji .card:before{
	position: absolute;
	content: '';
	top: 5px;
	right: 0;
	width: 1px;
	height: 40px;
	background: #eee;
}
.widget-author-info .author-info .tongji .card:last-child:before{
	background: #fafafa;
}
.widget-author-info .author-info .tongji .card span{
	display: block;
	width: 100%;
	height: 20px;
	margin: 0;
	border: 0;
	padding: 0;
	line-height: 20px;
	font-size: 14px;
	font-style: normal;
	color: #999;
}
.widget-author-info .author-info .tongji .card b{
	display: block;
	width: 100%;
	height: 20px;
	margin: 0;
	border: 0;
	padding: 0;
	line-height: 20px;
	font-size: 16px;
	font-style: normal;
	color: #24a0f0;
}
.widget-author-info .author-info .desc{
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	max-height: 48px;
	line-height: 16px;
	margin: 10px 0 0;
	border: 0;
	padding: 0;
	font-size: 12px;
	color: #999;
	overflow: hidden;
	text-align: justify;
	text-overflow: ellipsis;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.widget-author-info .author-info .posts{
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	margin: 10px 0 0;
	border: 0;
	padding: 0;
}
.widget-author-info .author-info .posts .title{
	display: block;
	width: auto;
	height: 30px;
	margin: 0 -15px;
	border: 0;
	padding: 0;
	line-height: 30px;
	background: #fafafa;
}
.widget-author-info .author-info .posts .title h3{
	margin: 0 15px;
	border: 0;
	padding: 0;
	font-size: 16px;
	font-weight: bold;
	color: #24a0f0;
	background: none;
}
.widget-author-info .author-info .posts .title .more{
	float: right;
	display: block;
	width: auto;
	height: 100%;
	margin: 0 15px;
	border: 0;
	padding: 0;
	font-size: 12px;
	color: #999;
}
.widget-author-info .author-info .posts .title .more i{
	font-size: 12px;
}
.widget-author-info .author-info .posts .title .more a{
	text-decoration: none;
	color: #999;
}
.widget-author-info .author-info .posts .title .more a:hover{
	text-decoration: none;
	color: #24a0f0;
}
.widget-author-info .author-info .posts ul{
	display: block;
	position: relative;
	margin: 10px 0 0;
	border: 0;
	padding: 0;
}
.widget-author-info .author-info .posts ul li{
	display: inline-block;
	position: relative;
	width: 100%;
	height: 24px;
	margin: 0;
	border: 0;
	padding: 0;
	line-height: 24px;
	font-size: 14px;
	color: #555;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	white-space: nowrap;
}
.widget-author-info .author-info .posts ul li a{
	text-decoration: none;
	color: #555;
}
.widget-author-info .author-info .posts ul li a:hover{
	text-decoration: none;
	color: #24a0f0;
}
.widget-author-info .author-info .posts ul li span.tag{
	float: left;
	display: block;
	position: relative;
	width: 20px;
	height: 20px;
	margin: 2px 10px 2px 0;
	border: 0;
	padding: 0;
	border-radius: 3px;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background: #ccc;
}
.widget-author-info .author-info .posts ul li span.tag-1{
	background: #ff7878;
}
.widget-author-info .author-info .posts ul li span.tag-2{
	background: #f9c909;
}
.widget-author-info .author-info .posts ul li span.tag-3{
	background: #24f00c;
}
@media (max-width: 1366px) {
	.widget-author-info{
		margin: 20px 0 0;
	}
	.widget-author-info .banner{
		display: block;
		width: 100%;
		height: 100px;
	}
	.widget-author-info .author-info{
		padding: 10px;
	}
	.widget-author-info .author-info .icon{
		width: 70px;
		height: 70px;
	}
	.widget-author-info .author-info .role{
		top: 70px;
		left: 100px;
	}
	.widget-author-info .author-info .sns{
		top: 100px;
		left: 100px;
		height: 24px;
	}
	.widget-author-info .author-info .sns .sns-item{
		width: 24px;
		height: 24px;
	}
	.widget-author-info .author-info .sns .sns-item b{
		display: none;
	}
	.widget-author-info .author-info .tongji{
		margin: 5px -12px 0;
	}
	.widget-author-info .author-info .desc{
		margin: 5px 0 0;
	}
	.widget-author-info .author-info .posts{
		margin: 5px 0 0;
	}
}
@media (max-width: 1024px) {
	.widget-author-info{
		margin: 15px 0 0;
	}
	.widget-author-info .author-info{
		width: 100%;
		padding: 15px;
	}
	.widget-author-info .author-info .icon{
		top: -50px;
		left: 10px;
		width: 80px;
		height: 80px;
		padding: 5px;
		border-radius: 3px;
	}
	.widget-author-info .author-info .role{
		top: 70px;
		left: 120px;
		width: auto;
		max-width: 200px;
		height: 30px;
	}
	.widget-author-info .author-info .role a{
		font-size: 24px;
	}
	.widget-author-info .author-info .role span{
		bottom: 2px;
		margin: 0 5px;
		padding: 3px 5px;
		border-radius: 3px;
		font-size: 10px;
	}
	.widget-author-info .author-info .sns{
		top: 100px;
		left: 120px;
		max-width: 240px;
		height: 40px;
		margin: 3px 0;
		font-size: 12px;
	}
	.widget-author-info .author-info .sns .sns-item{
		width: 36px;
		height: 36px;
		margin: 0 5px 0 0;
		line-height: 40px;
	}
	.widget-author-info .author-info .sns .sns-item i{
		height: 24px;
	}
	.widget-author-info .author-info .sns .sns-item i:before{
		height: 24px;
		width: 100%;
		line-height: 24px;
		font-size: 18px;
	}
	.widget-author-info .author-info .sns .sns-item b{
		display: block;
		height: 12px;
		line-height: 12px;
		font-size: 12px;
	}
	.widget-author-info .author-info .clear{
		margin: -45px 0;
	}
	.widget-author-info .author-info .tongji{
		height: 50px;
		margin: 10px -17px 0;
	}
	.widget-author-info .author-info .tongji .card{
		padding: 5px 0;
	}
	.widget-author-info .author-info .tongji .card:before{
		top: 5px;
		height: 40px;
	}
	.widget-author-info .author-info .tongji .card span{
		height: 20px;
		line-height: 20px;
		font-size: 14px;
	}
	.widget-author-info .author-info .tongji .card b{
		height: 30px;
		line-height: 20px;
		font-size: 16px;
	}
	.widget-author-info .author-info .desc{
		max-height: 48px;
		line-height: 16px;
		margin: 10px 0 0;
		font-size: 12px;
		-webkit-line-clamp: 3;
	}
	.widget-author-info .author-info .posts{
		margin: 10px 0 0;
	}
	.widget-author-info .author-info .posts .title{
		height: 30px;
		margin: 0 -15px;
		line-height: 30px;
	}
	.widget-author-info .author-info .posts .title h3{
		margin: 0 15px;
		font-size: 16px;
	}
	.widget-author-info .author-info .posts .title .more{
		margin: 0 15px;
		font-size: 12px;
	}
	.widget-author-info .author-info .posts .title .more i{
		font-size: 12px;
	}
	.widget-author-info .author-info .posts ul{
		display: block;
		position: relative;
		margin: 10px 0 0;
		border: 0;
		padding: 0;
	}
	.widget-author-info .author-info .posts ul li{
		display: inline-block;
		position: relative;
		width: 100%;
		height: 24px;
		margin: 0;
		border: 0;
		padding: 0;
		line-height: 24px;
		font-size: 16px;
		color: #555;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		white-space: nowrap;
	}
	.widget-author-info .author-info .posts ul li span.tag{
		float: left;
		display: block;
		position: relative;
		width: 20px;
		height: 20px;
		margin: 2px 10px 2px 0;
		border: 0;
		padding: 0;
		border-radius: 3px;
		font-size: 12px;
		line-height: 20px;
		text-align: center;
		color: #fff;
		background: #ccc;
	}
}
@media (max-width: 768px) {
	.widget-author-info{
		margin: 10px 0 0;
	}
	.widget-author-info .author-info .role a{
		font-size: 20px;
	}
}
@media (max-width: 480px) {
	.widget-author-info{
		margin: 5px 0 0;
	}
	.widget-author-info .banner{
		display: block;
		width: 100%;
		height: 100px;
	}
	.widget-author-info .author-info{
		padding: 10px;
	}
	.widget-author-info .author-info .icon{
		width: 70px;
		height: 70px;
	}
	.widget-author-info .author-info .role{
		top: 70px;
		left: 100px;
	}
	.widget-author-info .author-info .role a{
		font-size: 18px;
	}
	.widget-author-info .author-info .sns{
		top: 100px;
		left: 100px;
		height: 24px;
	}
	.widget-author-info .author-info .sns .sns-item{
		width: 32px;
		height: 24px;
	}
	.widget-author-info .author-info .sns .sns-item b{
		display: none;
	}
	.widget-author-info .author-info .tongji{
		height: 40px;
		margin: 5px -12px 0;
	}
	.widget-author-info .author-info .tongji .card{
		padding: 3px 0;
	}
	.widget-author-info .author-info .tongji .card:before{
		top: 5px;
		height: 30px;
	}
	.widget-author-info .author-info .tongji .card span{
		height: 15px;
		line-height: 15px;
		font-size: 12px;
	}
	.widget-author-info .author-info .tongji .card b{
		height: 20px;
		line-height: 20px;
		font-size: 14px;
	}
	.widget-author-info .author-info .desc{
		margin: 5px 0 0;
	}
	.widget-author-info .author-info .posts{
		margin: 5px 0 0;
	}
	.widget-author-info .author-info .posts .title h3{
		margin: 0 10px;
		font-size: 14px;
	}
	.widget-author-info .author-info .posts .title .more{
		margin: 0 10px;
		font-size: 10px;
	}
	.widget-author-info .author-info .posts .title .more i{
		font-size: 10px;
	}
	.widget-author-info .author-info .posts ul{
		margin: 5px 0 0;
	}
	.widget-author-info .author-info .posts ul li{
		font-size: 14px;
	}
	.widget-author-info .author-info .posts ul li span.tag{
		width: 16px;
		height: 16px;
		margin: 1px 5px 1px 0;
		line-height: 16px;
		font-size: 10px;
	}
	
}

代码未压缩，为了避免主题默认样式干扰，这里代码未简化显得比较多，淡定。

更多+

蝈蝈要安静

死宅｜代码小白｜网站更新慢｜网站代码多来源网络，自学中做了些简单修改｜网站发布内容亲测可用｜网站内容可能有错误，希望大神指正

未经允许不得转载

文章标题：蝈蝈要安静 » WordPress添加作者信息小工具（第二弹）

原文链接：https://blog.quietguoguo.com/3910.html

发布信息：文章由【蝈蝈要安静】于<2020-03-05>发布于【主题修改】分类下

相关标签：|||

相关推荐

评论 ( 7 )

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • ＱＱ (选填)
  • 网址(选填)
  1. #5

    蝈蝈要安静 期待你的tag 标签教程 等不及了 [滑稽] 还有个你网页上的问题 就是左边的留言栏目时间 比真实的留言时间
    要早8小时 这个问题也一直困扰我
    looking forward your tutorials and hoping you could fix the minor bugs

    beyourself3天前回复
  2. #4

    蝈蝈 要安静 你的博客很有特点 挺喜欢你的这个主页上面的一个小的亮点 主页的每个文章列表下面调用了 TAG标签 可以做个教程嘛？

    beyourself4天前回复
  3. #3

    的确有相关小工具了，但与文章中的演示严重不符，功能残缺，望补充

    Muze4天前回复
  4. #2

    没有用啊

    佛系软件6天前回复
  5. #1

    怎么把右侧的栏目都固定啊，只能固定3个啊，大神

    佛系软件6天前回复
管理员
用户 QQ 微信 邮箱
文章数 361
浏览量 1175908
评论数 512
死宅｜代码小白｜网站更新慢｜网站代码多来源网络，自学中做了些简单修改｜网站发布内容亲测可用｜网站内容可能有错误，希望大神指正
更多

最新文章

随机推荐

火爆美文

热评文章

最多喜欢

吐血推荐

蝈蝈要安静 | 一个不学无术的伪程序员

分享网站建设中遇到的WordPress、Linux，Apache，Nginx，PHP，HTML，CSS等的问题及解决方案； 分享Windows操作系统及其周边的一些经验知识；分享互联网使用过程中遇到的一些问题及其处理技巧； 分享一些自己在读书过程中的心得体会；分享一些自己觉得有意义的音视频内容 ... ...