子比主题—子比新闻版块

原创框架 – 保留作者 – 记得点赞，适配子比主题，放在主题 functions.php 代码后面。
演示截图

后台截图

动态演示

代码内容（压缩）

[hidecontent type=”reply” desc=”隐藏内容：评论后查看”]
Zib_CFSwidget::create('zib_widget_ui_news_block', array(
    'title' => '新闻板块', 'zib_show' => true, 'description' => '顶部幻灯片、4图卡片、4标题列表、右侧排行榜',
    'fields' => array(
        array('type' => 'subheading', 'content' => '幻灯片设置'),
        array('id' => 'slides', 'type' => 'group', 'title' => '幻灯片内容', 'button_title' => '添加幻灯片', 'accordion_title_number' => true, 'accordion_title_prefix' => '幻灯片', 'desc' => '留空则不显示幻灯片区域', 'fields' => array(
            array('id' => 'image', 'type' => 'upload', 'title' => '幻灯片图片', 'library' => 'image', 'preview' => true),
            array('id' => 'link', 'type' => 'link', 'title' => '跳转链接'),
        )),
        array('id' => 'slider_height', 'type' => 'slider', 'title' => '幻灯片高度', 'default' => 150, 'min' => 80, 'max' => 400, 'step' => 10, 'unit' => 'px'),
        array('id' => 'slider_interval', 'type' => 'slider', 'title' => '切换间隔', 'default' => 4, 'min' => 2, 'max' => 10, 'unit' => '秒'),
        array('id' => 'slider_effect', 'type' => 'select', 'title' => '切换动画', 'default' => 'slide', 'options' => array('slide' => '滑动', 'fade' => '淡入淡出', 'cube' => '3D方块', 'coverflow' => '3D滑入', 'flip' => '3D翻转')),
        array('id' => 'slider_pagination', 'type' => 'switcher', 'title' => '显示指示器', 'default' => true),
        array('type' => 'subheading', 'content' => '左侧内容设置'),
        array('id' => 'left_title', 'type' => 'text', 'title' => '左侧标题', 'default' => '今日要闻'),
        array('id' => 'left_icon', 'type' => 'icon', 'title' => '左侧标题图标', 'default' => 'fa fa-newspaper-o'),
        array('id' => 'left_cat', 'type' => 'select', 'title' => '左侧分类限制', 'options' => 'categories', 'chosen' => true, 'multiple' => true, 'placeholder' => '不限制分类'),
        array('id' => 'left_orderby', 'type' => 'select', 'title' => '左侧排序方式', 'default' => 'date', 'options' => array('date' => '发布时间', 'modified' => '更新时间', 'views' => '浏览量', 'comment_count' => '评论数', 'like' => '点赞数', 'rand' => '随机')),
        array('type' => 'subheading', 'content' => '排行榜设置'),
        array('id' => 'ranking_title', 'type' => 'text', 'title' => '排行榜标题', 'default' => '热点排行榜'),
        array('id' => 'ranking_icon', 'type' => 'icon', 'title' => '排行榜标题图标', 'default' => 'fa fa-fire'),
        array('id' => 'ranking_cat', 'type' => 'select', 'title' => '排行榜分类限制', 'options' => 'categories', 'chosen' => true, 'multiple' => true, 'placeholder' => '不限制分类'),
        array('id' => 'ranking_count', 'type' => 'slider', 'title' => '排行榜总数', 'default' => 10, 'min' => 5, 'max' => 30),
        array('id' => 'ranking_per_page', 'type' => 'slider', 'title' => '每页显示数', 'default' => 5, 'min' => 3, 'max' => 10),
        array('id' => 'ranking_orderby', 'type' => 'select', 'title' => '排行榜排序方式', 'default' => 'views', 'options' => array('views' => '浏览量', 'comment_count' => '评论数', 'like' => '点赞数', 'date' => '发布时间')),
    ),
));

