WordPress

最終更新日：
公開日：

レシピ

GraphQLでカスタム投稿とタクソノミーを取得する

GraphQLのクエリからカスタム投稿、カスタム投稿のカテゴリーになるタクソノミーを取得できるように設定する方法を解説します。

この記事のポイント

  • 表示したいカスタム投稿とタクソノミーのshow_in_graphqlをtrueに設定する
  • GraphQLで使用する単体名graphql_single_nameと複数名graphql_plural_nameを指定する
  • WordPressと連携しているGatsbyJSを使い、GraphQLでカスタム投稿とタクソノミーが取得できるか確認する

目次

GraphQLでカスタム投稿とタクソノミーを取得できるように設定する

WordPressで投稿したカスタム投稿とカテゴリーに該当するタクソノミーをGraphQLから取得できるように設定していきます。
カスタム投稿はfunctions.phpからregister_post_type関数で登録している場合と、「Custom Post Type UI」などのプラグインを使って登録している場合がありますが、いずれの場合も解説します。

今回は以下の流れで進めていきます。
最終的にはWordPressと連携したGatsbyJSのGraphQLからカスタム投稿を取得できるか確認します。
（今回は解説用でGatsbyJSを使いますが、GraphQLを使う他のシステムでも同様の手順でカスタム投稿ができます。）

  1. カスタム投稿とタクソノミーをGraphQLから取得できるように設定する
  2. プラグイン「WPGraphQL」のGraphiQL IDEでカスタム投稿を取得するクエリを作成する
  3. GatsbyJSのGraphQLからカスタム投稿を取得する

カスタム投稿とタクソノミーをGraphQLから取得できるように設定する

まずはWordPressのカスタム投稿とタクソノミーをGraphQLから取得できるように設定しましょう。

カスタム投稿をregister_post_type関数で登録している場合

カスタム投稿とタクソノミーをfunctions.phpにregister_post_type関数やregister_taxonomy関数で登録している場合の設定方法です。
プラグインを使って登録している場合については、後述の「プラグインで登録している場合」へ進んでください。

カスタム投稿とタクソノミーをGraphQLで取得できるようにするためには、以下の3つの項目を設定する必要があります。

  • show_in_graphql – GraphQLに表示する（初期値はfalse）
  • graphql_single_name – 単体で取得するときの名称
  • graphql_plural_name – 複数まとめて取得するときの名称

テーマ内のfunctions.phpを開いて、特定のカスタム投稿に対して3つの項目を設定していきます。
設定前は以下のようにカスタム投稿とタクソノミーが登録されていることとします。

functions.php

<?php

function new_post_type() {

	// カスタム投稿を登録
	register_post_type(
		'html_css',
		array(
			'labels' => array(
				'name'					=> 'HTML & CSS',
				'singular_name'			=> 'HTML & CSS',
				'add_new'				=> '新規追加',
				'add_new_item'			=> '新規追加',
				'edit_item'				=> '投稿を編集',
				'new_item'				=> '新着情報',
				'all_items'				=> '投稿一覧',
				'view_item'				=> '投稿を見る',
				'search_items'			=> '検索する',
				'not_found'				=> '投稿が見つかりませんでした。',
				'not_found_in_trash'	=> 'ゴミ箱内に投稿が見つかりませんでした。'
			),
			'public'		=> true,
			'has_archive'	=> true,
			'menu_position'	=> 5,
			'supports'		=> array(
				'title',
				'editor',
				'thumbnail',
				'excerpt',
			),
			'taxonomies'			=> array('html_post_cat'),
		)
	);


	// タクソノミーを登録
	$labels = array(
		'name'                => 'カテゴリー',
		'singular_name'       => 'カテゴリー',
		'search_items'        => 'カテゴリー検索',
		'all_items'           => '全てのカテゴリー',
		'parent_item'         => '親カテゴリー',
		'parent_item_colon'   => '親カテゴリー:',
		'edit_item'           => 'カテゴリーを編集',
		'update_item'         => 'カテゴリーを更新',
		'add_new_item'        => 'カテゴリーを追加',
		'new_item_name'       => '新規カテゴリー',
		'menu_name'           => 'カテゴリー'
	);

	$html_cat_args = array(
		'hierarchical'			=> true,
		'has_archive'			=> true,
		'labels'				=> $labels,
		'public'				=> true,
		'show_ui'				=> true,
		'show_in_nav_menus'		=> true,
		'rewrite'				=> array('with_front'=>false),
	);

	register_taxonomy( 'html_post_cat', 'html_css', $html_cat_args );

}
add_action( 'init', 'new_post_type');

-- 省略 --

こちらのコードに、まずはカスタム投稿のGraphQLに関する設定を追記しましょう。

functions.php

<?php

