饺子分享 喜欢的可以拿去耍哈

这个相册没有经过测试，是否可用 请自测

使用教程（分步说明）

第一步：安装插件

在wp-content/plugins/目录下创建yyk-gallery文件夹

将下面代码保存为yyk-gallery-widget.php

登录WordPress后台 → 插件 → 启用"YYK相册小工具"

第二步：获取分类ID

进入文章 → 分类将鼠标悬停在目标分类的"编辑"按钮上查看浏览器状态栏显示的tag_ID=数字即为分类ID 7第三步：配置小工具

进入外观 → 小工具在可用小工具列表中找到"YYK滚动相册"拖动到侧边栏或其他小工具区域填写参数：分类ID：第二步获取的ID更多链接：相册详情页URL

代码如下

<?php
/*
Plugin Name: YYK相册小工具
Description: 显示指定分类的图片滚动相册
Version: 1.0
Author: YYK
*/

class YYK_Gallery_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'yyk_gallery_widget',
            'YYK滚动相册',
            array('description' => '显示指定分类的图片滚动相册')
        );
    }

    public function form($instance) {
        $cat_id = !empty($instance['cat_id']) ? $instance['cat_id'] : '';
        $more_url = !empty($instance['more_url']) ? $instance['more_url'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('cat_id'); ?>">分类ID：</label>
            <input class="widefat" 
                   id="<?php echo $this->get_field_id('cat_id'); ?>" 
                   name="<?php echo $this->get_field_name('cat_id'); ?>" 
                   type="number" 
                   value="<?php echo esc_attr($cat_id); ?>">
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('more_url'); ?>">更多链接：</label>
            <input class="widefat" 
                   id="<?php echo $this->get_field_id('more_url'); ?>" 
                   name="<?php echo $this->get_field_name('more_url'); ?>" 
                   type="url" 
                   value="<?php echo esc_url($more_url); ?>">
        </p>
        <?php 
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['cat_id'] = (!empty($new_instance['cat_id'])) ? absint($new_instance['cat_id']) : '';
        $instance['more_url'] = (!empty($new_instance['more_url'])) ? esc_url_raw($new_instance['more_url']) : '';
        return $instance;
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        ?>
        <div class="yyk-gallery-wrapper">
            <div class="yyk-header">
                <h3 class="yyk-title">YYK相册</h3>
                <div class="yyk-joke" id="yykJoke">正在加载笑话...</div>
                <a href="<?php echo esc_url($instance['more_url']); ?>" class="yyk-more">更多美图</a>
            </div>
            <div class="yyk-gallery-container">
                <div class="yyk-scroll-box">
                    <?php 
                    $query = new WP_Query(array(
                        'cat' => $instance['cat_id'],
                        'posts_per_page' => -1
                    ));
                    
                    while ($query->have_posts()) : $query->the_post();
                        $content = get_the_content();
                        preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches);
                        foreach ($matches[1] as $image_url) {
                            echo '<div class="yyk-img-frame">';
                            echo '<img src="'.esc_url($image_url).'" alt="'.esc_attr(get_the_title()).'">';
                            echo '</div>';
                        }
                    endwhile;
                    wp_reset_postdata();
                    ?>
                </div>
            </div>
        </div>
        
        <style>
.yyk-gallery-wrapper {
    position: relative;
    padding: 20px;
    margin: 20px 0;
}

.yyk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.yyk-scroll-box {
    display: flex;
    animation: scroll 40s linear infinite;
    padding: 15px 0;
}

.yyk-scroll-box:hover {
    animation-play-state: paused;
}

.yyk-img-frame {
    position: relative;
    min-width: 200px;
    height: 150px;
    margin: 0 15px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96c93d, #ffd700, #ff8c00, #ff1493);
    background-size: 400% 400%;
    animation: borderGlow 8s ease infinite;
    padding: 3px;
}

.yyk-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes borderGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.yyk-title, .yyk-joke, .yyk-more {
    background: linear-gradient(90deg, #ff3366, #00ccff, #ffcc00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: textGlow 3s ease infinite;
}

@keyframes textGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (max-width: 768px) {
    .yyk-img-frame {
        min-width: 150px;
        height: 120px;
    }
    
    .yyk-header {
        flex-direction: column;
        text-align: center;
    }
    
    .yyk-joke {
        margin: 10px 0;
    }
}
        </style>
        
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            fetch('https://api.vvhan.com/api/text/joke')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('yykJoke').textContent = data.data || "今天没有笑话，保持微笑吧~";
                })
                .catch(() => {
                    document.getElementById('yykJoke').textContent = "笑话加载失败，刷新试试~";
                });
        });
        </script>
        <?php
        echo $args['after_widget'];
    }
}

function register_yyk_gallery_widget() {
    register_widget('YYK_Gallery_Widget');
}
add_action('widgets_init', 'register_yyk_gallery_widget');