如何将WordPress查询的Dispatch元数据输出为4列布局表格？

元数据数组结构 #

array(13) { 
    ["meta_id"]=> string(1) "2" 
    ["post_id"]=> string(4) "2112"
    ["provider"]=> string(12) "Abc news"
    ["scheme"]=> string(3) "morning"
    ["viewers"]=> string(9) "2000"
    ["min_time"]=> string(3) "5"
    ["max_time"]=> string(3) "100"
    ["bways"]=> string(2) "10"
    ["release_date"]=> string(10) "04-05-2021"
    ["type"]=> string(11) "Video"
    ["variance"]=> string(4) "4k"
    ["tech"]=> string(9) "JS, HTML5"
    ["game_id"]=> string(5) "17640" 
}

数据库查询代码 #

$meta = $wpdb->get_row( $wpdb->prepare("
    SELECT * FROM ".$table_name." WHERE post_id = %d
", $post_id), ARRAY_A);

原2列布局代码 #

$output .="<tr>";
$output .= sprintf('<td>%s</td><td>%s</td>', $attribute, $value);
$output .="</tr>";

修改后的4列布局代码 #

通过拆分数组、对齐行的方式实现4列布局，左侧区域最多显示5行，剩余内容放在右侧区域：

// 初始化表格输出
$output = '<table>';

// 将元数据拆分为左侧（最多5项）和右侧（剩余项）
$leftItems = array_slice($meta, 0, 5);
$rightItems = array_slice($meta, 5);

// 取左右区域的最大行数，确保表格行对齐
$maxRows = max(count($leftItems), count($rightItems));

// 循环渲染每一行的4列内容
for ($i = 0; $i < $maxRows; $i++) {
    $output .= '<tr>';
    
    // 渲染左侧两列
    if (isset($leftItems[$i])) {
        $attr = array_keys($leftItems)[$i];
        $val = $leftItems[$i];
        $output .= sprintf('<td>%s</td><td>%s</td>', $attr, $val);
    } else {
        // 左侧无数据时补空单元格
        $output .= '<td></td><td></td>';
    }
    
    // 渲染右侧两列
    if (isset($rightItems[$i])) {
        $attr = array_keys($rightItems)[$i];
        $val = $rightItems[$i];
        $output .= sprintf('<td>%s</td><td>%s</td>', $attr, $val);
    } else {
        // 右侧无数据时补空单元格
        $output .= '<td></td><td></td>';
    }
    
    $output .= '</tr>';
}

$output .= '</table>';

代码说明 #

1. 数组拆分：用array_slice将原数组分成前5项（左侧区域）和剩余所有项（右侧区域）
2. 行对齐处理：以左右区域的最大行数为循环次数，避免因两侧行数不同导致表格结构错乱
3. 空单元格补充：当某一侧的元数据先耗尽时，补充空的<td>标签，维持4列的布局结构

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