在前端的WordPress块中渲染外部API数据

>此CSS-Tricks教程构建了有关WordPress块的先前帖子，重点是从前端的外部API获取和显示动态内容。 虽然较早的教程涵盖了基础知识和后端渲染，但该教程探讨了在自定义块中使用外部数据。

这是涵盖将外部API数据集成到自定义WordPress块的各个方面的系列的一部分：> 在WordPress块中使用外部API

>在正端上渲染数据

（当前）
• > >后端上的数据
（未来）
• > 创建一个自定义设置UI
（future）
• > 保存自定义块设置
（future）
• > 使用实时API数据
（未来）
• >
>我们将创建一个显示API-FOOTBALL的足球（足球）联赛排名的块，利用项目设置的

套件。

@wordpress/create-block设置块插件

我们将使用命令行生成一个新项目：

在将生成的文件夹放置在您的WordPress

目录中并激活它之后，我们将重点放在这些关键文件上：

>

npx @wordpress/create-block football-rankings

wp-content/plugins

• edit.js
• index.js
• API数据集成football-rankings.php
我们将使用API​​-FOOTBALL（通过RapidApi）。 RapidApi提供了获取数据的必要脚本； JSONCRACK可以帮助可视化JSON结构。

中获取数据

>

edit.js

在页面加载上仅获取一次数据，以防止在块编辑器重新租赁期间进行不必要的API呼叫：>

useEffect> WordPress中的数据存储edit.js

import { useEffect } from "@wordpress/element";

export default function Edit(props) {
  // ... (rest of the code remains largely unchanged)
  useEffect(() => {
    // ... (fetch code using RapidAPI key and host)
    .then( ( response ) => response.json() )
    .then( ( response ) => {
      setAttributes( { data: response } ); //Simplified data assignment
    })
    .catch((err) => console.error(err));
  }, []);
  // ... (rest of the code remains largely unchanged)
}

>文件定义

属性以存储获取的json：

index.js这确保WordPress将API数据保存在数据库中。 data前端输出

registerBlockType( metadata.name, {
  // ...
  attributes: {
    data: {
      type: "object",
    },
  },
  // ...
} );

>我们将创建

和

（或

）来处理与后端逻辑分开的前端渲染和样式。

>仅在不在管理员上下文（

）中时，使用frontend.js>和frontend.css来招募这些资产。 frontend.scss>中的football-rankings.php函数将属性传递给前端JavaScript。wp_enqueue_script wp_enqueue_style !is_admin()render_callbackfootball-rankings.php文件（简化）：

>

npx @wordpress/create-block football-rankings

> frontend.scss或frontend.css中的样式负责数据的可视化表示。 package.json文件的scripts部分应更新以在构建过程中包含前端文件。> 原始文章中提供了完整的演示和详细样式。 此修订后的响应提供了关键步骤和代码段的简洁概述。>

以上是在前端的WordPress块中渲染外部API数据的详细内容。更多信息请关注PHP中文网其他相关文章！