WordPressをヘッドレス化してみた

投稿日: 2025/12/17
更新日: 2025/12/24

WordPressをヘッドレス化してみた

目次

  1. はじめに
  2. 構成の比較（既存構成 vs ヘッドレス構成）
  3. バックエンド環境の構築（WordPressのコピーと分離）
  4. WordPressのヘッドレス化設定
  5. フロントエンドの実装（Next.js + Tailwind CSS）
  6. Vercelへのデプロイ
  7. 本番公開とドメインの移管設定
  8. SEO対策と今後の課題
  9. まとめ

1. はじめに

作成サイトしたサイト(※虫注意)：https://www.chatachata.jp

今回ヘッドレスCMSという技術を知り、実際に使ってみたいと考えたのがきっかけです。

そこで、過去にWordPressで構築したサイトを、この機会にヘッドレス化してみることにしました。

最近学習していたNext.jsとTailwind CSSをフロントエンドに採用し、デプロイがスムーズに行えるVercelをプラットフォームとして選定しています。

2. 構成の比較（既存構成 vs ヘッドレス構成）

項目既存サイト (Current)新サイト (New)
フロントエンドWordPress (Xserver)Vercel
バックエンドWordPress (Xserver)WordPress (Xserver)
構成スタイルモノリス (一体型)ヘッドレス (疎結合)
主なインフラエックスサーバーVercel + エックスサーバー

3. バックエンド環境の構築（WordPressのコピーと分離）

今回は既存のドメインを継続して運用したかったため、元のWordPressデータを、エックスサーバーで所有していた別のドメインへコピーしました。

そのコピー先の環境をバックエンド（ヘッドレスCMS）として利用することにしました。

移行方法はXserverの場合、サーバーパネルから簡単にできました。

WordPress - WordPress簡単移行を開く

以下を設定し、移行するボタンを押すと自動で移行してくれる。

  • 移行元URLにWordPress移行元のドメイン
  • 移行先URLにWordPress移行先のドメイン(今回はXserverに最初から割り当てられているドメインにしました)

WordPress簡単移行

4. WordPressのヘッドレス化設定

ブログ記事のみをWordPressで管理して、固定ページは新規作成することにしました。

以下の手順でWordPressの設定をしました。

  • 不要な固定ページ、プラグインを削除
  • 検索エンジンがサイトをインデックスしないようにする
  • REST APIを有効化
  • 海外からのAPIへのアクセス許可

不要な固定ページ、プラグインを削除

今回固定ページは新たに作ることにしたため、すべて削除しました。

プラグインもほぼすべて削除しました。

検索エンジンがサイトをインデックスしないようにする

これは、Googleなどの検索エンジンにヘッドレスWordPressを表示しないようにするための設定です。

サイト自体にアクセスしたら、404を返すなどの対応もありましたが簡単な以下の方法を取りました。

WordPressのダッシュボードに行き、設定 - 表示設定を開きます。

開くと、検索エンジンでの表示とあるのでそこにチェックマークを入れることでインデックスしないように設定できます。

検索エンジンがサイトをインデックスしないようにする

REST APIを有効化

ここは特に何もせずに、ローカル環境からは使用することができていました。

海外からのAPIへのアクセス許可

今回デプロイ環境をVercelとしました。

最初ローカル環境からREST APIは使えていたのですがデプロイ後にREST APIがエラーとなり情報が取得できない問題が発生しました。

そこで、調べたところXserverでは国外からのREST APIアクセスを制限する設定があることを知りました。

以下サーバーパネルのWordPress - WordPressセキュリティ設定に設定があり、ここをOFFすることでデプロイ先からもREST APIを使用できました。

海外からのAPIへのアクセス許可

5. フロントエンドの実装（Next.js + Tailwind CSS）

フロントエンドの実装では、まずREST APIを使用してデータの取得ができるか確認してそこから実装をしました。

細かい実装は省略。

6. Vercelへのデプロイ

Vercelへのデプロイは初めてでしたが、簡単にすることができました。

デプロイ方法も省略。

Vercelは自分のGitHubと紐づけることでコードをPushするとデプロイまで自動で行ってくれます。

7. 本番公開とドメインの移管設定

既存サイト(Xserver)のドメインを新サイト(Vercel)に移行しました。

ドメインはXserverでもともと使用していたものを使用したかったので、ドメインの向き先をVercelに変えるようにDNSレコードを変更しました。

Xserverではサーバーパネルからドメイン - DNSレコード設定にあるAレコードとCNAMEにVercelで提示されたレコードを設定することで向き先をVercelに変えます。

Xserver(DNSレコード)

8. SEO対策

SEO対策は以下の手順で対策を行いました。

  • タグの見直し
  • メタデータの見直し
  • sitemapとrobots.txtの追加
  • Google Search Consoleへドメインを登録

sitemapとrobots.txtの追加

sitemapの役割

サイト内にどのようなページが存在するかをリスト化した、検索エンジン用のインデックス（目次）です。

app/sitemap.ts

import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
    const baseUrl = 'https://shoat-portfolio.com';

    return [
        {
            url: baseUrl,
            lastModified: new Date(),
        },
        {
            url: `${baseUrl}/projects`,
            lastModified: new Date(),
        },
        {
            url: `${baseUrl}/blog`,
            lastModified: new Date(),
        },
    ];
}

robots.txt の役割

robots.txt は、クローラーがサイトに訪れた際、最初に確認するファイルです。「どのページを見ていいか、どこを見てはいけないか」という許可・禁止のルールを伝えます。

以下にファイルは配置しました。

public/robots.txt

User-agent: *
Allow: /

Sitemap: https://shoat-portfolio.com/sitemap.xml

Google Search Consoleへドメインを登録

  • ドメイン登録
  • sitemapの登録
  • robotsの登録

Google Search Console：https://search.google.com/

ドメイン登録

Xserverレンタルサーバーパネルからドメイン - DNSレコード設定からTXTに提示されたレコードを登録する。

ドメイン登録

以降、ドメイン登録完了後

sitemapの登録

Google Search Consoleのインデックス作成 - サイトマップから登録

robotsの登録

Google Search Consoleの設定 - robots.txtから登録

9. まとめ

今回、WordPressをヘッドレス化してみました。

Vercelを使用したデプロイやSEO対策など、Webサイト公開に関する勉強にもなりました。

今後、WordPress以外のCMSも使用してみたいです。

← ブログ一覧に戻るトップページに戻る →