Gutenberg块通过WordPress REST API拉取跨站文章流时图片匹配异常问题

• 未重置变量导致的图片复用bug
  代码中 $image 属于全局作用域变量，从未在每轮文章循环开始时初始化为空值。内层媒体匹配循环如果没有为当前文章找到对应的图片条目，$image 会保留上一轮循环最后赋值的内容，最终所有未匹配到图片的文章都会沿用之前的图片URL，造成“所有文章都显示第一篇图片”的现象。
• 接口拉取逻辑的固有缺陷
  WordPress REST API 的媒体端点默认分页大小仅为10条，最大支持单页拉取100条，当前实现拉取的媒体数据并非全量内容，超出分页范围的图片ID永远无法完成匹配。同时采用“文章数组嵌套媒体数组”的双重循环做ID匹配，时间复杂度随文章、媒体数量上升会快速膨胀，渲染性能很差。
• 代码细节漏洞
  初始化第二个curl句柄时错误传入了文章接口的URL，虽然后续通过curl选项覆盖了请求地址，但这类粗心写法极易引发后续维护问题。

核心逻辑修正 #

首先将媒体数组提前转换为「图片ID => 图片访问URL」的关联索引数组，把原来O(n*m)的嵌套匹配改成O(1)的查表操作；同时在每轮文章循环开始时为图片变量设置默认占位值，避免残留上一轮的变量值。

性能优化 #

给外部接口请求增加短期缓存（比如通过WordPress内置的Transient机制缓存12小时），避免每次页面加载都向外部站点发起两次HTTP请求，既降低外部站点的压力，也能提升页面加载速度，同时为curl请求设置合理的超时时间，避免外部站点响应慢拖垮自身页面。

更优的接口调用思路 #

拉取文章数据时，可以通过REST API内置的_embed参数，让接口直接返回文章关联的特色图片、自定义字段关联媒体的完整URL，完全不需要单独拉取媒体端点做手动ID匹配，从根源上省去匹配逻辑。

修正后的参考代码：

<?php
// 块基础类名逻辑
$className = 'post-feed';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

// 读取缓存，避免重复请求外部接口
$cache_key = 'mintmedia_news_feed_cache';
$cached_data = get_transient($cache_key);
if( $cached_data ) {
    $array = $cached_data['articles'];
    $media_map = $cached_data['media_map'];
} else {
    // 拉取文章数据
    $article_url = "https://mintmedia.no/wp-json/wp/v2/nyheter";
    // 拉取全量媒体数据（设置最大分页100条，覆盖绝大多数场景）
    $media_url = "https://mintmedia.no/wp-json/wp/v2/media?per_page=100";

    // 初始化curl请求并设置超时
    $ch_article = curl_init($article_url);
    curl_setopt_array($ch_article, [
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_TIMEOUT => 5 // 5秒超时，避免页面卡死
    ]);
    $ch_media = curl_init($media_url);
    curl_setopt_array($ch_media, [
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_TIMEOUT => 5
    ]);

    $resp_article = curl_exec($ch_article);
    $resp_media = curl_exec($ch_media);
    curl_close($ch_article);
    curl_close($ch_media);

    $array = json_decode($resp_article);
    $media_list = json_decode($resp_media);

    // 提前构建媒体ID索引表，实现O(1)匹配
    $media_map = [];
    if( $media_list ) {
        foreach( $media_list as $media_item ) {
            $media_map[ $media_item->id ] = $media_item->guid->rendered;
        }
    }

    // 缓存12小时
    set_transient($cache_key, [
        'articles' => $array,
        'media_map' => $media_map
    ], 12 * HOUR_IN_SECONDS);
}
?>

<?php if (!$array) { ?>
    <p>Ingen ordre å vise her!😔</p>
<?php } else { ?>
    <div class="<?php echo esc_attr($className); ?>">
        <?php foreach ($array as $article) {
            // 每轮循环重置图片变量为默认空值
            $image = '';
            // 直接查表匹配，不需要嵌套循环
            $target_image_id = $article->meta->teft_cards_image_id ?? 0;
            if( $target_image_id && isset($media_map[$target_image_id]) ) {
                $image = $media_map[$target_image_id];
            }
            ?>
            <div class="article-card">
                <?php if( $image ) { ?>
                    <img src="<?php echo esc_url($image) ?>" alt="">
                <?php } ?>
                <h2><?php echo $article->title->rendered ?></h2>
            </div>
        <?php } ?>
    </div>
<?php } ?>

补充说明：如果后续文章、媒体数量超过100条，单页拉取媒体会出现覆盖不全的问题，这种场景下直接使用带_embed参数的文章接口是成本最低的方案，完全不需要手动维护媒体ID匹配表。

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