WordPress


<p>WordPressのブログをNext.jsで公開したかったので、WordPressをヘッドレスCMS化しました。</p>



<p>今回はその作業工程を簡単にまとめた内容です。</p>



<p><strong>記事データ管理や管理画面は「WordPress」</strong>、<strong>フロントエンドは「Next.js」</strong>という構成になります。</p>



<ul>
<li><a href="https://craftime.net/posts/blog-renewal">WordPressのブログをNext.jsに移行した感想と振り返り</a></li>
</ul>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#Nextjs">Next.jsのプロジェクトを作成する</a></li><li><a href="#WordPressAPI">WordPressでAPIを作る</a><ul><li><a href="#1_WP_GraphQL">1. プラグイン「WP GraphQL」を追加する</a></li><li><a href="#2_API">2. APIのエンドポイントを確認する</a></li></ul></li><li><a href="#Nextjs-2">Next.jsで記事データを取得する</a><ul><li><a href="#1_APIenv">1. APIのエンドポイントを.envに記載する</a></li><li><a href="#2">2. 投稿一覧データを取得する</a></li></ul></li><li><a href="#Nextjs-3">Next.jsで記事を表示する</a></li><li><a href="#WordPressNextjs">WordPressからNext.jsにリダイレクトする</a><ul><li><a href="#_Headless_Mode">方法⑴ プラグイン「Headless Mode」を使用する</a></li><li><a href="#_Redirection">方法⑵ プラグイン「Redirection」を使用する</a></li></ul></li><li><a href="#Nextjs-4">Next.jsでプレビュー機能を作る</a><ul><li><a href="#WPGraphQL_JWT_Authentication">プラグイン「WPGraphQL JWT Authentication」を追加する</a></li><li><a href="#wp-configphp">「wp-config.php」を編集する</a></li><li><a href="#htaccess">「.htaccess」を編集する</a></li><li><a href="#refresh_token">refresh tokenを発行する</a></li><li><a href="#env">.envファイルを編集する</a></li><li><a href="#i">プレビューを表示するページを作成する</a></li><li><a href="#i-2">編集画面プレビューのリンク先を変更する</a></li></ul></li><li><a href="#i-3">まとめ</a></li></ul></div>
<h2><span id="Nextjs">Next.jsのプロジェクトを作成する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npx create-next-app blog    # 「blog」部分は自由（アプリケーション名）</code></pre></div>



<h2><span id="WordPressAPI">WordPressでAPIを作る</span></h2>



<h3><span id="1_WP_GraphQL">1. プラグイン「WP GraphQL」を追加する</span></h3>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-20.10.25-1024x414.png" alt="" class="wp-image-2168" width="512" height="207" srcset="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-20.10.25-1024x414.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-20.10.25-300x121.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-20.10.25-768x310.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-20.10.25-304x123.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-20.10.25-282x114.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-20.10.25.png 1272w" sizes="(max-width: 512px) 100vw, 512px" /></figure>



<p>「WP GraphQL」のプラグインを追加して有効化します。</p>



<h3><span id="2_API">2. APIのエンドポイントを確認する</span></h3>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-21.03.24-1024x218.png" alt="" class="wp-image-2192" width="512" height="109" srcset="https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-21.03.24-1024x218.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-21.03.24-300x64.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-21.03.24-768x163.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-21.03.24-304x65.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-21.03.24-282x60.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/スクリーンショット-2022-12-28-21.03.24.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /></figure>



<p>「WP GraphQL」→「Settings」でGraphQLのエンドポイントを確認することができます。Next.jsでデータ取得をする時に使用するのでチェックしておきましょう。</p>



<h2><span id="Nextjs-2">Next.jsで記事データを取得する</span></h2>



<h3><span id="1_APIenv">1. APIのエンドポイントを.envに記載する</span></h3>



<p>.envファイルに下記を追加します。（<code>https://example.com/</code>をWordPressのURLに変更してください。）</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file=".env.local"><code>WORDPRESS_API_URL=https://example.com/graphql</code></pre></div>



<h3><span id="2">2. 投稿一覧データを取得する</span></h3>



