如何在静态HTML首页展示WordPress子目录博客的最新文章及特色图片

嘿，我明白你现在的困扰了——你在WordPress主题的index.php里加了the_post_thumbnail()代码，但静态HTML首页根本没用到这个模板，所以自然出不来图片。静态页默认不加载WordPress的核心函数，得换个思路来实现，给你两个实用的方案：

方案一：在静态页中引入WordPress环境（PHP方式） #

这个方法适合愿意把静态HTML改成PHP文件的情况，直接调用WordPress的查询功能来获取文章和图片：

1. 修改静态页后缀：把你的静态首页从index.html改成index.php（如果服务器允许.html解析PHP，这步可以跳过，但改后缀更稳妥）。
2. 引入WordPress核心文件：在PHP文件的最顶部添加代码，路径要对应你的WordPress子目录（比如子目录是/blog，就用下面的路径）：

<?php
// 引入WordPress核心，路径根据你的子目录调整
require('./blog/wp-load.php');

// 查询最新3篇带特色图片的已发布文章
$latest_posts = new WP_Query(array(
    'posts_per_page' => 3,
    'post_status' => 'publish',
    // 只查询有特色图片的文章
    'meta_query' => array(
        array(
            'key' => '_thumbnail_id',
            'compare' => 'EXISTS'
        )
    )
));
?>

3. 在页面中渲染文章和图片：找到你要展示文章的位置，替换成下面的循环代码，它会自动输出特色图片、标题和摘要：

<?php if ($latest_posts->have_posts()) : ?>
    <?php while ($latest_posts->have_posts()) : $latest_posts->the_post(); ?>
        <div class="blog-post-item">
            <?php if (has_post_thumbnail()) : ?>
                <!-- 这里可以指定图片尺寸，比如'large'/'medium'，或者自定义尺寸名称 -->
                <img src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'medium'); ?>" 
                     alt="<?php echo esc_attr(get_the_title()); ?>" 
                     class="blog-photo">
            <?php endif; ?>
            <h3><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h3>
            <p><?php the_excerpt(); ?></p>
        </div>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); // 重置查询，避免影响其他功能 ?>
<?php endif; ?>

注意事项 #

• 确保wp-load.php的路径正确，比如WordPress在根目录的blog文件夹里，就用./blog/wp-load.php；如果是二级域名，可能需要调整为绝对路径。
• 文章必须设置了特色图片才会显示，has_post_thumbnail()判断可以避免空图片占位。

方案二：用WordPress REST API（纯前端方式） #

如果不想改静态页的PHP后缀，用JavaScript调用WordPress的REST API来获取数据是更灵活的选择，适合纯静态页面：

1. 在静态HTML中添加容器和脚本：找到你要展示文章的位置，添加一个容器，然后插入下面的JS代码（记得替换子目录路径）：

<!-- 文章展示容器 -->
<div id="latest-wordpress-posts"></div>

<script>
// 替换成你的WordPress子目录API地址，比如子目录是/blog就用这个
const wpApiEndpoint = './blog/wp-json/wp/v2/posts?per_page=3&_embed=1';

// 请求文章数据
fetch(wpApiEndpoint)
    .then(response => response.json())
    .then(posts => {
        const container = document.getElementById('latest-wordpress-posts');
        posts.forEach(post => {
            // 获取特色图片链接，优先取medium尺寸，没有就用原图
            let featuredImage = '';
            if (post._embedded?.['wp:featuredmedia']?.[0]) {
                const media = post._embedded['wp:featuredmedia'][0];
                featuredImage = media.media_details?.sizes?.medium?.source_url || media.source_url;
            }

            // 渲染文章内容
            const postHtml = `
                <div class="blog-post-item">
                    ${featuredImage ? `<img src="${featuredImage}" alt="${post.title.rendered}" class="blog-photo">` : ''}
                    <h3><a href="${post.link}" target="_blank">${post.title.rendered}</a></h3>
                    <div>${post.excerpt.rendered}</div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', postHtml);
        });
    })
    .catch(error => console.error('加载文章失败:', error));
</script>

注意事项 #

• WordPress默认启用REST API，如果你的站点禁用了，需要重新开启（一般在主题或插件设置里调整）。
• 如果静态页和WordPress不在同一个域名下，需要在WordPress后台设置CORS允许跨域请求（可以用插件或者修改functions.php实现）。

这两个方案都能解决你的问题，选哪个看你更习惯哪种开发方式~

内容的提问来源于stack exchange，提问作者Aljosa Boskovic