WordPress+Divi自定义博客模块背景图片URL加载异常求助

核心问题分析 #

你当前的JS代码存在致命错误：前端JavaScript环境无法解析PHP代码，所以imageUrl变量实际拿到的是"<?php echo esc_js(...); ?>"这段字符串，而非真实的图片URL，导致背景无法加载。

修复方案（二选一即可） #

方案1：直接在PHP中设置背景（推荐，无需JS） #

既然你已经在子主题的Blog.php中能获取到$featured_portrait（图片URL），可以直接给模块添加内联样式，不需要依赖JS：

找到你给模块添加acf-blog-bg类的位置，修改为：

// 假设原模块容器的输出代码类似这样，添加style属性
echo '<div class="acf-blog-bg" ' . (!empty($featured_portrait) ? 'style="background-image: url(' . esc_url($featured_portrait) . ');"' : '') . '>';

如果找不到模块容器的输出位置，也可以在你已添加的featured_portrait代码块附近，输出一个样式标签：

$featured_portrait = get_post_meta($post->ID, 'featured_portrait', true) ? get_post_meta($post->ID, 'featured_portrait', true) : "";
if($featured_portrait != "") { 
    echo '<style>.acf-blog-bg { background-image: url(' . esc_url($featured_portrait) . ') !important; }</style>';
    // 保留你原有的图片输出（如果不需要可以删掉）
    echo '<div class="featured_portrait"><img src="' . $featured_portrait . '" alt="Featured Portrait"></div>'; 
}

方案2：用Data属性传递URL给JS #

如果必须使用JS实现，需要先在PHP中把图片URL嵌入模块的HTML属性，再用JS读取：

1. 修改Blog.php，给模块添加data-bg-url属性：

// 在模块容器标签中添加data属性
echo '<div class="acf-blog-bg" data-bg-url="' . esc_url($featured_portrait) . '">';

2. 替换原JS代码为：

jQuery(document).ready(function($) {
    $('.acf-blog-bg').each(function() {
        const imageUrl = $(this).data('bg-url');
        if (imageUrl) {
            $(this).css('background-image', `url(${imageUrl})`);
        }
    });
});

额外注意事项 #

• 确保acf-blog-bg类是添加在每个博客模块的容器元素上，而非全局单一元素，避免多个模块共用同一张背景
• 若背景不显示，检查CSS是否有background-size、background-repeat等属性限制，可添加：

.acf-blog-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px; /* 根据需求设置高度 */
}

内容的提问来源于stack exchange，提问作者Colin de Deugd