给wordpress文章添加一个简约的详情栏

给wordpress文章添加精美的详情栏,主要效果如下：

在文章详情页中添加代码如下：

<ul class="author">
<div class="author-title"> 文章信息</div>
<li style="border:1px solid gray;float:right;background:red;"><img src="http://api.qrserver.com/v1/create-qr-code/?size=150x150&data=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/class="author-img"/>

</li>
<li class="article-tags">作者：<?php the_author(); ?> </li>
<li class="article-tags">链接：<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></li>
<li class="article-tags">分类：<?php echo '';the_category(' / '); ?></li>
<li class="article-tags">说明：著作权归作者所有，非盈利转载请注明链接，商业使用请联系作者！</li>
<li class="article-tags"><?php the_tags('标签：','',''); ?></li>
<li style="text-align:center;"> 手机扫描二维码即可快速在手机上阅读哦！</li>
</ul>

在css中添加代码如下：

.author{background:none;
border:1px dotted gray;
padding:6px;
border-radius:5px;
}
#author-table{
width:100%;}
#author-tr{background:red;


}
.author-img{

}

.author-title{
border-left:6px solid gray;padding:5px;
}
.article-tags{margin:10px 0;text-align:left;}
.article-tags a{display:inline-block;padding:4px 7px 3px;margin:0 4px 4px 0;color:#fff;font-size:12px;background-color:#45B6F7;opacity:0.85;filter:alpha(opacity=85);}
.article-tags a:hover{color:#fff;opacity:1;filter:alpha(opacity=100);}