如何在WordPress加载时拉取Google Sheet数据展示商品模块

全程用原生JS就能实现，不需要搭后端、不需要引入重型依赖，你熟悉JS的话半小时就能调通。

第一步：配置Google Sheet的公开访问规则 #

• 打开存商品数据的Google Sheet，点右上角「共享」按钮
• 通用访问权限设置为「知道链接的任何人」，权限选「查看者」，不要开编辑权限，避免数据被篡改
• 提前整理好表格结构：第一行固定为表头，比如按商品名称、商品主图链接、售价、商品描述、库存状态这类字段设置，后续每一行对应一个独立商品，不要用合并单元格，否则拉取的数据会错乱

第二步：部署数据接口（比直接爬CSV稳定性高很多，不会轻易被跨域限制卡） #

• 打开Sheet顶部菜单栏的「扩展程序」→「Apps 脚本」，进入脚本编辑页
• 删掉编辑器里默认的冗余代码，替换成下面这段逻辑，作用是把表格内容自动转成前端可直接解析的JSON格式：

function doGet() {
  const activeSheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const rawData = activeSheet.getDataRange().getValues();
  const tableHeaders = rawData[0];
  const productList = rawData.slice(1).map(row => {
    const productItem = {};
    tableHeaders.forEach((header, index) => {
      productItem[header] = row[index];
    })
    return productItem
  })
  return ContentService.createTextOutput(JSON.stringify(productList))
    .setMimeType(ContentService.MimeType.JSON);
}

• 点脚本编辑器右上角「部署」→「新建部署」，部署类型选「Web 应用」，执行身份选「我」，访问权限选「任何人」，点部署后会生成一个Web应用URL，存好这个地址，前端靠这个地址拉数据就行。

注意：后续你修改Google Sheet内容不需要重新部署脚本，这个接口拉取的永远是表格最新内容，完全满足改完表格站点自动同步更新的需求。

第三步：前端页面拉取数据并渲染商品 #

直接在你站点的商品页加下面的代码即可，逻辑就是页面加载时请求刚才拿到的接口地址，拿到商品数组后循环生成独立商品卡片插入页面：

<!-- 预留商品列表容器 -->
<div class="product-wrap" id="productWrap"></div>

<script>
// 替换成你自己部署Apps Script拿到的Web应用地址
const SHEET_DATA_API = '替换成你的接口地址';
const productContainer = document.getElementById('productWrap');

// 页面DOM加载完成后自动拉取数据
window.addEventListener('DOMContentLoaded', async () => {
  try {
    const response = await fetch(SHEET_DATA_API);
    const productList = await response.json();
    // 循环渲染每个商品条目
    productList.forEach(product => {
      // 注意这里的字段名要和你表格第一行的表头完全一致，比如表头写的是「商品名」就对应product.商品名
      const productCard = document.createElement('div');
      productCard.className = 'product-card';
      productCard.innerHTML = `
        <img src="${product.商品主图链接}" alt="${product.商品名称}" class="product-cover">
        <h4 class="product-title">${product.商品名称}</h4>
        <p class="product-price">¥${product.售价}</p>
        <p class="product-desc">${product.商品描述}</p>
        <span class="stock-tag">${product.库存状态 ? '现货可发' : '暂时缺货'}</span>
      `;
      productContainer.appendChild(productCard);
    })
  } catch (error) {
    console.error('商品数据加载失败:', error);
    productContainer.innerHTML = '<p>商品加载异常，请稍后刷新重试</p>';
  }
})
</script>

<!-- 商品卡片的样式你自己写CSS调整即可，和普通前端页面开发没有区别 -->

常见避坑提示 #

• 不要用网上流传的直接拼接Sheet导出CSV链接的方案，这类方案很容易因为Google跨域策略调整、权限变动失效，用Apps Script部署的接口稳定性高很多
• 表格里存的商品图片链接必须是公网可直接访问的地址，不要放需要权限校验的私有云盘链接，否则前端无法正常加载图片
• 后续要新增商品字段时，直接在表格第一行加新表头即可，脚本会自动返回新字段数据，不需要修改脚本代码，前端对应加渲染逻辑就行
• 如果担心接口被恶意刷流量，可以在fetch请求里加缓存配置，或者在站点服务层给这个接口加1-5分钟的短缓存，不会影响内容同步效果，最多存在几分钟的更新延迟。

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