WordPress ブロックを操作するための CSS-Tricks に関する新しいチュートリアルがいくつか登場しています。 それらの中の一つ は WordPress ブロック開発の紹介であり、ブロックとは何かを学び、ページや投稿で使用するために WordPress に登録するのに適した場所です。
ブロックの基本はその投稿でうまくカバーされていますが、私はそれをさらに一歩進めたいと思います. その記事で、バックエンドの WordPress Block Editor でブロックをレンダリングすることと、フロントエンドのテーマでブロックをレンダリングすることの違いを学びました。 この例は、両端で異なるコンテンツとスタイルをレンダリングする単純な Pullquote ブロックでした。
さらに進んで、使用を見てみましょう 動的コンテンツ WordPress ブロックで。 より具体的には、特定のブロックがブロック エディターにドロップされたときに、外部 API からデータをフェッチし、フロント エンドでレンダリングしてみましょう。
サッカーを示すデータを出力するブロックを作成します (ええと、 フットボール) から引っ張ってきたランキング アピフットボール.
API を WordPress ブロックに統合する方法は複数あります。 ブロックの基本に関する記事では、ブロックを最初から作成するプロセスをすでに説明しているため、 @wordpress/create-block パッケージを使用して、作業をブートストラップし、プロジェクトを構造化します。
ブロックプラグインの初期化
まず最初に、コマンド ラインから新しいプロジェクトを立ち上げましょう。
npx @wordpress/create-block football-rankings私は通常、このようなプロジェクトを最初からファイルを作成することで開始しますが、この便利なユーティリティを提供してくれた WordPress Core チームに敬意を表します!
コマンドによってプロジェクト フォルダーが作成されると、技術的には完全に機能する WordPress ブロックがプラグインとして登録されます。 それでは、プロジェクト フォルダを wp-content/plugins WordPress がインストールされているディレクトリ (おそらくローカル環境で作業するのが最適です) に移動し、WordPress 管理者にログインしてプラグイン画面から有効化します。
ブロックが初期化、インストール、およびアクティブ化されたので、次のプロジェクト フォルダーを開きます。 /wp-content/plugins/football-rankings. あなたはするつもりです cd 開発を継続できるように、コマンド ラインからもアクセスできます。
これらは、現時点で集中する必要がある唯一のファイルです。
edit.jsindex.jsfootball-rankings.php
もちろん、プロジェクト内の他のファイルは重要ですが、現時点では重要ではありません。
API ソースの確認
私たちはすでに使用していることを知っています アピフットボール の好意で私たちにやってくる ラピッドAPI. 幸いなことに、RapidAPI には、2021 年のプレミア リーグ順位表の API データを取得するために必要なスクリプトを自動的に生成するダッシュボードがあります。
JSON 構造を確認したい場合は、次の方法で視覚的表現を生成できます。 JSONクラック.
からのデータの取得 edit.js file
RapidAPI コードを 反応する useEffect() フック 空の依存関係配列を使用して、ページが読み込まれたときに XNUMX 回だけ実行されるようにします。 このようにして、ブロック エディターが再レンダリングされるたびに WordPress が API を呼び出さないようにします。 を使用して確認できます wp.data.subscribe() 気にするなら。
ここに私がインポートしているコードがあります useEffect()、次にそれを fetch() RapidAPI が提供するコード:
/**
* The edit function describes the structure of your block in the context of the
* editor. This represents what the editor will render when the block is used.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
*
* @return {WPElement} Element to render.
*/
import { useEffect } from "@wordpress/element";
export default function Edit(props) {
const { attributes, setAttributes } = props;
useEffect(() => {
const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": "Your Rapid API key",
"X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
},
};
fetch("https://api-football-v1.p.rapidapi.com/v3/standings?season=2021&league=39", options)
.then( ( response ) => response.json() )
.then( ( response ) => {
let newData = { ...response };
setAttributes( { data: newData } );
console.log( "Attributes", attributes );
})
.catch((err) => console.error(err));
}, []);
return (
{ __( "Standings loaded on the front end", "external-api-gutenberg" ) }
);
}私が去ったことに注意してください return 機能はほとんど損なわれていませんが、サッカーの順位がフロント エンドにレンダリングされていることを確認するメモが含まれています。 繰り返しになりますが、この記事ではフロント エンドのみに焦点を当てます — ブロック エディターでデータをレンダリングすることもできますが、それについては別の記事に置いて焦点を合わせます。
API データを WordPress に保存する
データを取得しているので、WordPress のどこかに保存する必要があります。 これは、 attributes.data オブジェクトが便利です。 を定義しています。 data.type として object データが取得され、JSON としてフォーマットされるためです。 他のタイプがないことを確認してください。そうしないと、WordPress はデータを保存せず、デバッグするためのエラーもスローしません。
これらすべてを index.js ファイル：
registerBlockType( metadata.name, {
edit: Edit,
attributes: {
data: {
type: "object",
},
},
save,
} );これで WordPress は取得している RapidAPI データがオブジェクトであることを認識しました。 WordPress Block Editor で新しい投稿の下書きを開いて投稿を保存すると、データがデータベースに保存されます。 実際、私たちがそれを見ることができれば wp_posts.post_content phpMyAdmin、Sequel Pro、Adminer、または使用するツールでサイトのデータベースを開く場合のフィールド。
フロントエンドで JSON データを出力する
フロントエンドでデータを出力する方法は複数あります。 これから説明する方法では、データベースに格納されている属性を受け取り、それらをパラメータとして render_callback 私たちの機能 football-rankings.php ファイルにソフトウェアを指定する必要があります。
私は関心事の分離を維持するのが好きなので、これを行う方法は、XNUMX つの新しいファイルをブロック プラグインの build フォルダ： frontend.js & frontend.css （作成できます frontend.scss 内のファイル src でCSSにコンパイルされたディレクトリ build ディレクトリ）。 このようにして、バックエンドとフロントエンドのコードが分離され、 football-rankings.php ファイルは少し読みやすくなっています。
/explanation WordPress ブロック開発の紹介に戻ると、 editor.css & style.css フロントエンドとバックエンドの間でそれぞれバックエンドと共有スタイルのファイル。 追加することで frontend.scss (コンパイルすると frontend.css、フロントエンドのみを対象としたスタイルを分離できます。
これらの新しいファイルについて心配する前に、これらを呼び出す方法を次に示します。 football-rankings.php:
/** * Registers the block using the metadata loaded from the `block.json` file. * Behind the scenes, it registers also all assets so they can be enqueued * through the block editor in the corresponding context. * * @see https://developer.wordpress.org/reference/functions/register_block_type/ */ function create_block_football_rankings_block_init() { register_block_type( __DIR__ . '/build', array( 'render_callback' => 'render_frontend' )); } add_action( 'init', 'create_block_football_rankings_block_init' ); function render_frontend($attributes) { if( !is_admin() ) { wp_enqueue_script( 'football_rankings', plugin_dir_url( __FILE__ ) . '/build/frontend.js'); wp_enqueue_style( 'football_rankings', plugin_dir_url( __FILE__ ) . '/build/frontend.css' ); // HIGHLIGHT 15,16,17,18 } ob_start(); ?>
<?php return ob_get_clean();
}を使用しているので、
render_callback()属性のメソッドで、エンキューを手動で処理します Block Editor ハンドブックの提案. それはに含まれています!is_admin()XNUMX つのファイルをキューに入れているため、エディター画面の使用中にそれらがキューに入れられることはありません。XNUMX つの新しいファイルを呼び出しているので、次のことを伝えていることを確認する必要があります。
npmそれらをコンパイルします。 だから、それをしてくださいpackage.json、でscriptsセクション："scripts": { "build": "wp-scripts build src/index.js src/frontend.js", "format": "wp-scripts format", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "packages-update": "wp-scripts packages-update", "plugin-zip": "wp-scripts plugin-zip", "start": "wp-scripts start src/index.js src/frontend.js" },ファイルを含める別の方法は、ファイルに含まれるブロック メタデータでファイルを定義することです。
block.jsonファイル、 述べたように ブロック開発の概要:"viewScript": [ "file:./frontend.js", "example-shared-view-script" ], "style": [ "file:./frontend.css", "example-shared-style" ],私が一緒に行く唯一の理由は
package.jsonメソッドは、私がすでに利用しているためですrender_callback()方法。JSON データのレンダリング
レンダリング部分では、XNUMX つのブロックだけに集中しています。 一般的に言えば、フロント エンドで複数のブロックをターゲットにする必要があります。 その場合、あなたは利用する必要があります
document.querySelectorAll()ブロックの特定の ID を使用します。基本的には、ウィンドウが JSON からいくつかの主要なオブジェクトのデータを読み込んで取得し、それらをフロント エンドでレンダリングするマークアップに適用するのを待ちます。 私も変換するつもりです
attributesデータを JSON オブジェクトに変換することで、JavaScript を読みやすくなり、フットボール リーグのロゴ、チームのロゴ、統計などの詳細を JSON から HTML に設定できるようになります。「直近 5 試合」列には、チームの直近 XNUMX 試合の結果が表示されます。 API データは文字列形式であるため、データを手動で変更する必要があります。 これを配列に変換すると、チームの最近の XNUMX 試合ごとに個別の要素として HTML で使用するのに役立ちます。
import "./frontend.scss"; // Wait for the window to load window.addEventListener( "load", () => { // The code output const dataEl = document.querySelector( ".data pre" ).innerHTML; // The parent rankings element const tableEl = document.querySelector( ".league-table" ); // The table headers const tableHeaderEl = document.querySelector( "#league-standings .header" ); // Parse JSON for the code output const dataJSON = JSON.parse( dataEl ); // Print a little note in the console console.log( "Data from the front end", dataJSON ); // All the teams let teams = dataJSON.data.response[ 0 ].league.standings[ 0 ]; // The league logo let leagueLogoURL = dataJSON.data.response[ 0 ].league.logo; // Apply the league logo as a background image inline style tableHeaderEl.style.backgroundImage = `url( ${ leagueLogoURL } )`; // Loop through the teams teams.forEach( ( team, index ) => { // Make a div for each team const teamDiv = document.createElement( "div" ); // Set up the columns for match results const { played, win, draw, lose, goals } = team.all; // Add a class to the parent rankings element teamDiv.classList.add( "team" ); // Insert the following markup and data in the parent element teamDiv.innerHTML = `${ index + 1 }
${ team.team.name }`; // Stringify the last five match results for a team const form = team.form.split( "" ); // Loop through the match results form.forEach( ( result ) => { // Make a div for each result const resultEl = document.createElement( "div" ); // Add a class to the div resultEl.classList.add( "result" ); // Evaluate the results resultEl.innerText = result; // If the result a win if ( result === "W" ) { resultEl.classList.add( "win" ); // If the result is a draw } else if ( result === "D" ) { resultEl.classList.add( "draw" ); // If the result is a loss } else { resultEl.classList.add( "lost" ); } // Append the results to the column teamDiv.querySelector( ".form-history" ).append( resultEl ); }); tableEl.append( teamDiv ); }); });${ played }${ win }${ draw }${ lose }${ goals.for }${ goals.against }${ team.points }スタイリングに関しては自由です！ 何か作業をしたい場合は、出発点として使用できるスタイルの完全なセットを用意しています.
私は以来、SCSSで物事をスタイリングしました
@wordpress/create-blockパッケージはすぐに使用できます。 走るnpm run startコマンドラインで SCSS ファイルを監視し、保存時に CSS にコンパイルします。 または、次を使用できますnpm run build保存するたびに SCSS をコンパイルし、残りのプラグイン バンドルをビルドします。SCSSを見る
body { background: linear-gradient(to right, #8f94fb, #4e54c8); } .data pre { display: none; } .header { display: grid; gap: 1em; padding: 10px; grid-template-columns: 1fr 1fr 3fr 4fr 3fr; align-items: center; color: white; font-size: 16px; font-weight: 600; background-repeat: no-repeat; background-size: contain; background-position: right; } .frontend#league-standings { width: 900px; margin: 60px 0; max-width: unset; font-size: 16px; .header { .stats { display: flex; gap: 15px; & > div { width: 30px; } } } } .league-table { background: white; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; padding: 1em; .position { width: 20px; } .team { display: grid; gap: 1em; padding: 10px 0; grid-template-columns: 1fr 1fr 3fr 4fr 3fr; align-items: center; } .team:not(:last-child) { border-bottom: 1px solid lightgray; } .team-logo img { width: 30px; } .stats { display: flex; gap: 15px; } .stats > div { width: 30px; text-align: center; } .form-history { display: flex; gap: 5px; } .form-history > div { width: 25px; height: 25px; text-align: center; border-radius: 3px; font-size: 15px; } .form-history .win { background: #347d39; color: white; } .form-history .draw { background: gray; color: white; } .form-history .lost { background: lightcoral; color: white; } }これがデモです！
それを確認してください — データを取得して WordPress サイトのフロントエンドでレンダリングするブロック プラグインを作成しました。
APIを見つけました
fetch()そこからデータを編集し、WordPress データベースに保存し、解析し、HTML マークアップに適用してフロント エンドに表示しました。 単一のチュートリアルとしては悪くありませんよね?繰り返しますが、テーマのフロント エンドに加えてブロック エディターでランキングがレンダリングされるように、同じ種類のことを行うことができます。 しかし、これをフロントエンドに焦点を当て続けることで、WordPress ブロックでデータをフェッチする方法と、データを構造化して表示用にレンダリングする方法を理解できることを願っています。
