WordPress中如何将PHP动态变量传递给jQuery？

• 执行顺序不匹配：functions.php中的脚本注册与内联代码在页面加载早期就运行，此时xyz php snippet插件里的$art变量还未生成，导致传递给JS的是未定义的null；而'TEST'是硬编码值，不受执行顺序影响，所以能正常显示。
• 变量作用域隔离：snippet中的$art是局部变量，functions.php无法直接访问这个变量。

方法1：在PHP代码片段中直接输出内联脚本 #

修改你的xyz php snippet中的PHP代码，在获取到$art后直接输出定义quizParams的脚本，确保变量在页面渲染时被正确赋值：

<?php
ini_set('default_charset', 'UTF-8');
$dir_path = "wp-content/uploads/Arter";
$files = scandir($dir_path);
$count = count($files);
$index = rand(2, ($count-1));
$dir_pathsub = $files[$index];
$files = scandir($dir_path. '/' .$dir_pathsub);
$count = count($files);
$index = rand(2, ($count-1));
$filename = $files[$index];
echo '<a href="/'.$dir_path."/" .$dir_pathsub. '/' .$filename.'" target="_blank">
    <img src="/'.$dir_path."/" .$dir_pathsub. '/' .$filename.'" alt="'.$filename.'">
</a>';
$size = getimagesize ( $dir_path. '/' .$dir_pathsub. '/' .$filename, $info);       
$iptc = iptcparse($info["APP13"]);        
$art = $iptc["2#025"][0] ?? '未知物种'; // 增加空值兜底，避免报错
echo $art;

// 直接输出内联脚本传递变量
$dataToBePassed = array(
    'rigtigt' => $art,
    'forkert' => 'TEST'
);
?>
<script>
const quizParams = <?php echo json_encode($dataToBePassed); ?>;
</script>

同时删除functions.php中关于wp_add_inline_script的代码，避免重复定义变量。

方法2：统一在functions.php中管理逻辑与脚本 #

将图片获取、物种提取和脚本注册逻辑统一移到functions.php，确保变量在脚本注册前生成：

1. 添加获取鸟类物种和图片的函数：

// 获取随机鸟类物种名
function get_random_bird_species() {
    $dir_path = ABSPATH . "wp-content/uploads/Arter"; // 使用绝对路径更可靠
    $files = scandir($dir_path);
    $count = count($files);
    if ($count < 3) return '未知物种'; // 处理目录为空的情况
    
    $index = rand(2, ($count-1));
    $dir_pathsub = $files[$index];
    $sub_dir = $dir_path . '/' . $dir_pathsub;
    
    $files = scandir($sub_dir);
    $count = count($files);
    if ($count < 3) return '未知物种';
    
    $index = rand(2, ($count-1));
    $filename = $files[$index];
    $full_path = $sub_dir . '/' . $filename;
    
    $size = getimagesize($full_path, $info);       
    $iptc = iptcparse($info["APP13"] ?? '');        
    return $iptc["2#025"][0] ?? '未知物种';
}

// 输出随机鸟类图片的短代码
function bird_image_shortcode() {
    ob_start();
    $dir_path = "wp-content/uploads/Arter";
    $files = scandir($dir_path);
    $count = count($files);
    if ($count < 3) return '';
    
    $index = rand(2, ($count-1));
    $dir_pathsub = $files[$index];
    $sub_dir = $dir_path . '/' . $dir_pathsub;
    
    $files = scandir($sub_dir);
    $count = count($files);
    if ($count < 3) return '';
    
    $index = rand(2, ($count-1));
    $filename = $files[$index];
    $image_url = '/' . $dir_path . '/' . $dir_pathsub . '/' . $filename;
    
    echo '<a href="'.$image_url.'" target="_blank">
        <img src="'.$image_url.'" alt="'.$filename.'">
    </a>';
    return ob_get_clean();
}
add_shortcode('bird_image', 'bird_image_shortcode');

2. 修改脚本注册逻辑，绑定到wp_enqueue_scripts钩子：

function enqueue_quiz_scripts() {
    wp_register_script(
        'quiz',
        get_template_directory_uri() . '/js/quiz.js',
        array( 'jquery' ),
        1.0,
        true
    );

    wp_enqueue_script( 'quiz' );
    
    $art = get_random_bird_species();
    $dataToBePassed = array(
        'rigtigt' => $art,
        'forkert' => 'TEST'
    );

    wp_localize_script( 'quiz', 'quizParams', $dataToBePassed );
}
add_action('wp_enqueue_scripts', 'enqueue_quiz_scripts');

3. 修改页面内容，替换原snippet为短代码：[bird_image]

点击按钮后，控制台应正确输出鸟类物种名和'TEST'。若存在图片无EXIF数据的情况，PHP中的空值兜底会输出'未知物种'，避免JS出现undefined。

内容的提问来源于stack exchange，提问作者Johan Christian Homann