WordPress画廊效果 - 图像/帖子逐个弹出

要实现WordPress画廊效果，可以使用JavaScript和CSS来逐个弹出图像或帖子。下面是一个示例解决方案的代码：

1. 在WordPress中创建一个自定义页面模板，例如"gallery-template.php"。

2. 在"gallery-template.php"文件中添加以下代码：

<?php
/*
Template Name: Gallery Template
*/
get_header(); // 获取WordPress主题头部

// 获取所有帖子或图像
$gallery_posts = get_posts(array(
    'post_type' => 'post', // 或者更改为'post'以获取帖子
    'posts_per_page' => -1,
));

?>

<div class="gallery-container">
    <?php foreach ($gallery_posts as $post) : setup_postdata($post); ?>
        <div class="gallery-item">
            <?php if (has_post_thumbnail()) : ?>
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail('medium'); ?>
                </a>
            <?php endif; ?>
            <h2><?php the_title(); ?></h2>
            <div class="gallery-content">
                <?php the_content(); ?>
            </div>
        </div>
    <?php endforeach; ?>
</div>

<?php
get_footer(); // 获取WordPress主题底部
?>

3. 在主题的style.css文件中添加以下CSS代码：

.gallery-container {
    display: flex;
    flex-wrap: wrap;
}

.gallery-item {
    flex-basis: 33.33%; /* 调整为适合您的布局 */
    padding: 10px;
}

.gallery-item img {
    width: 100%;
    height: auto;
}

.gallery-item h2 {
    margin-top: 10px;
}

.gallery-content {
    display: none;
}

.gallery-item:hover .gallery-content {
    display: block;
}

4. 在WordPress后台创建一个新页面，并选择"Gallery Template"作为页面模板。

5. 发布页面并访问该页面，您将看到图像或帖子以网格形式显示。当鼠标悬停在图像或帖子上时，相应的内容将逐个弹出显示。

请注意，这只是一个基本示例，您可以根据自己的需求进行自定义和修改。