WordPress自定义HTML小部件日期化图片链接失效问题排查与修正

首先咱们拆解下你遇到的问题：

你试图在<img>的src属性里直接嵌入JavaScript代码生成动态链接，但这种写法本身就不符合HTML规则——HTML属性值里不能直接嵌套<script>标签，浏览器会把这段脚本当成普通字符串解析；再加上WordPress自定义HTML小部件的安全过滤机制，脚本标签被转义成了%3Cscript%20type=javascript%3Elink%3C/script%3E，自然就变成了无效链接，而图片的alt属性“aaa”就直接显示了出来。

修正思路 #

正确的做法是先创建图片元素占位，再用JavaScript动态生成URL并赋值给它的src属性，而不是把脚本塞进src属性里。

修正后的代码示例 #

把这段代码粘贴到你的自定义HTML小部件中即可：

<!-- 先放一个带ID的图片占位符，初始隐藏避免加载错误 -->
<img id="daily-news-image" alt="Daily Featured Image" style="display: none;">

<script>
// 等待页面DOM加载完成再执行脚本，确保能找到图片元素
document.addEventListener('DOMContentLoaded', function() {
    // 1. 获取当前日期并格式化为你需要的格式（示例为YYYYMMDD）
    const today = new Date();
    const year = today.getFullYear();
    // 月份从0开始，所以要+1，并且补零（比如9月变成09）
    const month = String(today.getMonth() + 1).padStart(2, '0');
    // 日期补零（比如5号变成05）
    const day = String(today.getDate()).padStart(2, '0');

    // 2. 生成对应的图片URL，替换成你的实际图片路径规则
    const imageUrl = `http://news.piyarawatan.com/images/${year}${month}${day}.jpg`;

    // 3. 获取图片元素并设置src，同时显示它
    const imgElement = document.getElementById('daily-news-image');
    imgElement.src = imageUrl;
    imgElement.style.display = 'block';

    // 可选：添加图片加载失败的 fallback，显示默认图
    imgElement.onerror = function() {
        this.src = 'http://news.piyarawatan.com/images/default-news-image.jpg';
    };
});
</script>

额外注意事项 #

1. WordPress脚本过滤问题：如果你的主题或者安全插件（比如Wordfence）阻止了自定义HTML小部件中的脚本执行，可以试试：
   • 使用「Code Snippets」插件添加这段脚本（更安全，也方便管理）
   • 将脚本添加到主题的functions.php文件中，通过wp_enqueue_script加载（需要基础PHP知识）
2. 日期格式调整：如果你的图片命名规则不是YYYYMMDD，可以修改代码里的日期拼接逻辑，比如改成${year}-${month}-${day}之类的，适配你的实际路径。

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