如何在WordPress HTML模板中获取图片完整路径？

1. 利用WordPress内置全局JS变量 #

WordPress默认会在前端注入wp全局对象，其中包含站点基础URL信息。你可以通过JS动态拼接图片路径：

• 先给图片设置占位的相对路径，比如data-src="/wp-content/uploads/myimage.png"
• 用JS获取站点URL并替换路径：

// 从WordPress核心数据中获取站点URL
const siteUrl = wp.data.select('core/site').getSite().url;
// 批量处理所有带占位路径的图片
document.querySelectorAll('img[data-src]').forEach(img => {
  const relativePath = img.getAttribute('data-src');
  img.src = siteUrl + relativePath;
});

注意：如果你的自定义主题未加载wp-data脚本，需要在functions.php中添加注册代码：

function enqueue_wp_core_scripts() {
  wp_enqueue_script('wp-data');
}
add_action('wp_enqueue_scripts', 'enqueue_wp_core_scripts');

2. 主题自定义izer添加站点URL配置 #

在主题自定义面板中添加站点URL输入项，将其输出为前端全局变量：

• 先在functions.php中注册自定义设置：

function theme_customize_register($wp_customize) {
  $wp_customize->add_setting('site_base_url', array(
    'default' => get_site_url(),
    'sanitize_callback' => 'esc_url_raw'
  ));
  $wp_customize->add_control('site_base_url', array(
    'label' => '站点基础URL',
    'section' => 'title_tagline',
    'type' => 'url'
  ));
}
add_action('customize_register', 'theme_customize_register');

// 输出全局变量到前端头部
function output_site_url_global() {
  $site_url = get_theme_mod('site_base_url', get_site_url());
  echo "<script>window.siteBaseUrl = '{$site_url}';</script>";
}
add_action('wp_head', 'output_site_url_global');

• 然后在HTML模板中直接使用全局变量拼接路径：

<img src="" data-src="/wp-content/uploads/myimage.png" onload="this.src = window.siteBaseUrl + this.getAttribute('data-src')">

3. 根相对路径折中方案 #

如果确认客户的WordPress安装在站点根目录，可直接使用根相对路径：

<img src="/wp-content/uploads/myimage.png">

此方案局限性明显：若客户将WP安装在子目录（如example.com/blog/），路径会失效，仅适合根目录安装场景。

4. 将主题默认图片移至主题目录 #

如果这些图片是主题自带的固定资源（无需客户自定义），无需让客户上传至uploads，直接将图片放在主题的assets/images/目录下，用相对路径引用：

<img src="./assets/images/myimage.png">

该方案无需依赖站点域名，适配所有安装路径，还能减少客户操作步骤。

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