Wordpress × Gatsby.jsでブログ作成！

WordpressをヘッドレスCMSとして、Gatsby.jsでスタイリングしてブログ作成したいな～と思い(以前はcontentfulを使っていたのですが、いまはプランなどが結構変わり有料じゃないと使えなかったりしてしまったので)、早速やってみました。

このWordpressとGatsby.jsを組み合わせるやり方は珍しくもないので、検索するとブログやチュートリアルもたくさん出てくるのですが、公式の設定などが1年程でだいぶ変わっていて、ちょっと手間取ってしまったのでここに記録がてら残していこうと思います。

まず、Wordpressで自分用ブログを作成

これはローカルホストで自分のPC上でホスティングするWordpressでもいいですし、既存のWordpressドメインのブログを作ってもいいですし、私はとりあえずエックスサーバーを契約してここにWordpressを入れてみました。

Wordpressにプラグインを導入する

Gatsby.jsでWordpressを使うには、プラグインを2つ導入する必要があります。
管理用アカウントの「プラグイン」から1. WP Gatsbyと2. WP GraphQLを追加し、これを「有効化」します。

Gatsby.jsのプロジェクトフォルダを作成する

ここでは詳しくGatsby.jsの入門方法を説明するつもりはないですが、任意ディレクトリへ以下コマンドでスターターフォルダを作成します。(Gatsby.js公式にはスタンダードなスターターフォルダ以外に色々なものが用意されているので、そこからDLしてくるのもありでしょう。)

gatsby new 任意のプロジェクト名

GatsbyフォルダへWordpressのプラグインをインストールする

プロジェクトフォルダで以下コマンドを叩くだけです。

npm install gatsby-source-wordpress

gatsby-config.jsにWordpress情報を記載する

gatsby-config.jsに{resolve}以下を追加します。

gatsby-config.js

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url:
        // allows a fallback url if WPGRAPHQL_URL is not set in the env, this may be a local or remote WP instance.
          process.env.WPGRAPHQL_URL ||
          `https://localhost/graphql`,
        schema: {
          //Prefixes all WP Types with "Wp" so "Post and allPost" become "WpPost and allWpPost".
          typePrefix: `Wp`,
        },
        develop: {
          //caches media files outside of Gatsby's default cache an thus allows them to persist through a cache reset.
          hardCacheMediaFiles: true,
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves (aka. faster).
                  50
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
        },
      },
    },
  ]
}

これは公式から持ってきただけですが、urlに自分のWPのURL+/graphqlを貼り付けます。

この状態でnpm startすると、localhost:8000/__graphqlにアクセスした状態で、ブログ投稿情報が取得できます。

Topページを編集する

このままだと何もGatsbyの方には表示されないので、index.jsをいじって投稿を表示させてみます。

index.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

const Index = 
({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h4>Posts</h4>
      {data.allWpPost.edges.map(({ node }) => (
        <div>
          <p>{node.title}</p>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}

export const pageQuery = graphql`
  query {
    allWpPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
        }
      }
    }
  }`

export default Index

これでlocalhost:8000を立ち上げてみます。

出来ました！さくっとここまで割と簡単に出来ました。
あとは自分用に色々カスタマイズするだけです。