<p>今回は投稿一覧のデータを取得します。下記の関数でWordPressで公開されている投稿データを取得することができます。</p>



<p>その他のデータを取得したい場合は、取得したいデータに合わせて<code>query</code>の値を変更してみてください。（「特定の投稿データ」や「カテゴリやタグ」など）</p>



<ul>
<li><a href="https://craftime.net/posts/wpgraphql-query">【WordPress】「WP GraphQL」で個人的によく使うクエリまとめ</a></li>
</ul>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>// 「投稿一覧」を取得
export async function getPostsFromWordPress() {

	const data = await fetch(`${process.env.WORDPRESS_API_URL}`, {
		method: &quot;POST&quot;,
		headers: {
			&quot;Content-Type&quot;: &quot;application/json&quot;,
		},
		body: JSON.stringify({
			query: `
				{
					posts {
						nodes {
							id
							slug
							status
							title
							featuredImage {
								node {
									mediaItemUrl
								}
							}
							date
							modified
							content
							categories {
								nodes {
									id
									name
									slug
								}
							}
							tags {
								nodes {
									id
									name
									slug
								}
							}
						}
					}
				}
        	`,
		}),
	})
	return data.json()
}</code></pre></div>



<h2><span id="Nextjs-3">Next.jsで記事を表示する</span></h2>



<p>ここまででWordPressからデータを取得してNext.jsで受けることができました。次はこのデータを実際に表示していきます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-file="pages/index.js" data-lang="JSX"><code>import React from &#39;react&#39;;

export default function Home({posts}) {

	return (
		&lt;div&gt;
			{posts.map(post =&gt; {
				&lt;div&gt;{post.title}&lt;/div&gt;
			})}
		&lt;/div&gt;
	)

}

export const getStaticProps = async () =&gt; {
	// ===========================
	// 投稿一覧データを取得する
	// ===========================
	const res_posts = await getPostsFromWordPress();
	const posts = res_posts.data.posts.nodes

	return {
		props: {
			posts,     // 投稿一覧データ
		},
	}
}</code></pre></div>



<h2><span id="WordPressNextjs">WordPressからNext.jsにリダイレクトする</span></h2>



<p>何も設定をしない状態だと<strong>WordPressとNext.jsのページが重複してしまいます</strong>。公開ページを1つに統一するための一つの方法として、WordPress→Next.jsへリダイレクト処理があります。</p>



<h3><span id="_Headless_Mode">方法⑴ プラグイン「Headless Mode」を使用する</span></h3>



<p>プラグイン「<a href="https://wordpress.org/plugins/headless-mode/">Headless Mode</a>」を追加します。（プラグインの検索結果で出てきます。）</p>



<p>このプラグインを使用すると、全ての公開ページを一括で新しいドメインへリダイレクト処理してくれます。<strong>各ページのURLパスはそのままでドメインだけ変更したい場合</strong>はこのプラグインがおすすめです。</p>



<p>FTPソフトを使用して<code>wp-config.php</code>に下記を追加するだけで設定できます。（<code>https://example.com</code>の部分はリダイレクト先のURLに変更）</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="wp-config.php" data-lang="PHP"><code>define( &#39;HEADLESS_MODE_CLIENT_URL&#39;, &#39;https://example.com&#39; );</code></pre></div>



<h3><span id="_Redirection">方法⑵ プラグイン「Redirection」を使用する</span></h3>



<p>プラグイン「<a href="https://ja.wordpress.org/plugins/redirection/">Redirection</a>」を追加します。（プラグインの検索結果で出てきます。）</p>



<p>このプラグインを使用すると、ページごとやディレクトリごとのリダイレクト処理をすることができます。<strong>新しいサイトでURLパスを一部変えたい場合</strong>などはこのプラグインがおすすめです。</p>



<p>Redirectionの設定ページで、「転送元の相対URL」と「リダイレクト先のURL」などをそれぞれ設定することでリダイレクト処理されます。（正規表現を使用するとディレクトリごとの処理なども可能です）</p>



