Skip to content

Add Japanese translations to Providing content for your demo with Playground #2213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Add Japanese translations to Providing content for your demo with Playground #2213

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
274 changes: 274 additions & 0 deletions ...urus-plugin-content-docs/current/main/guides/providing-content-for-your-demo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,274 @@
---
title: Playground でデモ用のコンテンツを提供する
slug: /guides/providing-content-for-your-demo
description: WordPress Playground でデモ用のコンテンツを提供する
---

WordPress Playground で優れたデモを提供するために、プラグインやテーマの機能をわかりやすく示すために、デフォルトのコンテンツを読み込むことをお勧めします。このデフォルトコンテンツには、画像やその他のアセットが含まれる場合があります。

<!--
One of the things you may want to do to provide a good demo with WordPress Playground is to load default content to better highlight the features of your plugin or theme. This default content may include images or other assets.
-->

Playground インスタンスにコンテンツをインポート (または生成) するために使用できる [ブループリントのステップ](/blueprints/steps) と方策がいくつかあります。

<!--
There are several [blueprint steps](/blueprints/steps) and strategies you can use to import content (or generate it) in the Playground instance:
-->

## `importWxr`

[`importWxr`](/blueprints/steps#importWxr) ステップを使用すると、以前に [既存の WordPress インストールからエクスポートされた](https://wordpress.org/documentation/article/tools-export-screen/) `.xml` ファイルを介して独自のコンテンツをインポートできます。

<!--
With the [`importWxr`](/blueprints/steps#importWxr) step, you can import your own content via a `.xml` file previously [exported from an existing WordPress installation](https://wordpress.org/documentation/article/tools-export-screen/):
-->

```json
"steps": [
...,
{
"step": "importWxr",
"file": {
"resource": "url",
"url": "https://raw.githubusercontent.com/WordPress/blueprints/trunk/blueprints/install-activate-setup-theme-from-gh-repo/blueprint-content.xml"
}
},
...
]
```

[<kbd> &nbsp; Run Blueprint &nbsp; </kbd>](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/install-activate-setup-theme-from-gh-repo/blueprint.json) &nbsp; [<kbd> &nbsp; See <code>blueprint.json</code> &nbsp; </kbd>](https://github.com/WordPress/blueprints/blob/eb6da7dfa295a095eea2e424c0ae83a219803a8d/blueprints/install-activate-setup-theme-from-gh-repo/blueprint.json#L43)

:::info
インポートしたコンテンツに画像を含めるには、画像を GitHub リポジトリにアップロードし、URL 形式 `https://raw.githubusercontent.com/{repo}/{branch}/{image_path}` を使用して、エクスポートされた `.xml` ファイル内の画像のパスを検索/置換するのが良い方法です。

<!--
To include images in your imported content, a good approach is to upload the images to your GitHub repo and search/replace the path for them in the exported `.xml` file using the URL format: `https://raw.githubusercontent.com/{repo}/{branch}/{image_path}`.
-->

```html
<!-- wp:image {"lightbox":{"enabled":false},"id":4751,"width":"78px","sizeSlug":"full","linkDestination":"none","align":"center","className":"no-border"} -->
<figure class="wp-block-image aligncenter size-full is-resized no-border">
<img src="https://raw.githubusercontent.com/WordPress/blueprints/trunk/blueprints/install-activate-setup-theme-from-gh-repo/images/avatars.png" alt="" class="wp-image-4751" style="width:78px" />
</figure>
<!-- /wp:image -->
```

:::

エクスポートした `.xml` ファイルと参照されているアセット (画像など) を、GitHub リポジトリ内の `blueprint.json` と同じディレクトリにアップロードすることをお勧めします。

<!--
It is recommended to upload your exported `.xml` file and any referenced assets (such as images) to the same directory as your `blueprint.json` in your GitHub repository.
-->

## `importWordPressFiles`

[`importWordPressFiles`](/blueprints/steps#importWordPressFiles) ステップを使用すると、指定された `.zip` ファイルから独自のトップレベル WordPress ファイルをインスタンスのルートフォルダにインポートできます。例えば、`.zip` ファイルに `wp-content` ディレクトリと `wp-includes` ディレクトリが含まれている場合、Playground のルートフォルダ内の対応するディレクトリが置き換えられます。

<!--
With the [`importWordPressFiles`](/blueprints/steps#importWordPressFiles) step, you can import your own top-level WordPress files from a given `.zip` file into the instance's root folder. For example, if a `.zip` file contains the `wp-content` and `wp-includes` directories, they will replace the corresponding directories in Playground's root folder.
-->

この `zip` ファイルは、[Playground オプション メニュー](/web-instance#playground-options-menu) の「zip としてダウンロード」オプションを使用して、任意の Playground インスタンスから作成できます。

<!--
This `zip` file can be created from any Playground instance with the "Download as zip" option in the [Playground Options Menu](/web-instance#playground-options-menu).
-->

Playground インスタンスで WordPress テーマまたはプラグインのデモ（画像やその他のアセットを含む）を準備し、そのデモのスナップショットを`.zip`ファイルにエクスポートできます。このファイルは、後で`importWordPressFiles`ステップを使用してインポートできます。

<!--
You can prepare a demo for your WordPress theme or plugin (including images and other assets) in a Playground instance and then export a snapshot of that demo into a `.zip` file. This file can be imported later using the `importWordPressFiles` step.
-->

```json
{
"landingPage": "/",
"login": true,
"steps": [
{
"step": "importWordPressFiles",
"wordPressFilesZip": {
"resource": "url",
"url": "https://raw.githubusercontent.com/adamziel/playground-sites/main/playground-for-site-builders/playground.zip"
}
}
]
}
```

[<kbd> &nbsp; Run Blueprint &nbsp; </kbd>](https://playground.wordpress.net/builder/builder.html#{%22landingPage%22:%22/%22,%22login%22:true,%22steps%22:[{%22step%22:%22importWordPressFiles%22,%22wordPressFilesZip%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/adamziel/playground-sites/main/playground-for-site-builders/playground.zip%22}}]})

## `importThemeStarterContent`

[一部のテーマにはスターターコンテンツ](https://make.wordpress.org/core/2016/11/30/starter-content-for-themes-in-4-7/)があり、公開してテーマの機能を強調することができます。

<!--
[Some themes have starter content](https://make.wordpress.org/core/2016/11/30/starter-content-for-themes-in-4-7/) that can be published to highlight the features of a theme.
-->

[`importThemeStarterContent` ステップ](/blueprints/steps#importThemeStarterContent) を使用すると、そのテーマが Playground インスタンスでアクティブ化されていないものであっても、任意のテーマのスターター コンテンツを公開できます。

<!--
With the [`importThemeStarterContent` step](/blueprints/steps#importThemeStarterContent) you can publish the starter content of any theme even if that theme is not the one activated in the Playground instance.
-->

```json

"steps": [
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "twentytwenty"
}
},
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "twentytwentyone"
},
"options": {
"activate": true
}
},
{
"step": "importThemeStarterContent",
"themeSlug": "twentytwenty"
}
]

```

[<kbd> &nbsp; Run Blueprint &nbsp; </kbd>](https://playground.wordpress.net/builder/builder.html#{%22steps%22:[{%22step%22:%22installTheme%22,%22themeData%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwenty%22}},{%22step%22:%22installTheme%22,%22themeData%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwentyone%22},%22options%22:{%22activate%22:true}},{%22step%22:%22importThemeStarterContent%22,%22themeSlug%22:%22twentytwenty%22}]})

[`installTheme` ステップ](/blueprints/steps#installTheme)でテーマをインストールするときに、`importStarterContent` オプションを `true` に設定することで、テーマのスターター コンテンツを公開することもできます。

<!--
You can also publish the starter content of a theme when installing it with the [`installTheme` step](/blueprints/steps#installTheme) by setting to `true` its `importStarterContent` option:
-->

```json
{
"steps": [
{
"step": "installTheme",
"themeData": {
"resource": "wordpress.org/themes",
"slug": "twentytwenty"
},
"options": {
"activate": true,
"importStarterContent": true
}
}
]
}
```

[<kbd> &nbsp; Run Blueprint &nbsp; </kbd>](https://playground.wordpress.net/builder/builder.html#{%22steps%22:[{%22step%22:%22installTheme%22,%22themeData%22:{%22resource%22:%22wordpress.org/themes%22,%22slug%22:%22twentytwenty%22},%22options%22:{%22activate%22:true,%22importStarterContent%22:true}}]})

## `wp-cli`

テーマやプラグインのコンテンツを生成するもう 1 つの方法は、`wp-cli` ステップを使用することです。このステップでは、[`wp post generate`](https://developer.wordpress.org/cli/commands/post/generate/) などの [WP-CLI コマンド](https://developer.wordpress.org/cli/commands/) を実行できます。

<!--
Another way of generating content for your theme or plugin is via the `wp-cli` step that allows you to run [WP-CLI commands](https://developer.wordpress.org/cli/commands/) such as [`wp post generate`](https://developer.wordpress.org/cli/commands/post/generate/):
-->

```json
{
"landingPage": "/wp-admin/edit.php",
"login": true,
"steps": [
{
"step": "wp-cli",
"command": "wp post generate --count=20 --post_type=post --post_date=1999-01-04"
}
]
}
```

[<kbd> &nbsp; Run Blueprint &nbsp; </kbd>](https://playground.wordpress.net/builder/builder.html#{%22landingPage%22:%22/wp-admin/edit.php%22,%22login%22:true,%22steps%22:[{%22step%22:%22wp-cli%22,%22command%22:%22wp%20post%20generate%20--count=20%20--post_type=post%20--post_date=1999-01-04%22}]})

また、`wp-cli` ステップを `writeFile` ステップと組み合わせて使用 ​​ して、既存のコンテンツに基づいて投稿を作成し、Playground インスタンスに画像をインポートすることもできます。

<!--
You can also use the `wp-cli` step in combination with the `writeFile` step to create posts based on existing content and to import images to the Playground instance:
-->

```json
{
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
"landingPage": "/?p=4",
"login": true,
"steps": [
{
"step": "writeFile",
"path": "/wordpress/wp-content/postcontent.md",
"data": {
"resource": "url",
"url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/wpcli-post-with-image/postcontent.md"
}
},
{
"step": "wp-cli",
"command": "wp post create --post_title='Welcome to Playground' --post_status='published' /wordpress/wp-content/postcontent.md"
},
{
"step": "writeFile",
"path": "/wordpress/wp-content/Select-storage-method.png",
"data": {
"resource": "url",
"url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/wpcli-post-with-image/Select-storage-method.png"
}
},
{
"step": "wp-cli",
"command": "wp media import wordpress/wp-content/Select-storage-method.png --post_id=4 --title='Select your storage method' --featured_image"
}
]
}
```

[<kbd> &nbsp; Run Blueprint &nbsp; </kbd>](https://playground.wordpress.net/builder/builder.html#{%22$schema%22:%22https://playground.wordpress.net/blueprint-schema.json%22,%22meta%22:{%22title%22:%22Use%20wp-cli%20to%20add%20a%20post%20with%20image%22,%22description%22:%22Use%20wp-cli%20to%20create%20a%20post%20from%20text%20file%20with%20block%20markup%20and%20a%20featured%20image%22,%22author%22:%22bph%22,%22categories%22:[%22Content%22,%22wpcli%22]},%22landingPage%22:%22/?p=4%22,%22login%22:true,%22steps%22:[{%22step%22:%22writeFile%22,%22path%22:%22/wordpress/wp-content/postcontent.md%22,%22data%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/wpcli-post-with-image/postcontent.md%22}},{%22step%22:%22wp-cli%22,%22command%22:%22wp%20post%20create%20--post_title='Welcome%20to%20Playground'%20--post_status='published'%20/wordpress/wp-content/postcontent.md%22},{%22step%22:%22writeFile%22,%22path%22:%22/wordpress/wp-content/Select-storage-method.png%22,%22data%22:{%22resource%22:%22url%22,%22url%22:%22https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/wpcli-post-with-image/Select-storage-method.png%22}},{%22step%22:%22wp-cli%22,%22command%22:%22wp%20media%20import%20wordpress/wp-content/Select-storage-method.png%20--post_id=4%20--title='Select%20your%20storage%20method'%20--featured_image%22}]})

:::tip

コンテンツとアイキャッチ画像の関係を示す完全な例を確認するには、[Blueprints ギャラリー](https://github.com/WordPress/blueprints/blob/trunk/GALLERY.md) の ["wp-cli を使用して画像付きの投稿を追加する"](https://github.com/WordPress/blueprints/tree/trunk/blueprints/wpcli-post-with-image) の例を確認してください。

:::

<!--
:::tip

Check the ["Use wp-cli to add a post with image"](https://github.com/WordPress/blueprints/tree/trunk/blueprints/wpcli-post-with-image) example from the [Blueprints Gallery](https://github.com/WordPress/blueprints/blob/trunk/GALLERY.md) to see the full example showing the connection between the content and the featured image.

:::
-->

## `runPHP`

[`runPHP` ステップ](https://wordpress.github.io/wordpress-playground/blueprints/steps#runPHP) を使用すると、たとえば [`wp_insert_post` 関数](https://developer.wordpress.org/reference/functions/wp_insert_post/) を使用して、WordPress インストールに情報を挿入するために必要な PHP コードを実行できます。

<!--
With the [`runPHP` step](https://wordpress.github.io/wordpress-playground/blueprints/steps#runPHP) you can run any PHP code you require to insert info into your WordPress installation, for example by using the [`wp_insert_post` function](https://developer.wordpress.org/reference/functions/wp_insert_post/).
-->

```json
{
"landingPage": "/wp-admin/edit.php",
"login": true,
"steps": [
{
"step": "runPHP",
"code": "<?php require_once 'wordpress/wp-load.php'; wp_insert_post(array('post_title' => 'Simple post from PHP', 'post_content' => '<!-- wp:paragraph --><p>This is a simple post inserted with wp_insert_post</p><!-- /wp:paragraph -->', 'post_author' => 1, 'post_status' => 'publish')); ?>"
}
]
}
```

[<kbd> &nbsp; Run Blueprint &nbsp; </kbd>](<https://playground.wordpress.net/builder/builder.html#{%22landingPage%22:%22/wp-admin/edit.php%22,%22login%22:true,%22steps%22:[{%22step%22:%22runPHP%22,%22code%22:%22%3C?php%20require_once%20'wordpress/wp-load.php';%20wp_insert_post(array('post_title'%20=%3E%20'Simple%20post%20from%20wp_insert_post',%20'post_content'%20%20=%3E%20'%3C!--%20wp:paragraph%20--%3E%3Cp%3EThis%20is%20a%20simple%20post%20inserted%20with%20wp_insert_post%3C/p%3E%3C!--%20/wp:paragraph%20--%3E',%20'post_author'%20%20%20=%3E%201,%20'post_status'%20=%3E%20'publish'));%20?%3E%22}]}>)
Loading