如何在WordPress单页/文章中添加Google Charts <script>标签？

安全阿岳

2026-5-21

解决方案：为星图主题WordPress添加单页/单篇专属Google散点图

针对你需要为每个页面/文章添加独特恒星位置散点图，且必须将Google Charts脚本插入<head>的需求，这里提供3个实用方案，适配不同使用习惯：

方案1：自定义字段+主题钩子（轻量原生实现）

这个方案利用WordPress原生自定义字段存储每个页面的恒星数据，通过wp_head钩子动态输出对应脚本，仅在有数据的页面加载图表资源。

步骤1：添加自定义字段

编辑文章/页面时，在「自定义字段」区域（若未显示，需在右上角「选项」中开启）添加：

字段名：google_chart_data
字段值：JSON格式的恒星坐标，例如：[[1.2, 3.4], [5.6, 7.8], [9.0, 1.2]]

步骤2：在主题functions.php中添加代码

将以下代码粘贴到你的星图主题functions.php文件末尾：

add_action('wp_head', 'render_custom_star_chart_script');
function render_custom_star_chart_script() {
    // 仅在单文章/页面生效
    if (!is_singular()) return;

    global $post;
    $chart_data = get_post_meta($post->ID, 'google_chart_data', true);

    if (!empty($chart_data)) {
        // 加载Google Charts库
        echo '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>';
        echo '<script type="text/javascript">';
        echo 'google.charts.load("current", {packages:["scatter"]});';
        echo 'google.charts.setOnLoadCallback(drawStarChart);';
        echo 'function drawStarChart() {';
        echo 'var data = new google.visualization.DataTable();';
        echo 'data.addColumn("number", "X位置");';
        echo 'data.addColumn("number", "Y位置");';
        echo 'data.addRows(' . $chart_data . ');';
        echo 'var options = {';
        echo 'title: "恒星位置散点图",';
        echo 'hAxis: {title: "X坐标"},';
        echo 'vAxis: {title: "Y坐标"},';
        echo 'legend: "none",';
        echo 'height: 400';
        echo '};';
        echo 'var chart = new google.visualization.ScatterChart(document.getElementById("star-scatter-container"));';
        echo 'chart.draw(data, options);';
        echo '}';
        echo '</script>';
    }
}

步骤3：在文章内容中添加容器

在需要显示图表的位置插入：

<div id="star-scatter-container" style="width: 100%; margin: 20px 0;"></div>

方案2：短代码实现（编辑更直观）

如果你希望在文章编辑框内直接插入图表和数据，短代码是更友好的选择，无需切换到自定义字段区域。

步骤1：在functions.php中添加短代码代码

// 全局变量临时存储图表数据
$star_chart_temp_data = [];

add_shortcode('star_scatter', 'star_scatter_shortcode_render');
function star_scatter_shortcode_render($atts, $content = null) {
    global $star_chart_temp_data;
    // 配置默认属性
    $atts = shortcode_atts([
        'title' => '恒星位置散点图',
        'height' => '400px'
    ], $atts);

    // 存储数据到全局变量，后续在head中输出脚本
    if (!empty(trim($content))) {
        $star_chart_temp_data = [
            'data' => trim($content),
            'options' => $atts
        ];
    }

    // 返回图表容器
    return '<div id="star-scatter-shortcode" style="width: 100%; height: ' . esc_attr($atts['height']) . '; margin: 20px 0;"></div>';
}

// 在head中输出图表脚本
add_action('wp_head', 'star_scatter_shortcode_script');
function star_scatter_shortcode_script() {
    global $star_chart_temp_data;
    if (empty($star_chart_temp_data)) return;

    echo '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>';
    echo '<script type="text/javascript">';
    echo 'google.charts.load("current", {packages:["scatter"]});';
    echo 'google.charts.setOnLoadCallback(drawShortcodeChart);';
    echo 'function drawShortcodeChart() {';
    echo 'var data = new google.visualization.DataTable();';
    echo 'data.addColumn("number", "X位置");';
    echo 'data.addColumn("number", "Y位置");';
    echo 'data.addRows(' . $star_chart_temp_data['data'] . ');';
    echo 'var options = {';
    echo 'title: "' . esc_js($star_chart_temp_data['options']['title']) . '",';
    echo 'hAxis: {title: "X坐标"},';
    echo 'vAxis: {title: "Y坐标"},';
    echo 'legend: "none"';
    echo '};';
    echo 'var chart = new google.visualization.ScatterChart(document.getElementById("star-scatter-shortcode"));';
    echo 'chart.draw(data, options);';
    echo '}';
    echo '</script>';
}

步骤2：在文章中使用短代码

直接在编辑框中插入：

[star_scatter title="猎户座恒星分布"]
[[1.2, 3.4], [5.6, 7.8], [9.0, 1.2], [3.3, 5.5]]
[/star_scatter]

方案3：自定义元框（可视化编辑体验）

