如何在含Podio脚本的WordPress站点中为指定文本设置颜色？

方法1：使用WordPress自定义CSS（优先尝试） #

如果Podio数据是页面加载时就渲染完成的，直接用CSS就能生效：

1. 登录你的WordPress后台，点击左侧菜单的「外观」→「自定义」。
2. 在自定义面板里找到「额外CSS」（部分主题可能叫「自定义CSS」）。
3. 粘贴以下代码到输入框，点击「发布」保存：

/* 将包含geannuleerd的文本设为红色 */
body :is(p, span, div, td):contains("geannuleerd") {
    color: red !important;
}

• 说明：!important是强制覆盖原有样式，确保红色生效；:contains会匹配所有包含指定文本的元素。

方法2：使用简单JavaScript脚本（针对动态加载的内容） #

如果Podio数据是页面加载后才异步渲染的，CSS可能无法捕获到内容，用脚本就能解决：

1. 打开目标页面的编辑器（WordPress后台「页面」→找到kpc页面→编辑）。
2. 添加一个「自定义HTML」区块（在区块列表里搜索「自定义HTML」）。
3. 粘贴以下代码到区块里，更新页面：

<script>
// 延迟2秒执行，确保Podio数据完全加载
setTimeout(function() {
    // 遍历页面所有元素
    document.querySelectorAll('body *').forEach(element => {
        // 如果元素里包含geannuleerd文本，就设为红色
        if (element.textContent.includes('geannuleerd')) {
            element.style.color = 'red';
        }
    });
}, 2000);
</script>

• 调整延迟时间：如果2秒不够，把2000改成更大的数字（比如3000代表3秒）。

额外提示：仅让单个词变红 #

如果不想让整个元素变红，只想让「geannuleerd」这个词单独高亮，用这段更精准的脚本：

<script>
setTimeout(function() {
    document.querySelectorAll('body *').forEach(element => {
        if (element.textContent.includes('geannuleerd') && !element.querySelector('.red-text')) {
            // 将文本替换成带红色样式的span标签
            element.innerHTML = element.innerHTML.replace(/geannuleerd/g, '<span style="color:red;">geannuleerd</span>');
        }
    });
}, 2000);
</script>

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