function zib_widget_ui_news_block($args, $instance) {
    if (!($show_class = Zib_CFSwidget::show_class($instance))) return;
    $d = array('slides' => array(), 'slider_height' => 150, 'slider_interval' => 4, 'slider_effect' => 'slide', 'slider_pagination' => true, 'left_title' => '今日要闻', 'left_icon' => 'fa fa-newspaper-o', 'left_cat' => array(), 'left_orderby' => 'date', 'ranking_title' => '热点排行榜', 'ranking_icon' => 'fa fa-fire', 'ranking_cat' => array(), 'ranking_count' => 10, 'ranking_per_page' => 5, 'ranking_orderby' => 'views');
    $i = wp_parse_args($instance, $d);
    zib_news_block_styles($i);
    $w = array('日', '一', '二', '三', '四', '五', '六');
    $cat = !empty($i['left_cat']) && is_array($i['left_cat']) ? implode(',', $i['left_cat']) : '';
    $qa = array('post_status' => 'publish', 'cat' => $cat, 'order' => 'DESC', 'showposts' => 8, 'no_found_rows' => true, 'ignore_sticky_posts' => 1);
    $ob = $i['left_orderby'];
    if (in_array($ob, array('views', 'favorite', 'like'))) { $qa['orderby'] = 'meta_value_num'; $qa['meta_query'] = array(array('key' => $ob, 'order' => 'DESC')); } else { $qa['orderby'] = $ob; }
    $q = new WP_Query($qa);
    echo '<div class="news-block-wrap"><div class="news-block-left">';
    zib_news_block_slider($i);
    if ($i['left_title']) echo '<h2 class="nb-title"><span class="nb-title-text">' . zib_get_cfs_icon($i['left_icon']) . esc_html($i['left_title']) . '</span><span class="nb-date">' . date('Y年n月j日') . ' 星期' . $w[date('w')] . '</span></h2>';
    echo '<div class="nb-cards">';
    for ($n = 0; $q->have_posts() && $n < 4; $n++) { $q->the_post(); echo '<div class="nb-card"><a href="' . esc_url(get_permalink()) . '" rel="external nofollow"  target="_blank"><div class="nb-card-img">' . zib_post_thumbnail('', 'nb-img') . '<div class="nb-overlay"></div><div class="nb-card-title">' . esc_html(get_the_title()) . '</div></div></a></div>'; }
    echo '</div><div class="nb-list">';
    while ($q->have_posts()) { $q->the_post(); echo '<div class="nb-list-item"><a href="' . get_permalink() . '" rel="external nofollow"  rel="external nofollow"  target="_blank">' . esc_html(get_the_title()) . '</a></div>'; }
    wp_reset_postdata();
    echo '</div></div><div class="news-block-right">';
    zib_news_block_ranking($i);
    echo '</div></div>';
}

function zib_news_block_slider($i) {
    $slides = array_filter((array)$i['slides'], function($s) { return !empty($s['image']); });
    if (!$slides) return;
    $id = 'nb-s-' . uniqid(); $loop = count($slides) > 1; $int = intval($i['slider_interval']) * 1000; $pg = !empty($i['slider_pagination']);
    echo '<div class="nb-slider" id="' . $id . '"><div class="swiper-container"><div class="swiper-wrapper">';
    foreach ($slides as $s) { $url = $s['link']['url'] ?? ''; $tg = $s['link']['target'] ?? '_blank'; echo '<div class="swiper-slide">' . ($url ? '<a href="' . esc_url($url) . '" rel="external nofollow"  target="' . esc_attr($tg) . '">' : '') . '<img src="' . esc_url($s['image']) . '"  loading="lazy">' . ($url ? '</a>' : '') . '</div>'; }
    echo '</div>' . ($pg && $loop ? '<div class="swiper-pagination"></div>' : '') . '</div></div>';
    if ($loop) echo '<script>!function(){var f=function(){if(typeof Swiper=="undefined"){setTimeout(f,100);return}new Swiper("#' . $id . ' .swiper-container",{loop:true,effect:"' . esc_js($i['slider_effect']) . '",autoplay:{delay:' . $int . ',disableOnInteraction:false}' . ($pg ? ',pagination:{el:"#' . $id . ' .swiper-pagination",clickable:true}' : '') . '})};document.readyState=="complete"?f():window.addEventListener("load",f)}()</script>';
}

