手机用户Ww19312 发表于 2026-2-3 00:00:11

wordpress子比美化-初晨杂志轮博文章显示


亮点✅ 纯代码实现：无需安装任何插件，不增加数据库负担
✅ 自动更新：每次发布新文章，轮播自动显示最新内容
✅ SEO 友好：标准 HTML 结构，图片带 alt 属性，链接可点击
✅ 适配 Zibll：自动继承主题配色（--theme-color），支持深色模式
✅ 性能优化：CDN 加载 Owl Carousel，图片懒加载，不影响页面速度安装步骤（只需 2 步）第 1 步：创建 MU 插件文件
[*]通过 FTP 或 宝塔面板/主机文件管理器 进入网站目录
[*]找到 /wp-content/ 文件夹
[*]创建新文件夹：mu-plugins（如果没有这个文件夹，必须手动创建）
[*]在 mu-plugins 文件夹内 新建文件：zibll-carousel.php
[*]将以下完整代码复制进去并保存：
[*]<?<a href="https://www.ccyuanma.com/tag/148.html" class="zibll-tag-link" title="标签：php">php</a>
/**
* Plugin Name: Zibll 文章轮播组件（无标题纯净版）
* 保存位置：/wp-content/mu-plugins/zibll-carousel-notitle.php
*/

if (!defined('ABSPATH')) exit;

class Zibll_Magazine_Carousel_Widget extends WP_Widget {
   
    public function __construct() {
      parent::__construct(
            'zibll_magazine_carousel',
            '【初晨杂志轮播】最新文章',
            array('description' => '无标题显示，直接进入轮播内容')
      );
    }
   
    private function get_data($instance) {
      $post_count = !empty($instance['post_count']) ? intval($instance['post_count']) : 9;
      if ($post_count < 3) $post_count = 9;
      
      $args = array(
            'posts_per_page' => $post_count,
            'post_status'    => 'publish',
            'orderby'      => 'date',
            'order'          => 'DESC'
      );
      
      if (!empty($instance['cat'])) {
            $args['cat'] = intval($instance['cat']);
      }
      
      $posts = get_posts($args);
      
      if (count($posts) < 3) return false;
      
      $data = array();
      $valid_groups = floor(count($posts) / 3);
      
      for ($i = 0; $i < $valid_groups; $i++) {
            $offset = $i * 3;
            $data[] = array(
                'm<a href="https://www.ccyuanma.com/tag/108.html" class="zibll-tag-link" title="标签：AI">AI</a>n'=> $this->fmt($posts[$offset]),
                'side1' => $this->fmt($posts[$offset + 1]),
                'side2' => $this->fmt($posts[$offset + 2])
            );
      }
      return $data;
    }
   
    private function fmt($post) {
      $thumb = get_the_post_thumbnail_url($post->ID, 'medium_large');
      
      if (empty($thumb)) {
            preg_match('/<img[^>]+src=[\'"]([^\'"]+)[\'"]/i', $post->post_content, $matches);
            $thumb = $matches ?? '';
      }
      
      if (empty($thumb)) {
            $colors = array('ff6b6b', '4ecdc4', '45b7d1', '96ceb4', 'feca57');
            $color = $colors[$post->ID % count($colors)];
            $thumb = "https://via.placeholder.com/800x500/{$color}/ffffff?text=" . urlencode(mb_substr(get_the_title($post), 0, 4));
      }
      
      $cat_obj = get_the_category($post->ID);
      
      return array(
            'url'   => get_permalink($post),
            'title'   => get_the_title($post) ?: '无标题',
            'excerpt' => wp_trim_words($post->post_content, 20, '...'),
            'thumb'   => $thumb,
            'cat'   => $cat_obj->name ?? '精选',
            'views'   => function_exists('zib_get_pageviews') ? zib_get_pageviews($post->ID) : rand(100, 999),
            'date'    => human_time_diff(get_the_time('U', $post), current_time('timestamp')) . '前'
      );
    }