function new_post_type() {

	// カスタム投稿を登録
	register_post_type(
		'html_css',
		array(
			'labels' => array(
				'name' => 'HTML & CSS',
				'singular_name' => 'HTML & CSS',
				'add_new' => '新規追加',
				'add_new_item' => '新規追加',
				'edit_item' => '投稿を編集',
				'new_item' => '新着情報',
				'all_items' => '投稿一覧',
				'view_item' => '投稿を見る',
				'search_items' => '検索する',
				'not_found' => '投稿が見つかりませんでした。',
				'not_found_in_trash' => 'ゴミ箱内に投稿が見つかりませんでした。'
			),
			'public' => true,
			'has_archive' => true,
			'menu_position' => 5,
			'supports' => array(
				'title',
				'editor',
				'thumbnail',
				'excerpt',
			),
			'taxonomies' => array('html_post_cat'),
			'show_in_graphql' => true,
			'graphql_single_name' => 'html_css_post',
			'graphql_plural_name' => 'html_css_posts',
		)
	);

}
add_action( 'init', 'new_post_type');

-- 省略 --

show_in_graphqlはGraphQLに表示されるようにtrueを指定します。

graphql_single_nameはpost_typeにあわせてhtml_css_postを指定し、graphql_plural_nameは複数形にしたhtml_css_postsを指定しました。

続いて、タクソノミーもGraphQLに表示されるように設定します。
設定する項目はカスタム投稿と同じ3つの項目になります。

functions.php

<?php

function new_post_type() {

	// カスタム投稿を登録
	register_post_type(
		'html_css',
		array(
			'labels' => array(
				'name' => 'HTML & CSS',
				'singular_name' => 'HTML & CSS',
				'add_new' => '新規追加',
				'add_new_item' => '新規追加',
				'edit_item' => '投稿を編集',
				'new_item' => '新着情報',
				'all_items' => '投稿一覧',
				'view_item' => '投稿を見る',
				'search_items' => '検索する',
				'not_found' => '投稿が見つかりませんでした。',
				'not_found_in_trash' => 'ゴミ箱内に投稿が見つかりませんでした。'
			),
			'public' => true,
			'has_archive' => true,
			'menu_position' => 5,
			'supports' => array(
				'title',
				'editor',
				'thumbnail',
				'excerpt',
			),
			'taxonomies' => array('html_post_cat'),
			'show_in_graphql' => true,
			'graphql_single_name' => 'html_css_post',
			'graphql_plural_name' => 'html_css_posts',
		)
	);

	// タクソノミーを登録
	$labels = array(
		'name'                => 'カテゴリー',
		'singular_name'       => 'カテゴリー',
		'search_items'        => 'カテゴリー検索',
		'all_items'           => '全てのカテゴリー',
		'parent_item'         => '親カテゴリー',
		'parent_item_colon'   => '親カテゴリー:',
		'edit_item'           => 'カテゴリーを編集',
		'update_item'         => 'カテゴリーを更新',
		'add_new_item'        => 'カテゴリーを追加',
		'new_item_name'       => '新規カテゴリー',
		'menu_name'           => 'カテゴリー'
	);

	$html_cat_args = array(
		'hierarchical'			=> true,
		'has_archive'			=> true,
		'labels'				=> $labels,
		'public'				=> true,
		'show_ui'				=> true,
		'show_in_nav_menus'		=> true,
		'rewrite'				=> array('with_front'=>false),
		'show_in_graphql'		=> true,
		'graphql_single_name'	=> 'html_post_category',
		'graphql_plural_name'	=> 'html_post_categories',
	);

	register_taxonomy( 'html_post_cat', 'html_css', $html_cat_args );

}
add_action( 'init', 'new_post_type');

-- 省略 --

show_in_graphqlにtrueを指定し、graphql_single_nameはhtml_post_category、graphql_single_nameは複数形のhtml_post_categoriesを設定します。

カスタム投稿やタクソノミーが複数ある場合は、GraphQLに表示したい全ての対して名前が被らないように同様の設定を行います。

以上で設定は完了です。
変更を保存して、「GraphiQL IDEでカスタム投稿を取得するクエリを作成する」へ進んでください。

プラグインで登録している場合

ここではプラグイン「Custom Post Type UI」を使ってカスタム投稿とタクソノミーを設定している場合を想定して、GraphQLに表示されるよう設定していきます。

設定したいカスタム投稿の編集ページを開いてください。

投稿タイプの編集ページを開く

ページをスクロールしていくと下部に「WPGraphQL」の設定項目があります。
こちらを以下のように設定し、「投稿タイプを保存」ボタンを押してください。

GraphQLの設定例

続いて、タクソノミー（カスタム投稿のカテゴリー）についても同様に設定します。
タクソノミーの編集ページを開いて、ページ下部にあるに「WPGraphQL」の設定項目を入力してください。