function zib_news_block_ranking($i) {
    $cnt = intval($i['ranking_count']); $pp = intval($i['ranking_per_page']) ?: 5; $ob = $i['ranking_orderby'];
    $cat = !empty($i['ranking_cat']) && is_array($i['ranking_cat']) ? implode(',', $i['ranking_cat']) : '';
    $qa = array('post_status' => 'publish', 'cat' => $cat, 'order' => 'DESC', 'showposts' => $cnt, 'no_found_rows' => true, 'ignore_sticky_posts' => 1);
    if (in_array($ob, array('views', 'favorite', 'like'))) { $qa['orderby'] = 'meta_value_num'; $qa['meta_query'] = array(array('key' => $ob, 'order' => 'DESC')); } else { $qa['orderby'] = $ob; }
    echo '<div class="nb-rank-header"><h3 class="nb-rank-title">' . zib_get_cfs_icon($i['ranking_icon']) . esc_html($i['ranking_title']) . '</h3><div class="nb-nav" data-per="' . $pp . '" data-total="' . $cnt . '"><span class="nb-nav-btn nb-prev disabled">‹</span><span class="nb-nav-btn nb-next">›</span></div></div><div class="nb-rank-wrap"><div class="nb-rank-list">';
    $q = new WP_Query($qa); $n = 1; $p = 0;
    while ($q->have_posts()) {
        if (($n - 1) % $pp === 0) { if ($p > 0) echo '</div>'; echo '<div class="nb-rank-page">'; $p++; }
        $q->the_post(); $ex = get_the_excerpt() ?: wp_trim_words(get_the_content(), 30, '...');
        $nc = $n <= 3 ? ' nb-num-' . $n : ''; $ic = $n <= 3 ? ' nb-item-' . $n : '';
        echo '<a href="' . get_permalink() . '" rel="external nofollow"  rel="external nofollow"  target="_blank" class="nb-rank-item' . $ic . '"><span class="nb-num' . $nc . '">#' . $n . '</span><div class="nb-rank-content"><span class="nb-rank-t">' . esc_html(get_the_title()) . '</span><span class="nb-rank-desc">' . esc_html(wp_trim_words($ex, 20, '...')) . '</span></div></a>';
        $n++;
    }
    if ($p > 0) echo '</div>';
    echo '</div></div>'; wp_reset_postdata();
}

