フロントエンドのWordPressブロックで外部APIデータをレンダリングする

このCSS-Tricksチュートリアルは、WordPressブロックに関する以前の投稿に基づいて構築され、フロントエンドの外部APIから動的なコンテンツの取得と表示に焦点を当てています。 以前のチュートリアルでは、ブロックの基本とバックエンドのレンダリングをカバーしていましたが、これはカスタムブロック内で外部データの使用を掘り下げます。

これは、外部APIデータをカスタムWordPressブロックに統合するさまざまな側面をカバーするシリーズの一部です。 WordPressブロックで外部APIを使用して

フロントエンドでのデータのレンダリング

（current）バックエンドでのレンダリング

（future）
• カスタム設定の作成ui
（future）
• カスタムブロック設定の保存
（future）ライブAPIデータの操作（Future） API-Footballからのサッカー（サッカー）リーグのランキングを表示するブロックを作成し、プロジェクトのセットアップのために
• パッケージを活用します。 ブロックプラグインを設定します コマンドラインを使用して新しいプロジェクトを生成します：
• 生成されたフォルダーをWordPressディレクトリに配置してアクティブ化した後、これらのキーファイルに焦点を当てたものです。

@wordpress/create-block

npx @wordpress/create-block football-rankings

wp-content/pluginsAPIデータ統合

API-Football（Rapidapi経由）を使用します。 Rapidapiは、データを取得するために必要なスクリプトを提供します。 JSoncrackは、JSON構造を視覚化するのに役立ちます
• データの取得edit.js
• index.jsフックのフックページの読み込みで1回だけデータを取得し、ブロックエディターの再レンダー中に不必要なAPI呼び出しを防ぎます：
• WordPressのデータストレージfootball-rankings.php

ファイルは

属性を定義して、フェッチされたjsonを保存します：

これにより、WordPressがデータベースにAPIデータを保存するようにします。

フロントエンドの出力edit.js バックエンドロジックから分離されたフロントエンドのレンダリングとスタイリングを処理するために、

および

（またはuseEffect）を作成します。 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)
}

および

を使用してこれらのアセットを使用します。

の関数

関数は、フロントエンドJavaScriptに属性を渡します。 index.js data

npx @wordpress/create-block football-rankings

スタイリングのスタイリングは、データの視覚的な提示に責任があります。 ビルドプロセスにフロントエンドファイルを含めるように、frontend.scssファイルのfrontend.cssセクションを更新する必要があります。 package.jsonオリジナルの記事では、完全なデモと詳細なスタイリングをご覧ください。 この改訂された応答は、重要な手順とコードスニペットの簡潔な概要を提供します。

以上がフロントエンドのWordPressブロックで外部APIデータをレンダリングするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。