如果需要更友好的后台编辑界面，避免手动写JSON，可以创建专属元框来管理图表数据。

步骤1：在functions.php中添加元框代码

// 添加元框
add_action('add_meta_boxes', 'star_chart_meta_box');
function star_chart_meta_box() {
    add_meta_box(
        'star_chart_meta',
        '恒星散点图配置',
        'star_chart_meta_box_html',
        ['post', 'page'],
        'normal',
        'default'
    );
}

// 元框HTML结构
function star_chart_meta_box_html($post) {
    wp_nonce_field('star_chart_meta_save', 'star_chart_nonce');
    $chart_data = get_post_meta($post->ID, 'star_chart_data', true);
    $chart_title = get_post_meta($post->ID, 'star_chart_title', true) ?: '恒星位置散点图';
    ?>
    <div style="margin: 10px 0;">
        <label style="display: block; margin-bottom: 5px;">图表标题：</label>
        <input type="text" name="star_chart_title" value="<?php echo esc_attr($chart_title); ?>" style="width: 100%;">
    </div>
    <div style="margin: 10px 0;">
        <label style="display: block; margin-bottom: 5px;">恒星坐标（JSON格式，如 [[x1,y1],[x2,y2]]）：</label>
        <textarea name="star_chart_data" rows="6" style="width: 100%;"><?php echo esc_textarea($chart_data); ?></textarea>
    </div>
    <?php
}

// 保存元框数据
add_action('save_post', 'star_chart_meta_save');
function star_chart_meta_save($post_id) {
    if (!isset($_POST['star_chart_nonce']) || !wp_verify_nonce($_POST['star_chart_nonce'], 'star_chart_meta_save')) return;
    if (DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;

    if (isset($_POST['star_chart_data'])) {
        update_post_meta($post_id, 'star_chart_data', sanitize_text_field($_POST['star_chart_data']));
    }
    if (isset($_POST['star_chart_title'])) {
        update_post_meta($post_id, 'star_chart_title', sanitize_text_field($_POST['star_chart_title']));
    }
}

// 输出脚本到head
add_action('wp_head', 'star_chart_meta_script');
function star_chart_meta_script() {
    if (!is_singular()) return;
    global $post;
    $chart_data = get_post_meta($post->ID, 'star_chart_data', true);
    $chart_title = get_post_meta($post->ID, 'star_chart_title', true) ?: '恒星位置散点图';
    if (empty($chart_data)) return;

    echo '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>';
    echo '<script type="text/javascript">';
    echo 'google.charts.load("current", {packages:["scatter"]});';
    echo 'google.charts.setOnLoadCallback(drawMetaChart);';
    echo 'function drawMetaChart() {';
    echo 'var data = new google.visualization.DataTable();';
    echo 'data.addColumn("number", "X位置");';
    echo 'data.addColumn("number", "Y位置");';
    echo 'data.addRows(' . $chart_data . ');';
    echo 'var options = {';
    echo 'title: "' . esc_js($chart_title) . '",';
    echo 'hAxis: {title: "X坐标"},';
    echo 'vAxis: {title: "Y坐标"},';
    echo 'legend: "none",';
    echo 'height: 400';
    echo '};';
    echo 'var chart = new google.visualization.ScatterChart(document.getElementById("star-chart-meta-container"));';
    echo 'chart.draw(data, options);';
    echo '}';
    echo '</script>';
}

// 自动在文章末尾插入图表容器
add_filter('the_content', 'star_chart_add_container');
function star_chart_add_container($content) {
    if (!is_singular()) return $content;
    global $post;
    if (!empty(get_post_meta($post->ID, 'star_chart_data', true))) {
        $content .= '<div id="star-chart-meta-container" style="width: 100%; margin-top: 30px;"></div>';
    }
    return $content;
}

步骤2：使用元框编辑

编辑文章时，页面下方会出现「恒星散点图配置」元框，输入标题和坐标数据即可，无需手动添加容器。

注意事项

确保输入的JSON格式正确，可使用在线JSON校验工具检查格式是否合法；
若星图主题提供了专属的head钩子（如star_theme_head），请替换代码中的wp_head，避免主题更新冲突；
可根据需求修改Google Charts的options配置（如颜色、坐标轴范围、 tooltip 样式等），具体参考官方文档；
测试时可打开浏览器控制台（F12），查看是否有脚本错误，方便排查问题。

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

如何在WordPress单页/文章中添加Google Charts &lt;script&gt;标签？

方案1：自定义字段+主题钩子（轻量原生实现） #

步骤1：添加自定义字段 #

步骤2：在主题functions.php中添加代码 #

步骤3：在文章内容中添加容器 #

方案2：短代码实现（编辑更直观） #

步骤1：在functions.php中添加短代码代码 #

步骤2：在文章中使用短代码 #

方案3：自定义元框（可视化编辑体验） #

步骤1：在functions.php中添加元框代码 #

步骤2：使用元框编辑 #

注意事项 #