RalaCode

44件の記事があります

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

【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説
サムライエンジニアプラス

WordPressとGatsbyJSを連携させたサイトを作りたいけど、ドキュメントが英語ばかり...」

今回はこんな悩みにお答えします。

WordPressとGatsbyJSを連携させてサイトを作る方法を解説します。
もちろん日本語です。

この記事では以下の流れで解説していきます。

  • WordPressのローカル環境構築

  • WordPressでプラグイン導入

  • GatsbyJSの開発環境構築

  • GatsbyJSでプラグイン導入

  • WordPressとGatsbyJSを連携する

WordPressとGatsbyJSそれぞれ環境が整っている方は、必要に応じて読み飛ばしてください。

現状、GatsbyJSのスターターとして「gatsby-starter-wordpress」などが用意されています。
ですが、デフォルトでインストールされているプラグインのバージョンが古かったりします。

そこで、この記事では「gatsby-starter-hello-world」を採用し、ほぼゼロからGatsbyJSでサンプルサイトを立ち上げます。
そして、プラグインも手動で導入するので、常に最新のプラグインを導入することになります。

最終的には、以下のページをGatsbyJSに反映させます。

  • 固定ページ

  • 投稿ページ

  • 記事一覧ページ

最後にヘッダーを追加して、サンプルサイトは完成となります。

では、準備から進めていきます。

WordPressのローカル環境構築

まず、WordPressをローカル環境に構築していきます。

すでに、xamppmampを使ってWordPressのローカル環境構築を行っている方もいらっしゃるかと思います。
xamppやmampでも問題なく進めていけるとは思います。

ですが、この記事では別のツールを使って進めていきます。
そちらを使っていただいた方が、再現性は高いかもしれません。

WordPressをローカル環境に構築するのにおすすめなツールは「LocalbyFlywheel」です。

LocalbyFlywheelのインストールと、WordPressのセットアップの方法は以下の記事で解説しております。
よろしければ、以下の記事を参考に「最低限やるべき初期設定」まで行っていただけると幸いです。

【初期設定まで解説】LocalbyFlyWheelでWordPressローカル環境構築
【初期設定まで解説】LocalbyFlyWheelでWordPressローカル環境構築
記事を読む

上記の記事に従って進めると、「test wordpress」という名前のWordPressサイトが出来上がっていると思います。
この記事では、その「test wordpress」とGatsbyJSを連携させていきます。

WordPressでプラグイン導入

WordPressとGatsbyJSを連携させるためには、WordPress側で専用のプラグインを導入する必要があります。

add wpplugin for gatsby

上記の画像のように、プラグインを2つインストールしてください。
プラグインは以下の2つです。

  • WPGatsby

  • WPGraphQL

最低限必要なプラグインはこれだけです。

GatsbyJSの開発環境構築

ここで、GatsbyJSの開発環境を構築します。
Mac向けではありますが、以下の記事でGatsbyJSの開発環境構築の方法を解説しております。

GatsbyJSの開発環境を構築する手順
GatsbyJSの開発環境を構築する手順
記事を読む

GatsbyJSの開発環境が構築できたら、ひとつサイトを作りましょう。

ターミナルを起動させてください。
以下のコマンドを入力して実行してください。

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

GatsbyJSのサイトが作られます。

プロジェクトフォルダの名前は何でもいいです。
ここでは、「test-wordpress-gatsby」という名前にしています。

GatsbyJSでプラグイン導入

次に、GatsbyJSでプラグインを導入していきます。
先ほど作ったプロジェクトフォルダをエディタで開いてください。

プラグインを追加する前に、gatsbyを最新版にアップデートしておきましょう。
まず、ターミナルでプロジェクトフォルダに移動します。

$ cd test-wordpress-gatsby

そして、gatsbyをアップデートします。

$ yarn add gatsby

これで、gatsbyのバージョンが最新のものになります。
では、WordPressとGatsbyJSを連携させるのに必要なプラグインを追加します。
追加するのは、以下の3つです。

  • gatsby-source-wordpress

  • gatsby-plugin-sharp

  • gatsby-transformer-sharp

ターミナルに以下のコマンドを入力して実行してください。

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

次に、「gatsby-config.js」というファイルを開いてください。

gatsby-config.jsの中身を以下のように記述します。
記述したら保存してください。

/* gatsby-config.js */

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

上記のコードの中で、gatsby-source-wordpressの「options」のところに、WordPressサイトのurlを入力する部分があります。

そこには、今回LocalbyFlywheelで作成したWordPressサイトのurlに「/graphql」という文字を付け足したものを入力してください。

この時点では、まだ「gatsby develop」コマンドを走らせても上手くいきません

次に、レイアウトコンポーネントを作ります。

add layout component

