【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説

$ gatsby new test-wordpress-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-world

$ cd test-wordpress-gatsby

$ yarn add gatsby

$ yarn add gatsby-source-wordpress gatsby-plugin-sharp gatsby-transformer-sharp

/* gatsby-config.js */

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url: `https://test-wordpress.local/graphql`,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

/* layout.jsx */

import React from "react"

import "./layout.css"

export const Layout = ({ children }) => {
  return (
    <>

    {children}

    </>
  )
}

/* layout.css */

:root {
  --maxWidth: 780px;
  --side: 10px;
}

@media (min-width: 1024px) {
  :root {
    --side: calc((100vw - var(--maxWidth)) / 2);
  }
}

body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.myContainer {
  display: grid;
  grid-template-columns: 
    var(--side)
    calc(100vw - var(--side) * 2)
    var(--side);
}

.myContainer > * {
  grid-column: 2;
}

@media (min-width: 1024px) {
  .alignwide {
    margin-left: calc(var(--side) / 2 * -1);
    margin-right: calc(var(--side) / 2 * -1);
    max-width: none;
    width: auto;
  }
}

@media (min-width: 1320px) {
  .alignwide {
    margin-left: -150px;
    margin-right: -150px;
  }
}

/* gatsby-node.js */

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'

$ gatsby develop

/* page.js */

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

const Page = ({ data }) => {
  return (
    <Layout>

    <article className="myContainer">
      <h1>{data.wpPage.title}</h1>
      <div dangerouslySetInnerHTML={{__html: data.wpPage.content}} />
    </article>

    </Layout>
  )
}

export default Page

export const query = graphql`
  query($id: String!) {
    wpPage(id: {eq: $id}) {
      title
      content
    }
  }
`

/* gatsby-node.js */

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'

const path = require(`path`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(`
    query {
      allWpPage {
        edges {
          node {
            id
            slug
          }
        }
      }
    }
  `)

  /* 固定ページ */
  result.data.allWpPage.edges.forEach(({ node }) => {
    createPage({
      path: `/${node.slug}/`,
      component: path.resolve("./src/templates/page.js"),
      context: {
        id: node.id,
      },
    })
  })
}

/* post.js */

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

const Post = ({ data }) => {
  return (
    <Layout>

    <article className="myContainer">
      <h1>{data.wpPost.title}</h1>
      <div dangerouslySetInnerHTML={{__html: data.wpPost.content}} />
    </article>

    </Layout>
  )
}

export default Post

export const query = graphql`
  query($id: String!) {
    wpPost(id: {eq: $id}) {
      title
      content
    }
  }
`

/* gatsby-node.js */

... 略 ...

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(`
    query {
      allWpPage {

        ... 略 ...

      }
      allWpPost(sort: {fields: date, order: DESC}) {
        edges {
          node {
            id
            slug
          }
        }
      }
    }
  `)

  /* 固定ページ */
　　　　... 略 ...

  /* 投稿ページ */
  result.data.allWpPost.edges.forEach(({ node }) => {
    createPage({
      path: `/blog/${node.slug}/`,
      component: path.resolve("./src/templates/post.js"),
      context: {
        id: node.id,
      },
    })
  })
}

/* blog.js */

import React from "react"
import { graphql, Link } from "gatsby"
import { Layout } from "../components/layout"

const Blog = ({ data }) => {
  return (
    <Layout>

    <div className="myPostList myContainer">
      <div className="alignwide">
        {data.allWpPost.edges.map(({ node }) => (
          <article key={node.id}>
            <h2>
              {node.title}
            </h2>
            <div
              dangerouslySetInnerHTML={{
                __html: `${node.excerpt.slice(0, 80)}...`
              }}
            />
            <div className="more">
              <Link to={`/blog/${node.slug}/`}>
                → More
              </Link>
            </div>
          </article>
        ))}
      </div>
    </div>

    </Layout>
  )
}

export default Blog

export const query = graphql`
  query {
    allWpPost(sort: {fields: date, order: DESC}) {
      edges {
        node {
          id
          title
          excerpt
          slug
        }
      }
    }
  }
`

/* layout.css */

... 略 ...

@media (min-width: 1320px) {
  .alignwide {
    ... 略 ...
  }
}

.myPostList {
  margin-top: 40px;
}

.myPostList > div {
  display: grid;
  gap: 20px;
}

@media (min-width: 768px) {
  .myPostList > div {
    grid-template-columns: 1fr 1fr;
  }
}

.myPostList article {
  background-color: #eee;
  padding: 10px;
}

.myPostList .more {
  text-align: right;
}

/* header.jsx */

import React from "react"
import { Link } from "gatsby"

export const Header = () => {
  return (
    <header className="myHeader myContainer">
      <div className="alignwide">
        <Link to={`/blog/`} className="site">
          Sample Site
        </Link>
        <nav>
          <ul>
            <li>
              <Link to={`/sample-page/`}>
                Sample Page
              </Link>
            </li>
            <li>
              <Link to={`/blog/hello-world/`}>
                Hello World
              </Link>
            </li>
            <li>
              <Link to={`/blog/`}>
                Blog
              </Link>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  )
}

/* layout.jsx */

import React from "react"
import { Header } from "./header"
import "./layout.css"

export const Layout = ({ children }) => {
  return (
    <>

    <Header />

    {children}

    </>
  )
}

/* layout.css */

... 略 ...

.myPostList .more {
  ... 略 ...
}

.myHeader {
  background-color: #222;
}

.myHeader > div {
  display: grid;
  justify-items: center;
  align-items: center;
  height: 100px;
}

.myHeader .site {
  font-size: 32px;
}

.myHeader ul {
  display: grid;
  grid-auto-flow: column;
  column-gap: 30px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.myHeader a {
  color: #fff;
}

@media (min-width: 768px) {
  .myHeader > div {
    grid-auto-flow: column;
    justify-content: space-between;
  }
}