WordPress Headless CMS


<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で運営していたこのブログをNext.jsのサイトにしました。</p>



<p>初のブログリニューアルについてやWordPress Headless CMSについてなど、感想や振り返りをメモしていこうと思います。</p>



<ul>
<li><a href="https://craftime.net/posts/nextjs-with-wordpress-headless-cms">【Next.js】WordpressをヘッドレスCMS化してブログを公開する</a></li>
</ul>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#WordPressNextjs">WordPressのブログをNext.jsで作り替えた。</a><ul><li><a href="#i">今回使った技術・サービス</a></li><li><a href="#i-2">ブログ移行してみた感想</a></li><li><a href="#i-3">今回のブログ移行の理由・きっかけ</a></li><li><a href="#i-4">今回のブログ移行で大変だった点</a></li></ul></li><li><a href="#i-5">【画像で見る】旧ブログと新ブログの違い</a><ul><li><a href="#i-6">全体的な変化</a></li><li><a href="#TOP">TOPページ</a></li><li><a href="#Category_Tag">Category / Tagページ</a></li><li><a href="#Post">Postページ</a></li></ul></li><li><a href="#SEO">旧ブログと新ブログのSEO面の違い</a></li><li><a href="#i-7">今後の実装予定 / 検討中のこと</a></li><li><a href="#i-8">まとめ</a></li></ul></div>
<h2><span id="WordPressNextjs">WordPressのブログをNext.jsで作り替えた。</span></h2>



<p>改めて、今までWordPressで運営していたブログを、Next.jsで構築したサイトに移行しました。</p>



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



<h3><span id="i">今回使った技術・サービス</span></h3>



<ul>
<li>WordPress（ヘッドレスCMS）</li>



<li>Next.js</li>



<li>TypeScript</li>



<li>Vercel</li>
</ul>



<h3><span id="i-2">ブログ移行してみた感想</span></h3>



<p>ずっとWordPressのヘッドレスCMS化は興味があったので、やっと作れて開発がとても楽しかったです。</p>



<p>またこれで苦手なPHPじゃなくなってやりたいカスタマイズは大体できるようになったので、よりわかりやすいサイト構成にしたり便利なコンテンツを追加したりしていきたいです。</p>



<p>あと今回作ってみて改めて感じたのは「やっぱりWordPressはすごい」です。<strong>ブログやメディアを運用するほとんどの場面ではWordPressで十分</strong>だと思います。</p>



<h3><span id="i-3">今回のブログ移行の理由・きっかけ</span></h3>



<p><strong>「興味がある技術(WordPressのヘッドレスCMS化)を使ってみたい」「WordPressをカスタマイズできたら楽しそう」</strong>といった感じで気軽に始めてました。（結果的に、知らないことを勉強するのも手を動かすのも、ストレスなく楽しみながらできたのでよかった。）</p>



<p>あと、<strong>今後WEBサービスを作った時に「サブドメインやサブディレクトリにメディア/ブログを置けるようになりたい」</strong>というのも少しありました。ブログは様々な用途で利用されることがあるので、活用できる幅が増えたことはよかったです。</p>



<h3><span id="i-4">今回のブログ移行で大変だった点</span></h3>



<h4>TypeScriptの型宣言</h4>



<p>今回で初めてTypeScriptを使ったので、型宣言のタイミングや書き方になかなか苦労しました。</p>



<h4>元サイトから新サイトへのリダイレクト処理</h4>



<p>正規表現が苦手なので、全然違うパスにリダイレクトしてしまったりして何度も変更を繰り返して設定しました。</p>



<p>今もまだ正しく処理されているか不安なので、アナリティクスのデータを見たりしながら異常がないかチェックしていこうと思います。</p>



<p>（リダイレクト処理にはWordPressの「Redirection」というプラグインを使用しました）</p>



<h2><span id="i-5">【画像で見る】旧ブログと新ブログの違い</span></h2>



<p>今回、<strong>ページ構成はほとんど変えずに移行</strong>しました。</p>



<p>元サイトと新サイトを画像で見比べてみて、どんな変更をしたのか振り返りつつ、デザイン面のメモを簡単にしていきます。</p>



