B2主题免插件实现文章页相关文章

先看样式:

B2主题免插件实现文章页相关文章-咸鱼织梦

 

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的指定位置:

B2主题免插件实现文章页相关文章-咸鱼织梦

http://mip.i3geek.com

人已赞赏
B2主题美化

b2主题登录框二次美化开发

2020-11-28 9:30:03

B2主题美化

b2主题在文章图片右上角恢复置顶功能!

2020-11-28 10:06:55

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索