<h2><span id="Nextjs-4">Next.jsでプレビュー機能を作る</span></h2>



<p>何も設定しないとプレビューはWordpress側のページで見ることになってしまいます。そこでプレビューもNext.js側のサイトで確認できるようにしたいです。</p>



<p>ただし<strong>作成中や未公開の記事はWPGraphQLでは取得されません</strong>。なのでプラグインなどで未公開記事データも取得できるように設定する必要があります。</p>



<h3><span id="WPGraphQL_JWT_Authentication">プラグイン「WPGraphQL JWT Authentication」を追加する</span></h3>



<p>認証機能を利用できるプラグイン「WPGraphQL JWT Authentication」を使用します。</p>



<p>このプラグインでは管理画面の検索結果ではヒットしないので、<a href="https://github.com/wp-graphql/wp-graphql-jwt-authentication">「WPGraphQL JWT Authentication」のgithubページ</a>からzipファイルをダウンロードします。ダウンロードしたzipファイルを管理画面で追加して有効化します。</p>



<h3><span id="wp-configphp">「wp-config.php」を編集する</span></h3>



<p>FTPソフトを使用して<code>wp-config.php</code>に下記を追加します。</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="wp-config.php" data-lang="PHP"><code>define( &#39;GRAPHQL_JWT_AUTH_SECRET_KEY&#39;, &#39;ランダム文字列&#39; );</code></pre></div>



<h3><span id="htaccess">「.htaccess」を編集する</span></h3>



<p>FTPソフトを使用して<code>.htaccess</code>に下記を追加します。</p>



<p></p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file=".htaccess" data-lang="PHP"><code>SetEnvIf Authorization &quot;(.*)&quot; HTTP_AUTHORIZATION=$1</code></pre></div>



<h3><span id="refresh_token">refresh tokenを発行する</span></h3>



<p>WPGraphQLで下記クエリを実行して「refresh token」を取得します。</p>



<p>（clientMutationIdは「clientMutationId」「password」「username」が同じ場合に毎回同じrefreshTokenを返してくれるという仕様のためにありますが、基本refreshTokenは一度しか発行する必要がないのでなんでもOK）</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-sql" data-lang="SQL"><code>mutation Login {
  login(
    input: {
      clientMutationId: &quot;適当な文字列1&quot;
      password: &quot;WordPressのログインパスワード&quot;
      username: &quot;WordPressのログインユーザ名&quot;
    }
  ) {
    refreshToken
  }
}</code></pre></div>



<p></p>



<h3><span id="env">.envファイルを編集する</span></h3>



<p>Next.jsの<code>.env</code>ファイルに下記を追記します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain" data-file=".env.local"><code>WORDPRESS_AUTH_REFRESH_TOKEN=&quot;取得したrefreshToken&quot;
WORDPRESS_PREVIEW_SECRET=&quot;適当な文字列2&quot;</code></pre></div>



<h3><span id="i">プレビューを表示するページを作成する</span></h3>



<p>下記URLのように<code>/preview</code>のページに、⑴<code>WORDPRESS_PREVIEW_SECRET</code>と⑵見たい記事の<code>POST_ID</code>をパラメータを持たせると、その記事のプレビューが見れる仕様にしていきます。</p>



<p>（<code>WORDPRESS_PREVIEW_SECRET</code>を知っている人はプレビューが見れる）</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>http://localhost:3000/preview?secret=[WORDPRESS_PREVIEW_SECRET]&id=[POST_ID]</code></pre></div>



<p>プレビューしたい記事のデータを取得するコード例です。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>// プレビューしたい「投稿データ」を取得
export async function getPreviewPostFromWordPressByPostId(id) {

	const data = await fetch(`${process.env.WORDPRESS_API_URL}`, {
		method: &quot;POST&quot;,
		headers: {
			&quot;Content-Type&quot;: &quot;application/json&quot;,
			&#39;Authorization&#39;: `Bearer ${process.env.WORDPRESS_AUTH_REFRESH_TOKEN}`,
		},
		body: JSON.stringify({
			query: `
				{
					postBy(postId: ${Number(id)}) {
						title
						content
						// ...省略
					}
				}
    	`,
		}),
	})
	return data.json()
}</code></pre></div>



