メインコンテンツへスキップ

API の概要

WordPress Playground API の概要​

WordPress Playground は、Playground と通信するために使用できるいくつかの API を公開しています。

クエリ API​

基本的な操作は URL を調整することで実行できます。たとえば、coblocks プラグインを事前にインストールする方法は次のとおりです。

https://playground.wordpress.net/?plugin=coblocks

またはテーマ:

https://playground.wordpress.net/?theme=pendant

This is called Query API and you can learn more about it here.

気に入った URL ができたら、iframe を使用して Web サイトに埋め込むことができます。

<iframe style="width: 800px; height: 500px;" src="https://playground.wordpress.net/?plugin=coblocks"></iframe>
情報

詳細については、クエリ API セクションを確認してください。

ブループリント​

Playground をより細かく制御したい場合は、JSON ブループリントを使用できます。例えば、投稿を作成してプラグインをインストールする方法は次のとおりです。

{
"steps": [
  {
    "step": "login"
  },
  {
    "step": "installPlugin",
    "pluginData": {
      "resource": "wordpress.org/plugins",
      "slug": "friends"
    }
  },
  {
    "step": "runPHP",
    "code": "<?php include 'wordpress/wp-load.php'; wp_insert_post(array('post_title' => 'Post title', 'post_content' => 'Post content', 'post_status' => 'publish', 'post_author' => 1)); ?>"
  }
]
}

情報

WordPress Playground ではブループリントが重要な役割を果たすため、専用のドキュメントハブが用意されています。JSON ブループリントの詳細については、ブループリント ドキュメント ハブ をご覧ください。

JavaScript API​

@wp-playground/client パッケージは、Playground インスタンスを完全に制御できる JavaScript API を提供します。以下に、実際にできることの簡単な例を示します。

<iframe
	id="wp"
	style="width: 100%; height: 300px; border: 1px solid #000;"
></iframe>
<script type="module">
	// Use unpkg for convenience
	import { startPlaygroundWeb } from 'https://playground.wordpress.net/client/index.js';

	const client = await startPlaygroundWeb({
		iframe: document.getElementById('wp'),
		remoteUrl: `https://playground.wordpress.net/remote.html`,
	});
	// Let's wait until Playground is fully loaded
	await client.isReady();
</script>
情報

詳細については、JavaScript API セクションをご覧ください。

プレイグラウンド API の概念​

ブラウザ上の WordPress Playground は、リンクと iframe が中心です。どの API を選択しても、以下のいずれかの方法で使用します。

プレイグラウンドサイトへのリンク​

https://playground.wordpress.net/ リンクを変更することで、WordPress Playground をカスタマイズできます。例えば、投稿を作成したり、特定のプラグインをリクエストしたり、任意の PHP コードを実行したりできます。

このようなリンクを準備するには、クエリ API (簡単) または JSON ブループリント API (中程度) を使用します。

完成したら、ウェブサイトに掲載するだけです。例えば、チュートリアルの「試してみる」ボタンとして最適です。

<iframe> に埋め込む​

WordPress Playground は、<iframe> を使用してアプリに埋め込むことができます。

<iframe src="https://playground.wordpress.net/"></iframe>

Playground インスタンスをカスタマイズするには、次の操作を行います。

JavaScript API を使用すると、最も多くの制御が可能になりますが、Playground Client ライブラリを読み込む必要があるため、最も不便なオプションでもあります。

Careful with the demo site

The site at https://playground.wordpress.net is there to support the community, but there are no guarantees it will continue to work if the traffic grows significantly.

If you need certain availability, you should host your own WordPress Playground.

ブラウザ APIs​

ブラウザでは次の Playground API が利用できます。

  • Query API enable basic operations using only query parameters
  • Blueprints API give you a great degree of control with a simple JSON file
  • JavaScript API give you full control via a JavaScript client from an npm package

Node.js の場合​

Node.js では次の Playground API が利用できます。

これらの API は Web 版の API と非常に似ていますが、当然のことながら、リンクや iframe に基づいていません。