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

本段内容已被隐藏,您需要扫码关注微信公众号,发送【验证码】获取最新验证码查看。
注意:验证码10分钟内有效!
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; } }
代码未压缩,为了避免主题默认样式干扰,这里代码未简化显得比较多,淡定。
评论 (17)
添加好了 就是注册不了
widget-index.php 可以详细介绍下怎么注册小组件么? 后台不显示
你这个调用的第二弹,在widget-index.php 文件中要加个什么名称啊。
微信公众号回复的没反应啊。
回复【验证码】,其他功能还没做
老大,后台有了选项,注册了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主题,用别的主题做的![[纠结]](https://blog.quietguoguo.com/qggblog/wp-content/themes/qgg/img/emojis/icon_kink.gif)
_get_the_avatar() 是我自定义获取头像的函数,你换成你主题对应的函数即可
老大,你好。为什么我添加之后,在后台小工具哪里没有QGG作者信息选项!在线等,老大么么哒!
没注册小工具吧,DUX 主题里有个 widget-index.php 里有个 $widgets 添加一下,或者在functions.php 中require一下试试。
蝈蝈要安静 期待你的tag 标签教程 等不及了
还有个你网页上的问题 就是左边的留言栏目时间 比真实的留言时间
要早8小时 这个问题也一直困扰我
looking forward your tutorials and hoping you could fix the minor bugs
那个 tag 啊?时间可能是时区设置的问题,抽空看下
蝈蝈 要安静 你的博客很有特点 挺喜欢你的这个主页上面的一个小的亮点 主页的每个文章列表下面调用了 TAG标签 可以做个教程嘛?
的确有相关小工具了,但与文章中的演示严重不符,功能残缺,望补充
后台设置保存了吗?
没有用啊
怎么把右侧的栏目都固定啊,只能固定3个啊,大神
都固定的话屏幕高度小于侧栏高度会有小工具无法显示或显示不全哦