<p>プレビューページ（<code>/preview</code>）に取得した記事データを反映します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-file="pages/preview" data-lang="JSX"><code>import React from &#39;react&#39;;

export default function Preview({post}) {

	return (
		&lt;div&gt;
			&lt;h1&gt;{post.title}&lt;/h1&gt;
			&lt;div dangerouslySetInnerHTML={{__html: post.content}}&gt;&lt;/div&gt;
		&lt;/div&gt;
	)

}

export const getServerSideProps = async ({query}) =&gt; {
	const {secret, id} = query

	// ===========================
	// プレビュー投稿データを取得する
	// ===========================
	const res_post = await getPreviewPostFromWordPressByPostId(id)
	const post = res_post.data.postBy

	return {
		props: {
			post,     // 投稿一覧データ
		},
	}
}</code></pre></div>



<h3><span id="i-2">編集画面プレビューのリンク先を変更する</span></h3>



<p>WordPress管理画面の「投稿一覧」や「編集ページ」にあるプレビューボタンのリンク先を新サイトのプレビューページURLに変更します。</p>



<p>WordPressのテーマエディタにある<code>functions.php</code>に下記コードを追加してください。</p>



<h4>「クラシックエディタ」の場合</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="functions.php" data-lang="PHP"><code>/**
 * redirect to custom preview link
*/