上の画像のように、「src」フォルダの中に「components」フォルダを作ります。
componentsフォルダの中に以下の名前の2つのファイルを作ってください。

  • layout.jsx

  • layout.css

layout.jsxの中には、以下のように記述して保存してください。

/* layout.jsx */

import React from "react"

import "./layout.css"

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

    {children}

    </>
  )
}

layout.cssには、以下のように記述して保存してください。
とりあえず必要最低限のスタイルだけ指定しています。

(余談ですが、僕の個人的に好みなスタイルにしてあります。ご了承ください。)

/* 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;
  }
}

WordPressとGatsbyJSを連携させる

ここから、WordPressとGatsbyJSを連携させていきます。
やりたいことは、以下の3つです。

  • 固定ページを反映させる

  • 投稿ページを反映させる

  • 記事一覧ページを作る

準備

add gatsby-node.js

ルートディレクトリに、「gatsby-node.js」という名前のファイルを作ってください。
gatsby-node.jsには、以下のように記述してください。

/* gatsby-node.js */

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'

とりあえずこれだけでいいです。

このコードは、LocalbyFlywheelでWordPressサイトをSSL化した場合、必要なコードです。
LocalbyFlywheelはあくまで練習環境のため、このコードが必要です。

本番環境で、実際にサイトを一般公開するときはこのコードは消してください。

ここで、GatsbyJSの開発サーバーを起動させましょう。
ターミナルに以下のコマンド入力して実行してください。

$ gatsby develop

開発サーバーが起動されます。
開発サーバーを起動した状態で、「http://localhost:8000/___graphql」にアクセスしてください。

固定ページを反映させる

graphql wppage

「graphql」と呼ばれるページが開きます。
左側のExplorerの中から「wpPage」を探してクリックしてください。

wpPageの中に「title」と「content」という項目があるので、チェックを入れます
すると、画面真ん中の部分に「クエリ」が構築されます。

上の方にある、実行ボタン(図②)をクリックすると、右側にクエリに応じたデータが取得されます。
上記の画像と同じように、データが取得されることを確認したら次に進みます。

次は、「テンプレートファイル」というものを作ります。
開発サーバーは「command + C」で一度終了させておいてください。

add page template

「src」フォルダの中に「templates」という名前のフォルダを作ります。
templatesの中に「page.js」という名前のファイルを作ります。

page.jsを開いて、以下のように記述してください。

