设为首页收藏本站
QQ交流群：1025805328
  • 首页Portal
  • K网论坛BBS
  • 资源软件
  • K网圈子Group
  • 我的关注
  • 打赏赞助
    • 立即注册
    小K网-QQ活动_资源分享-源码基地-项目分享-安卓绿色软件基地»K网论坛 › 源码专区 › 网站源码 › wordpress子比美化-初晨杂志轮博文章显示
    返回列表 发布新帖

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

    2249 2
    手机用户Ww19312 发表于 昨天 00:00 | 查看全部 阅读模式 <

    马上注册，结交更多好友，享用更多功能，让你轻松玩转小K网。

    您需要 登录 才可以下载或查看，没有账号？立即注册 微信登录

    ×

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

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

      2. /**

      3.  * Plugin Name: Zibll 文章轮播组件（无标题纯净版）

      4.  * 保存位置：/wp-content/mu-plugins/zibll-carousel-notitle.php

      5.  */

      6. 

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

      8. 

      9. class Zibll_Magazine_Carousel_Widget extends WP_Widget {

      10.     

      11.     public function __construct() {

      12.         parent::__construct(

      13.             'zibll_magazine_carousel',

      14.             '【初晨杂志轮播】最新文章',

      15.             array('description' => '无标题显示，直接进入轮播内容')

      16.         );

      17.     }

      18.     

      19.     private function get_data($instance) {

      20.         $post_count = !empty($instance['post_count']) ? intval($instance['post_count']) : 9;

      21.         if ($post_count < 3) $post_count = 9;

      22.         

      23.         $args = array(

      24.             'posts_per_page' => $post_count,

      25.             'post_status'    => 'publish',

      26.             'orderby'        => 'date',

      27.             'order'          => 'DESC'

      28.         );

      29.         

      30.         if (!empty($instance['cat'])) {

      31.             $args['cat'] = intval($instance['cat']);

      32.         }

      33.         

      34.         $posts = get_posts($args);

      35.         

      36.         if (count($posts) < 3) return false;

      37.         

      38.         $data = array();

      39.         $valid_groups = floor(count($posts) / 3);

      40.         

      41.         for ($i = 0; $i < $valid_groups; $i++) {

      42.             $offset = $i * 3;

      43.             $data[] = array(

      44.                 'm<a href="https://www.ccyuanma.com/tag/108.html" class="zibll-tag-link" title="标签：AI">AI</a>n'  => $this->fmt($posts[$offset]),

      45.                 'side1' => $this->fmt($posts[$offset + 1]),

      46.                 'side2' => $this->fmt($posts[$offset + 2])

      47.             );

      48.         }

      49.         return $data;

      50.     }

      51.     

      52.     private function fmt($post) {

      53.         $thumb = get_the_post_thumbnail_url($post->ID, 'medium_large');

      54.         

      55.         if (empty($thumb)) {

      56.             preg_match('/<img[^>]+src=[\'"]([^\'"]+)[\'"]/i', $post->post_content, $matches);

      57.             $thumb = $matches[1] ?? '';

      58.         }

      59.         

      60.         if (empty($thumb)) {

      61.             $colors = array('ff6b6b', '4ecdc4', '45b7d1', '96ceb4', 'feca57');

      62.             $color = $colors[$post->ID % count($colors)];

      63.             $thumb = "https://via.placeholder.com/800x500/{$color}/ffffff?text=" . urlencode(mb_substr(get_the_title($post), 0, 4));

      64.         }

      65.         

      66.         $cat_obj = get_the_category($post->ID);

      67.         

      68.         return array(

      69.             'url'     => get_permalink($post),

      70.             'title'   => get_the_title($post) ?: '无标题',

      71.             'excerpt' => wp_trim_words($post->post_content, 20, '...'),

      72.             'thumb'   => $thumb,

      73.             'cat'     => $cat_obj[0]->name ?? '精选',

      74.             'views'   => function_exists('zib_get_pageviews') ? zib_get_pageviews($post->ID) : rand(100, 999),

      75.             'date'    => human_time_diff(get_the_time('U', $post), current_time('timestamp')) . '前'

      76.         );

      77.     }

      78. 

      79.     public function widget($args, $instance) {

      80.         // 获取数据

      81.         $data = $this->get_data($instance);

      82.         

      83.         if ($data === false || empty($data)) {

      84.             if (current_user_can('manage_options')) {

      85.                 echo $args['before_widget'];

      86.                 // 注释掉标题输出

      87.                 // echo $args['before_title'] . '最新文章' . $args['after_title'];

      88.                 echo '<div style="padding:20px;background:#f8f9fa;border-radius:8px;text-align:center;color:#666;">需要至少3篇文章</div>';

      89.                 echo $args['after_widget'];

      90.             }

      91.             return;

      92.         }

      93.         

      94.         $widget_id = 'zmc-' . $this->number;

      95.         $group_count = count($data);

      96.         

      97.         wp_enqueue_style('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css');

      98.         wp_enqueue_script('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', array('jquery'), null, true);

      99.         

      100.         echo $args['before_widget'];

      101.         

      102.         /* ===== 标题已完全移除 ===== */

      103.         // 以下代码被注释掉，不再显示"最新文章"标题

      104.         // $title = !empty($instance['title']) ? $instance['title'] : '最新文章';

      105.         // if ($title) {

      106.         //     echo $args['before_title'] . esc_html($title) . $args['after_title'];

      107.         // }

      108.         

      109.         ?>

      110.         

      111.         <div class="zmc-wrapper" id="<?php echo esc_attr($widget_id); ?>">

      112.             <div class="zmc-carousel owl-carousel">

      113.                 <?php foreach ($data as $index => $group): ?>

      114.                 <div class="zmc-slide">

      115.                     <!-- 左侧大图 -->

      116.                     <a href="<?php echo esc_url($group['main']['url']); ?>" class="zmc-main">

      117.                         <div class="zmc-img-box">

      118.                             <img src="<?php echo esc_url($group['main']['thumb']); ?>" alt="<?php echo esc_attr($group['main']['title']); ?>">

      119.                         </div>

      120.                         <span class="zmc-cat-badge"><?php echo esc_html($group['main']['cat']); ?></span>

      121.                         <div class="zmc-text-overlay">

      122.                             <h3 class="zmc-big-title"><?php echo esc_html($group['main']['title']); ?></h3>

      123.                             <p class="zmc-excerpt"><?php echo esc_html($group['main']['excerpt']); ?></p>

      124.                             <div class="zmc-meta-bar">

      125.                                 <span class="zmc-meta-item"><i class="fa fa-eye"></i> <?php echo $group['main']['views']; ?> 阅读</span>

      126.                                 <span class="zmc-meta-item"><?php echo $group['main']['date']; ?></span>

      127.                             </div>

      128.                         </div>

      129.                     </a>

      130. 

      131.                     <!-- 右侧双小图 -->

      132.                     <div class="zmc-side-stack">

      133.                         <a href="<?php echo esc_url($group['side1']['url']); ?>" class="zmc-side-item">

      134.                             <div class="zmc-img-box">

      135.                                 <img src="<?php echo esc_url($group['side1']['thumb']); ?>" >

      136.                             </div>

      137.                             <div class="zmc-text-overlay">

      138.                                 <h4 class="zmc-small-title"><?php echo esc_html($group['side1']['title']); ?></h4>

      139.                                 <span class="zmc-side-cat"><?php echo esc_html($group['side1']['cat']); ?></span>

      140.                             </div>

      141.                         </a>

      142.                         <a href="<?php echo esc_url($group['side2']['url']); ?>" class="zmc-side-item">

      143.                             <div class="zmc-img-box">

      144.                                 <img src="<?php echo esc_url($group['side2']['thumb']); ?>" >

      145.                             </div>

      146.                             <div class="zmc-text-overlay">

      147.                                 <h4 class="zmc-small-title"><?php echo esc_html($group['side2']['title']); ?></h4>

      148.                                 <span class="zmc-side-cat"><?php echo esc_html($group['side2']['cat']); ?></span>

      149.                             </div>

      150.                         </a>

      151.                     </div>

      152.                 </div>

      153.                 <?php endforeach; ?>

      154.             </div>

      155.             

      156.             <!-- 左右箭头 -->

      157.             <button class="zmc-arrow zmc-prev" type="button">‹</button>

      158.             <button class="zmc-arrow zmc-next" type="button">›</button>

      159.             

      160.             <?php if ($group_count > 1): ?>

      161.             <!-- 极简圆点指示器 -->

      162.             <div class="zmc-dots-simple">

      163.                 <?php for ($i = 0; $i < $group_count; $i++): ?>

      164.                 <span class="<?php echo $i===0 ? 'active' : ''; ?>"></span>

      165.                 <?php endfor; ?>

      166.             </div>

      167.             <?php endif; ?>

      168.         </div>

      169. 

      170.         <style>

      171.         #<?php echo $widget_id; ?> {

      172.             position: relative;

      173.             background: var(--body-bg-color, #fff);

      174.             border-radius: var(--main-radius, 12px);

      175.             overflow: hidden;

      176.             box-shadow: 0 4px 20px rgba(0,0,0,0.08);

      177.             /* 顶部padding增加，因为没有标题了 */

      178.             padding-top: 12px;

      179.             padding-bottom: 15px;

      180.         }

      181.         

      182.         #<?php echo $widget_id; ?> .zmc-slide {

      183.             display: flex;

      184.             gap: 12px;

      185.             height: 440px;

      186.             padding: 12px;

      187.             box-sizing: border-box;

      188.         }

      189.         

      190.         #<?php echo $widget_id; ?> .zmc-main {

      191.             flex: 0 0 65%;

      192.             position: relative;

      193.             border-radius: 10px;

      194.             overflow: hidden;

      195.             display: block;

      196.             text-decoration: none;

      197.             box-shadow: 0 4px 15px rgba(0,0,0,0.12);

      198.             transition: transform 0.3s;

      199.         }

      200.         

      201.         #<?php echo $widget_id; ?> .zmc-main:hover {

      202.             transform: translateY(-2px);

      203.         }

      204.         

      205.         #<?php echo $widget_id; ?> .zmc-img-box {

      206.             position: absolute;

      207.             inset: 0;

      208.             overflow: hidden;

      209.         }

      210.         

      211.         #<?php echo $widget_id; ?> img {

      212.             width: 100%;

      213.             height: 100%;

      214.             object-fit: cover;

      215.             transition: transform 0.6s ease;

      216.         }

      217.         

      218.         #<?php echo $widget_id; ?> a:hover img {

      219.             transform: scale(1.08);

      220.         }

      221.         

      222.         #<?php echo $widget_id; ?> .zmc-cat-badge {

      223.             position: absolute;

      224.             top: 15px;

      225.             left: 15px;

      226.             background: var(--theme-color, #007bff);

      227.             color: #fff;

      228.             padding: 5px 14px;

      229.             border-radius: 20px;

      230.             font-size: 13px;

      231.             font-weight: 600;

      232.             z-index: 3;

      233.             box-shadow: 0 2px 8px rgba(0,0,0,0.2);

      234.         }

      235.         

      236.         #<?php echo $widget_id; ?> .zmc-text-overlay {

      237.             position: absolute;

      238.             bottom: 0;

      239.             left: 0;

      240.             right: 0;

      241.             padding: 30px;

      242.             background: linear-gradient(to top, 

      243.                 rgba(0,0,0,0.9) 0%, 

      244.                 rgba(0,0,0,0.6) 50%, 

      245.                 transparent 100%);

      246.             z-index: 2;

      247.             color: #fff;

      248.         }

      249.         

      250.         #<?php echo $widget_id; ?> .zmc-big-title {

      251.             margin: 0 0 10px 0;

      252.             font-size: 28px;

      253.             font-weight: 800;

      254.             line-height: 1.2;

      255.             color: #fff;

      256.             text-shadow: 0 2px 8px rgba(0,0,0,0.6);

      257.             display: -webkit-box;

      258.             -webkit-line-clamp: 2;

      259.             -webkit-box-orient: vertical;

      260.             overflow: hidden;

      261.         }

      262.         

      263.         #<?php echo $widget_id; ?> .zmc-excerpt {

      264.             margin: 0 0 12px 0;

      265.             font-size: 15px;

      266.             line-height: 1.5;

      267.             color: rgba(255,255,255,0.9);

      268.             display: -webkit-box;

      269.             -webkit-line-clamp: 2;

      270.             -webkit-box-orient: vertical;

      271.             overflow: hidden;

      272.         }

      273.         

      274.         #<?php echo $widget_id; ?> .zmc-meta-bar {

      275.             display: flex;

      276.             gap: 20px;

      277.             font-size: 13px;

      278.             color: rgba(255,255,255,0.8);

      279.             font-weight: 500;

      280.         }

      281.         

      282.         #<?php echo $widget_id; ?> .zmc-meta-item i {

      283.             margin-right: 4px;

      284.         }

      285.         

      286.         #<?php echo $widget_id; ?> .zmc-side-stack {

      287.             flex: 0 0 35%;

      288.             display: flex;

      289.             flex-direction: column;

      290.             gap: 12px;

      291.         }

      292.         

      293.         #<?php echo $widget_id; ?> .zmc-side-item {

      294.             flex: 1;

      295.             position: relative;

      296.             border-radius: 10px;

      297.             overflow: hidden;

      298.             display: block;

      299.             text-decoration: none;

      300.             box-shadow: 0 4px 12px rgba(0,0,0,0.1);

      301.             transition: transform 0.3s;

      302.         }

      303.         

      304.         #<?php echo $widget_id; ?> .zmc-side-item:hover {

      305.             transform: translateY(-2px);

      306.         }

      307.         

      308.         #<?php echo $widget_id; ?> .zmc-side-item .zmc-text-overlay {

      309.             padding: 20px;

      310.         }

      311.         

      312.         #<?php echo $widget_id; ?> .zmc-small-title {

      313.             margin: 0 0 6px 0;

      314.             font-size: 15px;

      315.             font-weight: 700;

      316.             line-height: 1.3;

      317.             color: #fff;

      318.             text-shadow: 0 1px 4px rgba(0,0,0,0.5);

      319.             display: -webkit-box;

      320.             -webkit-line-clamp: 2;

      321.             -webkit-box-orient: vertical;

      322.             overflow: hidden;

      323.         }

      324.         

      325.         #<?php echo $widget_id; ?> .zmc-side-cat {

      326.             font-size: 11px;

      327.             color: rgba(255,255,255,0.85);

      328.             background: rgba(255,255,255,0.2);

      329.             padding: 2px 8px;

      330.             border-radius: 4px;

      331.             display: inline-block;

      332.         }

      333.         

      334.         #<?php echo $widget_id; ?> .zmc-arrow {

      335.             position: absolute;

      336.             top: 45%;

      337.             transform: translateY(-50%);

      338.             width: 44px;

      339.             height: 64px;

      340.             background: rgba(0,0,0,0.4);

      341.             backdrop-filter: blur(4px);

      342.             color: #fff;

      343.             border: none;

      344.             font-size: 28px;

      345.             cursor: pointer;

      346.             z-index: 10;

      347.             transition: all 0.3s;

      348.             display: flex;

      349.             align-items: center;

      350.             justify-content: center;

      351.         }

      352.         

      353.         #<?php echo $widget_id; ?> .zmc-arrow:hover {

      354.             background: var(--theme-color, #007bff);

      355.         }

      356.         

      357.         #<?php echo $widget_id; ?> .zmc-prev { left: 0; border-radius: 0 8px 8px 0; }

      358.         #<?php echo $widget_id; ?> .zmc-next { right: 0; border-radius: 8px 0 0 8px; }

      359.         

      360.         #<?php echo $widget_id; ?> .zmc-dots-simple {

      361.             display: flex;

      362.             justify-content: center;

      363.             gap: 8px;

      364.             padding: 15px 0 5px;

      365.         }

      366.         

      367.         #<?php echo $widget_id; ?> .zmc-dots-simple span {

      368.             width: 8px;

      369.             height: 8px;

      370.             border-radius: 50%;

      371.             background: #ddd;

      372.             transition: all 0.3s;

      373.             cursor: pointer;

      374.         }

      375.         

      376.         #<?php echo $widget_id; ?> .zmc-dots-simple span.active {

      377.             width: 24px;

      378.             border-radius: 4px;

      379.             background: var(--theme-color, #007bff);

      380.         }

      381.         

      382.         @media (max-width: 768px) {

      383.             #<?php echo $widget_id; ?> .zmc-slide {

      384.                 flex-direction: column;

      385.                 height: auto;

      386.                 gap: 10px;

      387.             }

      388.             

      389.             #<?php echo $widget_id; ?> .zmc-main {

      390.                 height: 300px;

      391.                 flex: none;

      392.             }

      393.             

      394.             #<?php echo $widget_id; ?> .zmc-side-stack {

      395.                 flex-direction: row;

      396.                 height: 160px;

      397.                 flex: none;

      398.             }

      399.             

      400.             #<?php echo $widget_id; ?> .zmc-big-title {

      401.                 font-size: 22px;

      402.             }

      403.         }

      404.         </style>

      405.         

      406.         <script>

      407.         jQuery(function($){

      408.             var owl = $('#<?php echo $widget_id; ?> .zmc-carousel').owlCarousel({

      409.                 items: 1,

      410.                 loop: <?php echo $group_count > 1 ? 'true' : 'false'; ?>,

      411.                 autoplay: <?php echo $group_count > 1 ? 'true' : 'false'; ?>,

      412.                 autoplayTimeout: 6000,

      413.                 smartSpeed: 700,

      414.                 nav: false,

      415.                 dots: false,

      416.                 onChanged: function(e) {

      417.                     var idx = e.item.index % <?php echo $group_count; ?>;

      418.                     $('#<?php echo $widget_id; ?> .zmc-dots-simple span').removeClass('active').eq(idx).addClass('active');

      419.                 }

      420.             });

      421.             

      422.             $('#<?php echo $widget_id; ?> .zmc-prev').click(function(){ owl.trigger('prev.owl.carousel'); });

      423.             $('#<?php echo $widget_id; ?> .zmc-next').click(function(){ owl.trigger('next.owl.carousel'); });

      424.             

      425.             $('#<?php echo $widget_id; ?> .zmc-dots-simple span').click(function(){

      426.                 var index = $(this).index();

      427.                 owl.trigger('to.owl.carousel', index);

      428.             });

      429.         });

      430.         </script>

      431.         <?php

      432.         echo $args['after_widget'];

      433.     }

      434.     

      435.     public function form($instance) {

      436.         $title = !empty($instance['title']) ? $instance['title'] : '';

      437.         $post_count = !empty($instance['post_count']) ? intval($instance['post_count']) : 9;

      438.         $selected_cat = !empty($instance['cat']) ? intval($instance['cat']) : '';

      439.         $cats = get_categories(array('hide_empty' => false));

      440.         ?>

      441.         <p>

      442.             <label>标题（已隐藏，仅后台标识用）：</label>

      443.             <input type="text" class="widefat" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo esc_attr($title); ?>">

      444.         </p>

      445.         <p>

      446.             <label>文章数量（建议 9 的倍数）：</label>

      447.             <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">

      448.         </p>

      449.         <p>

      450.             <label>分类筛选：</label>

      451.             <select class="widefat" name="<?php echo $this->get_field_name('cat'); ?>">

      452.                 <option value="">全部分类</option>

      453.                 <?php foreach($cats as $cat): ?>

      454.                 <option value="<?php echo $cat->term_id; ?>" <?php selected($selected_cat, $cat->term_id); ?>>

      455.                     <?php echo esc_html($cat->name); ?> (<?php echo $cat->count; ?>篇)

      456.                 </option>

      457.                 <?php endforeach; ?>

      458.             </select>

      459.         </p>

      460.         <p><small>提示：前台不显示小工具标题，直接进入轮播内容</small></p>

      461.         <?php

      462.     }

      463.     

      464.     public function update($new_instance, $old_instance) {

      465.         return array(

      466.             'title'  => sanitize_text_field($new_instance['title'] ?? ''),

      467.             'post_count' => intval($new_instance['post_count'] ?? 9),

      468.             'cat'    => intval($new_instance['cat'] ?? 0)

      469.         );

      470.     }

      471. }

      472. 

      473. add_action('widgets_init', function(){

      474.     register_widget('Zibll_Magazine_Carousel_Widget');

      475. });
      复制代码

    wordpresscom下载
    回复

    使用道具 举报

    相关帖子

    评论2

    手机用户QU59703Lv.2 发表于 昨天 04:05 | 查看全部 <
    ？？？？？？？？？？？？？
    回复

    使用道具 举报

    手机用户kH82382Lv.2 发表于 昨天 08:18 | 查看全部 <
    现在赚钱这么容易了吗
    回复

    使用道具 举报

    返回列表 发布新帖

    回复
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册 微信登录

    本版积分规则

    上一主题     下一主题
    您需要 登录 后才可以回复，轻松玩转社区，没有帐号？立即注册
    快速回复
    小K网承接程序二开，各类小程序定制开发，价格优惠

    投诉/建议联系微信

    +xiaokheik

    |Archiver|手机版|小黑屋

    Copyright © 2026 小K网 版权所有 备案号： 蜀ICP备18015321号-3

    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表