如何用纯代码实现WordPress侧边栏博主介绍栏目

投稿  龙砚庭博客 2016-10-25 阅读 154 次 评论 25 条

个人偏爱侧边栏带有博主介绍功能的主题,这个爱好从我第一次建站开始就延续至今了,几乎每个经我折腾过的主题——都带有这个小功能。为此,我给它取名叫用户盒子(userbox)。

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

如何用纯代码实现WordPress侧边栏博主介绍栏目 boke112导航作者专栏

瞬间,boke112导航的逼格上了不止一个档次。不过,这种风格的展示却不一定适合每一个博客,毕竟并非每个人都需要展示作者官网、作者近期文章等。于是我溜达了一圈回来,最后觉得苏醒博客的博主介绍风格很surprised,相信有不少人会喜欢:

如何用纯代码实现WordPress侧边栏博主介绍栏目 苏醒博主介绍

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

如何用纯代码实现WordPress侧边栏博主介绍栏目 龙砚庭博主介绍

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

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

一、PHP部分:

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

  1. <div class="userbox">
  2. <div class="userbox_box">
  3. <div class="userbox_box_routine">
  4. <a class="author_pic"><img src="头像链接"></a>//也可以调用Gravatar头像
  5. <div class="author_name">
  6. <a>昵称</a><span>称谓(如站长)</span>
  7. </div>
  8. <p class="author_dec">简介(也可以调用用户资料的介绍) </p>
  9. <div class="userbox_card" style="margin-top:10px">
  10. <div class="userbox_card1">
  11. <span class="card_number1">内容1</span>
  12. <span class="card1">标题1</span>
  13. </div>
  14. <div class="userbox_card2">
  15. <span class="card_number2">内容2</span>
  16. <span class="card2">标题2</span>
  17. </div>
  18. </div>
  19. <div class="userbox_box_more">
  20. <a href="DIY" target="_blank">DIY</a>//这个地方可以自由DIY
  21. </div></div></div></div>

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

二、CSS部分:

打开style.css,写入代码:

  1. .userbox {
  2.     background-color:#fff;
  3.     border-radius:2px;
  4.     clear:both;
  5.     position:relative;
  6.     margin-bottom:45px;
  7.     -webkit-box-shadow:0px 3px 3px 0px rgba(0,0,0,0.05);
  8.     -moz-box-shadow:0px 3px 3px 0px rgba(0,0,0,0.05);
  9.     box-shadow:0px 3px 3px 0px rgba(0,0,0,0.05);
  10. }
  11. .userbox .userbox_box {
  12.     padding:22px 20px 20px;
  13. }
  14. .userbox_box_routine {
  15.     position:relative;
  16. }
  17. .userbox_box_routine .author_pic {
  18.     display:block;
  19.     margin-bottom:20px;
  20.     text-align:center;
  21. }
  22. .userbox_box_routine .author_pic img {
  23.     -webkit-border-radius:50%!important;
  24.     -moz-border-radius:50%;
  25.     border-radius:50%;
  26.     border:1px solid #CCCCCC;
  27.     padding:2px;
  28.     width:80px;
  29.     height:80px;
  30. }
  31. .userbox_box_routine .author_name {
  32.     font-size:18px;
  33.     display:block;
  34.     margin-bottom:10px;
  35.     text-align:center;
  36. }
  37. .userbox_box_routine .author_name a {
  38.     color:#19B5FE;
  39. }
  40. .userbox_box_routine .author_name span {
  41.     font-size:12px;
  42.     background:#CECECE;
  43.     color:#FFFFFF;
  44.     padding:2px 6px;
  45.     margin-left:10px;
  46.     -webkit-border-radius:4px;
  47.     -moz-border-radius:4px;
  48.     border-radius:4px;
  49.     top:-1px;
  50.     position:relative;
  51. }
  52. .userbox_box_routine .author_dec {
  53.     text-align:center;
  54.     font-size:13px;
  55.     padding:0 15px 5px;
  56. }
  57. .userbox_box_routine .userbox_box_more {
  58.     text-align:center/*DIY部分,自行定义css样式*/
  59. }
  60. .userbox_box_routine .userbox_box_more a {
  61.     border:1px rgba(0,0,0,0.15) solid;
  62.     padding:8px 13px;
  63.     cursor:pointer;
  64.     background-color:#F74840;
  65.     border-color:rgba(0,0,0,0);
  66.     color:#fff!important;
  67.     height:34px;
  68.     line-height:34px;
  69.     font-size:12px;
  70.     border-radius:999em;
  71. }
  72. .userbox_box_routine .userbox_box_more a:hover {
  73.     background-color:#282828!important;
  74.     color:#fff!important;
  75. }
  76. .userbox_box_routine .userbox_card {
  77.     position:relative;
  78.     margin-bottom:15px;
  79.     left:2%;
  80. }
  81. .userbox_box_routine .userbox_card .userbox_card1 {
  82.     display:inline-block;
  83.     position:relative;
  84.     height:40px;
  85.     width:45px;
  86.     left:35%;/*标题1区域位置调试*/
  87.     padding:0 4px;
  88.     color:#A09F9F;
  89.     border-right:1px solid #eceef1;
  90. }
  91. .userbox_box_routine .userbox_card .userbox_card1 .card_number1 {
  92.     display:block;
  93.     height:25px;
  94.     position:absolute;
  95.     top:-4px;
  96.     left:-2px;
  97.     width:50px;
  98.     text-align:center;
  99. }
  100. .userbox_box_routine .userbox_card .userbox_card1 .card_number1 a {
  101.     text-decoration:none;
  102.     font-size:15px;
  103.     color:#A09F9F;
  104. }
  105. .userbox_box_routine .userbox_card .userbox_card1 .card1 {
  106.     display:block;
  107.     position:absolute;
  108.     top:18px;
  109.     left:20%;
  110. }
  111. .userbox_box_routine .userbox_card .userbox_card1 .card1 a {
  112.     text-decoration:none;
  113.     color:#A09F9F;
  114. }
  115. .userbox_box_routine .userbox_card .userbox_card2 {
  116.     display:inline-block;
  117.     position:absolute;
  118.     left:48%;/*标题2区域位置调试*/
  119.     top:0;
  120.     height:30px;
  121.     width:40px;
  122.     margin:0 2px;
  123.     color:#A09F9F;
  124.     padding:0 5px;
  125. }
  126. .userbox_box_routine .userbox_card .userbox_card2 .card_number2 {
  127.     display:block;
  128.     height:18px;
  129.     position:absolute;
  130.     top:-4px;
  131.     text-align:center;
  132.     width:36px;
  133. }
  134. .userbox_box_routine .userbox_card .userbox_card2 .card_number2 a {
  135.     text-decoration:none;
  136.     font-size:15px;
  137.     color:#A09F9F
  138. }
  139. .userbox_box_routine .userbox_card .userbox_card2 .card2 {
  140.     display:block;
  141.     position:absolute;
  142.     top:18px;
  143.     left:20%;
  144. }
  145. .userbox_box_routine .userbox_card .userbox_card2 .card2 a {
  146.     text-decoration:none;
  147.     color:#A09F9F;
  148. }

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

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

