有朋自远方来,不亦乐乎。
纯代码实现侧边栏博主介绍
原创 橘子书  发布于 3年前 ( 2016-08-26 ) 阅读: 1,559 次 抢沙发 A+

个人偏爱侧边栏带有博主介绍功能的主题,这个爱好从我第一次建站开始就延续至今了,几乎每个经我折腾过的主题——都带有这个小功能。

为此,我给它取名叫用户盒子()。

很早之前就看到导航兄启用了作者专栏,为了更贴近自媒体平台,从而更大气、更加具有曝光度,导航兄设计了如下风格的作者信息栏:

如图1

瞬间,boke112导航的逼格上了不止一个档次。不过,这种风格的展示却不一定适合每一个博客。毕竟并非每个人都需要展示作者官网、作者近期文章等。

于是我溜达了一圈回来,最后觉得苏醒博客的博主介绍风格很surprised,相信有不少人会喜欢:

如图2

所以捣鼓了一下,效果如下:

如图3

忘了给css样式写上!important,所以截图跟实际有点偏差。

言归正传,以下就是教程的内容,依旧是以DIY为主,内容需要自行填补。

PHP部分

打开主题的sidebar.php(侧边栏文件),在合适的位置插入代码:

<div class="userbox">
<div class="userbox_box">	
<div class="userbox_box_routine">	
<a class="author_pic"><img src="头像链接"></a>//也可以调用Gravatar头像
<div class="author_name">
<a>昵称</a><span>称谓(如站长)</span>
</div>
<p class="author_dec">简介(也可以调用用户资料的介绍) </p>
<div class="userbox_card" style="margin-top:10px">	
<div class="userbox_card1">
<span class="card_number1">内容1</span>
<span class="card1">标题1</span>
</div>	
<div class="userbox_card2">
<span class="card_number2">内容2</span>
<span class="card2">标题2</span>
</div>	
</div>	
<div class="userbox_box_more">
<a href="DIY" target="_blank">DIY</a>//这个地方可以自由DIY
</div></div></div></div>

自行DIY里面的代码,比如【标题1】可以改为【文章】,然后【内容1】改为【<?php the_author_posts(); ?>】。

CSS部分

打开style.css,写入代码:

(css代码过长,索性隐藏,输入密码123可见)

注意:本段内容须输入密码才能查看:

有些地方一定要记得写上!important,不然有些样式会不显示(原因很多人都懂的)。

为了让新手更容易看得懂css,我没有压缩代码,并且特地在一些地方做了注释(css样式并非万金油,不是扔哪就兼容哪里的,部分细节需要自行调试,特别是颜色跟布局一定要跟自身使用的主题风格协调)。

总结

这个教程依旧属于通用教程,只是将整个功能的框架都写了出来,很多展示的内容需要使用者自行去填充。

熟悉主题修改的人,完全可以在这个框架的基础上弄出后台主题的设置选项(开启/关闭,内容填写)。

最后DEMO一下,我捣鼓出来的用户盒子风格之一:

如图4

当然,因为Pisces主题自身就带有博客介绍的面板,所以目前我没有启用这个风格。

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

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

发表评论

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