From 4405241aaa30c4c67d047f7325ce2a5ef0bfcae8 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Fri, 24 Jan 2020 17:36:59 -0800 Subject: [PATCH 01/27] Translate docs/tutorial/wordpress-source-plugin-tutorial --- .../wordpress-source-plugin-tutorial.md | 123 +++++++++--------- 1 file changed, 62 insertions(+), 61 deletions(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index d04717621..e40e223a9 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -2,40 +2,40 @@ title: "WordPress Source Plugin Tutorial" --- -## How to create a site with data pulled from WordPress +## WordPress から取得したデータを使用するサイトの作成方法 -### What this tutorial covers: +### このチュートリアルの範囲: -In this tutorial, you will install the `gatsby-source-wordpress` plugin in order to pull blog and image data from a WordPress install into your Gatsby site and render that data. This [Gatsby + WordPress demo site](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress) shows you the source code for an example site similar to what you’re going to be building in this tutorial, although it’s missing the cool images you’ll be adding in the next part of this tutorial, [Adding Images to a WordPress Site](/tutorial/wordpress-image-tutorial/). :D +このチュートリアルでは、 Gatsby サイトに設定された WordPress からブログや画像データを取得・レンダリングするために `gatsby-source-wordpress` をインストールすることになります。こちらの [Gatsby + WordPress デモサイト](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress) では、これからチュートリアルで作成するサイトに近いサンプルサイトのソースコードを確認できます。サンプルサイトには見た目の良い画像は設定されていませんが、次の [WordPress サイトに画像を追加する](/tutorial/wordpress-image-tutorial/) チュートリアルで設定を行うことになるでしょう。 -#### But do you prefer GraphQL? +#### まって、 GraphQL の方がいい？ -If you prefer using GraphQL, there's a [wp-graphql](https://github.com/wp-graphql/wp-graphql) plugin to easily expose both default and custom data in WordPress. +もし GraphQL を使いたいとお考えでしたら、 WordPress で簡単にデータを GraphQL で取得できる [wp-graphql](https://github.com/wp-graphql/wp-graphql) プラグインがあります。 -The same authentication schemes supported by the WP-API are supported in wp-graphql, which can be used with the [gatsby-source-graphql](/packages/gatsby-source-graphql/) plugin. +WP-API でサポートされている同一の認証スキームは wp-graphql でサポートされています。これは [gatsby-source-graphql](/packages/gatsby-source-graphql/) と同時に使うことができます。 -## Why go through this tutorial? +## なぜこのチュートリアルをやるの？ -While each source plugin may operate differently from others, it’s worth going through this tutorial because you will almost definitely be using a source plugin in most Gatsby sites you build. This tutorial will walk you through the basics of connecting your Gatsby site to a CMS, pulling in data, and using React to render that data in beautiful ways on your site. +各ソースプラグインは、他と異なった動きをすることがあります。ほとんどの Gatsby サイトではほぼ確実にソースプラグインを使用することになるため、このチュートリアルはきっと助けになるでしょう。このチュートリアルでは Gatsby サイトを CMS に接続し、データを取得し、そのデータを React で表示するための素晴らしい方法の基礎を学ぶことができます。 -If you’d like to look at the growing number of source plugins available to you, search for “source” in the [Gatsby plugin library](/plugins/?=source). +もし利用可能な、今も増え続けているソースプラグインをご覧になりたければ、 [Gatsby プラグインライブラリー](/plugins/?=source) で "source" というキーワードで検索してください。 -### Creating a site with the `gatsby-source-wordpress` plugin +### `gatsby-source-wordpress` プラグインを使用するサイトを作成 -Create a new Gatsby project and change directories into the new project you just created: +Gatsby プロジェクトを新規作成し、生成されたプロジェクトのディレクトリーに移動してください。 ```shell gatsby new wordpress-tutorial-site cd wordpress-tutorial-site ``` -Install the `gatsby-source-wordpress` plugin. For extra reading on the plugin’s features and examples of GraphQL queries not included in this tutorial, see the [`gatsby-source-wordpress` plugin’s README file](/packages/gatsby-source-wordpress/?=wordpress). +`gatsby-source-wordpress` プラグインをインストールしてください。このチュートリアルでは説明していないプラグインの機能や GraphQL クエリーの例については、 [`gatsby-source-wordpress` プラグインの README ファイル](/packages/gatsby-source-wordpress/?=wordpress) をご覧ください。 ```shell npm install --save gatsby-source-wordpress ``` -Add the `gatsby-source-wordpress` plugin to `gatsby-config.js` using the following code, which you can also find in the [demo site’s source code](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-wordpress/gatsby-config.js). +以下のコードを使い、 `gatsby-config.js` に `gatsby-source-wordpress` プラグインを追加してください。これは[デモサイトのソースコード](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-wordpress/gatsby-config.js) でも確認できます。 ```js:title=gatsby-config.js module.exports = { @@ -45,27 +45,27 @@ module.exports = { plugins: [ // https://public-api.wordpress.com/wp/v2/sites/gatsbyjsexamplewordpress.wordpress.com/pages/ /* - * Gatsby's data processing layer begins with “source” - * plugins. Here the site sources its data from WordPress. + * Gatsby のデータ処理レイヤーは "source" プラグインから始まります。 + * このサイトでは WordPress からデータを取得しています。 */ // highlight-start { resolve: `gatsby-source-wordpress`, options: { /* - * The base URL of the WordPress site without the trailingslash and the protocol. This is required. - * Example : 'dev-gatbsyjswp.pantheonsite.io' or 'www.example-site.com' + * 最後のスラッシュとプロトコルを含まない WordPress サイトのベース URL。これは必須項目です。 + * 例 : 'dev-gatbsyjswp.pantheonsite.io' または 'www.example-site.com' */ baseUrl: `dev-gatbsyjswp.pantheonsite.io`, - // The protocol. This can be http or https. + // プロトコル。ここでは http か https を設定できます。 protocol: `http`, - // Indicates whether the site is hosted on wordpress.com. - // If false, then the assumption is made that the site is self hosted. - // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2. - // If your site is hosted on wordpress.org, then set this to false. + // wordpress.com にホスティングされているかを示します。 + // false を設定した場合、セルフホスティングだと仮定されます。 + // true を設定した場合、プラグインは JSON REST API V2 を使用して wordpress.com からコンテンツを取得します。 + // もし wordpress.org にホスティングされている場合は false を指定してください。 hostingWPCOM: false, - // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents. - // This feature is untested for sites hosted on WordPress.com + // もし useACF が true の場合、ソースプラグインは WordPress ACF プラグインコンテンツのインポートを試行します。 + // この機能は WordPress.com にホスティングされたサイトではテストされていません。 useACF: true, }, }, @@ -74,19 +74,19 @@ module.exports = { } ``` -### Creating GraphQL queries that pull data from WordPress +### WordPress からデータを取得する GraphQL クエリーの作成 -Now you are ready to create a GraphQL query to pull in some data from the WordPress site. You will create a query that pulls in the title of the blog posts, date they were posted, and blogpost content. +これで WordPress サイトからデータを取得するための GraphQL クエリー を作成する準備が整いました。それではブログ記事のタイトル、投稿日付、ブログ記事の本文を取得するためのクエリーを作成しましょう。 -Run: +以下を実行してください。 ```shell gatsby develop ``` -In your browser, open localhost:8000 to see your site, and open localhost:8000/\_\_\_graphql so that you can create your GraphQL queries. +ブラウザーから localhost:8000 を開いてください。また GraphQL クエリーを作成するために localhost:8000/\_\_\_graphql を開いてください。 -As an exercise, try re-creating the following queries in your GraphiQL explorer. This first query will pull in the blogpost content from WordPress: +練習として、 GraphQL エクスプローラーで以下のクエリーの再作成に挑戦してみてください。この最初のクエリーは WordPress のブログ記事の本文を取得します。 ```graphql query { @@ -104,7 +104,7 @@ query { } ``` -This next query will pull in a sorted list of the blog posts: +次のクエリーはソートされたブログ記事のリストを取得します。 ```graphql { @@ -120,9 +120,9 @@ This next query will pull in a sorted list of the blog posts: } ``` -## Rendering the blog posts to `index.js` +## `index.js` にブログ記事をレンダリングする -Now that you've created GraphQL queries that pull in the data you want, you'll use that second query to create a list of sorted blogpost titles on your site's homepage. Here is what your `index.js` should look like: +これであなたが必要としているデータを取得する GraphQL クエリーが作成できました。 2 番目のクエリーはあなたのサイトのトップページで、ソートされたブログ記事のタイトルのリストを作成するために使用します。こちらが `index.js` のあるべき状態です。 ```jsx:title=src/pages/index.js import React from "react" @@ -166,28 +166,28 @@ export const pageQuery = graphql` //highlight-end ``` -Save these changes and look at localhost:8000 to see your new homepage with a list of sorted blog posts! +こちらの変更を保存して localhost:8000 にアクセスし、ソートされたブログ記事のリストがある新しいトップページを確認しましょう！ -![WordPress home after query](./images/wordpress-source-plugin-home.jpg) +![クエリー実行後の WordPress ホーム](./images/wordpress-source-plugin-home.jpg) -> **NOTE:** to future editors: it would be useful to also have examples of how to load blog posts to their own individual pages. And helpful to insert a screenshot of the final result here +> **ヒント:** 将来の編集者へ: ブログ記事をそれぞれの個別ページに表示させるための例も示しておくと便利でしょう。また最終的な結果のスクリーンショットをここに挿入することも助けとなります。 -## Create pages for each blog post and link to them +## 各ブログ記事のページを作成し、それらにリンクを設定する -An index page with a post title and excerpt is great, but you should also build pages out for each of the blog posts, and link to them from your `index.js` file. +投稿のタイトルと参照があるインデックスページは素晴らしいものですが、あなたは各ブログ記事の個別ページを作り、それらに `index.js` ファイルからリンクさせる必要があるでしょう。 -To do this, you need to: +そのためには以下を行う必要があります。 -1. Create pages for each blog post -2. Link up the title on the index page with the post page. +1. 各ブログ記事のページを作成する。 +2. インデックスページ上のタイトルからブログ記事へのリンクを作成する。 -If you haven't already, please read through [Part 7](/tutorial/part-seven/) of the foundational tutorial, as it goes through the concept and examples of this process with Markdown instead of WordPress. +もしまだこれらを行っていないようでしたら、基本チュートリアルの[パート 7](/tutorial/part-seven/) をご覧ください。このページでは WordPress の代わりに Markdown を使用してコンセプトとこのプロセスの例について説明しています。 -### Creating pages for each blog post. +### 各ブログ記事へのページを作成する -In Part 7 of the tutorial, the first step in creating pages is creating slugs for the markdown files. Since you are using WordPress and not Markdown files, you can grab the slugs that get returned from your API call to the WordPress source. You can skip creating slugs, since you already have them. +先程のチュートリアルのパート 7 では、ページを作成するための最初の一歩として Markdown ファイルのために slug を作成しています。 Markdown ファイルの代わりに WordPress を使用しているため、 WordPress への API 呼び出しから取得できる slag を利用できます。あなたはすでに slug を取得できるため、新たにそれらを作成する必要はありません。 -Open up your `gatsby-node.js` file in the root of your project (it should be blank except for some comments) and add the following: +プロジェクトのルートにある `gatsby-node.js` ファイルを開き（これはいくつかのコメントを除けば空のファイルのはずです）以下を追記してください。 ```js:title=gatsby-node.js const path = require(`path`) @@ -213,15 +213,15 @@ exports.createPages = ({ graphql, actions }) => { } ``` -Next, stop and restart the `gatsby develop` environment. As you watch the terminal you should see two Post objects log to the terminal: +次に `gatsby develop` 環境の停止と再起動を行います。ターミナルを見ることで、あなたは 2 つの記事オブジェクトのログ出力を見ることができます。 -![Two posts logged to the terminal](./images/wordpress-source-plugin-log.jpg) +![ターミナルにログ出力された 2 つのブログ記事](./images/wordpress-source-plugin-log.jpg) -Excellent! As explained in Part 7 of the tutorial, this `createPages` export is one of the Gatsby "workhorses" and allows us to create your blog posts (or pages, or custom post types, etc.) from your WordPress install. +すばらしい！チュートリアルのパート 7 で述べられたように、この `createPages` の出力は Gatsby の主機能の 1 つであり、 WordPress のインストールからブログ記事（もしくはページやカスタムポストなど）を作成することを可能にします。 -Before you can create the blog posts, however, you need to specify a template to build the pages. +しかしながら、実際のブログ記事を作成するためには、事前にページをビルドするためのテンプレートを指定しなければなりません。 -In your `src` directory, create a directory called `templates` and in the newly created `templates` folder, create a filed named `blog-post.js`. In that new file, paste the following: +`src` ディレクトリー内で、 `templates` という名前のディレクトリーを作成し、その中で `blog-post.js` というフィールドを作成します。その新しいファイル内に、以下をペーストしてください。 ```jsx:title=src/templates/blog-post.js import React from "react" @@ -254,9 +254,9 @@ export const query = graphql` ` ``` -What is this file doing? After importing your dependencies, it constructs the layout of the post with JSX. It wraps everything in the `Layout` component, so the style is the same throughout the site. Then, it simply adds the post title and the post content. You can add anything you want and can query for here (e.g. feature image, post meta, custom fields, etc.). +このファイルは何をやっているのでしょうか？依存関係のインポートをした後に、 JSX を使いブログ記事のレイアウトを構築しています。これは `Layout` コンポーネント内のすべてをラップしているため、サイト全体を通してレイアウトは同じです。また、これは記事のタイトルと本文を単純に追加しています。ここでは好きなものを追加したり、クエリー内容を変更したり出来ます（例: 画像、記事のメタデータ、カスタムフィールドなど） -Below that, you can see the GraphQL query calling the specific post based on the `$slug`. This variable is passed to the `blog-post.js` template when the page is created in `gatsby-node.js`. To accomplish this, add the following code to the `gatsby-node.js` file: +以下では `$slug` を使用した特定の記事を取得する GraphQL を確認できます。この変数は `gatsby-node.js` 内でページが作成される際に `blog-post.js` テンプレートへ渡されます。これを行うために、以下のコードを `gatsby-node.js` ファイルに追記してください。 ```js:title=gatsby-node.js const path = require(`path`) @@ -294,17 +294,18 @@ exports.createPages = ({ graphql, actions }) => { } ``` -You will need to stop and start your environment again using `gatsby develop`. When you do, you will not see a change on the index page of the site, but if you navigate to a 404 page, like [http://localhost:8000/asdf](http://localhost:8000/asdf), you should see the two sample posts created and be able to click on them to go to the sample posts: +再度開発環境を `gatsby develop` コマンドで再起動する必要があります。再起動を行ったら、サイトのインデックスページでは変化は見られませんが、 [http://localhost:8000/asdf](http://localhost:8000/asdf) のような 404 ページを閲覧すると、作成した 2 つの +サンプル記事を確認でき、それらをクリックすることでサンプル記事のページに行くことが出来ます。 -![Sample post links](./images/wordpress-source-plugin-sample-post-links.gif) +![サンプル記事のリンク](./images/wordpress-source-plugin-sample-post-links.gif) -But nobody likes to go to a 404 page to find a blog post! So, let's link these up from the home page. +しかし、誰もブログ記事を見つけようと 404 ページに飛びたいとは思いませんね！なので、トップページからリンクを張りましょう。 -### Linking to posts from the homepage. +### トップページから記事にリンクを張る -Since you already have your structure and query done for the `index.js` page, all you need to do is use the `Link` component to wrap your titles and you should be good to go. +すでに `index.js` に構造とクエリーの設定を行っているため、ただ `Link` コンポーネントを使ってタイトルを囲むだけで設定できます。 -Open up your `index.js` file and add the following: +`index.js` ファイルを開き、以下を追記してください。 ```jsx:title=src/pages/index.js import React from "react" @@ -347,10 +348,10 @@ export const pageQuery = graphql` ` ``` -And that's it! When you wrap the title in the `Link` component and reference the slug of the post, Gatsby will add some magic to the link, preload it, and make the transition between pages incredibly fast: +これで完了です！ `Link` コンポーネントでタイトルを囲って記事の slug を参照させれば、 Gatsby は魔法のようにそこへのリンクを設定し、事前に読み込み、ページ間の移動を信じられないほど早くしてくれます。 -![Final product with links from the home page to the blog posts](./images/wordpress-source-plugin-home-to-post-links.gif) +![トップページからブログ記事へのリンクが設置された最終的な完成品](./images/wordpress-source-plugin-home-to-post-links.gif) -### Wrapping up. +### まとめ -You can apply the same procedure to calling and creating pages, custom post types, custom fields, taxonomies, and all the fun and flexible content WordPress is known for. This can be as simple or as complex as you would like it to be, so explore and have fun with it! +同じ手順を使うことで、ページを呼び出し生成したり、カスタム記事タイプやカスタムフィールドを設定したり、分類を行ったり、そして WordPress の機能として知られているすべての楽しく柔軟なコンテンツを利用したりできます。これはいくらでも簡単にしたり複雑にしたりできます。なので楽しみながらいろいろ試してみてください！ From c3a3b5b9689b141ca99a76c207e022ad379e4bad Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Fri, 24 Jan 2020 19:53:38 -0800 Subject: [PATCH 02/27] Fix 1 byte semicolons with 2 byte ones --- docs/tutorial/wordpress-source-plugin-tutorial.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index e40e223a9..20c175fee 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -4,9 +4,9 @@ title: "WordPress Source Plugin Tutorial" ## WordPress から取得したデータを使用するサイトの作成方法 -### このチュートリアルの範囲: +### このチュートリアルの範囲： -このチュートリアルでは、 Gatsby サイトに設定された WordPress からブログや画像データを取得・レンダリングするために `gatsby-source-wordpress` をインストールすることになります。こちらの [Gatsby + WordPress デモサイト](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress) では、これからチュートリアルで作成するサイトに近いサンプルサイトのソースコードを確認できます。サンプルサイトには見た目の良い画像は設定されていませんが、次の [WordPress サイトに画像を追加する](/tutorial/wordpress-image-tutorial/) チュートリアルで設定を行うことになるでしょう。 +このチュートリアルでは、 Gatsby サイトに設定された WordPress からブログや画像データを取得・レンダリングするために `gatsby-source-wordpress` をインストールすることになります。こちらの [Gatsby + WordPress デモサイト](https：//github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress) では、これからチュートリアルで作成するサイトに近いサンプルサイトのソースコードを確認できます。サンプルサイトには見た目の良い画像は設定されていませんが、次の [WordPress サイトに画像を追加する](/tutorial/wordpress-image-tutorial/) チュートリアルで設定を行うことになるでしょう。 #### まって、 GraphQL の方がいい？ @@ -254,7 +254,7 @@ export const query = graphql` ` ``` -このファイルは何をやっているのでしょうか？依存関係のインポートをした後に、 JSX を使いブログ記事のレイアウトを構築しています。これは `Layout` コンポーネント内のすべてをラップしているため、サイト全体を通してレイアウトは同じです。また、これは記事のタイトルと本文を単純に追加しています。ここでは好きなものを追加したり、クエリー内容を変更したり出来ます（例: 画像、記事のメタデータ、カスタムフィールドなど） +このファイルは何をやっているのでしょうか？依存関係のインポートをした後に、 JSX を使いブログ記事のレイアウトを構築しています。これは `Layout` コンポーネント内のすべてをラップしているため、サイト全体を通してレイアウトは同じです。また、これは記事のタイトルと本文を単純に追加しています。ここでは好きなものを追加したり、クエリー内容を変更したり出来ます（例：画像、記事のメタデータ、カスタムフィールドなど） 以下では `$slug` を使用した特定の記事を取得する GraphQL を確認できます。この変数は `gatsby-node.js` 内でページが作成される際に `blog-post.js` テンプレートへ渡されます。これを行うために、以下のコードを `gatsby-node.js` ファイルに追記してください。 From 08e10eb25f1e5500bd0dcd5fbf52e1326a0e37af Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Fri, 24 Jan 2020 22:31:07 -0800 Subject: [PATCH 03/27] Fix wrong use of a 2 byte character --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 20c175fee..bca3a6c9b 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -6,7 +6,7 @@ title: "WordPress Source Plugin Tutorial" ### このチュートリアルの範囲： -このチュートリアルでは、 Gatsby サイトに設定された WordPress からブログや画像データを取得・レンダリングするために `gatsby-source-wordpress` をインストールすることになります。こちらの [Gatsby + WordPress デモサイト](https：//github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress) では、これからチュートリアルで作成するサイトに近いサンプルサイトのソースコードを確認できます。サンプルサイトには見た目の良い画像は設定されていませんが、次の [WordPress サイトに画像を追加する](/tutorial/wordpress-image-tutorial/) チュートリアルで設定を行うことになるでしょう。 +このチュートリアルでは、 Gatsby サイトに設定された WordPress からブログや画像データを取得・レンダリングするために `gatsby-source-wordpress` をインストールすることになります。こちらの [Gatsby + WordPress デモサイト](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress) では、これからチュートリアルで作成するサイトに近いサンプルサイトのソースコードを確認できます。サンプルサイトには見た目の良い画像は設定されていませんが、次の [WordPress サイトに画像を追加する](/tutorial/wordpress-image-tutorial/) チュートリアルで設定を行うことになるでしょう。 #### まって、 GraphQL の方がいい？ From a1c59bd8248e6d7e0ed2558a3dc9e7216291b7c2 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Tue, 28 Jan 2020 17:01:10 -0800 Subject: [PATCH 04/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index bca3a6c9b..14ecc2998 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -354,4 +354,4 @@ export const pageQuery = graphql` ### まとめ -同じ手順を使うことで、ページを呼び出し生成したり、カスタム記事タイプやカスタムフィールドを設定したり、分類を行ったり、そして WordPress の機能として知られているすべての楽しく柔軟なコンテンツを利用したりできます。これはいくらでも簡単にしたり複雑にしたりできます。なので楽しみながらいろいろ試してみてください！ +同じ手順を使うことで、ページを呼び出して生成したり、カスタム記事タイプやカスタムフィールドを設定したり、分類を行ったり、そして WordPress の機能として知られているすべての楽しく柔軟なコンテンツを利用したりできます。これはいくらでも簡単にしたり複雑にしたりできます。なので楽しみながらいろいろ試してみてください！ From 79e2203abb2b67124a0d53252e5fdde4de12640a Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Tue, 28 Jan 2020 17:01:30 -0800 Subject: [PATCH 05/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Yasuaki Uechi --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 14ecc2998..530cbef76 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -76,7 +76,7 @@ module.exports = { ### WordPress からデータを取得する GraphQL クエリーの作成 -これで WordPress サイトからデータを取得するための GraphQL クエリー を作成する準備が整いました。それではブログ記事のタイトル、投稿日付、ブログ記事の本文を取得するためのクエリーを作成しましょう。 +これで WordPress サイトからデータを取得するための GraphQL クエリーを作成する準備が整いました。それではブログ記事のタイトル、投稿日付、ブログ記事の本文を取得するためのクエリーを作成しましょう。 以下を実行してください。 From a6850ba17105bf878cbe37db1506011703b6d539 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Wed, 29 Jan 2020 00:50:09 -0800 Subject: [PATCH 06/27] Change expression to be more natural --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 530cbef76..37d2a5d20 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -254,7 +254,7 @@ export const query = graphql` ` ``` -このファイルは何をやっているのでしょうか？依存関係のインポートをした後に、 JSX を使いブログ記事のレイアウトを構築しています。これは `Layout` コンポーネント内のすべてをラップしているため、サイト全体を通してレイアウトは同じです。また、これは記事のタイトルと本文を単純に追加しています。ここでは好きなものを追加したり、クエリー内容を変更したり出来ます（例：画像、記事のメタデータ、カスタムフィールドなど） +このファイルは何をやっているのでしょうか？依存関係をインポートした後に、 JSX を使いブログ記事のレイアウトを構築しています。これは `Layout` コンポーネント内のすべてをラップしているため、サイト全体を通してレイアウトは同じです。また、これは記事のタイトルと本文を単純に追加しています。ここでは好きなものを追加したり、クエリー内容を変更したり出来ます（例：画像、記事のメタデータ、カスタムフィールドなど） 以下では `$slug` を使用した特定の記事を取得する GraphQL を確認できます。この変数は `gatsby-node.js` 内でページが作成される際に `blog-post.js` テンプレートへ渡されます。これを行うために、以下のコードを `gatsby-node.js` ファイルに追記してください。 From 745384f4393a061d47f84bc41edf1043c1056102 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Thu, 30 Jan 2020 18:16:12 -0800 Subject: [PATCH 07/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Hirotaka Mizutani --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 37d2a5d20..67c7e3b6e 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -174,7 +174,7 @@ export const pageQuery = graphql` ## 各ブログ記事のページを作成し、それらにリンクを設定する -投稿のタイトルと参照があるインデックスページは素晴らしいものですが、あなたは各ブログ記事の個別ページを作り、それらに `index.js` ファイルからリンクさせる必要があるでしょう。 +投稿のタイトルと抜粋があるインデックスページは素晴らしいものですが、あなたは各ブログ記事の個別ページを作り、それらに `index.js` ファイルからリンクさせる必要があるでしょう。 そのためには以下を行う必要があります。 From ba48beaa1db3698210a4bc98f144a6a7880b5255 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Thu, 30 Jan 2020 18:16:42 -0800 Subject: [PATCH 08/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Hirotaka Mizutani --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 67c7e3b6e..6e2e7b0a4 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -185,7 +185,7 @@ export const pageQuery = graphql` ### 各ブログ記事へのページを作成する -先程のチュートリアルのパート 7 では、ページを作成するための最初の一歩として Markdown ファイルのために slug を作成しています。 Markdown ファイルの代わりに WordPress を使用しているため、 WordPress への API 呼び出しから取得できる slag を利用できます。あなたはすでに slug を取得できるため、新たにそれらを作成する必要はありません。 +先程のチュートリアルのパート 7 では、ページを作成するための最初の一歩として Markdown ファイルのためにスラッグを作成しています。 Markdown ファイルの代わりに WordPress を使用しているため、 WordPress への API 呼び出しから取得できるスラッグを利用できます。あなたはすでにスラッグを取得できるため、新たにそれらを作成する必要はありません。 プロジェクトのルートにある `gatsby-node.js` ファイルを開き（これはいくつかのコメントを除けば空のファイルのはずです）以下を追記してください。 From a88039311c10a824a18d8cc43564b56895131b36 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Thu, 30 Jan 2020 18:17:47 -0800 Subject: [PATCH 09/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Hirotaka Mizutani --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 6e2e7b0a4..ff9639134 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -348,7 +348,7 @@ export const pageQuery = graphql` ` ``` -これで完了です！ `Link` コンポーネントでタイトルを囲って記事の slug を参照させれば、 Gatsby は魔法のようにそこへのリンクを設定し、事前に読み込み、ページ間の移動を信じられないほど早くしてくれます。 +これで完了です！ `Link` コンポーネントでタイトルを囲って記事のスラッグを参照させれば、 Gatsby は魔法のようにそこへのリンクを設定し、事前に読み込み、ページ間の移動を信じられないほど早くしてくれます。 ![トップページからブログ記事へのリンクが設置された最終的な完成品](./images/wordpress-source-plugin-home-to-post-links.gif) From 7e8a01e1034a1ce2d7098deae998708846310ca5 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Thu, 30 Jan 2020 18:19:50 -0800 Subject: [PATCH 10/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Hirotaka Mizutani --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index ff9639134..5a7bef52f 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -6,7 +6,7 @@ title: "WordPress Source Plugin Tutorial" ### このチュートリアルの範囲： -このチュートリアルでは、 Gatsby サイトに設定された WordPress からブログや画像データを取得・レンダリングするために `gatsby-source-wordpress` をインストールすることになります。こちらの [Gatsby + WordPress デモサイト](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress) では、これからチュートリアルで作成するサイトに近いサンプルサイトのソースコードを確認できます。サンプルサイトには見た目の良い画像は設定されていませんが、次の [WordPress サイトに画像を追加する](/tutorial/wordpress-image-tutorial/) チュートリアルで設定を行うことになるでしょう。 +このチュートリアルでは、`gatsby-source-wordpress` をインストールして、設定された WordPress からブログや画像データを Gatsby サイトに取り込み、そのデータをレンダリングします。こちらの [Gatsby + WordPress デモサイト](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress) では、これからチュートリアルで作成するサイトに近いサンプルサイトのソースコードを確認できます。サンプルサイトには見た目の良い画像は設定されていませんが、次の [WordPress サイトに画像を追加する](/tutorial/wordpress-image-tutorial/) チュートリアルで設定を行うことになるでしょう。 #### まって、 GraphQL の方がいい？ From 7dc9c61efa5918affe018883f9458532bc98420f Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Thu, 30 Jan 2020 18:22:01 -0800 Subject: [PATCH 11/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Hirotaka Mizutani --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 5a7bef52f..998baeedc 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -221,7 +221,7 @@ exports.createPages = ({ graphql, actions }) => { しかしながら、実際のブログ記事を作成するためには、事前にページをビルドするためのテンプレートを指定しなければなりません。 -`src` ディレクトリー内で、 `templates` という名前のディレクトリーを作成し、その中で `blog-post.js` というフィールドを作成します。その新しいファイル内に、以下をペーストしてください。 +`src` ディレクトリー内で、 `templates` という名前のディレクトリーを作成し、その中に `blog-post.js` という名前のファイルを作成します。その新しいファイル内に、以下をペーストしてください。 ```jsx:title=src/templates/blog-post.js import React from "react" From 706762a91ac884aa7606e9f97b09a3b252ff8b1a Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Thu, 30 Jan 2020 18:24:07 -0800 Subject: [PATCH 12/27] fix unnecessary line break --- docs/tutorial/wordpress-source-plugin-tutorial.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 998baeedc..0a2da3272 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -294,8 +294,7 @@ exports.createPages = ({ graphql, actions }) => { } ``` -再度開発環境を `gatsby develop` コマンドで再起動する必要があります。再起動を行ったら、サイトのインデックスページでは変化は見られませんが、 [http://localhost:8000/asdf](http://localhost:8000/asdf) のような 404 ページを閲覧すると、作成した 2 つの -サンプル記事を確認でき、それらをクリックすることでサンプル記事のページに行くことが出来ます。 +再度開発環境を `gatsby develop` コマンドで再起動する必要があります。再起動を行ったら、サイトのインデックスページでは変化は見られませんが、 [http://localhost:8000/asdf](http://localhost:8000/asdf) のような 404 ページを閲覧すると、作成した 2 つのサンプル記事を確認でき、それらをクリックすることでサンプル記事のページに行くことが出来ます。 ![サンプル記事のリンク](./images/wordpress-source-plugin-sample-post-links.gif) From 46c6b2df4bc40aaa381dab964163f5333a5d1af6 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Thu, 30 Jan 2020 18:24:52 -0800 Subject: [PATCH 13/27] fix title translation --- docs/tutorial/wordpress-source-plugin-tutorial.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 0a2da3272..218a93b1f 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -1,5 +1,5 @@ --- -title: "WordPress Source Plugin Tutorial" +title: "WordPress ソースプラグイン・チュートリアル" --- ## WordPress から取得したデータを使用するサイトの作成方法 @@ -297,7 +297,7 @@ exports.createPages = ({ graphql, actions }) => { 再度開発環境を `gatsby develop` コマンドで再起動する必要があります。再起動を行ったら、サイトのインデックスページでは変化は見られませんが、 [http://localhost:8000/asdf](http://localhost:8000/asdf) のような 404 ページを閲覧すると、作成した 2 つのサンプル記事を確認でき、それらをクリックすることでサンプル記事のページに行くことが出来ます。 ![サンプル記事のリンク](./images/wordpress-source-plugin-sample-post-links.gif) - +st しかし、誰もブログ記事を見つけようと 404 ページに飛びたいとは思いませんね！なので、トップページからリンクを張りましょう。 ### トップページから記事にリンクを張る From 0981f3521a4f8fb3f0fcdd77f5afe310e5b9b40d Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Fri, 31 Jan 2020 15:06:50 -0800 Subject: [PATCH 14/27] delete unproper characters in a line --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 218a93b1f..a88dd85fa 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -297,7 +297,7 @@ exports.createPages = ({ graphql, actions }) => { 再度開発環境を `gatsby develop` コマンドで再起動する必要があります。再起動を行ったら、サイトのインデックスページでは変化は見られませんが、 [http://localhost:8000/asdf](http://localhost:8000/asdf) のような 404 ページを閲覧すると、作成した 2 つのサンプル記事を確認でき、それらをクリックすることでサンプル記事のページに行くことが出来ます。 ![サンプル記事のリンク](./images/wordpress-source-plugin-sample-post-links.gif) -st + しかし、誰もブログ記事を見つけようと 404 ページに飛びたいとは思いませんね！なので、トップページからリンクを張りましょう。 ### トップページから記事にリンクを張る From 23af3743248921d9dae70ad8a88a484d242076b9 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Fri, 31 Jan 2020 15:11:15 -0800 Subject: [PATCH 15/27] Translate a line which has not been done --- docs/tutorial/wordpress-source-plugin-tutorial.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index a88dd85fa..4309de178 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -283,8 +283,7 @@ exports.createPages = ({ graphql, actions }) => { path: node.slug, component: path.resolve(`./src/templates/blog-post.js`), context: { - // This is the $slug variable - // passed to blog-post.js + // こちらが blog-post.js に渡される $slug 変数です。 slug: node.slug, }, }) From 8af5ac511060e3b524c76296d5cc3de9925d93d1 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 10:44:12 -0800 Subject: [PATCH 16/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 4309de178..d0e0c77e8 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -6,7 +6,7 @@ title: "WordPress ソースプラグイン・チュートリアル" ### このチュートリアルの範囲： -このチュートリアルでは、`gatsby-source-wordpress` をインストールして、設定された WordPress からブログや画像データを Gatsby サイトに取り込み、そのデータをレンダリングします。こちらの [Gatsby + WordPress デモサイト](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress) では、これからチュートリアルで作成するサイトに近いサンプルサイトのソースコードを確認できます。サンプルサイトには見た目の良い画像は設定されていませんが、次の [WordPress サイトに画像を追加する](/tutorial/wordpress-image-tutorial/) チュートリアルで設定を行うことになるでしょう。 +このチュートリアルでは、`gatsby-source-wordpress` をインストールして、設定された WordPress からブログや画像データを Gatsby サイトに取り込み、そのデータをレンダリングします。こちらの [Gatsby + WordPress デモサイト](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress)では、これからチュートリアルで作成するサイトに近いサンプルサイトのソースコードを確認できます。サンプルサイトには見た目の良い画像は設定されていませんが、次の [WordPress サイトに画像を追加する](/tutorial/wordpress-image-tutorial/)チュートリアルで設定を行うことになるでしょう。 #### まって、 GraphQL の方がいい？ From 645d8da7436db888cfdc7bd6bf4488c837628103 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 10:44:22 -0800 Subject: [PATCH 17/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index d0e0c77e8..bdd74e9b3 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -8,7 +8,7 @@ title: "WordPress ソースプラグイン・チュートリアル" このチュートリアルでは、`gatsby-source-wordpress` をインストールして、設定された WordPress からブログや画像データを Gatsby サイトに取り込み、そのデータをレンダリングします。こちらの [Gatsby + WordPress デモサイト](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress)では、これからチュートリアルで作成するサイトに近いサンプルサイトのソースコードを確認できます。サンプルサイトには見た目の良い画像は設定されていませんが、次の [WordPress サイトに画像を追加する](/tutorial/wordpress-image-tutorial/)チュートリアルで設定を行うことになるでしょう。 -#### まって、 GraphQL の方がいい？ +#### まって、GraphQL の方がいい？ もし GraphQL を使いたいとお考えでしたら、 WordPress で簡単にデータを GraphQL で取得できる [wp-graphql](https://github.com/wp-graphql/wp-graphql) プラグインがあります。 From 6220705bd3042a445bc0d09bcfb5eff1ce331b67 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 10:44:35 -0800 Subject: [PATCH 18/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index bdd74e9b3..2d8961c66 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -10,7 +10,7 @@ title: "WordPress ソースプラグイン・チュートリアル" #### まって、GraphQL の方がいい？ -もし GraphQL を使いたいとお考えでしたら、 WordPress で簡単にデータを GraphQL で取得できる [wp-graphql](https://github.com/wp-graphql/wp-graphql) プラグインがあります。 +もし GraphQL を使いたいとお考えでしたら、WordPress で簡単にデータを GraphQL で取得できる [wp-graphql](https://github.com/wp-graphql/wp-graphql) プラグインがあります。 WP-API でサポートされている同一の認証スキームは wp-graphql でサポートされています。これは [gatsby-source-graphql](/packages/gatsby-source-graphql/) と同時に使うことができます。 From 53afc5437df02a33e18434932b2c2a72b4851aff Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 10:44:50 -0800 Subject: [PATCH 19/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 2d8961c66..f6d229cb6 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -29,7 +29,7 @@ Gatsby プロジェクトを新規作成し、生成されたプロジェクト cd wordpress-tutorial-site ``` -`gatsby-source-wordpress` プラグインをインストールしてください。このチュートリアルでは説明していないプラグインの機能や GraphQL クエリーの例については、 [`gatsby-source-wordpress` プラグインの README ファイル](/packages/gatsby-source-wordpress/?=wordpress) をご覧ください。 +`gatsby-source-wordpress` プラグインをインストールしてください。このチュートリアルでは説明していないプラグインの機能や GraphQL クエリーの例については、[`gatsby-source-wordpress` プラグインの README ファイル](/packages/gatsby-source-wordpress/?=wordpress)をご覧ください。 ```shell npm install --save gatsby-source-wordpress From 078298156c32c49a8dfa945ecec0f9b301b09716 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 10:45:03 -0800 Subject: [PATCH 20/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index f6d229cb6..e1f2e7eeb 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -86,7 +86,7 @@ gatsby develop ブラウザーから localhost:8000 を開いてください。また GraphQL クエリーを作成するために localhost:8000/\_\_\_graphql を開いてください。 -練習として、 GraphQL エクスプローラーで以下のクエリーの再作成に挑戦してみてください。この最初のクエリーは WordPress のブログ記事の本文を取得します。 +練習として、GraphQL エクスプローラーで以下のクエリーの再作成に挑戦してみてください。この最初のクエリーは WordPress のブログ記事の本文を取得します。 ```graphql query { From d6b4fd293c370ef86a53951a38e81a17ab9f2426 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 10:45:17 -0800 Subject: [PATCH 21/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index e1f2e7eeb..8b621933c 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -35,7 +35,7 @@ cd wordpress-tutorial-site npm install --save gatsby-source-wordpress ``` -以下のコードを使い、 `gatsby-config.js` に `gatsby-source-wordpress` プラグインを追加してください。これは[デモサイトのソースコード](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-wordpress/gatsby-config.js) でも確認できます。 +以下のコードを使い、`gatsby-config.js` に `gatsby-source-wordpress` プラグインを追加してください。これは[デモサイトのソースコード](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-wordpress/gatsby-config.js)でも確認できます。 ```js:title=gatsby-config.js module.exports = { From fbbe52e4652ca7b3b2c5bd1b516e3917c7989055 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 10:45:31 -0800 Subject: [PATCH 22/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 8b621933c..014723449 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -293,7 +293,7 @@ exports.createPages = ({ graphql, actions }) => { } ``` -再度開発環境を `gatsby develop` コマンドで再起動する必要があります。再起動を行ったら、サイトのインデックスページでは変化は見られませんが、 [http://localhost:8000/asdf](http://localhost:8000/asdf) のような 404 ページを閲覧すると、作成した 2 つのサンプル記事を確認でき、それらをクリックすることでサンプル記事のページに行くことが出来ます。 +再度開発環境を `gatsby develop` コマンドで再起動する必要があります。再起動を行ったら、サイトのインデックスページでは変化は見られませんが、[http://localhost:8000/asdf](http://localhost:8000/asdf) のような 404 ページを閲覧すると、作成した 2 つのサンプル記事を確認でき、それらをクリックすることでサンプル記事のページに行くことが出来ます。 ![サンプル記事のリンク](./images/wordpress-source-plugin-sample-post-links.gif) From 3a8e224b7d6f3663807814066353b61b1d919c5d Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 10:45:43 -0800 Subject: [PATCH 23/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 014723449..9887a47fe 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -346,7 +346,7 @@ export const pageQuery = graphql` ` ``` -これで完了です！ `Link` コンポーネントでタイトルを囲って記事のスラッグを参照させれば、 Gatsby は魔法のようにそこへのリンクを設定し、事前に読み込み、ページ間の移動を信じられないほど早くしてくれます。 +これで完了です！`Link` コンポーネントでタイトルを囲って記事のスラッグを参照させれば、 Gatsby は魔法のようにそこへのリンクを設定し、事前に読み込み、ページ間の移動を信じられないほど早くしてくれます。 ![トップページからブログ記事へのリンクが設置された最終的な完成品](./images/wordpress-source-plugin-home-to-post-links.gif) From 0a20f82d6b22885b39d2f793f424493abdc6241e Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 10:46:06 -0800 Subject: [PATCH 24/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index 9887a47fe..a429876f6 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -18,7 +18,7 @@ WP-API でサポートされている同一の認証スキームは wp-graphql 各ソースプラグインは、他と異なった動きをすることがあります。ほとんどの Gatsby サイトではほぼ確実にソースプラグインを使用することになるため、このチュートリアルはきっと助けになるでしょう。このチュートリアルでは Gatsby サイトを CMS に接続し、データを取得し、そのデータを React で表示するための素晴らしい方法の基礎を学ぶことができます。 -もし利用可能な、今も増え続けているソースプラグインをご覧になりたければ、 [Gatsby プラグインライブラリー](/plugins/?=source) で "source" というキーワードで検索してください。 +もし利用可能な、今も増え続けているソースプラグインをご覧になりたければ、[Gatsby プラグインライブラリー](/plugins/?=source)で "source" というキーワードで検索してください。 ### `gatsby-source-wordpress` プラグインを使用するサイトを作成 From 363724b4a03fa0b45fe5916a7f3ef96e650226fc Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 10:46:23 -0800 Subject: [PATCH 25/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index a429876f6..bb9c19350 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -122,7 +122,7 @@ query { ## `index.js` にブログ記事をレンダリングする -これであなたが必要としているデータを取得する GraphQL クエリーが作成できました。 2 番目のクエリーはあなたのサイトのトップページで、ソートされたブログ記事のタイトルのリストを作成するために使用します。こちらが `index.js` のあるべき状態です。 +これであなたが必要としているデータを取得する GraphQL クエリーが作成できました。2 番目のクエリーはあなたのサイトのトップページで、ソートされたブログ記事のタイトルのリストを作成するために使用します。こちらが `index.js` のあるべき状態です。 ```jsx:title=src/pages/index.js import React from "react" From 7b5e61d24a47f81667e486fe1fe47e354703f733 Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 11:01:22 -0800 Subject: [PATCH 26/27] Update docs/tutorial/wordpress-source-plugin-tutorial.md Co-Authored-By: BSKY --- docs/tutorial/wordpress-source-plugin-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index bb9c19350..d662973be 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -185,7 +185,7 @@ export const pageQuery = graphql` ### 各ブログ記事へのページを作成する -先程のチュートリアルのパート 7 では、ページを作成するための最初の一歩として Markdown ファイルのためにスラッグを作成しています。 Markdown ファイルの代わりに WordPress を使用しているため、 WordPress への API 呼び出しから取得できるスラッグを利用できます。あなたはすでにスラッグを取得できるため、新たにそれらを作成する必要はありません。 +先程のチュートリアルのパート 7 では、ページを作成するための最初の一歩として Markdown ファイルのためにスラッグを作成しています。 Markdown ファイルの代わりに WordPress を使用しているため、WordPress への API 呼び出しから取得できるスラッグを利用できます。あなたはすでにスラッグを取得できるため、新たにそれらを作成する必要はありません。 プロジェクトのルートにある `gatsby-node.js` ファイルを開き（これはいくつかのコメントを除けば空のファイルのはずです）以下を追記してください。 From 04811c9f3fd9960535945bf6021f763ffe4e8f8f Mon Sep 17 00:00:00 2001 From: Yuki Sato Date: Mon, 3 Feb 2020 17:12:22 -0800 Subject: [PATCH 27/27] Delete unnecessary spaces --- docs/tutorial/wordpress-source-plugin-tutorial.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md index d662973be..899566527 100644 --- a/docs/tutorial/wordpress-source-plugin-tutorial.md +++ b/docs/tutorial/wordpress-source-plugin-tutorial.md @@ -185,7 +185,7 @@ export const pageQuery = graphql` ### 各ブログ記事へのページを作成する -先程のチュートリアルのパート 7 では、ページを作成するための最初の一歩として Markdown ファイルのためにスラッグを作成しています。 Markdown ファイルの代わりに WordPress を使用しているため、WordPress への API 呼び出しから取得できるスラッグを利用できます。あなたはすでにスラッグを取得できるため、新たにそれらを作成する必要はありません。 +先程のチュートリアルのパート 7 では、ページを作成するための最初の一歩として Markdown ファイルのためにスラッグを作成しています。Markdown ファイルの代わりに WordPress を使用しているため、WordPress への API 呼び出しから取得できるスラッグを利用できます。あなたはすでにスラッグを取得できるため、新たにそれらを作成する必要はありません。 プロジェクトのルートにある `gatsby-node.js` ファイルを開き（これはいくつかのコメントを除けば空のファイルのはずです）以下を追記してください。 @@ -217,11 +217,11 @@ exports.createPages = ({ graphql, actions }) => { ![ターミナルにログ出力された 2 つのブログ記事](./images/wordpress-source-plugin-log.jpg) -すばらしい！チュートリアルのパート 7 で述べられたように、この `createPages` の出力は Gatsby の主機能の 1 つであり、 WordPress のインストールからブログ記事（もしくはページやカスタムポストなど）を作成することを可能にします。 +すばらしい！チュートリアルのパート 7 で述べられたように、この `createPages` の出力は Gatsby の主機能の 1 つであり、WordPress のインストールからブログ記事（もしくはページやカスタムポストなど）を作成することを可能にします。 しかしながら、実際のブログ記事を作成するためには、事前にページをビルドするためのテンプレートを指定しなければなりません。 -`src` ディレクトリー内で、 `templates` という名前のディレクトリーを作成し、その中に `blog-post.js` という名前のファイルを作成します。その新しいファイル内に、以下をペーストしてください。 +`src` ディレクトリー内で、`templates` という名前のディレクトリーを作成し、その中に `blog-post.js` という名前のファイルを作成します。その新しいファイル内に、以下をペーストしてください。 ```jsx:title=src/templates/blog-post.js import React from "react" @@ -254,7 +254,7 @@ export const query = graphql` ` ``` -このファイルは何をやっているのでしょうか？依存関係をインポートした後に、 JSX を使いブログ記事のレイアウトを構築しています。これは `Layout` コンポーネント内のすべてをラップしているため、サイト全体を通してレイアウトは同じです。また、これは記事のタイトルと本文を単純に追加しています。ここでは好きなものを追加したり、クエリー内容を変更したり出来ます（例：画像、記事のメタデータ、カスタムフィールドなど） +このファイルは何をやっているのでしょうか？依存関係をインポートした後に、JSX を使いブログ記事のレイアウトを構築しています。これは `Layout` コンポーネント内のすべてをラップしているため、サイト全体を通してレイアウトは同じです。また、これは記事のタイトルと本文を単純に追加しています。ここでは好きなものを追加したり、クエリー内容を変更したり出来ます（例：画像、記事のメタデータ、カスタムフィールドなど） 以下では `$slug` を使用した特定の記事を取得する GraphQL を確認できます。この変数は `gatsby-node.js` 内でページが作成される際に `blog-post.js` テンプレートへ渡されます。これを行うために、以下のコードを `gatsby-node.js` ファイルに追記してください。 @@ -346,7 +346,7 @@ export const pageQuery = graphql` ` ``` -これで完了です！`Link` コンポーネントでタイトルを囲って記事のスラッグを参照させれば、 Gatsby は魔法のようにそこへのリンクを設定し、事前に読み込み、ページ間の移動を信じられないほど早くしてくれます。 +これで完了です！`Link` コンポーネントでタイトルを囲って記事のスラッグを参照させれば、Gatsby は魔法のようにそこへのリンクを設定し、事前に読み込み、ページ間の移動を信じられないほど早くしてくれます。 ![トップページからブログ記事へのリンクが設置された最終的な完成品](./images/wordpress-source-plugin-home-to-post-links.gif)