Q. GridsomeでWordPressのデータを取り込むには？

公式プラグイン「@gridsome/source-wordpress」を使います

Gridsomeチームが開発している公式プラグイン「@gridsome/source-wordpress」があるのでそちらを使います。

yarn add @gridsome/source-wordpress

// or

npm install @gridsome/source-wordpress

インストールしたら、grdisome.config.jsにプラグインの記述をします。

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-wordpress',
      options: {
        baseUrl: 'WEBSITE_URL', // （変更する）httpsから入れる
        apiBase: 'wp-json',
        typeName: 'WordPress', // （変更しても良い）好きなtypeNameを入れる
        perPage: 100,
        concurrent: 10
      }
    }
  ],
  templates: {
    WordPressPost: '/:year/:month/:day/:slug'
  }
}

公式のドキュメントそんまんまですが、変更すべきは、

1. baseUrl
2. typeName

の二つです。

baseUrlはWordPressサイトのURLを記入します。typeNameはドキュメントの通り「WordPress」でも良いですが、ここの文字列をベースにして、様々なQueryが自動生成されるので、短いほうがプログラムを書く際に楽です。

注意したいのは、この「@gridsome/source-wordpress」は、WordPressサイトのデータを「GridsomeのGraphQLデータベースに取り込むだけ」なので、表示する側のロジックは別途組む必要があります。

表示側まで出来ているものが欲しい場合は、プロジェクト作成時に「wordpress」を指定して、createします。

gridsome create my-wordpress-blog wordpress

指定したスターターであるwordpressの中身は、下記のGridsome公式レポジトリにあります。

gridsome-starter-wordpress