文章
文章用户
广告位招租919838898

B2主题给网站首页增加一个公告模块（快讯滚动模块修改）

目录

原教程来自哔哔鸡

B2小工具的【用户面板】其实是有公告的，但是我首页没有开通这个小工具。有个需求就是想要将公告栏放在首页banner的下面。

逛圈子的时候，发现哔哔鸡给开发了一个快讯滚动模块，这刚好就是我需要的。

原版本的教程，是滚动快讯。需要应用layui文件，我直接将其改为了不滚动，信息展示为公告。

我会在结尾放上原版的代码，如果需要原版可以自取。

演示图

原版的演示图

B2主题给网站首页增加一个公告模块（快讯滚动模块修改）

我修改后的演示

直接首页看就行了。注意：上面的原版演示图是哔哔鸡开发的最新版，增加了一个发表快报按钮和手机端自适应。

我首页的是之前老版本进行修改的。

教程

进入网站后台-B2主题设置-首页。添加一个公告模块。当然也可以是其他的，商铺、快讯、供求这些都可以。我们主要是用这个样式。

B2主题给网站首页增加一个公告模块（快讯滚动模块修改）

自定义代码

自定义代码

B2主题给网站首页增加一个公告模块（快讯滚动模块修改）
<div class="indexbibi">
		<span class="indexbibi-box">
			<a title="所有公告" href="/announcement" target="_blank" class="indexbibi-title">
				<span
					style="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;
}

保存后，即可在首页看到你的公告栏目。

原版的我就不在这里贴代码了，样式代码有点多。自己去下面下载哈。

下载权限
查看
  • ￥
    免费下载
    评论并刷新后下载
    登录后下载
查看演示
  • {{attr.name}}：
您当前的等级为
登录后免费下载登录 小黑屋反思中，不准下载！ 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数（次）用完了，请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次，今日剩余次
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
广告位招租919838898
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

返回顶部
本站由多途云提供高防CDN安全防护