「WordPressとGatsbyJSを連携させたサイトを作りたいけど、ドキュメントが英語ばかり...」
今回はこんな悩みにお答えします。
WordPressとGatsbyJSを連携させてサイトを作る方法を解説します。 もちろん日本語です。
この記事では以下の流れで解説していきます。
WordPressのローカル環境構築
WordPressでプラグイン導入
GatsbyJSの開発環境構築
GatsbyJSでプラグイン導入
WordPressとGatsbyJSを連携する
WordPressとGatsbyJSそれぞれ環境が整っている方は、必要に応じて読み飛ばしてください。
現状、GatsbyJSのスターターとして「gatsby-starter-wordpress」などが用意されています。 ですが、デフォルトでインストールされているプラグインのバージョンが古かったりします。
そこで、この記事では「gatsby-starter-hello-world」を採用し、ほぼゼロからGatsbyJSでサンプルサイトを立ち上げます。 そして、プラグインも手動で導入するので、常に最新のプラグインを導入することになります。
最終的には、以下のページをGatsbyJSに反映させます。
固定ページ
投稿ページ
記事一覧ページ
最後にヘッダーを追加して、サンプルサイトは完成となります。
では、準備から進めていきます。
WordPressのローカル環境構築
まず、WordPressをローカル環境に構築していきます。
すでに、xamppやmampを使ってWordPressのローカル環境構築を行っている方もいらっしゃるかと思います。 xamppやmampでも問題なく進めていけるとは思います。
ですが、この記事では別のツールを使って進めていきます。 そちらを使っていただいた方が、再現性は高いかもしれません。
WordPressをローカル環境に構築するのにおすすめなツールは「LocalbyFlywheel」です。
LocalbyFlywheelのインストールと、WordPressのセットアップの方法は以下の記事で解説しております。 よろしければ、以下の記事を参考に「最低限やるべき初期設定」まで行っていただけると幸いです。
上記の記事に従って進めると、「test wordpress」という名前のWordPressサイトが出来上がっていると思います。 この記事では、その「test wordpress」とGatsbyJSを連携させていきます。
WordPressでプラグイン導入
WordPressとGatsbyJSを連携させるためには、WordPress側で専用のプラグインを導入する必要があります。
上記の画像のように、プラグインを2つインストールしてください。 プラグインは以下の2つです。
WPGatsby
WPGraphQL
最低限必要なプラグインはこれだけです。
GatsbyJSの開発環境構築
ここで、GatsbyJSの開発環境を構築します。 Mac向けではありますが、以下の記事でGatsbyJSの開発環境構築の方法を解説しております。
GatsbyJSの開発環境が構築できたら、ひとつサイトを作りましょう。
ターミナルを起動させてください。 以下のコマンドを入力して実行してください。
bash
$ gatsby new test-wordpress-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-world
GatsbyJSのサイトが作られます。
プロジェクトフォルダの名前は何でもいいです。 ここでは、「test-wordpress-gatsby」という名前にしています。
GatsbyJSでプラグイン導入
次に、GatsbyJSでプラグインを導入していきます。 先ほど作ったプロジェクトフォルダをエディタで開いてください。
プラグインを追加する前に、gatsbyを最新版にアップデートしておきましょう。 まず、ターミナルでプロジェクトフォルダに移動します。
bash
$ cd test-wordpress-gatsby
そして、gatsbyをアップデートします。
bash
$ yarn add gatsby
これで、gatsbyのバージョンが最新のものになります。 では、WordPressとGatsbyJSを連携させるのに必要なプラグインを追加します。 追加するのは、以下の3つです。
gatsby-source-wordpress
gatsby-plugin-sharp
gatsby-transformer-sharp
ターミナルに以下のコマンドを入力して実行してください。
bash
$ yarn add gatsby-source-wordpress gatsby-plugin-sharp gatsby-transformer-sharp
次に、「gatsby-config.js」というファイルを開いてください。
gatsby-config.jsの中身を以下のように記述します。 記述したら保存してください。
javascript
/* 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」コマンドを走らせても上手くいきません。
次に、レイアウトコンポーネントを作ります。
上の画像のように、「src」フォルダの中に「components」フォルダを作ります。 componentsフォルダの中に以下の名前の2つのファイルを作ってください。
layout.jsx
layout.css
layout.jsxの中には、以下のように記述して保存してください。
jsx
/* layout.jsx */
import React from "react"
import "./layout.css"
export const Layout = ({ children }) => {
return (
<>
{children}
</>
)
}
layout.cssには、以下のように記述して保存してください。 とりあえず必要最低限のスタイルだけ指定しています。
（余談ですが、僕の個人的に好みなスタイルにしてあります。ご了承ください。）
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つです。
固定ページを反映させる
投稿ページを反映させる
記事一覧ページを作る
準備
ルートディレクトリに、「gatsby-node.js」という名前のファイルを作ってください。 gatsby-node.jsには、以下のように記述してください。
javascript
/* gatsby-node.js */
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'
とりあえずこれだけでいいです。
このコードは、LocalbyFlywheelでWordPressサイトをSSL化した場合、必要なコードです。 LocalbyFlywheelはあくまで練習環境のため、このコードが必要です。
本番環境で、実際にサイトを一般公開するときはこのコードは消してください。
ここで、GatsbyJSの開発サーバーを起動させましょう。 ターミナルに以下のコマンド入力して実行してください。
bash
$ gatsby develop
開発サーバーが起動されます。 開発サーバーを起動した状態で、「http://localhost:8000/___graphql」にアクセスしてください。
固定ページを反映させる
「graphql」と呼ばれるページが開きます。 左側のExplorerの中から「wpPage」を探してクリックしてください。
wpPageの中に「title」と「content」という項目があるので、チェックを入れます。 すると、画面真ん中の部分に「クエリ」が構築されます。
上の方にある、実行ボタン（図②）をクリックすると、右側にクエリに応じたデータが取得されます。 上記の画像と同じように、データが取得されることを確認したら次に進みます。
次は、「テンプレートファイル」というものを作ります。 開発サーバーは「command + C」で一度終了させておいてください。
「src」フォルダの中に「templates」という名前のフォルダを作ります。 templatesの中に「page.js」という名前のファイルを作ります。
page.jsを開いて、以下のように記述してください。
javascript
/* 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を開いて以下のように記述を追加してください。
javascript
/* 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/」にアクセスしてみてください。
上の画像のように、表示されたと思います。
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には、以下のように記述してください。
javascript
/* 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に記述を追加します。
javascript
/* 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/」にアクセスしてみてください。
上の画像のようなページが開いたと思います。 WordPressのデフォルトで用意されている「Hello world!」という投稿ページが表示されました。
投稿ページは、固定ページの時と違ってurlが「〜/blog/(スラッグ)/」となるようgatsby-node.jsで設定しております。 ここはお好みで構いません。 僕は、固定ページと投稿ページとでurlの形式を区別してみました。
これで投稿ページの反映が完了です。 開発サーバーは一度終了させてください。
記事一覧ページを作る
次は記事一覧ページを作っていきます。 今回は「テンプレート」として作る必要はありません。
上の画像のように、「src」フォルダの中の「pages」フォルダの中に「blog.js」というファイルを作ってください。
blog.jsを開いて、以下のように記述してください。
javascript
/* 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に以下の記述を追加してください。
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の方に反映されます。
例として、上の画像のような投稿ページを作ってみました。 作ったら、右上の「公開」ボタンをクリックします。
「https://localhost:8000/blog/」のページでは、上の画像のような表示になっていると思います。
「テスト投稿2」という投稿ページも作ったので、上の画像ではそれも表示されています。 記事が新しいものから順に並んでいると思います。 「→ More」という文字をクリックすると、その記事のページに切り替わります。
これで、記事一覧ページ作成が完了です。
ヘッダーを作る
最後にヘッダーを作ります。
「components」フォルダの中に「header.jsx」という名前のファイルを作ってください。 header.jsxを開いて、以下のように記述します。
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 />」を追加しています。
jsx
/* layout.jsx */
import React from "react"
import { Header } from "./header"
import "./layout.css"
export const Layout = ({ children }) => {
return (
<>
<Header />
{children}
</>
)
}
さらに、「components」フォルダの中の「layout.css」を開いて以下のように記述を追加してください。 これで、ヘッダーの見た目が整います。
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/」にアクセスしてみましょう。
ヘッダーは、上の画像のような表示になっているかと思います。
ヘッダーの文字はリンクになっているので、適当にクリックしてみてください。 GatsbyJSで作られているので、ページの切り替えが早いと思います。
以上で、WordPressとGatsbyJSを連携させたサンプルサイトが完成です。 お疲れ様でした。
まとめ
WordPressとGatsbyJSでサイトを作る手順を、以下の流れで解説してきました。
WordPressのローカル環境構築
WordPressでプラグイン導入
GatsbyJSの開発環境構築
GatsbyJSでプラグイン導入
WordPressとGatsbyJSを連携する
途中で紹介した、参考記事も以下に載せておきます。