在前端的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中文網其他相關文章！