如何在WordPress function.php中创建Chart.js短代码并修复报错

站点崩溃的直接原因是PHP语法致命错误：查看你写的函数代码，在输出canvas标签时，你先通过?>退出PHP解析模式输出HTML，又立刻通过<?php回到PHP解析模式，但后续的<script>标签和JS代码既没有通过echo输出，也没有再次退出PHP解析模式，PHP解析器会把这部分前端代码当成PHP语法处理，直接抛出错误导致整站崩溃。

除此之外代码还有3个会导致功能异常的隐藏问题：

• 短代码逻辑直接输出内容，没有按WordPress规范拼接后返回结果，会导致内容显示位置错乱
• 写死canvas DOM id为myChart，同一页面插入多次短代码会出现ID冲突，仅第一个图表可正常渲染
• 没有做Chart.js依赖的加载和存在性判断，未加载库时直接执行初始化代码会抛出JS错误

把下面的代码替换掉你原来写的内容，放到主题的functions.php文件中即可：

// 按需加载Chart.js库，避免全页面冗余加载资源
function enqueue_chartjs_lib() {
    // 将Chart.js源文件放到当前主题的/js目录下即可，无需使用外部资源
    wp_enqueue_script( 'chartjs', get_template_directory_uri() . '/js/chart.min.js', array(), '4.4.8', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_chartjs_lib' );

// 注册Chart.js短代码
function chartJS_shortcode(){
    // 生成随机ID避免同页面多图表实例冲突
    $chart_id = 'myChart_' . wp_rand(1, 99999);
    // 所有输出内容拼接到变量中，最后return返回，符合WordPress短代码开发规范
    $output = <<<HTML
<canvas id="{$chart_id}" width="400" height="400"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('{$chart_id}').getContext('2d');
    // 增加判断避免Chart库未加载时抛出JS错误
    if (typeof Chart !== 'undefined') {
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
});
</script>
HTML;
    return $output;
}
add_shortcode("chartJS", "chartJS_shortcode");

• 提前下载Chart.js源文件chart.min.js，放到当前主题目录下的/js/文件夹中，没有该文件夹可手动新建
• 在需要插入图表的文章、页面或模板位置，直接输入短代码[chartJS]即可正常渲染
• 同一页面插入多个[chartJS]短代码也不会出现ID冲突问题

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