先看样式:
B2主题没有自带的文章页相关文章,这让人很难受,于是自己就做了个,效果图就是下面那样。
还是挺简单的,没有整缩略图那些花里胡哨的东西。
功能代码:
<div class="single-bottom box"> <h3><span>相关文章</span></h3> <ul class="xgart-row"> <?php global $post; $categories = get_the_category(); foreach ($categories as $category) : $posts = get_posts('numberposts=10&category='. $category->term_id.'&exclude='.get_the_ID()); foreach($posts as $post) : ?> <li> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <span><?php the_time('Y-m-d') ?></span> </li> <?php endforeach;endforeach; ?> </ul> </div>
样式代码:
.single-bottom { padding: 25px; margin-bottom: 16px; } .single-bottom h3 { border-bottom: 1px solid #ebeef5; } .single-bottom h3 span { display: inline-block; padding-bottom: 15px; border-bottom: 2px solid #206aff; } .xgart-row { overflow: hidden; margin-left: -30px; } .xgart-row li { width: 50%; float: left; display: flex; align-items: center; padding-left: 30px; margin-top: 15px; } .xgart-row li a { display: inline-block; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xgart-row li span { color: #909399; font-size: 13px; margin-left: 20px; } @media screen and (max-width: 768px) { /*b2主题底部相关文章*/ #nuandao .xgart-row li { width: 100%; } }
使用方法:
将上面代码添加到子主题的single.php的指定位置: