WordPress添加作者信息小工具(第二弹)

之前博客分享过一篇添加作者信息侧边栏功能的文章>>> 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>发布于【主题修改】分类下

相关标签:|||

相关推荐

评论 (17)

  • 昵称(必填)
  • 邮箱(必填)
  • QQ(选填)
  • 网址(选填)
  1. #0

    添加好了 就是注册不了

    6176104071个月前 (09-16)回复
  2. #0

    widget-index.php 可以详细介绍下怎么注册小组件么? 后台不显示

    6176104071个月前 (09-14)回复
  3. #0

    你这个调用的第二弹,在widget-index.php 文件中要加个什么名称啊。

    4624654473个月前 (08-01)回复
  4. #0

    微信公众号回复的没反应啊。

    foxirj7个月前 (04-03)回复
  5. #0

    老大,后台有了选项,注册了widgets,但是前台调用显示错误,Fatal error: Call to undefined function _get_the_avatar() in D:\wwwroot\blog\wp-content\themes\xiu\widgets\widget_author_info.php on line 110,我是没用DUX主题,用别的主题做的 [纠结]

    .苦往心里藏7个月前 (04-01)回复
    • _get_the_avatar() 是我自定义获取头像的函数,你换成你主题对应的函数即可

      蝈蝈要安静7个月前 (04-01)回复
  6. #0

    老大,你好。为什么我添加之后,在后台小工具哪里没有QGG作者信息选项!在线等,老大么么哒!

    ".苦往心里藏"7个月前 (03-31)回复
    • 没注册小工具吧,DUX 主题里有个 widget-index.php 里有个 $widgets 添加一下,或者在functions.php 中require一下试试。

      蝈蝈要安静7个月前 (04-01)回复
  7. #0

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

    beyourself7个月前 (03-26)回复
  8. #0

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

    beyourself7个月前 (03-26)回复
  9. #0

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

    Muze7个月前 (03-25)回复
  10. #0

    没有用啊

    佛系软件7个月前 (03-23)回复
  11. #0

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

    佛系软件7个月前 (03-23)回复
    • 都固定的话屏幕高度小于侧栏高度会有小工具无法显示或显示不全哦

      蝈蝈要安静7个月前 (03-25)回复