B2主题美化之圈子置顶帖样式修改调整
老白博客7B2主题美化修改教程更新了:这次是老白之前做奇它论坛的时候修改的圈子页面置顶帖样式,删除了调整了时间元素以及点赞评论相关的元素,把置顶帖调成了我喜欢的样子。详细的代码教程如下:
1.修改circle-topic-list.php文件
你的网站主题目录,文件位置:b2/TempParts/circle/circle-topic-list.php
找到原来的置顶帖盒子,下面这个section部分
<section v-for="(item,ti) in data" :key="item.topic_id" v-else :class="'circle-topic-item ' + ' circle-topic-item-'+item.topic_id">
<template v-if="item.sticky === 1">
<div class="topic-sticky">
<div class="topic-sticky-info">
<div :class="item.attachment.image.length > 0 ? 'has-image' : ''">
<div class="topic-sticky-title">
<h2>
<span class="topic-sticky-icon"><?php echo b2_get_icon('b2-upload-fill').__('置顶','b2'); ?></span>
<a :href="item.link" target="_blank">
<span v-if="item.title" v-text="item.title"></span>
<span v-else-if="item.content" v-text="item.content"></span>
<span v-else>
<b><?php echo sprintf(__('专属老白-博客撰写可查看!','b2'),$circle_name); ?></b>
</span>
</a>
</h2>
</div>
<div v-if="item.attachment.image.length > 0" class="topic-sticky-img-box b2-radius">
<?php echo b2_get_img(array(
'source_data'=>':srcset="item.attachment.image[0].thumb_webp"',
'src_data'=>':src="item.attachment.image[0].thumb"'
));?>
</div>
</div>
<?php get_template_part( 'TempParts/circle/circle-topic-footer');?>
<?php get_template_part( 'TempParts/circle/circle-comments');?>
</div>
</div>
</template>
<template v-else>
<?php get_template_part('TempParts/circle/circle-topic-content'); ?>
<?php get_template_part( 'TempParts/circle/circle-topic-footer');?>
<?php get_template_part( 'TempParts/circle/circle-comments');?>
</template>
</section>
修改为下面这堆:
2.style.css简单调整
同理,在主题的样式文件,添加下面的样式
/*圈子置顶帖样式https://www.x老白cbt博客mw.com/30864.html-*/
body .circle-topic-sticky .topic-sticky {
margin-top: -10px;
}
body .circle-topic-sticky .topic-sticky:last-child {
padding-bottom: 20px;
}
body .circle-topic-sticky .topic-sticky .topic-sticky-title {
display: flex;
}
body .circle-topic-sticky .topic-sticky .topic-date {
margin-left: auto;
font-size: 14px;
color: #878787;
font-weight: normal;
}
/*手机端隐藏置顶帖子日期-https://www.老白xcbtm博客w.com/30864.html*/
@media (max-width: 780px) {
.circle-topic-sticky .topic-sticky .topic-date{
display: none;
}
}
body .circle-topic-sticky:first-child {
border-radius: 4px 4px 0 0;
box-shadow: 0;
}
技巧分享
圈子置顶帖肯定是非常重要的东西才需要置顶,比如关于圈子的功能说明,或者圈规说明
然后我们都知道B2主题的帖子看长文章效果是不太好的,而文章类型效果不错
所以就可以使用下面的插件,实现:点击置顶帖子直接跳转到文章或者页面
page links to 插件说明:https://www.xcbtmw.com/30872.html#h23
3.帖子按发布时间排序
4.更多推荐
关于7B2主题论坛圈子,我以前做了很多修改调整和美化,大家可以点击文末标签阅读!
B2主题通用美化:https://www.xcbtmw.com/tag/b2-theme-beautify
B2主题圈子美化:https://www.xcbtmw.com/tag/b2_theme_circle
WordPress顶级优化:https://www.xcbtmw.com/tag/wordpress_optimization
很厉害啊