/* 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
    }
  }
`

タイトルとコンテンツだけが表示される、シンプルな構造にしました。
下の部分の「export const query 〜」には、先ほどgraphqlで取得したクエリを記述しています。

どの固定ページも反映できるように、「$id」という変数を用いています。
変数はどこで設定するのかというと、「gatsby-node.js」というファイルです。

では、gatsby-node.jsを開いて以下のように記述を追加してください。

/* 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,
      },
    })
  })
}

「const result = await graphql 〜」の部分では、先ほどと同じようにgraphqlからクエリを取得したものを記述しています。
今回は、全ての固定ページを示す「allWpPage」から「id」と「slug」を取得しています。

最後の「context」の部分で、変数の設定をしています。
これで「page.js」の中で変数「$id」を使うことができます。

では、「gatsby develop」で開発サーバーを起動させてみましょう。
開発サーバーが起動できたら、「https://localhost:8000/sample-page/」にアクセスしてみてください。

sample page

上の画像のように、表示されたと思います。

WordPressでは、「Sample Page」というタイトルの固定ページがデフォルトで用意されています。
スラッグは「sample-page」で設定されています。
今回はその「Sample Page」をGatsbyJSに反映させてみました。

試しに、WordPressで固定ページ一覧を開き、「Sample Page」の文章を適当に書き換えて更新してみてください。
すると、「https://localhost:8000/sample-page/」の方もリアルタイムで表示が切り替わります。

もし、「Sample Page」を消してしまった方は、適当に固定ページを作ってください。
固定ページを作る際に、「スラッグ」を決めると思います。
「https://localhost:8000/(スラッグ)/」にアクセスすれば、その固定ページがGatsbyJSで表示されます。

これで、固定ページの反映が完了です。
開発サーバーは一度終了させておいてください。

投稿ページの反映

次に、投稿ページを反映させていきます。
要領は固定ページの反映とほぼ同じです。

まずは、テンプレートを用意します。
templatesフォルダの中に、「post.js」という名前のファイルを作ってください。

post.jsには、以下のように記述してください。

/* 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
    }
  }
`

構造は、固定ページと全く同じです。
graphqlでは、「wpPost」というクエリがありますのでそれを取得しています。

では、gatsby-node.jsに記述を追加します。

/* 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,
      },
    })
  })
}

クエリから取得した「allWpPost」に「(sort: {fields: date, order: DESC})」をつけています。
これにより、投稿日時が最近のものから順に投稿ページが取得されるようになります。

では、「gatsby develop」で開発サーバーを起動させてみましょう。
開発サーバーが起動できたら、「https://localhost:8000/blog/hello-world/」にアクセスしてみてください。

hello world

上の画像のようなページが開いたと思います。
WordPressのデフォルトで用意されている「Hello world!」という投稿ページが表示されました。

投稿ページは、固定ページの時と違ってurlが「〜/blog/(スラッグ)/」となるようgatsby-node.jsで設定しております。
ここはお好みで構いません。
僕は、固定ページと投稿ページとでurlの形式を区別してみました。

これで投稿ページの反映が完了です。
開発サーバーは一度終了させてください。

記事一覧ページを作る

次は記事一覧ページを作っていきます。
今回は「テンプレート」として作る必要はありません。

add blog list page

上の画像のように、「src」フォルダの中の「pages」フォルダの中に「blog.js」というファイルを作ってください。

blog.jsを開いて、以下のように記述してください。

/* 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
        }
      }
    }
  }
`

下の方の「export const query 〜」の部分には、graphqlで取得したクエリを記述しています。
excerpt」は「抜粋文」の意味です。

次に、layout.cssに以下の記述を追加してください。

/* 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;
}

では、ターミナルに「gatsby develop」と入力して実行しましょう。
開発サーバーが起動します。

開発サーバーが起動したら、「https://localhost:8000/blog/」にアクセスしてみてください。
記事一覧ページが開きます。

ただ、まだ投稿ページがひとつしかない状態です。
そのため、記事一覧ページにはひとつの記事しか表示されていません。

ここで、WordPressの方で投稿ページをいくつか作ってみてください。
画像を追加しても、問題なくGatsbyJSの方に反映されます。

test post

例として、上の画像のような投稿ページを作ってみました。
作ったら、右上の「公開」ボタンをクリックします。

post list

「https://localhost:8000/blog/」のページでは、上の画像のような表示になっていると思います。

「テスト投稿2」という投稿ページも作ったので、上の画像ではそれも表示されています。
記事が新しいものから順に並んでいると思います。
→ More」という文字をクリックすると、その記事のページに切り替わります。

これで、記事一覧ページ作成が完了です。

ヘッダーを作る

最後にヘッダーを作ります。

「components」フォルダの中に「header.jsx」という名前のファイルを作ってください。
header.jsxを開いて、以下のように記述します。

/* 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>
  )
}

同じく「components」フォルダの中に「layout.jsx」というファイルが、すでに作られていると思います。

layout.jsxを開いて、以下のように記述を追加してください。
「import { Header } from "./header"」と「<Header />」を追加しています。

/* layout.jsx */

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

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

    <Header />

    {children}

    </>
  )
}

さらに、「components」フォルダの中の「layout.css」を開いて以下のように記述を追加してください。
これで、ヘッダーの見た目が整います。

/* 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;
  }
}

では、開発サーバーを起動させて「https://localhost:8000/blog/」にアクセスしてみましょう。

complete site

ヘッダーは、上の画像のような表示になっているかと思います。

ヘッダーの文字はリンクになっているので、適当にクリックしてみてください。
GatsbyJSで作られているので、ページの切り替えが早いと思います。

以上で、WordPressとGatsbyJSを連携させたサンプルサイトが完成です。
お疲れ様でした。

まとめ

WordPressとGatsbyJSでサイトを作る手順を、以下の流れで解説してきました。

  • WordPressのローカル環境構築

  • WordPressでプラグイン導入

  • GatsbyJSの開発環境構築

  • GatsbyJSでプラグイン導入

  • WordPressとGatsbyJSを連携する

途中で紹介した、参考記事も以下に載せておきます。

【初期設定まで解説】LocalbyFlyWheelでWordPressローカル環境構築
【初期設定まで解説】LocalbyFlyWheelでWordPressローカル環境構築
記事を読む
GatsbyJSの開発環境を構築する手順
GatsbyJSの開発環境を構築する手順
記事を読む

以上で記事は終わりです。

あなたにおすすめ

サムライエンジニアプラス

この記事を共有

以下のボタンを押すとSNSが開きます

関連記事

GatsbyJSでYarnを使う場合に必要な設定を解説

GatsbyJSでYarnを使う場合に必要な設定を解説

Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する

Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する

Reactの機能で簡単にテーブル(表組み)を作る方法【react-table使います】

Reactの機能で簡単にテーブル(表組み)を作る方法【react-table使います】

【React】styled-componentsの使い方【具体例あり】

【React】styled-componentsの使い方【具体例あり】

【React】useStateで配列を更新して表示する方法を解説

【React】useStateで配列を更新して表示する方法を解説

【Netlify】お名前.comで取得した独自ドメインを適用する方法

【Netlify】お名前.comで取得した独自ドメインを適用する方法

RalaCodeTwitter
© 2022 RalaCode | Privacy Policy