如何在WordPress中实现点击小图切换大图的降临日历？

完全可以通过 PHP 结合前端代码实现你的需求，下面提供两种可行方案，根据使用场景选择：

方案一：无刷新切换（推荐，用户体验更流畅） #

用 PHP 生成日历结构，搭配 JavaScript 实现点击小图/数字时无刷新切换大图。

步骤1：准备图片 #

将25张小图（命名为SMALL01.png至SMALL25.png）和25张大图（命名为LARGE01.png至LARGE25.png）上传到 WordPress 主题的images文件夹（路径：/wp-content/themes/你的主题名/images/），无该文件夹则直接新建。

步骤2：添加短码代码 #

将以下代码添加到主题的functions.php文件（建议使用子主题，避免主题更新丢失代码）：

function advent_calendar_shortcode() {
    ob_start();
    ?>
    <div class="advent-calendar">
        <!-- 大图展示区 -->
        <div class="advent-large-image">
            <img id="current-large-img" src="<?php echo get_template_directory_uri(); ?>/images/LARGE01.png" alt="降临日历大图" />
        </div>
        
        <!-- 小图&数字网格 -->
        <div class="advent-small-grid">
            <?php for ($i = 1; $i <= 25; $i++) {
                $day_num = sprintf('%02d', $i);
                ?>
                <div class="advent-item" data-large-src="<?php echo get_template_directory_uri(); ?>/images/LARGE<?php echo $day_num; ?>.png">
                    <img src="<?php echo get_template_directory_uri(); ?>/images/SMALL<?php echo $day_num; ?>.png" alt="日期<?php echo $i; ?>" />
                    <span class="advent-number"><?php echo $i; ?></span>
                </div>
            <?php } ?>
        </div>
    </div>

    <script>
        // 监听点击事件切换大图
        document.addEventListener('DOMContentLoaded', () => {
            const items = document.querySelectorAll('.advent-item');
            const largeImg = document.getElementById('current-large-img');
            
            items.forEach(item => {
                item.addEventListener('click', () => {
                    const targetSrc = item.getAttribute('data-large-src');
                    const dayNum = item.querySelector('.advent-number').textContent;
                    largeImg.setAttribute('src', targetSrc);
                    largeImg.setAttribute('alt', '日期' + dayNum);
                });
            });
        });
    </script>

    <style>
        /* 基础样式，可按需修改 */
        .advent-calendar {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .advent-large-image {
            margin-bottom: 30px;
            text-align: center;
        }
        .advent-large-image img {
            max-width: 100%;
            height: auto;
            border: 2px solid #ddd;
        }
        .advent-small-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
        }
        .advent-item {
            cursor: pointer;
            text-align: center;
            border: 1px solid #eee;
            padding: 10px;
            transition: all 0.3s ease;
        }
        .advent-item:hover {
            border-color: #333;
            transform: translateY(-2px);
        }
        .advent-item img {
            max-width: 100%;
            height: auto;
            margin-bottom: 8px;
        }
        .advent-number {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
        }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('advent_calendar', 'advent_calendar_shortcode');

步骤3：使用短码 #

在 WordPress 后台新建或编辑页面，在编辑器中插入短码[advent_calendar]，发布后即可看到降临日历效果，点击任意小图或数字就能切换对应大图。

方案二：URL 参数刷新切换（无 JS 依赖） #

如果偏好纯 PHP 实现，可通过 URL 参数传递日期，页面刷新后展示对应大图。

步骤1：准备图片 #

同方案一，将图片放入主题images文件夹。

步骤2：创建自定义页面模板 #

在主题文件夹中新建page-advent.php文件，添加以下代码：

<?php
/*
Template Name: 降临日历页面
*/
get_header();

// 获取当前选中日期，默认显示第1天
$selected_day = isset($_GET['day']) ? intval($_GET['day']) : 1;
// 限制日期范围在1-25之间
$selected_day = max(1, min(25, $selected_day));
$day_str = sprintf('%02d', $selected_day);
?>

<div class="advent-calendar">
    <!-- 大图展示区 -->
    <div class="advent-large-image">
        <img src="<?php echo get_template_directory_uri(); ?>/images/LARGE<?php echo $day_str; ?>.png" alt="日期<?php echo $selected_day; ?>" />
    </div>
    
    <!-- 小图&数字网格 -->
    <div class="advent-small-grid">
        <?php for ($i = 1; $i <= 25; $i++) {
            $i_str = sprintf('%02d', $i);
            $active_class = ($i == $selected_day) ? 'advent-active' : '';
            ?>
            <a href="<?php echo add_query_arg('day', $i, get_permalink()); ?>" class="advent-item <?php echo $active_class; ?>">
                <img src="<?php echo get_template_directory_uri(); ?>/images/SMALL<?php echo $i_str; ?>.png" alt="日期<?php echo $i; ?>" />
                <span class="advent-number"><?php echo $i; ?></span>
            </a>
        <?php } ?>
    </div>
</div>

<style>
    /* 基础样式，可按需修改 */
    .advent-calendar {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    .advent-large-image {
        margin-bottom: 30px;
        text-align: center;
    }
    .advent-large-image img {
        max-width: 100%;
        height: auto;
        border: 2px solid #ddd;
    }
    .advent-small-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }
    .advent-item {
        display: block;
        text-decoration: none;
        text-align: center;
        border: 1px solid #eee;
        padding: 10px;
        transition: all 0.3s ease;
    }
    .advent-item:hover, .advent-active {
        border-color: #333;
        background-color: #f5f5f5;
    }
    .advent-item img {
        max-width: 100%;
        height: auto;
        margin-bottom: 8px;
    }
    .advent-number {
        font-size: 1.2rem;
        font-weight: bold;
        color: #333;
    }
</style>

<?php get_footer(); ?>

步骤3：创建页面 #

在 WordPress 后台新建页面，右侧“页面属性”中选择“降临日历页面”模板，发布后即可访问。点击小图或数字时，页面会刷新并展示对应日期的大图。

注意事项 #

• 如果图片存放在媒体库，可将代码中的get_template_directory_uri() . '/images/XXX.png'替换为对应图片的实际 URL（可在媒体库中复制）。
• 样式代码可根据网站主题自定义调整，比如网格列数、边框颜色、hover 效果等。

内容的提问来源于stack exchange，提问作者Hans Stavleu