如何仅显示有值的自定义字段并解决LightSpeed Cash插件兼容问题

1. 最优方案：PHP层面控制渲染（彻底解决闪现+缓存问题） #

当前问题的核心是你先渲染了所有字段的HTML，再用JS删除空字段，导致页面加载时会先显示空字段的样式，加上LSCache缓存了初始渲染的页面，闪现问题更明显。直接从PHP层面判断，只输出有值的字段，就能从根源解决：

替换你当前的PHP代码为：

<?php
// 获取并清理字段值
$freeware = trim(get_post_meta($post->ID, 'freeware', true));
$apk = trim(get_post_meta($post->ID, 'apk', true));
$trial = trim(get_post_meta($post->ID, 'trial', true));

// 仅输出非空字段
if (!empty($freeware)) {
    echo '<span class="freeware">' . esc_html($freeware) . '</span>';
}
if (!empty($apk)) {
    echo '<span class="apk">' . esc_html($apk) . '</span>';
}
if (!empty($trial)) {
    echo '<span class="trial">' . esc_html($trial) . '</span>';
}
?>

然后删除原来的JS删除逻辑，因为已经不会输出空字段了。

这样LSCache缓存的是已经处理好的页面，不会包含空字段的HTML，自然不会有闪现问题，也不需要依赖JS执行。

2. 适配LSCache的额外操作 #

如果之前已经缓存了旧页面，需要登录后台清空LSCache的缓存，让新的处理后的页面被缓存。

3. 次优方案：无法修改PHP时的JS+CSS修复 #

如果因为主题/插件限制无法修改PHP代码，用以下方法避免闪现：

• 先在CSS中默认隐藏所有字段：

.freeware, .apk, .trial {
    display: none !important;
}

• 修改JS逻辑，仅显示有值的字段：

document.addEventListener('DOMContentLoaded', function() {
    const fieldSelectors = ['.freeware', '.apk', '.trial', '.author'];
    
    fieldSelectors.forEach(selector => {
        const el = document.querySelector(selector);
        if (!el) return;
        
        const text = el.textContent.trim();
        if (text === '') {
            el.remove();
        } else {
            el.style.display = 'inline-block';
        }
    });
});

这种方法通过CSS先隐藏所有字段，等JS执行后再显示有值的，避免闪现，但本质还是依赖JS，不如PHP方案可靠。

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