WordPress新手求助：如何将API返回JSON转为可读HTML？

原代码的核心问题 #

• foreach循环缺少花括号，导致只有后续第一行代码被重复执行（你这里反复给$pageCSS赋值，完全没处理API返回的数据）
• 没有在循环内遍历$showObj生成对应的HTML内容
• CSS样式放在循环里会重复输出，造成冗余
• 未做数据有效性校验，若API返回格式异常会直接报错

修正后的完整基础示例 #

下面是适配WordPress场景的最简可运行代码，包含数据校验、排序、HTML生成、安全处理：

// 假设$response是你调用API后获取的JSON字符串
$jsonObj = json_decode($response);

// 先验证API返回数据是否有效
if (!empty($jsonObj) && isset($jsonObj->results) && is_array($jsonObj->results)) {
    // 倒序排列，确保最新内容在前
    $latestItems = array_reverse($jsonObj->results);

    // 定义样式（仅输出一次）
    $output = "<style>
           .recipe-wrapper{
            display:grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin: 20px 0;
             }
            .recipe-item{
                padding: 10px;
                border: 1px solid #eee;
                border-radius: 4px;
                background: #fff;
            }
            .recipe-item h3{
                margin-top:0;
                font-size:16px;
            }
            </style>";

    // 生成HTML容器
    $output .= '<div class="recipe-wrapper">';

    // 循环遍历每个数据项，生成HTML
    foreach ($latestItems as $showObj) {
        // 从对象中提取字段（根据你的API返回结构调整字段名）
        // 用esc_html做安全转义，避免XSS风险（WordPress必备）
        $title = isset($showObj->title) ? esc_html($showObj->title) : '无标题';
        $desc = isset($showObj->description) ? esc_html($showObj->description) : '';
        $image = isset($showObj->image_url) ? esc_url($showObj->image_url) : '';

        // 拼接单个项目的HTML
        $itemHtml = '<div class="recipe-item">';
        if ($image) {
            $itemHtml .= '<img src="' . $image . '" alt="' . $title . '" style="width:100%;height:auto;">';
        }
        $itemHtml .= '<h3>' . $title . '</h3>';
        if ($desc) {
            $itemHtml .= '<p>' . $desc . '</p>';
        }
        $itemHtml .= '</div>';

        $output .= $itemHtml;
    }

    // 闭合容器
    $output .= '</div>';

    // 输出最终内容（在WordPress模板或短代码中使用）
    echo $output;
} else {
    // 数据无效时的提示
    echo '<p>暂无可用数据</p>';
}

关键说明 #

1. 数据校验：先判断$jsonObj、$jsonObj->results是否存在且为数组，避免空值或非数组导致的报错
2. 循环语法：给foreach加上花括号{}，确保循环内所有代码都被执行
3. 安全处理：用esc_html()转义文本内容、esc_url()转义链接，符合WordPress安全规范
4. 样式优化：把CSS放在循环外只输出一次，同时用repeat(auto-fill, minmax(...))让网格布局适配不同屏幕宽度
5. 字段适配：根据你的API实际返回的字段名（比如title、image_url等）调整提取逻辑

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