如何从插件自定义字段的数组中提取指定值生成页面可展示的HTML链接

架构老林

2026-10-6

实现思路

先将自定义字段中取出的JSON格式字符串，解析为对应开发语言可操作的数组/对象结构
遍历解析后的结构，逐行提取每个文件的name、url字段
按照要求的HTML格式拼接内容，做必要的安全转义后输出到前端页面即可

代码示例

PHP 场景（适用于WordPress等PHP开发的CMS系统）

// 示例：从自定义字段取出的原始JSON数据
$raw_data = '{"1 filename.doc":{"name":"filename.doc","url":"https://example.com/filename.doc","file":"/var/www/example.com/filename.doc","type":"application/msword","size":50688}}';

// 解析JSON为关联数组，第二个参数传true返回数组，不传则返回对象
$file_data = json_decode($raw_data, true);

// 若你用WordPress的get_post_meta已经直接拿到数组，可跳过上面的json_decode步骤

$output = '';
foreach ($file_data as $item) {
    // 转义处理避免XSS安全问题
    $file_url = esc_url($item['url']);
    $file_name = esc_html($item['name']);
    $output .= "<a href=\"{$file_url}\">{$file_name}</a><br>";
}

// 输出到前端页面对应位置
echo $output;

前端JavaScript场景

// 示例：从接口/页面属性拿到的原始JSON字符串
const rawData = '{"1 filename.doc":{"name":"filename.doc","url":"https://example.com/filename.doc","file":"/var/www/example.com/filename.doc","type":"application/msword","size":50688}}';

// 解析JSON为JS对象
const fileData = JSON.parse(rawData);

let outputHtml = '';
// 遍历所有文件项
Object.values(fileData).forEach(item => {
    outputHtml += `<a href="${item.url}">${item.name}</a><br>`;
});

// 插入到页面对应容器中
document.querySelector('#你要插入的容器选择器').innerHTML = outputHtml;