B2主题给网站首页增加一个公告模块（快讯滚动模块修改）
原教程来自哔哔鸡
B2小工具的【用户面板】其实是有公告的，但是我首页没有开通这个小工具。有个需求就是想要将公告栏放在首页banner的下面。
逛圈子的时候，发现哔哔鸡给开发了一个快讯滚动模块，这刚好就是我需要的。
原版本的教程，是滚动快讯。需要应用layui文件，我直接将其改为了不滚动，信息展示为公告。
我会在结尾放上原版的代码，如果需要原版可以自取。
演示图
原版的演示图
我修改后的演示
直接首页看就行了。注意：上面的原版演示图是哔哔鸡开发的最新版，增加了一个发表快报按钮和手机端自适应。
我首页的是之前老版本进行修改的。
教程
进入网站后台-B2主题设置-首页。添加一个公告模块。当然也可以是其他的，商铺、快讯、供求这些都可以。我们主要是用这个样式。
自定义代码
自定义代码
<div class="indexbibi"><span class="indexbibi-box"><a title="所有公告" href="/announcement" target="_blank" class="indexbibi-title"><spanstyle="font-size: 15px;color: #fff;font-weight: 600;text-shadow: 0px 0px 2px rgb(0 0 0 / 25%);">最新公告</span><sup class="index-yuandian index-yuandian-sm ml-1 small" role="status" aria-hidden="true"style="margin-top: 2px;margin-right: 1px;margin-left: 1px;width: .5rem;height: .5rem;"></sup></a><span class="indexbibi-content"><div class="layui-carousel" id="index-bibirj"><div carousel-item><?php$args = array('post_type' => 'announcement','posts_per_page' => 1,);$posts_query = new WP_Query($args);if ($posts_query->have_posts()) {while ($posts_query->have_posts()) {$posts_query->the_post();?><div class="bibi-div"><span class="bibi-span"><a title="查看详细" class="bibi-a" target="_blank" href="<?php the_permalink(); ?>"><span style="color: #aac6d9; margin: 0 7px 0 7px;">|</span><span class="bibi-title"><?php the_title(); ?></span></a><span class="bibi-tag"><?php$tags = get_the_terms(get_the_ID(), 'newsflashes_tags');if ($tags && !is_wp_error($tags)) {foreach ($tags as $tag) {echo '<a target="_blank" href="' . get_term_link($tag) . '">' . $tag->name . '</a>';echo ' ';}}?></span></span></div><?php}wp_reset_postdata();} else {echo "嗯？最近好像没最新的公告。";}?></div></div><!-- 条目中可以是任意内容，如：<img src=""> --></span><span class="indexbibi-num"><span><?php$today = getdate(); // 获取当前日期$args = array('post_type' => 'post','post_status' => 'publish','cat' => 'your_category_id', // 替换为您的分类 ID'date_query' => array(array('year' => $today['year'],'month' => $today['mon'],'day' => $today['mday'],),),);$query = new WP_Query($args);$count = $query->found_posts;?>今日文章：<span><?php echo $count; ?></span> 篇</span><span><?php$args = array('post_type' => 'announcement','post_status' => 'publish','posts_per_page' => -1,'fields' => 'ids');$query = new WP_Query($args);$count = $query->found_posts;?>公告总数：<span><?php echo $count; ?></span> 篇</span></span></span></div>
此模块是有短代码的，简而言之，我们可以把这个公告模块，放在任何地方。
这里注意一下。
'post_type' => 'announcement',就是文章类型为公告，如果你想改成其他的如快讯newsflashes、商品shop、圈子circle、供求infomation等等都可以根据自己的需求更换。
CSS样式
我将CSS放在了子主题中，themes/b2child/style.css ，这样下次更新主题就不会被覆盖了。
/* ================================= 首页广播修改开始 ================================= *//* 与下面文章模块间距修改 */#home-row-bbdt{margin-bottom: 16px!important;margin-top: 17px!important;}/* 整体样式 */.indexbibi {width: 100%;height: 45px;background-color: #dde2fa;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: center;padding: 0 15px;border-radius: 4px;box-shadow: 0 7px 20px 1px #b8b0db30;border: 1px solid rgba(0, 0, 0, 0);transition: all .4s ease-out;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: -12px;}.indexbibi:hover {border: 1px solid rgba(123, 200, 219, 0.8);transition: all .4s ease-out;}.indexbibi-box {width: 100%;height: 30px;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}/***** 喇叭整体样式 *****/.indexbibi-title {width: 8%;height: 100%;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: space-evenly;align-items: center;background-color: #ff5b5b;border-radius: 4px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: all .4s ease-out;}/* 小喇叭 */.indexbibi-icon {width: 1.5em;height: 1.5em;margin-top: 4px;}/* 小圆点 */.index-yuandian {display: inline-block;vertical-align: text-bottom;background-color: #fff;border-radius: 50%;opacity: 0;animation: 0.75s linear 0s infinite normal none running index-yuandian;}@keyframes index-yuandian {0% {transform: scale(0);}50% {opacity: 1;transform: none;}}/****** 内容样式 ******/.indexbibi-content {width: 58%;height: 100%;transition: all .4s ease-out;}/* display居中 */.bibi-div {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: flex-start;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: all .4s ease-out;}/* 再次居中span */.bibi-span {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;transition: all .4s ease-out;}/* 给bibia继续居中搞死它 */.bibi-a {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 85%;transition: all .4s ease-out;}/* 给时间加样式 */.bibi-time {background-color: rgb(200 207 237);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;padding: 0 5px;color: #fff;border-radius: 2px;font-weight: 600;text-shadow: 0px 0px 2px rgb(0 0 0 / 25%);width: 70px;text-align: center;margin: 0 3px;transition: all .4s ease-out;}/* 给标题加点样式 */.bibi-title {font-size: 15px;color: #393d49;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin: 0px 5px;width: 70%;transition: all .4s ease-out;text-align: center;line-height: 30px;}.bibi-title:hover {color: rgba(22, 120, 255, 0.8);}/* 数量样式 */.indexbibi-num {width: 34%;height: 100%;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-end;align-items: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #34495e;}.indexbibi-num>span {width: 30%;margin-right: 8px;font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: flex-end;align-items: center;}.indexbibi-num>span>span {font-weight: 600;padding: 0 2px;border-radius: 3px;color: #536de6;background-color: rgba(83, 109, 230, .18);margin-right: 3px;}/* 修改模块下边距 */#home-row-bibizuijin {margin-bottom: 10px;}#home-row-banner {margin-bottom: 10px;}
保存后，即可在首页看到你的公告栏目。
原版的我就不在这里贴代码了，样式代码有点多。自己去下面下载哈。