三、总结:

这个教程依旧属于通用教程,只是将整个功能的框架都写了出来,很多展示的内容需要使用者自行去填充。熟悉主题修改的人,完全可以在这个框架的基础上弄出后台主题的设置选项(开启/关闭,内容填写)。

本文地址:http://boke112.com/3597.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙砚庭博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana
CPA教学与引流技巧

发表评论

呲牙憨笑坏笑偷笑色微笑抓狂睡觉酷流汗鼓掌大哭可怜疑问晕惊讶得意尴尬发怒奋斗衰骷髅啤酒吃饭礼物强弱握手OKNO勾引拳头差劲爱你

表情

  1. 分钱榜
    分钱榜 【镇长】 @回复

    NANA主题有这个功能吗?如何启用

    • boke112导航
      boke112导航【站长】 @回复

      @分钱榜 每个人的需求都不一样,想要的请根据文章进行折腾吧

      • 分钱榜
        分钱榜 【镇长】 @回复

        @boke112导航 “展示作者官网、作者近期文章等”,之前这个老代码是怎么样的,感觉老的好看

  2. 南通大熊SEO
    南通大熊SEO 【村长】 @回复

    这个功能不错,有时间鼓捣鼓捣

  3. 韩娱部落
    韩娱部落 【村长】 @回复

    博主厉害啊 哈哈,我个人不太会css,兼容性难折腾

  4. 小萝博客
    小萝博客 【市长】 @回复

    何不来个插件

  5. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

    这个真是极好的,不过我的博客就我孤家寡人一个在写,不怎么用得上这个哦!

    • 橘子书
      橘子书 【县长】 @回复

      @我爱动感单车网 这东西有点像包装,无论个人维护还是团队维护博客,适当添加这个小功能都是好的。

  6. 任务易
    任务易 【农民】 @回复

    不太熟悉主题修改 弄了很久

  7. 真我风采
    真我风采 【农民】 @回复

    这个可以试一试。

  8. 雅兮网
    雅兮网 【省长】 @回复

    不错,自媒体的既视感

  9. 博客114导航
    博客114导航 【镇长】 @回复

    这个应该有

  10. 网赚论坛
    网赚论坛 【农民】 @回复

    访问您的博客已成习惯!

  11. 网际电脑
    网际电脑 【县长】 @回复

    这是第二次写侧边栏了么

  12. Koolight
    Koolight 【省长】 @回复

    投稿王子,!龙兄厉害!

    • 橘子书
      橘子书 【县长】 @回复

      @Koolight 以前的文章,所以一次性都投给导航了。

  13. 金榜台博客
    金榜台博客 【县长】 @回复

    每天过来踩一踩已经成为习惯了,这可怎么办?!!

  14. 爱时尚
    爱时尚 【市长】 @回复

    博客不止,折腾不休!

  15. 小宋日志
    小宋日志 【省长】 @回复

    实用贴,之前想弄个一直不会写css,最终放弃了

  16. 老叶养生博客
    老叶养生博客 【镇长】 @回复

    马上准备试试看!

  17. 苍蓝公爵
    苍蓝公爵 【镇长】 @回复

    虽然现在博客用的不是WP,但是咱还是学习了,玩意哪天咱又用WP了呢?