function zib_news_block_styles($i) {
    static $o = false; if ($o) return; $o = true; $h = intval($i['slider_height']) ?: 150;
    echo '<style>.news-block-wrap{display:flex;gap:15px;margin-bottom:20px}.news-block-left{flex:1;min-width:0}.news-block-right{flex:0 0 311px;width:311px}.nb-slider{margin-bottom:16px;border-radius:var(--main-radius);overflow:hidden}.nb-slider .swiper-container{height:' . $h . 'px}.nb-slider .swiper-slide{overflow:hidden}.nb-slider .swiper-slide a{display:block;height:100%}.nb-slider .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}.nb-slider .swiper-slide:hover img{transform:scale(1.02)}.nb-slider .swiper-pagination{bottom:10px}.nb-slider .swiper-pagination-bullet{width:8px;height:8px;background:rgba(255,255,255,.6);opacity:1}.nb-slider .swiper-pagination-bullet-active{background:#fff;width:20px;border-radius:4px}.nb-title{font-size:16px;font-weight:600;margin-bottom:16px;padding:12px 16px;background:var(--main-bg-color,#fff);border-radius:var(--main-radius);border:1px solid var(--main-border-color,#ebedf0);display:flex;align-items:center;justify-content:space-between}.nb-title-text{display:flex;align-items:center}.nb-title-text i,.nb-title-text .icon,.nb-rank-title i,.nb-rank-title .icon{margin-right:8px;flex-shrink:0}.nb-date{font-size:14px;font-weight:400;color:var(--muted-2-color,#999)}.nb-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.nb-card a{display:block}.nb-card-img{position:relative;height:140px;border-radius:var(--main-radius);overflow:hidden}.nb-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.nb-card:hover img{transform:scale(1.1)}.nb-overlay{position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 100%);border-radius:0 0 var(--main-radius) var(--main-radius)}.nb-card-title{position:absolute;bottom:12px;left:12px;right:12px;font-size:14px;line-height:1.4;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.nb-list{display:flex;flex-wrap:wrap;gap:12px 16px;padding:16px;background:var(--main-bg-color,#fff);border-radius:var(--main-radius);border:1px solid var(--main-border-color,#ebedf0)}.nb-list-item{width:calc(50% - 8px);padding:8px 12px;background:var(--body-bg-color,#f5f7fa);border-radius:var(--main-radius)}.nb-list-item a{font-size:14px;color:var(--main-color,#333);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s}.nb-list-item a:hover{color:var(--focus-color,#306AF1)}.nb-rank-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:12px 16px;background:var(--main-bg-color,#fff);border-radius:var(--main-radius);border:1px solid var(--main-border-color,#ebedf0)}.nb-rank-title{font-size:16px;font-weight:600;margin:0}.nb-nav{display:flex;gap:8px}.nb-nav-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--main-border-color,#ebedf0);border-radius:var(--main-radius);cursor:pointer;background:var(--main-bg-color,#fff);font-weight:bold;font-size:16px;color:var(--muted-2-color,#666);transition:all .3s;user-select:none}.nb-nav-btn:hover:not(.disabled){border-color:var(--focus-color,#306AF1);color:var(--focus-color,#306AF1)}.nb-nav-btn.disabled{opacity:.4;cursor:not-allowed}.nb-rank-wrap{overflow:hidden}.nb-rank-list{display:flex;transition:transform .3s}.nb-rank-page{display:flex;flex-direction:column;gap:12px;flex:0 0 100%;width:100%}.nb-rank-item{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid var(--main-border-color,#ebedf0);border-radius:var(--main-radius);background:var(--main-bg-color,#fff);transition:all .3s;text-decoration:none;color:var(--main-color,#333)}.nb-rank-item:hover{background:var(--body-bg-color,#f0f4fe);border-color:var(--focus-color,#306AF1)}.nb-num{font-weight:600;min-width:32px;font-size:26px;color:var(--muted-2-color,#C3C7CD);flex-shrink:0;padding-top:2px}.nb-num-1{color:#ff4757}.nb-num-2{color:#ff7f50}.nb-num-3{color:#ffa502}.nb-item-1{border-color:rgba(255,71,87,.3)}.nb-item-2{border-color:rgba(255,127,80,.3)}.nb-item-3{border-color:rgba(255,165,2,.3)}.nb-rank-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.nb-rank-t{font-size:14px;font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nb-rank-desc{font-size:12px;line-height:1.5;color:var(--muted-2-color,#999);padding:8px 10px;background:var(--body-bg-color,#f5f7fa);border-radius:var(--main-radius);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:991px){.news-block-wrap{flex-direction:column}.news-block-left,.news-block-right{flex:0 0 100%;width:100%}}@media(max-width:768px){.nb-cards{grid-template-columns:repeat(2,1fr)}.nb-list-item{width:100%}}</style>';
    echo '<script>document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".nb-nav").forEach(function(n){var c=n.closest(".news-block-right"),p=n.querySelector(".nb-prev"),x=n.querySelector(".nb-next"),pp=parseInt(n.dataset.per)||5,t=parseInt(n.dataset.total)||5,cp=0,mp=Math.ceil(t/pp)-1;function u(){p.classList.toggle("disabled",cp<=0);x.classList.toggle("disabled",cp>=mp)}function s(pg){var l=c.querySelector(".nb-rank-list");if(l)l.style.transform="translateX(-"+pg*100+"%)"}p.addEventListener("click",function(){if(cp>0){cp--;s(cp);u()}});x.addEventListener("click",function(){if(cp<mp){cp++;s(cp);u()}});u()})})</script>';
}
[/hidecontent]