タクソノミーのGraphQL設定例

「タクソノミーを保存」を押したら設定完了です。
GraphQLに表示したいカスタム投稿とタクソノミーが複数ある場合は、それぞれに対して上記と同様の設定をしたら準備完了です。

GraphiQL IDEでカスタム投稿を取得するクエリを作成する

続いて、WPGraphQLのGraphiQL IDEを使ってカスタム投稿とタクソノミーを取得できるか確認していきましょう。

WordPressの左メニュー「GarphQL」から「GraphiQL IDE」を選択するか、上部メニューから「GraphiQL IDE」を選択してください。
すると以下のようなIDEが表示されます。

IDEの上部から「QueryComposer」ボタンを押し、表示される項目一覧に設定したカスタム投稿が表示されているか確認してください。
（GraphQLの項目では「_（アンダースコア）」は削除されてラムダ形式に自動変換されます。）

GraphiQL IDE

項目を選択していくと、右隣に自動的にクエリが作成されていきます。
取得したいデータの項目をhtmlCssPosts > edges > node > idのように選択し、IDE上部にある右矢印のボタンを押すとクエリが実行されます。

GraphQLの実行例

1番右側には取得したデータが表示されます。
ここに取得したいデータが表示されたら、WordPressに登録されたデータはGraphQLで取得できる状態になっています。

もしQueryComposerに取得したいカスタム投稿やタクソノミーが表示されていない場合は設定漏れがあるか、設定の保存に失敗していることがあるためもう一度設定をしてみてください。

GatsbyJSのGraphQLからカスタム投稿を取得する

最後に、WordPressの外側からGraphQLでカスタム投稿のデータを取得できるか確認するために、GatsbyJSからGraphQLを使ってカスタム投稿を取得して表示してみます。

今回はローカル環境で動いているWordPressとGatsbyJSが連携していることを想定し、GatsbyJSは「#gatsby develop」を実行した開発用サーバーで動いているシステムからWordPressのカスタム投稿とタクソノミーを取得できるか確認します。

GatsbyJSでもGraphQLのクエリ作成ツールとして「GraphiQL」が標準で用意されています。
GraphiQLはルートURLに「___graphQL（アンダースコアは3つ）」を付けると開くことができます。
例えばローカルのGatsbyJSのURLが「http://localhost:8000」だとすると、GraphiQLのURLは「http://localhost:8000/___graphQL」になります。

GraphQLのクエリ作成ツールは先ほどのWPGraphQLで使用したIDEと基本的な見た目は同じものです。
ただし、先ほどは「QueryComposer」だったボタンのラベルが「Explorer」になります。
また、クエリの項目名もGatsbyJSの設定によって異なり、WPGraphQLでは「htmlCssPosts」だったカスタム投稿がGatsbyJSでは「allWpHtmlCssPost」になっています。
もちろん項目名が異なるのみで取得できるデータは同じ内容です。

GatsbyJSのGraphQLクエリ作成ツール

こちらの例ではGraphiQLでカスタム投稿からid、title（タイトル）、excerpt（概要）、uri（投稿のURL）に加えて、関連するタクソノミー（カテゴリー）のid、name、slugを取得するクエリを作成して実行しています。

ここで作成したクエリはGatsbyJSの中でそのまま使用することができます。
以下のblog.jsに作成したクエリを貼り付けて、簡易的に投稿の一覧を表示してみましょう。
以下の赤字の箇所がGraphQLのクエリになります。

blog.js

import * as React from 'react'
import { graphql } from 'gatsby'
import Layout from './components/layout'


const BlogPage = ({data}) => {
	return (
		<Layout pageTitle="My blog posts">
			{
				data.allWpHtmlCssPost.edges.map(({node}) => (
					<article key={node.id}>
						<h2>{node.title}</h2>
						<p dangerouslySetInnerHTML={{ __html: node.excerpt}} />
					</article>
				))
			}
		</Layout>
	)
}


export const query = graphql`
	query {
		allWpHtmlCssPost(sort: {fields: modified, order: DESC}) {
			edges {
				node {
					id
					title
					excerpt
					uri
					htmlPostCategories {
						nodes {
							id
							name
							slug
						}
					}
				}
			}
		}
	}
`

export default BlogPage

blog.jsのページを開いてGraphQLを実行すると、以下のように投稿のタイトル（title）と概要文（excerpt）がズラッと表示されます。
（ここではGraphQLでデータを取得できるか確認することが目的のため、GatsbyJSのコードの解説は割愛します。）

GraphQLで取得したデータを一覧表示

無事にWordPressの外側からもGraphQLを使って投稿データが取得できることを確認できました。
以上、GraphQLでカスタム投稿とタクソノミーを取得する方法についてでした。

関連記事

前のページへ 一覧に戻る 次のページへ