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

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

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

相关标签：|||

相关推荐

评论 (15)

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

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

    4624654471周前 (08-01)回复
  2. #8

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

    foxirj4个月前 (04-03)回复
  3. #7

    老大，后台有了选项，注册了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主题，用别的主题做的 [纠结]

    .苦往心里藏4个月前 (04-01)回复

    • _get_the_avatar() 是我自定义获取头像的函数，你换成你主题对应的函数即可

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

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

    ".苦往心里藏"4个月前 (03-31)回复

    • 没注册小工具吧，DUX 主题里有个 widget-index.php 里有个 $widgets 添加一下，或者在functions.php 中require一下试试。

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

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

    beyourself5个月前 (03-26)回复
  6. #4

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

    beyourself5个月前 (03-26)回复
  7. #3

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

    Muze5个月前 (03-25)回复
  8. #2

    没有用啊

    佛系软件5个月前 (03-23)回复
  9. #1

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

    佛系软件5个月前 (03-23)回复

    • 都固定的话屏幕高度小于侧栏高度会有小工具无法显示或显示不全哦

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

我今年二十七八岁

一段名为《我今年，二十七八岁》的近8分钟网络视频近日走红网络。该视频讲述了一位80后的迷茫与窘迫，引起众多网友共鸣。短短8分钟的视频仅仅在新浪微博的转发次数就超过3万次，评论超过4000条。原作是韩国动画短片【闹钟】。

了解详情
管理员
用户 QQ 微信 邮箱
文章数 386
浏览量 1499664
评论数 539
死宅｜代码小白｜网站更新慢｜网站代码多来源网络，自学中做了些简单修改｜网站发布内容亲测可用｜网站内容可能有错误，希望大神指正
更多

最新文章

随机推荐

火爆美文

热评文章

最多喜欢

吐血推荐

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

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