Shifter Headless 上の WordPress で Advanced Custom Fields を使用し、GatsbyJS でデータを取得する
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
今回は「Shifter Headless + GatsbyJS で WordPress の記事からページを生成する方法」の記事に引き続いて、 Shifter Headless 上の WordPress で Advanced Custom Fields を使用し、React 向け静的サイトジェネレーターの GatsbyJS でデータを取得する方法についてまとめたいと思います。
Advanced Custom Fields とは
Advanced Custom Fields (ACF) とは、 WordPress 上で簡単に、投稿画面にカスタムフィールドを実装できるプラグインです。
WordPress の中身を触ることなく、管理画面だけでカスタムフィールドを追加できるのが大きな特徴です。
追加できるフィールドの種類も、テキストフィールドやラジオボタン、真偽値のトグルボタンや画像などを始めとした、多くのフィールドに対応しています。また、フィールドのグルーピング機能なども備えています。
この記事では ACF についての詳しい説明は割愛しますので、詳しくはこちらの公式ドキュメントをご覧ください。
Shifter Headless で Advanced Custom Fields を使う
今回は以前の記事「Shifter Headless で WordPress を Headless CMS として使う」から引き続き、 WordPress をサーバーレスの Headless CMS として提供するサービスであるShifter Headlessを使用します。
Shifter Headless で構築した WordPress には ACF がデフォルトでインストールされており、また GraphQL で ACF のAPIを取得できるようなプラグイン群も既にセットアップされているため、すぐに使い始めることができます。
ただし注意点として、Shifter Headless では新たにプラグインをインストールすることができないため、 PRO 版の機能を使用することはできません。
Shifter Headless 上の WordPress で Advanced Custom Fields を作成する
「Shifter Headless + GatsbyJS で WordPress の記事からページを生成する方法」の記事でセットアップしたWordPress環境を前提にご紹介します。
まずは WordPress の REST API を GatsbyJS 側で取得できるようにするために、WP Gatsby WP GraphQL を有効化します。
次に Advanced Custom Fields WPGraphQL for Advanced Custom Fields を有効化し、 ACF を使えるようにする前準備を行います。
フィールドグループの作成
サイドバーから カスタムフィールド > 新規追加 に移動し、フィールドグループを作成します。
今回は「テキスト」「画像」「投稿オブジェクト」「リンク」そして子に「テキスト」フィールドを持つ「グループ」を持つフィールドグループを例として作成しました。
フィールドグループとはその名の通りカスタムフィールドのグループで、作成したグループを投稿種別やカテゴリなどで出し分けすることができます。
ここで注意点なのですが、デフォルトでは ACF のカスタムフィールドは GraphQL では取得できないようになっており、フィールドグループの Show in GraphQL をオンにしないと取得することができません。
オンにすると、GraphQL Field Name で設定した名前で取得できるようになります。
作成したカスタムフィールドは、投稿画面で画像のように表示されます。
いくつかのフィールドについて説明すると、「画像」フィールドではブロックエディタと同様に、画像のアップロードとメディアライブラリからの選択を行うことができます。
「投稿オブジェクト」は他の投稿を参照します。
GatsbyJS 側でデータを取得する
GatsbyJS 側では前回の記事でご紹介した gatsby-source-wordpress-experimental をあらかじめ導入しておきます。ACF を使う上で追加の設定は必要ありません。
WordPress 側で投稿できると、それぞれのフィールドのデータは GraphiQL で下記のように取得できます。
テキスト
query MyQuery {
post(id: "[投稿id]") {
acfExample {
text
}
}
}{
"data": {
"post": {
"acfExample": {
"text": "テキストサンプル"
}
}
}
}画像
query MyQuery {
post(id: "[投稿id]") {
acfExample {
image { // 主要なフィールドを抜粋
altText // alt
caption // キャプション
description // 概要
fileSize
mediaType
mimeType
slug
sizes
sourceUrl
srcSet // サイズごとの src のURL
title
}
}
}
}{
"data": {
"post": {
"acfExample": {
"image": { // 主要なフィールドを抜粋
"altText": "ACFの公式サイトのスクリーンショット",
"caption": "<p>キャプション</p>\n",
"description": "<p>概要</p>\n",
"fileSize": 636116,
"mediaType": "image",
"mimeType": "image/png",
"slug": "acf_screenshot",
"sizes": "(max-width: 300px) 100vw, 300px",
"sourceUrl": "[CDNのURL]/uploads/2020/08/acf_screenshot.png",
"srcSet": "[CDNのURL]/uploads/2020/08/acf_screenshot-300x140.png 300w, [CDNのURL]/uploads/2020/08/acf_screenshot-1024x478.png 1024w, [CDNのURL]/uploads/2020/08/acf_screenshot-768x358.png 768w, [CDNのURL]/uploads/2020/08/acf_screenshot-1536x717.png 1536w, [CDNのURL]/uploads/2020/08/acf_screenshot-2048x956.png 2048w",
"title": "acf_screenshot"
}
}
}
}
}投稿オブジェクト
query MyQuery {
post(id: "[投稿id]") {
acfExample {
postObject {
... on Post { // 主要なフィールドを抜粋
content
excerpt // 抜粋
link // 絶対URL
slug
status
title
uri // ルートURL
}
}
}
}
}{
"data": {
"post": {
"acfExample": {
"postObject": { // 主要なフィールドを抜粋
"content": "\n<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
"excerpt": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
"link": "[ShifterのURL]/1/",
"slug": "hello-world",
"status": "publish",
"title": "Hello world!",
"uri": "/1/"
}
}
}
}
}リンク
query MyQuery {
post(id: "[投稿id]") {
acfExample {
link {
target // target 属性の値
title
url
}
}
}
}{
"data": {
"post": {
"acfExample": {
"link": {
"target": "",
"title": "Advanced Custom Fields",
"url": "https://www.advancedcustomfields.com/"
}
}
}
}
}グループ
query MyQuery {
post(id: "[投稿") {
acfExample {
group { // オブジェクトのように参照できる
fieldGroupName
subText
subText2
}
}
}
}{
"data": {
"post": {
"acfExample": {
"group": {
"fieldGroupName": "group",
"subText": "サブテキスト",
"subText2": "サブテキスト2"
}
}
}
}
}この GraphQL クエリを使用して、 GatsbyJS 上のページにデータを流し込むことが出来ます。
まとめ
今回は Shifter Headless 上の WordPress で Advanced Custom Fields を使用し、GatsbyJS でデータを取得する方法についてまとめました。
今回ご紹介したフィールドは一部であり、 ACF についてまだ触りきれていない部分もあるのでまた触ってみて学びたいと思っています。
感想として、 Headless CMS として WordPress を使う上で Advanced Custom Fields を使用することでかなり他の Headless CMS と近い感覚でフィールドのセットアップを行うことができるように感じました。
WordPress を Headless CMS として使いたい方はもちろん、 Headless CMS をどれを使うか検討している方も Shifter Headless で構築した WordPress を候補の一つに入れてみてはいかがでしょうか。
Gaji-Labo は本気の WordPress 高速化を支援します
プラグインに頼った簡易的な高速化ではなく、フロントエンド開発のプロだからできる本気の WordPress 高速化をご提案します。開発の規模・サーバーサイドの構成・チームや事業の状態などに合わせて、柔軟に対応が可能です。「どうしたら高速化できるかわかるフロントエンドエンジニアがいない」などのお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。
フロントエンドの相談をする！
