如何在WordPress古腾堡模板中引入静态图片并动态使用相对路径？

问题核心 #

在区块主题的HTML模板文件中直接写入PHP代码时，WordPress不会解析这些代码，导致PHP代码直接输出到DOM中，无法正确生成图片的动态路径。

解决方案 #

方案1：将HTML模板改为PHP模板 #

区块主题支持PHP后缀的模板文件，只需把目标模板文件（比如page.html）重命名为page.php，即可在文件中直接使用PHP代码生成图片路径：

<!-- wp:image {"width":"auto","height":"100px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized">
   <img src="<?php echo esc_url( get_theme_file_uri( 'assets/img/icos/ico-ressources.svg' ) ); ?>" alt="Static image" style="width:auto;height:100px"/>
</figure>
<!-- /wp:image -->

WordPress会正常解析PHP代码，生成主题目录下的正确图片URL。

方案2：用本地化脚本替换占位符（保留HTML模板场景） #

如果不想修改模板后缀，可通过JavaScript动态替换占位符：

1. 在主题functions.php中注册并本地化脚本，传递主题文件路径：

function my_theme_localize_assets() {
    wp_enqueue_script( 'my-theme-script', get_theme_file_uri( 'assets/js/main.js' ), array(), wp_get_theme()->get('Version'), true );
    wp_localize_script( 'my-theme-script', 'MyTheme', array(
        'themeUrl' => get_theme_file_uri()
    ) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_localize_assets' );

2. 在assets/js/main.js中编写替换逻辑：

document.addEventListener('DOMContentLoaded', function() {
    const targetImgs = document.querySelectorAll('img[src*="[STYLESHEET_URI]"]');
    targetImgs.forEach(img => {
        img.src = img.src.replace('[STYLESHEET_URI]', MyTheme.themeUrl + '/');
    });
});

3. 模板中保留原占位符：

<!-- wp:image {"width":"auto","height":"100px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized">
   <img src="[STYLESHEET_URI]assets/img/icos/ico-ressources.svg" alt="Static image" style="width:auto;height:100px"/>
</figure>
<!-- /wp:image -->

方案3：创建自定义动态区块 #

如果需要重复使用这类图片组件，可创建自定义动态区块，在区块的PHP渲染回调中直接生成带正确路径的图片，实现更灵活的控制。

注意事项 #

• get_theme_file_uri()函数会直接返回主题文件的完整URL，只需传入相对于主题根目录的路径即可，无需手动拼接域名。
• 必须使用esc_url()函数确保生成的URL安全，避免XSS风险。

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