使用grid布局，彻底改善了原先的兼容性，再也不用害怕内容重叠了
这次彻底抛弃了layui，不再另外引入js文件，纯css+js完成
如想要上下滚动，请自行套layui轮播组件或swiper框架
1、无力适配小屏和移动端，可在模块里选择只在桌面显示，你也可以自己适配一下，研究一下media即可。
2、得益于grid布局，小屏幕一般把后面的.guangbo-number部分隐藏后，就能完美适配到移动端显示，有需要自己研究吧
🎈切换调用其他页面内容的方法：
默认广播post_type => circle 也就是圈子，如果你想广播快讯的，就把 circle改为newsflashes，其他页面基本同理。
🐹按钮的href地址，记得改成你自己设置的页面地址，或自定义地址
代码中其他文字可自行修改，代码随便改，只要能看明白就行
代码在下方文件，自己分离代码，也可以直接都丢到模块里。
使用他人的代码前，先做好备份，以免遇到无法挽回的问题。
之前的版本，可在本圈子内翻阅下载，我网站没有存。
按我的记性，应该没啥问题了，强迫症到此结束，广播模块完结。
适用于B2主题，其他主题自行测试修改
代码
<style>
:root {
/* transition效果 */
--hover: all .4s ease-out;
/* 边框渐变 */
--boxshow: 0 7px 20px 1px #b8b0db30;
/* 统一border白边 */
--border: 8px solid #fff;
/* 阴影 */
--bbshadow: 0px 0px 10px -4px rgba(0, 0, 0, 0.1);
/* border hover时的边框 */
--border-fff: 1px solid #F7F9FA;
--border-000: 1px solid rgba(0, 102, 255, 0.18);
}
/************************************************ 广播模块修改开始 *****************************************************/
.guangbo {
width: 100%;
height: 45px;
overflow: hidden;
display: grid;
justify-items: center;
background-color: rgba(220, 225, 249, 0.9);
border-radius: 5px;
transition: var(--hover);
border: var(--border-fff);
box-shadow: var(--bbshadow);
}
.guangbo:hover {
border: var(--border-000);
transition: var(--hover);
}
.guangbo.hidden {
display: none;
}
.guangbo-hw {
flex: 1;
display: grid;
align-items: center;
grid-template-columns: auto 5fr 30px auto;
gap: 15px;
height: 100%;
width: 98%;
}
.guangbo-hw>div {
height: 70%;
}
.guangbo-title {
display: grid;
grid-template-columns: 23px auto 1fr;
gap: 4px;
width: 100%;
align-items: center;
background-image: linear-gradient(146deg, #d1d1cf 0%, #3ee4ff 74%);
border-radius: 5px;
padding: 0 3px;
}
.guagnbo-o {
display: inline-block;
vertical-align: text-bottom;
background-color: #fff;
border-radius: 50%;
opacity: 0;
animation: 0.75s linear 0s infinite normal none running kuaibao-yuandian;
margin-top: 2px;
margin-right: 1px;
margin-left: 1px;
width: .5rem;
height: .5rem;
transition: all .4s ease-out;
}
@keyframes kuaibao-yuandian {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}
.guangbo-font {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
}
.guangbo-content {
width: 100%;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
justify-items: start;
}
.guangbo-content-user {
display: grid;
align-items: center;
grid-template-columns: auto 5px 70px;
max-width: 220px;
justify-items: center;
}
.guangbo-user {
max-width: 145px;
padding: 0 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
color: #4E5358;
transition: var(--hover);
}
.guangbo-fabiao {
background-color: rgb(200 207 237);
color: #fff;
font-weight: 600;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
padding: 0px 5px 1px 5px;
border-radius: 2px;
margin-left: 6px;
}
.guangbo-content-title {
text-align: center;
width: 100%;
transition: all .3s ease-out;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 12px;
font-weight: 600;
color: #4E5358;
transition: var(--hover);
}
.guangbo-content-title a:hover {
color: rgba(255, 255, 255, 0.8);
transition: all .3s ease-out;
}
.guangbo-button {
text-align: center;
line-height: 30px;
border-radius: 3px;
background-image: linear-gradient(140deg, #e1e1be 0%, #43aadb 74%);
transition: all .3s ease-out;
transition: var(--hover);
}
.guangbo-button:hover {
border-radius: 50px;
transition: var(--hover);
}
.guangbo-number {
max-width: 470px;
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr 1fr;
gap: 3px;
justify-items: center;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.guangbo-number>span span {
font-weight: 600;
padding: 0 3px;
border-radius: 3px;
color: #536de6;
background-color: rgba(83, 109, 230, .18);
margin: 0 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: var(--hover);
}
/************************************************ 广播模块修改结束 *****************************************************/
</style>
<div id="guangbo-container" class="guangbo hidden">
<div class="guangbo-hw">
<div class="guangbo-title">
<span class="guangbo-ico">📢</span>
<span class="guangbo-font">冒泡广播</span>
<span class="guagnbo-o"></span>
</div>
<?php
$args = array(
'post_type' => 'circle',
'posts_per_page' => 2,
);
$posts_query = new WP_Query($args);
if ($posts_query->have_posts()) {
while ($posts_query->have_posts()) {
$posts_query->the_post();
?>
<div class="guangbo-content">
<span class="guangbo-content-user">
<span class="guangbo-user"><?php the_author(); ?></span>
<span>|</span>
<span class="guangbo-fabiao">发表了:</span>
</span>
<span class="guangbo-content-title">
<a title="阅读全文" target="_blank" href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</span>
</div>
<?php
}
wp_reset_postdata(); // 重置文章数据以避免冲突
} else {
echo '<span class="guangbo-content-title">还没有人发帖，快去发个帖子吧！</span>';
}
?>
<a href="/maopao" title="去发帖" target="_blank" class="guangbo-button">🐹</a>
<div class="guangbo-number">
<span>今日灌水量
<?php
$today = getdate(); // 获取当前日期
$args = array(
'post_type' => 'circle',
'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' => 'circle',
'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>本站用户
<?php
// 获取用户统计信息
$user_count = count_users();
// 获取用户总数
$total_users = $user_count['total_users'];
?>
<span><?php echo esc_html($total_users); ?></span>位
</span>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var contents = document.querySelectorAll('.guangbo-content');
var currentIndex = 0;
var intervalId;
function showContent(index) {
contents.forEach(function(content, i) {
content.style.display = (i === index) ? 'grid' : 'none';
});
}
function nextContent() {
currentIndex = (currentIndex + 1) % contents.length;
showContent(currentIndex);
}
function startScrolling() {
intervalId = setInterval(nextContent, 5000);
}
function stopScrolling() {
clearInterval(intervalId);
}
if (contents.length > 0) {
showContent(currentIndex);
startScrolling();
}
var guangboContainer = document.getElementById('guangbo-container');
guangboContainer.classList.remove('hidden');
guangboContainer.addEventListener('mouseenter', stopScrolling);
guangboContainer.addEventListener('mouseleave', startScrolling);
});
</script>
评论