WordPress主题Ajax调用后缩略图丢失CSS适配样式问题

Twenty Twenty One主题初始加载页面时，前端脚本（twentytwentyone.js内置的图片尺寸处理逻辑）会为文章特色图添加自适应内联样式。但通过Ajax加载新内容后，这段脚本不会自动重新执行，导致新插入的图片缺少对应样式，无法适配容器。WordPress原生的get_the_post_thumbnail()函数本身不会生成这些内联样式，完全是主题前端脚本的附加行为。

推荐优先使用CSS方案，彻底摆脱对JS的依赖，适配所有场景：

方案1：CSS替代内联样式（最稳定） #

直接通过CSS定义容器和图片的自适应规则，不管初始加载还是Ajax加载的图片都能自动适配：

/* 替换为你的文章网格容器类名 */
.grid-container figure {
    width: 100%;
    max-width: 640px;
    position: relative;
    padding-bottom: 67.97%; /* 对应原内联样式的高宽比 */
    overflow: hidden;
}

.grid-container figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 可选，保持图片比例且填充容器，避免拉伸 */
}

将.grid-container替换为你实际使用的文章网格容器的CSS类名即可。

方案2：Ajax加载后重新触发主题图片处理脚本 #

如果想沿用主题原有的JS逻辑，可在Ajax请求成功、新内容插入页面后，手动调用主题的图片尺寸处理函数：

// 示例Ajax成功回调函数
function handleAjaxSuccess(response) {
    // 将新文章内容插入到网格容器
    const gridContainer = document.querySelector('.grid-container');
    gridContainer.insertAdjacentHTML('beforeend', response.html);
    
    // 调用主题内置的图片处理函数（需确保该函数全局可访问）
    if (typeof twentytwentyoneSetFeaturedImageDimensions === 'function') {
        twentytwentyoneSetFeaturedImageDimensions();
    }
}

注：如果主题脚本经过压缩或模块化处理，可能需要调整函数名，可通过浏览器开发者工具的控制台确认全局作用域下的函数名称。

方案3：PHP输出时手动添加内联样式 #

直接在调用get_the_post_thumbnail()时，通过参数手动指定内联样式，确保所有场景输出的图片都带样式：

<figure>
    <?php
    echo get_the_post_thumbnail(
        null, 
        'post-thumbnail', 
        array(
            'style' => 'width:100%;height:67.97%;max-width:640px;'
        )
    );
    ?>
</figure>

此方法硬编码了高宽比，若后续需要调整响应式布局，维护成本较高，仅推荐临时应急使用。

内容的提问来源于stack exchange，提问作者Pedro F