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

この記事では、「WordPressブロックのフロントエンドで外部APIデータのレンダリング」に関する前の記事に記載されています。前の投稿では、外部APIを取得し、WordPress Webサイトのフロントエンドで取得したデータをレンダリングするブロックと統合する方法を学びました。

問題は、それを実装する方法が、WordPressブロックエディターでデータを表示できないことです。言い換えれば、ブロックをページに挿入できますが、プレビューは表示されません。ブロックは、リリース後にのみ見ることができます。

前の投稿で作成したサンプルブロックプラグインを確認しましょう。今回は、WordPressのJavaScriptを使用し、エコシステムを反応して、バックエンドブロックエディターでデータを取得およびレンダリングします。

WordPressブロックで外部APIを使用して

• フロントエンドのレンダリングデータ
• バックエンドレンダリングデータ（現在の場所）カスタム設定ui
を作成します
• カスタムブロック設定を保存
リアルタイムAPIデータの使用
（近日公開） 前の記事の結果 開始前に、前の投稿で完了したデモを参照してください。参照できます。以前の投稿で

メソッドを使用して、PHPファイルでプロパティを使用してコンテンツをレンダリングできることに気付いた場合があります。

これは、動的ブロックを作成するためにネイティブのWordPressまたはPHP関数を使用する必要がある場合がある場合に役立ちます。ただし、WordPressのJavaScript（特にJSX）エコシステムを使用して静的HTMLとデータベースに保存されているプロパティをレンダリングするだけの場合、ブロックプラグインの

およびrender_callback関数に集中する必要があります。

EditSave編集

関数は、ブロックエディターで見たいものに基づいてコンテンツをレンダリングします。ここでは、インタラクティブな反応コンポーネントを使用できます。
• save
関数は、フロントエンドで見たいものに基づいてコンテンツをレンダリングします。ここでは、通常のReactコンポーネントやフックを使用することはできません。保存された静的HTMLをデータベースとプロパティに返すために使用されます。
関数は、今日の議論の焦点です。フロントエンドでインタラクティブなコンポーネントを作成できますが、このためには、前の投稿のようにファイルに手動で含めてアクセスする必要があります。

したがって、前の投稿で行ったのと同じことをカバーしますが、今回はFrontEndSaveに投稿する前にブロックエディターにプレビューを見ることができます。

ブロックプロパティ これがメインコンテンツ（レンダリング）をそらすため、前の投稿で

関数プロパティの説明を意図的に省略しました。

あなたが反応の背景を持っている場合、あなたは私が言ったことを理解するかもしれませんが、あなたがあなたに新しい場合は、Reactドキュメントのコンポーネントとプロパティをチェックすることをお勧めします。

editコンソールに

オブジェクトを記録すると、ブロックに関連するWordPress関数と変数のリストが返されます。

attributesオブジェクトとsetAttributes関数が必要なだけで、コードのpropsオブジェクトからそれらを分解します。前の投稿では、rapidapiのコードを変更して、APIデータをsetAttributes()で保存できるようにしました。 Propsは読み取り専用なので、直接変更することはできません。

ブロック属性は状態変数に似ており、反応のsetStateに類似していますが、クライアントでは反応が実行されますが、setAttributes()は、投稿を保存した後にWordPressデータベースに属性を永続的に保存するために使用されます。したがって、私たちがする必要があるのは、それらをattributes.dataに保存してから、それらをuseState()変数の初期値として呼び出すことです。

関数の編集

前の投稿で使用したHTMLコードをfootball-rankings.php>にコピーして貼り付け、JavaScriptの背景に編集するために編集を行います。前の投稿でフロントエンドスタイルとスクリプトの2つの追加ファイルを作成したことを覚えていますか？今日のアプローチに従ってください。これらのファイルを作成する必要はありません。代わりに、すべてをEdit関数に移動できます。

フルコード