function preview_link($link) {
    global $post;
    $secret = &#39;ここに.envファイルのWORDPRESS_PREVIEW_SECRET&#39;;
    $new_link = &#39;http://localhost:3000/api/preview?secret=&#39;.$secret.&#39;&id=&#39;.$post-&gt;ID;
    return $new_link;
}
add_filter(&#39;preview_post_link&#39;, &#39;preview_link&#39;);</code></pre></div>



<h4>「ブロックエディタ」の場合</h4>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-file="functions.php" data-lang="PHP"><code>/**
 * Gutenbergによる投稿プレビューのURL(プレビュー生成中からのリダイレクト先)を変更する
 * WordPress 5.3.2で動作確認
 * @param $response
 * @return array
 */

function my_rest_pre_echo_response($response) {
    global $post;
    $secret = &#39;ここに.envファイルのWORDPRESS_PREVIEW_SECRET&#39;;
    $new_link = &#39;http://localhost:3000/api/preview?secret=&#39;.$secret.&#39;&id=&#39;.$post-&gt;ID;

    if(!is_user_logged_in())
        return;
    if($response[&#39;status&#39;] === &#39;draft&#39;){
        $response[&#39;link&#39;] = $new_link;
    }
    return $response;
}
add_filter( &#39;rest_pre_echo_response&#39;, &#39;my_rest_pre_echo_response&#39;, 100 );</code></pre></div>



<h2><span id="i-3">まとめ</span></h2>



<p>microCMSなど、他のヘッドレスCMSにも興味があるのでいつか触ってみたいと思います。</p>



<ul class="references">
<li><a href="https://vercel.com/guides/wordpress-with-vercel">Using Headless WordPress with Next.js and Vercel – Vercel Docs</a></li>



<li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress">next.js/examples/cms-wordpress &#8211; github</a></li>



<li><a href="https://akiblog10.com/headless-wordpress-nextjs/">【Next.js】WordPressをヘッドレスCMS化させる方法</a></li>



<li><a href="https://wordpress.org/plugins/headless-mode/">Headless Mode – WordPress plugin | WordPress.org</a></li>



<li><a href="https://ktyr.net/?p=1869">[WordPress]Gutenberg下のプレビューURL変更</a></li>
</ul>


【Next.js】WordPressをヘッドレスCMS化してブログを公開する


<p>WordPressヘッドレスCMSを作る時に「WP GraphQL」を使用してページネーションを実装したかったので、その時のやり方をまとめておきます。</p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#WPGraphQL_Offset_Pagination">プラグイン「WPGraphQL Offset Pagination」を追加する</a></li><li><a href="#i">ページごとの記事一覧データを取得する</a><ul><li><a href="#110">「1ページ10記事」取得するクエリ</a></li><li><a href="#120">「1ページ20記事」取得するクエリ</a></li></ul></li></ul></div>
<h2><span id="WPGraphQL_Offset_Pagination">プラグイン「WPGraphQL Offset Pagination」を追加する</span></h2>



<p><a href="https://github.com/valu-digital/wp-graphql-offset-pagination">「WPGraphQL Offset Pagination」のgithubページ</a>からzipファイルをダウンロードして、WordPressにプラグインとして追加します。</p>



<h2><span id="i">ページごとの記事一覧データを取得する</span></h2>



<p>プラグインを追加したら、「取得したいページ番号」や「1ページごとの記事数」に合わせてクエリを指定することができます。</p>



<p>offsetPagination内の<code>size</code>は<strong>「1ページあたりの記事数」</strong>、<code>offset</code>は<strong>「取得開始位置」</strong>です。</p>



<p>（<code>offset: 0</code>では記事一覧の1記事目〜、<code>offset: 10</code>は記事一覧の10記事目〜、<code>offset: 20</code>は記事一覧の20記事目〜、で取得されます）</p>



<h3><span id="110">「1ページ10記事」取得するクエリ</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-sql" data-lang="SQL"><code>// 1ページ目
posts(where: {offsetPagination: { size: 10, offset: 0 }}){
	nodes {
		title
	}
}

// 2ページ目
posts(where: {offsetPagination: { size: 10, offset: 10 }}){
	nodes {
		title
	}
}

// 3ページ目
posts(where: {offsetPagination: { size: 10, offset: 20 }}){
	nodes {
		title
	}
}</code></pre></div>



<h3><span id="120">「1ページ20記事」取得するクエリ</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-sql" data-lang="SQL"><code>// 1ページ目
posts(where: {offsetPagination: { size: 20, offset: 0 }}){
	nodes {
		title
	}
}

// 2ページ目
posts(where: {offsetPagination: { size: 20, offset: 20 }}){
	nodes {
		title
	}
}

// 3ページ目
posts(where: {offsetPagination: { size: 20, offset: 40 }}){
	nodes {
		title
	}
}</code></pre></div>



<p></p>



<ul class="references">
<li><a href="https://github.com/valu-digital/wp-graphql-offset-pagination">valu-digital/wp-graphql-offset-pagination &#8211; GitHub</a></li>
</ul>


【WordPress】「WP GraphQL」でページネーションを設定する


<p>WordPressをヘッドレスCMSにする時に「WP GraphQL」でデータを取得しています。</p>



<p>そこでよく使うGraphQLのクエリ（使いそうなクエリ）をまとめてみました。</p>



<p><a href="https://www.wpgraphql.com/">GraphQL API for WordPress</a></p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">⑴「記事一覧」を取得する</a><ul><li><a href="#10">「最新10件分」の記事一覧を取得する</a></li><li><a href="#i-2">「指定カテゴリ」の記事一覧を取得する</a></li><li><a href="#i-3">「指定タグ」の記事一覧を取得する</a></li></ul></li><li><a href="#i-4">⑵「記事単体」を取得する</a><ul><li><a href="#id">「記事のid」で取得する</a></li><li><a href="#slug">「記事のslug」で取得する</a></li></ul></li><li><a href="#i-5">⑶「カテゴリ一覧」を取得する</a></li><li><a href="#i-6">⑷「タグ一覧」を取得する</a></li><li><a href="#i-7">取得できる記事データ(一部)</a><ul><li><a href="#i-8">よく使うクエリ</a></li></ul></li><li><a href="#i-9">取得できるカテゴリ/タグデータ(一部)</a><ul><li><a href="#i-10">よく使うクエリ</a></li></ul></li><li><a href="#i-11">まとめ</a></li></ul></div>
<h2><span id="i">⑴「記事一覧」を取得する</span></h2>



<h3><span id="10">「最新10件分」の記事一覧を取得する</span></h3>



<p>デフォルトの件数が10件</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	posts {
		nodes {
			... // ここに取得したいデータを指定
		}
	}
}</code></pre></div>



<p></p>



<h3><span id="i-2">「指定カテゴリ」の記事一覧を取得する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>// カテゴリの「ID」を指定する場合
{
	posts(where: {categoryId: xxx}) {
		...
	}
}</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>// カテゴリの「slug」を指定する場合
{
	posts(where: {categoryName: &quot;xxx&quot;}) {
		...
	}
}</code></pre></div>



<h3><span id="i-3">「指定タグ」の記事一覧を取得する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>// タグの「ID」を指定する場合
{
	posts(where: {tagId: xxx}) {
		...
  }
}</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>// タグの「slug」を指定する場合
{
	posts(where: {tag: &quot;xxx&quot;}) {
		...
  }
}</code></pre></div>



<h2><span id="i-4">⑵「記事単体」を取得する</span></h2>



<h3><span id="id">「記事のid」で取得する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	postBy(id: xxx) {
		...
  }
}</code></pre></div>



<h3><span id="slug">「記事のslug」で取得する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	postBy(slug: &quot;xxx&quot;) {
		...
  }
}</code></pre></div>



<h2><span id="i-5">⑶「カテゴリ一覧」を取得する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	categories {
		nodes {
			categoryId
			name
			slug
			count
		}
	}
}</code></pre></div>