<h3><span id="i-6">全体的な変化</span></h3>



<p>大きな変更としてはPCのレイアウトを<strong>「2カラムから1カラム」に変更</strong>しました。以前より多少コンテンツに集中できるようになるのかなと思います。（後々2カラムに戻る可能性あり）</p>



<p>今後も調整を続けてコンテンツがより読みやすくなるようにしていきたいです。</p>



<h3><span id="TOP">TOPページ</span></h3>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="576" src="https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-top-1024x576.png" alt="" class="wp-image-2083" srcset="https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-top-1024x576.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-top-300x169.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-top-768x432.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-top-304x171.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-top-282x159.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-top.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>現時点でコンテンツの構成は変えていません。</p>



<p>記事カードを少しコンパクトにしたので、<strong>画面内に表示される記事数が増えました</strong>。ほんの少しだけ一覧ページで記事が探しやすくなったのかなと思います。</p>



<p>あとサムネイルがない場合に、<strong>記事カードにデフォルト画像(仮)が表示される</strong>ようになりました。</p>



<h3><span id="Category_Tag">Category / Tagページ</span></h3>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="576" src="https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-category-1024x576.png" alt="" class="wp-image-2084" srcset="https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-category-1024x576.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-category-300x169.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-category-768x432.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-category-304x171.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-category-282x159.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-category.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>TOPページと構成・デザインはほぼ同じです。シンプルなページ。</p>



<h3><span id="Post">Postページ</span></h3>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="576" src="https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-1-1024x576.png" alt="" class="wp-image-2085" srcset="https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-1-1024x576.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-1-300x169.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-1-768x432.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-1-304x171.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-1-282x159.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-1.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="576" src="https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-2-1024x576.png" alt="" class="wp-image-2086" srcset="https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-2-1024x576.png 1024w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-2-300x169.png 300w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-2-768x432.png 768w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-2-304x171.png 304w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-2-282x159.png 282w, https://craft-time.jp/wp-content/uploads/2022/12/Crafttime-post-2.png 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>PC表示ではレイアウトを1カラムにしたことで<strong>記事レイアウトが中央寄せ</strong>になりました。全体のバランス感がよく個人的にはこっちの方が好きです。</p>



<p>また記事の横幅が広くなり、縦方向にコンパクトになりました(PC表示)。一方この懸念点として、<strong>1行あたりの文字数が多くなっている</strong>ことがあります。もしかすると少し見づらくなってしまった可能性があり、今後調整が必要になるかもしれません。</p>



<p>見出しのデザインを変更しました。より見出しの強調性を上げて、<strong>「通常テキスト」と「見出し」の区別しやすくして流し見しやすい</strong>ようにしました。</p>



<p>（※画像デザインの参考：<a href="https://twitter.com/designkenkyujo/status/1604736907149467648?s=20&amp;t=Clwb7KzAeg_-bwHIyleuXw">デザイン研究所さん</a>）</p>



<h2><span id="SEO">旧ブログと新ブログのSEO面の違い</span></h2>



<p>移行したばかりなので、現時点では<strong>まだ変化がわかりません</strong>。</p>



<p>サイト規模自体も小さいので、致命的なミスなどなければ<strong>プラスもマイナスも大きな変化はそれほどないのではないか</strong>と考えています。</p>



<p>今回、移行前のLighthouseスコアを控え忘れるミスをしてしまったので、基本SearchConsoleのデータを見ながら何か変化が起こるかどうかチェックしていこうと思います&#8230;</p>



<h2><span id="i-7">今後の実装予定 / 検討中のこと</span></h2>



<ul>
<li>SNS共有ボタン</li>



<li>ページごとのOGP生成</li>



<li>追従する目次&amp;ステータスバー</li>
</ul>



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



<p>今回やってみて、ただブログを作るだけならやっぱりWordPressで十分だし、コスパだけ考えたらわざわざヘッドレスCMSにするメリットは少ないと思いました。</p>



<p>ただ開発するのは楽しいし、愛着も湧いてもっと記事書いたり機能実装したりしたいと感じるし、いいこともたくさんあります。</p>


「WordPress Headless CMS」の記事一覧