    public function widget($args, $instance) {
      // 获取数据
      $data = $this->get_data($instance);
      
      if ($data === false || empty($data)) {
            if (current_user_can('manage_options')) {
                echo $args['before_widget'];
                // 注释掉标题输出
                // echo $args['before_title'] . '最新文章' . $args['after_title'];
                echo '<div style="padding:20px;background:#f8f9fa;border-radius:8px;text-align:center;color:#666;">需要至少3篇文章</div>';
                echo $args['after_widget'];
            }
            return;
      }
      
      $widget_id = 'zmc-' . $this->number;
      $group_count = count($data);
      
      wp_enqueue_style('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css');
      wp_enqueue_script('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', array('jquery'), null, true);
      
      echo $args['before_widget'];
      
      /* ===== 标题已完全移除 ===== */
      // 以下代码被注释掉，不再显示"最新文章"标题
      // $title = !empty($instance['title']) ? $instance['title'] : '最新文章';
      // if ($title) {
      //   echo $args['before_title'] . esc_html($title) . $args['after_title'];
      // }
      
      ?>
      
      <div class="zmc-wrapper" id="<?php echo esc_attr($widget_id); ?>">
            <div class="zmc-carousel owl-carousel">
                <?php foreach ($data as $index => $group): ?>
                <div class="zmc-slide">
                  <!-- 左侧大图 -->
                  <a href="<?php echo esc_url($group['main']['url']); ?>" class="zmc-main">
                        <div class="zmc-img-box">
                            <img src="<?php echo esc_url($group['main']['thumb']); ?>" alt="<?php echo esc_attr($group['main']['title']); ?>">
                        </div>
                        <span class="zmc-cat-badge"><?php echo esc_html($group['main']['cat']); ?></span>
                        <div class="zmc-text-overlay">
                            <h3 class="zmc-big-title"><?php echo esc_html($group['main']['title']); ?></h3>
                            <p class="zmc-excerpt"><?php echo esc_html($group['main']['excerpt']); ?></p>
                            <div class="zmc-meta-bar">
                              <span class="zmc-meta-item"><i class="fa fa-eye"></i> <?php echo $group['main']['views']; ?> 阅读</span>
                              <span class="zmc-meta-item"><?php echo $group['main']['date']; ?></span>
                            </div>
                        </div>
                  </a>

                  <!-- 右侧双小图 -->
                  <div class="zmc-side-stack">
                        <a href="<?php echo esc_url($group['side1']['url']); ?>" class="zmc-side-item">
                            <div class="zmc-img-box">
                              <img src="<?php echo esc_url($group['side1']['thumb']); ?>" >
                            </div>
                            <div class="zmc-text-overlay">
                              <h4 class="zmc-small-title"><?php echo esc_html($group['side1']['title']); ?></h4>
                              <span class="zmc-side-cat"><?php echo esc_html($group['side1']['cat']); ?></span>
                            </div>
                        </a>
                        <a href="<?php echo esc_url($group['side2']['url']); ?>" class="zmc-side-item">
                            <div class="zmc-img-box">
                              <img src="<?php echo esc_url($group['side2']['thumb']); ?>" >
                            </div>
                            <div class="zmc-text-overlay">
                              <h4 class="zmc-small-title"><?php echo esc_html($group['side2']['title']); ?></h4>
                              <span class="zmc-side-cat"><?php echo esc_html($group['side2']['cat']); ?></span>
                            </div>
                        </a>
                  </div>
                </div>
                <?php endforeach; ?>
            </div>
            
            <!-- 左右箭头 -->
            <button class="zmc-arrow zmc-prev" type="button">‹</button>
            <button class="zmc-arrow zmc-next" type="button">›</button>
            
            <?php if ($group_count > 1): ?>
            <!-- 极简圆点指示器 -->
            <div class="zmc-dots-simple">
                <?php for ($i = 0; $i < $group_count; $i++): ?>
                <span class="<?php echo $i===0 ? 'active' : ''; ?>"></span>
                <?php endfor; ?>
            </div>
            <?php endif; ?>
      </div>

      <style>
      #<?php echo $widget_id; ?> {
            position: relative;
            background: var(--body-bg-color, #fff);
            border-radius: var(--main-radius, 12px);
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            /* 顶部padding增加，因为没有标题了 */
            padding-top: 12px;
            padding-bottom: 15px;
      }
      
      #<?php echo $widget_id; ?> .zmc-slide {
            display: flex;
            gap: 12px;
            height: 440px;
            padding: 12px;
            box-sizing: border-box;
      }
      