<h2><span id="i-6">⑷「タグ一覧」を取得する</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	tags {
		nodes {
			tagId
			name
			slug
			count
		}
	}
}</code></pre></div>



<h2><span id="i-7">取得できる記事データ(一部)</span></h2>



<figure class="wp-block-table"><table><thead><tr><th>クエリ</th><th>データの内容</th><th></th></tr></thead><tbody><tr><td>id</td><td>ID</td><td></td></tr><tr><td>slug</td><td>slug</td><td></td></tr><tr><td>title</td><td>タイトル</td><td></td></tr><tr><td>date</td><td>公開日</td><td></td></tr><tr><td>modified</td><td>更新日</td><td></td></tr><tr><td>featuredImage</td><td>サムネイル画像</td><td></td></tr><tr><td>content</td><td>本文</td><td></td></tr><tr><td>categories</td><td>カテゴリ一覧</td><td></td></tr><tr><td>tags</td><td>タグ一覧</td><td></td></tr><tr><td>auther</td><td>執筆者</td><td></td></tr></tbody></table></figure>



<h3><span id="i-8">よく使うクエリ</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	id
	slug
	status
	title
	featuredImage {
		node {
			mediaItemUrl
		}
	}
	date
	modified
	content
	categories {
		nodes {
			id
			name
			slug
		}
	}
	tags {
		nodes {
			id
			name
			slug
		}
	}
}</code></pre></div>



<h2><span id="i-9">取得できるカテゴリ/タグデータ(一部)</span></h2>



<figure class="wp-block-table"><table><thead><tr><th>クエリ</th><th>データの内容</th><th></th></tr></thead><tbody><tr><td>categoryId / tagId</td><td>ID</td><td></td></tr><tr><td>name</td><td>カテゴリ名 / タグ名</td><td></td></tr><tr><td>slug</td><td>slug</td><td></td></tr><tr><td>count</td><td>記事数</td><td></td></tr></tbody></table></figure>



<h3><span id="i-10">よく使うクエリ</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>{
	categoryId
	name
	slug
	count
}</code></pre></div>



<h2><span id="i-11">まとめ</span></h2>



<p>WP GraphQLがかなり使いやすそうなので、少し慣れたらいろんなデータが簡単に取得できるようになりそうだなと思いました。これでヘッドレスCMS化できればPHPを書かなくてもいいのがありがたい&#8230;</p>



<p>GraphQLは今回が初でまだまだ知らない部分が多そうなので、少しずつ情報を足していけたらいいな。</p>



<ul class="references">
<li><a href="https://www.wpgraphql.com/docs/posts-and-pages">Posts and Pages | WP GraphQL</a></li>
</ul>



<p></p>


「WordPress」の記事一覧