`` `javascript "@wordpress/element"から{ueseState}をインポートします。 デフォルト関数編集（Props）のエクスポート{ const {attributes、setattributes} = props; const [apidata、setapidata] = uesestate（astributes.data）;

関数fetchdata（）{ const options = { 方法：「取得」、 ヘッダー：{ 「x-rapidapi-key」：「迅速なAPIキー」、 「x-rapidapi-host」：「api-football-v1.p.rapidapi.com」、 }、 }; フェッチ（ "

https://www.php.cn/link/a2a750ff64f34c66249d0f7d3dd42004 "、 オプション ）） .then（（respons）=＆gt; respons.json（）） .then（（response）=＆gt; { newData = {...応答}; setattributes（{data：newData}）; Setapidata（NewData）; //新しいデータを使用してステータスを変更します }） .catch（（err）=＆gt; console.error（err））; }

return（

データの取得{/ボタンはデータ取得 {/スタイルセレクターのIDを追加

/} {/className

/}を使用します ランク

ロゴ

チーム名

gp

{/

...その他の統計...

/} フォーム履歴

{apidata.response [0] .league.standings [0] .map（（el）=＆gt; { // ...テーブルデータのレンダリング... }）}

）}

）; } 「我已经从@wordpress/element中包含了React钩子usestate（），而不是从React库中使用它。这是因为如果我以常规方式加载，它会为我使用的每个区块下载React。但是，如果我使用@wordpress/element」は、単一のソースからロードされます。

今回は、コードをuseEffect()にラッピングする代わりに、ボタンがクリックされたときにのみ呼び出される関数に巻き付けて、取得したデータをリアルタイムでプレビューできるようにしました。リーグテーブルを条件付きでレンダリングするために、apiDataと呼ばれる状態変数を使用しました。そのため、ボタンがクリックされてデータが取得されると、apiDataの新しいデータをfetchData()に設定し、利用可能なサッカーランキングテーブルHTMLで再レンダリングします。

投稿が保存され、ページが更新されると、リーグテーブルが消えることに気付くでしょう。これは、Null状態（null）をapiDataの初期値として使用するためです。投稿が保存されると、プロパティはattributes.dataオブジェクトに保存されます。これは、以下に示すようにuseState()変数の初期値として呼び出されます。

const [apiData, setApiData] = useState(attributes.data);

functionを保存

関数ではほぼ同じことを行いますが、少し変更します。たとえば、フロントエンドでは「データを取得」ボタンも必要ありませんし、save関数でチェックしたため、apiData状態変数も必要ありません。ただし、JSXを条件付きにレンダリングするためにeditをチェックするためにランダムapiData変数が必要です。そうしないと、未定義のエラーがスローされ、ブロックエディターUIが空白になります。 attributes.data

フルコード

`` `javascript デフォルト機能保存（Props）のエクスポート{ const {astributes} = props; const apidata = attributes.data;

return（ apidata &&（// apidataが利用可能な場合にのみレンダリング

{/

...テーブルデータのレンダリング。これは基本的に編集関数のコードと同じです...

/} ）） ）; } ``如果您在区块已存在于区块编辑器中后修改save`関数、次のエラーが表示されます： これは、保存されたコンテンツのタグが新しい

関数のタグと異なるためです。開発モードであるため、現在のページからブロックを削除して新しいブロックとして再挿入する方が簡単です。このようにして、更新されたコードが使用され、すべてが同期するために復元されます。 save

メソッドを使用すると、出力が動的であり、render_callback関数ではなくPHPによって制御されるため、これは回避できます。したがって、各方法には独自の利点と短所があります。 save

Tom Nowellは、このスタックオーバーフロー回答の

関数で何をすべきでないかについての詳細な説明を提供します。 save

エディターとフロントエンドのブロックスタイルを設定します

スタイルに関しては、前の投稿で見たものとほぼ同じですが、コメントで説明したいくつかの小さな変更があります。私はここでフルスタイルを提供しているだけです。なぜなら、それは単なる概念の証明であり、コピーして貼り付けたいものではなく、このようなスタイルでサッカーのランキングを示すブロックが必要な場合を除きます）。ビルド時にCSSにコンパイルするSCSをまだ使用していることに注意してください。

エディタースタイル

css /* 目标所有带有 data-title="Football Rankings" 的区块 */ .block-editor-block-list__layout .block-editor-block-list__block.wp-block[data-title="Football Rankings"] { /* 默认情况下，区块被限制在 650px 最大宽度加上其他设计特定代码 */ max-width: unset; /* ... 其他样式 ... */ }

フロントエンドスタイル

`` `css /

フロントエンドブロックスタイル

/ .wp-block-post-content .wp-block-football-rankings-league-table { / ...スタイル.../ } リーグスタンディング{ /

id selector

/を使用しています /

... style ...

/ } `` <em>これを</em> src/style.scss`に追加します。これは、エディターとフロントエンドのスタイルを担当しています。エディターのアクセスが必要なため、デモURLを共有できませんが、デモを見るためのビデオを録画しました：

我们将此添加到デモを見るととてもきれいですよね？これで、フロントエンドをレンダリングするだけでなく、APIデータを取得してブロックエディターにレンダリングする完全に機能的なブロックがあります。更新ボタンがあります。 ただし、WordPressブロックエディターを最大限に活用したい場合は、色、タイポグラフィ、間隔の設定などのコントロールをブロックするためのブロックUI要素をマッピングすることを検討する必要があります。これは、ブロック開発学習の旅の良い次のステップです。

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