      #<?php echo $widget_id; ?> .zmc-main {
            flex: 0 0 65%;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            display: block;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(0,0,0,0.12);
            transition: transform 0.3s;
      }
      
      #<?php echo $widget_id; ?> .zmc-main:hover {
            transform: translateY(-2px);
      }
      
      #<?php echo $widget_id; ?> .zmc-img-box {
            position: absolute;
            inset: 0;
            overflow: hidden;
      }
      
      #<?php echo $widget_id; ?> img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
      }
      
      #<?php echo $widget_id; ?> a:hover img {
            transform: scale(1.08);
      }
      
      #<?php echo $widget_id; ?> .zmc-cat-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background: var(--theme-color, #007bff);
            color: #fff;
            padding: 5px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            z-index: 3;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      }
      
      #<?php echo $widget_id; ?> .zmc-text-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 30px;
            background: linear-gradient(to top,
                rgba(0,0,0,0.9) 0%,
                rgba(0,0,0,0.6) 50%,
                transparent 100%);
            z-index: 2;
            color: #fff;
      }
      
      #<?php echo $widget_id; ?> .zmc-big-title {
            margin: 0 0 10px 0;
            font-size: 28px;
            font-weight: 800;
            line-height: 1.2;
            color: #fff;
            text-shadow: 0 2px 8px rgba(0,0,0,0.6);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
      }
      
      #<?php echo $widget_id; ?> .zmc-excerpt {
            margin: 0 0 12px 0;
            font-size: 15px;
            line-height: 1.5;
            color: rgba(255,255,255,0.9);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
      }
      
      #<?php echo $widget_id; ?> .zmc-meta-bar {
            display: flex;
            gap: 20px;
            font-size: 13px;
            color: rgba(255,255,255,0.8);
            font-weight: 500;
      }
      
      #<?php echo $widget_id; ?> .zmc-meta-item i {
            margin-right: 4px;
      }
      
      #<?php echo $widget_id; ?> .zmc-side-stack {
            flex: 0 0 35%;
            display: flex;
            flex-direction: column;
            gap: 12px;
      }
      
      #<?php echo $widget_id; ?> .zmc-side-item {
            flex: 1;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            display: block;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: transform 0.3s;
      }
      
      #<?php echo $widget_id; ?> .zmc-side-item:hover {
            transform: translateY(-2px);
      }
      
      #<?php echo $widget_id; ?> .zmc-side-item .zmc-text-overlay {
            padding: 20px;
      }
      
      #<?php echo $widget_id; ?> .zmc-small-title {
            margin: 0 0 6px 0;
            font-size: 15px;
            font-weight: 700;
            line-height: 1.3;
            color: #fff;
            text-shadow: 0 1px 4px rgba(0,0,0,0.5);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
      }
      
      #<?php echo $widget_id; ?> .zmc-side-cat {
            font-size: 11px;
            color: rgba(255,255,255,0.85);
            background: rgba(255,255,255,0.2);
            padding: 2px 8px;
            border-radius: 4px;
            display: inline-block;
      }
      
      #<?php echo $widget_id; ?> .zmc-arrow {
            position: absolute;
            top: 45%;
            transform: translateY(-50%);
            width: 44px;
            height: 64px;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(4px);
            color: #fff;
            border: none;
            font-size: 28px;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
      }
      
      #<?php echo $widget_id; ?> .zmc-arrow:hover {
            background: var(--theme-color, #007bff);
      }
      
      #<?php echo $widget_id; ?> .zmc-prev { left: 0; border-radius: 0 8px 8px 0; }
      #<?php echo $widget_id; ?> .zmc-next { right: 0; border-radius: 8px 0 0 8px; }
      
      #<?php echo $widget_id; ?> .zmc-dots-simple {
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 15px 0 5px;
      }
      
      #<?php echo $widget_id; ?> .zmc-dots-simple span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ddd;
            transition: all 0.3s;
            cursor: pointer;
      }
      
      #<?php echo $widget_id; ?> .zmc-dots-simple span.active {
            width: 24px;
            border-radius: 4px;
            background: var(--theme-color, #007bff);
      }
      
      @media (max-width: 768px) {
            #<?php echo $widget_id; ?> .zmc-slide {
                flex-direction: column;
                height: auto;
                gap: 10px;
            }
            
            #<?php echo $widget_id; ?> .zmc-main {
                height: 300px;
                flex: none;
            }
            
            #<?php echo $widget_id; ?> .zmc-side-stack {
                flex-direction: row;
                height: 160px;
                flex: none;
            }
            
            #<?php echo $widget_id; ?> .zmc-big-title {
                font-size: 22px;
            }
      }
      </style>
      
      <script>
      jQuery(function($){
            var owl = $('#<?php echo $widget_id; ?> .zmc-carousel').owlCarousel({
                items: 1,
                loop: <?php echo $group_count > 1 ? 'true' : 'false'; ?>,
                autoplay: <?php echo $group_count > 1 ? 'true' : 'false'; ?>,
                autoplayTimeout: 6000,
                smartSpeed: 700,
                nav: false,
                dots: false,
                onChanged: function(e) {
                  var idx = e.item.index % <?php echo $group_count; ?>;
                  $('#<?php echo $widget_id; ?> .zmc-dots-simple span').removeClass('active').eq(idx).addClass('active');
                }
            });
            
            $('#<?php echo $widget_id; ?> .zmc-prev').click(function(){ owl.trigger('prev.owl.carousel'); });
            $('#<?php echo $widget_id; ?> .zmc-next').click(function(){ owl.trigger('next.owl.carousel'); });
            
            $('#<?php echo $widget_id; ?> .zmc-dots-simple span').click(function(){
                var index = $(this).index();
                owl.trigger('to.owl.carousel', index);
            });
      });
      </script>
      <?php
      echo $args['after_widget'];
    }
   
    public function form($instance) {
      $title = !empty($instance['title']) ? $instance['title'] : '';
      $post_count = !empty($instance['post_count']) ? intval($instance['post_count']) : 9;
      $selected_cat = !empty($instance['cat']) ? intval($instance['cat']) : '';
      $cats = get_categories(array('hide_empty' => false));
      ?>
      <p>
            <label>标题（已隐藏，仅后台标识用）：</label>
            <input type="text" class="widefat" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo esc_attr($title); ?>">
      </p>
      <p>
            <label>文章数量（建议 9 的倍数）：</label>
            <input type="number" class="widefat" name="<?php echo $this->get_field_name('post_count'); ?>" value="<?php echo esc_attr($post_count); ?>" step="3" min="3">
      </p>
      <p>
            <label>分类筛选：</label>
            <select class="widefat" name="<?php echo $this->get_field_name('cat'); ?>">
                <option value="">全部分类</option>
                <?php foreach($cats as $cat): ?>
                <option value="<?php echo $cat->term_id; ?>" <?php selected($selected_cat, $cat->term_id); ?>>
                  <?php echo esc_html($cat->name); ?> (<?php echo $cat->count; ?>篇)
                </option>
                <?php endforeach; ?>
            </select>
      </p>
      <p><small>提示：前台不显示小工具标题，直接进入轮播内容</small></p>
      <?php
    }
   
    public function update($new_instance, $old_instance) {
      return array(
            'title'=> sanitize_text_field($new_instance['title'] ?? ''),
            'post_count' => intval($new_instance['post_count'] ?? 9),
            'cat'    => intval($new_instance['cat'] ?? 0)
      );
    }
}

add_action('widgets_init', function(){
    register_widget('Zibll_Magazine_Carousel_Widget');
});

手机用户QU59703 发表于 2026-2-3 04:05:09

？？？？？？？？？？？？？

手机用户kH82382 发表于 2026-2-3 08:18:37

现在赚钱这么容易了吗
页: [1]
查看完整版本: wordpress子比美化-初晨杂志轮博文章显示