中野紘子
はじめに
先日、株式会社メンバーズ メンバーズルーツカンパニーの岡田さまより「WordPressからmicroCMSにコンテンツを移行するチュートリアル」を準備編と実行編に分けてご寄稿いただきました。
本記事は、これらのチュートリアルを参考に、実際にコンテンツ移行を試してみたレポート記事です。具体的な移行プロセスのイメージを掴むための参考になれば幸いです。
準備編
こちらの記事とあわせてお読みください。
WordPressからmicroCMSにコンテンツを移行するチュートリアル【準備編】
1. 移行元のWordPressサイトについて
今回移行するのはこちらのブログです。https://microcms.sakura.ne.jp/sample-blog/
チュートリアル記事と同じく、下記のスキーマで構成されています。
- 投稿
- タイトル
- 本文（ブロックエディタ）
- 著者
- アイキャッチ画像
- カテゴリ参照
- タグ参照
- カテゴリ
- タグ
以下は実際のWordPress管理画面になります。スクリーンショットと一緒に、投稿状況を示します。
投稿記事一覧
投稿にカテゴリーとタグを紐づけています。投稿は全部で10件あります。
カテゴリー一覧
未分類を含めて全部で6件あります。
タグ一覧
全部で5件あります。
個別記事
先に提示したようにタイトル、本文（ブロックエディタ）、アイキャッチ画像、投稿者（著者）、カテゴリー、タグを設定しております。
2. WordPressから移行元のデータを取得する
投稿データをエクスポートする
ツール > エクスポートから「エクスポートする内容を選択」で「すべてのコンテンツ」を選択し、［エクスポートファイルをダウンロード］ボタンをクリックすると、XML形式のファイルとして出力されるので、ダウンロードします。
メディアデータをダウンロードする
FTPクライアントを使用して、WordPressをインストールディレクトリ内の/wp-content/uploads/フォルダをダウンロードします。
3. microCMSでAPIを作成しておく
事前にサービスと以下3つのAPIを作成し、APIスキーマを設定していきます。
1. 投稿
- エンドポイント名：post
- APIの型：リスト形式
2. 投稿カテゴリー
- エンドポイント名：category
- APIの型：リスト形式
3. 投稿タグ
- エンドポイント名：tag
- APIの型：リスト形式
APIキーの権限設定
APIキーの権限設定画面で、コンテンツAPIとマネジメントAPIの権限を変更します。
コンテンツAPI
「GET」「POST」にチェックを入れます。
マネジメントAPI
「メディアの取得」「メディアのアップロード」にチェックを入れます。
以上で準備は完了です！
実行編
こちらの記事とあわせてお読みください。
WordPressからmicroCMSにコンテンツを移行するチュートリアル【実行編】
いよいよ実行編です。まずはスクリプトを実行するために、ファイルの配置や編集を行います。
1. スクリプトを実行するための準備
以下のリポジトリをクローン（or ダウンロード）します。
https://github.com/MEM02210/wp2microcms
追加・編集したファイル
チュートリアルのとおりにファイルを配置し、以下のファイル構成になりました。
.envファイルの作成
MICROCMS_SERVICE_DOMAIN=xxxxxxxxxx
MICROCMS_API_KEY=xxxxxxxxxx
WORDPRESS_MEDIA_BASE_PATH=https://example.com/wp-content/uploads/MICROCMS_SERVICE_DOMAIN
microCMS 管理画面の URL（https://xxxxxxxx.microcms.io）の xxxxxxxx の部分です。
MICROCMS_API_KEY
microCMS 管理画面の「サービス設定 > API キー」から確認することができます。
WORDPRESS_MEDIA_BASE_PATH
移行元のWordPressのメディアファイルのベースパスです。
XMLファイルを配置
dataディレクトリに準備編でWordPressの管理画面からエクスポート投稿データのXMLファイルを配置します。
メディアファイルを配置
data/mediaディレクトリに準備編で/wp-content/uploads/からダウンロードしたメディアファイルを配置します。
設定ファイル（config.js）を編集
設定ファイル（src/config.js）を編集していきます。今回は以下のように設定しました。
// src/config.js
export const config = {
xmlPath: "sampleblog.WordPress.2024-11-15.xml", // 読み取るXMLファイル名（dataフォルダ直下に配置）
postType: "post", // WordPressの移行対象の投稿タイプ
draft: true, // 下書き投稿を移行するかどうか
api: true, // microCMSのAPIを実行するかどうか
apiName: "post", // microCMSのAPIのエンドポイント名
apiSchema: {
title: true, // テキストフィールド：タイトル（必須）
contents: true, // リッチエディタ：本文コンテンツ
author: true, // テキストフィールド：著者
eyecatch: true, // 画像：アイキャッチ画像
categories: true, // 複数コンテンツ参照：カテゴリを移行するかどうか
tags: true // 複数コンテンツ参照：タグを移行するかどうか
}, // microCMSのAPIのスキーマ設定
category: {
execute: true, // カテゴリ移行を実行するかどうか
taxonomy: "category", // WordPressのカテゴリタクソノミー名（/wp-admin/edit-tags.php?taxonomy=XXXX）
apiName: "category", // microCMSのカテゴリ用APIのエンドポイント名
apiSchema: {
name: true, // テキストフィールド：カテゴリー名（必須）
description: true // テキストエリア：カテゴリー説明を移行するかどうか
} // microCMSのカテゴリ用APIのスキーマ設定
},
tag: {
execute: true, // タグ移行を実行するかどうか
taxonomy: "post_tag", // WordPressのタグタクソノミー名（/wp-admin/edit-tags.php?taxonomy=XXXX）
apiName: "tag", // microCMSのタグ用APIのエンドポイント名
apiSchema: {
name: true, // テキストフィールド：タグ名（必須）
description: true // テキストエリア：タグ説明を移行するかどうか
} // microCMSのタグ用APIのスキーマ設定
},
limit: false // コンテンツ数制限（テスト用）、制限しない場合はfalse
};2. メディアファイルのアップロード
それでは実際にコンテンツデータを登録していきます。まず、メディアファイルをアップロードします。
コマンドの実行
ターミナルからnpm run imagesを実行すると、以下のログが出力されました。
メディアファイルをアップロード後のmicroCMS管理画面
API経由でメディアファイルが登録されていました。
3. 投稿データのアップロード
次に、投稿データをアップロードします。
コマンドの実行
ターミナルからnpm run startを実行すると、以下のログが出力されました。
投稿データをアップロード後のmicroCMS管理画面
microCMSの管理画面を確認すると、各投稿データが登録されていました。
投稿
投稿カテゴリー
投稿タグ
個別記事
WordPressのブロックエディタからmicroCMSのリッチエディタへの移行も、正しく表示されています。
以上でコンテンツ移行は完了です👏
おわりに
実際に記事内のサンプルコードを使用してWordPressのコンテンツを移行してみましたが、想像以上に簡単に移行することができました。
ぜひチュートリアル記事を参考にして、コンテンツ移行を試してみてください！
