WordPress短代码返回错误URL：随机图片路径含当前页面路径

这个问题的核心原因很明确：你直接把glob()返回的服务器文件系统路径作为图片的src属性值，浏览器会把这个相对路径解析为相对于当前页面URL的路径，所以在/prova页面下就会错误地把页面路径拼接到图片URL前面。

我们需要把文件系统路径（用来查找服务器上的图片文件）和网站URL路径（用来输出给浏览器的图片地址）分开处理，WordPress已经提供了专门的函数来处理主题路径，完全不需要自己手动拼接。

下面是修正后的完整代码：

// Random img
function random_image( $atts, $content = null ) {
    $values = shortcode_atts( array(
        'pag' => 'home',
        'class' => 'imgrnd',
    ), $atts );

    // 获取子主题的服务器文件系统绝对路径（用于查找本地文件）
    $theme_file_path = get_stylesheet_directory();
    // 拼接图片目录的文件系统路径，确保路径末尾有斜杠
    $images_dir_file_path = trailingslashit( $theme_file_path ) . 'img/' . esc_attr( $values['pag'] ) . '/';
    
    // 获取子主题的公开URL路径（用于输出给浏览器的图片地址）
    $theme_url_path = get_stylesheet_directory_uri();
    // 拼接图片目录的URL路径，确保路径末尾有斜杠
    $images_dir_url_path = trailingslashit( $theme_url_path ) . 'img/' . esc_attr( $values['pag'] ) . '/';

    // 查找目录下的所有图片文件
    $images = glob( $images_dir_file_path . '*.{jpg,jpeg,png,gif}', GLOB_BRACE );

    // 处理没有找到图片的情况，避免数组越界报错
    if ( empty( $images ) ) {
        return '<span class="random-image-error">未找到指定目录的图片</span>';
    }

    // 随机选择一张图片，仅提取文件名部分
    $random_image_filename = basename( $images[array_rand( $images )] );
    // 拼接正确的图片URL
    $random_image_url = $images_dir_url_path . $random_image_filename;

    // 对URL进行安全转义，符合WordPress安全规范
    return '<img src="' . esc_url( $random_image_url ) . '" class="' . esc_attr( $values['class'] ) . '">';
}
add_shortcode( 'random-image', 'random_image' );

关键修改点说明： #

• 使用get_stylesheet_directory()获取子主题的服务器绝对路径，确保glob()能准确找到图片文件，不受当前执行脚本路径的影响
• 使用get_stylesheet_directory_uri()获取子主题的公开URL路径，这是WordPress官方推荐的主题资源URL获取方式，会自动适配你的站点根目录
• 用basename()提取随机图片的文件名，再和图片目录的URL路径拼接，确保输出的src是正确的站点根相对URL（或绝对URL）
• 添加了空图片数组的容错处理，避免出现数组越界的致命错误
• 使用esc_url()对输出的图片URL进行安全转义，避免XSS风险，符合WordPress开发规范

这样修改后，不管你在哪个页面使用[random-image]短代码，图片的src都会是类似https://localhost/z/wp-content/themes/generatepress_child/img/home/2.jpg的正确路径，不会再包含当前页面的路径了。

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