---

WordPress78記事と画像1625枚の救出作戦

REST API取得と非公開フラグによる安全隔離

WordPress から記事を取り出す際、管理画面の「XML エクスポート」を使う方法もありますが、今回は公開中のサイトから /wp-json/wp/v2/posts（および pages, categories, tags, media）の REST API を叩いて JSON 形式で一括取得する方式を採りました。JSON なら本文 HTML だけでなくスラッグ、公開日・更新日、アイキャッチ画像 ID の紐付けが最初から構造化されているため、変換スクリプトでの処理が圧倒的に正確だからです。

取得した全 78 記事（すでに新サイト側で先行リライトしていた 8 本を除く 新規移行対象 70 本）と 画像 1,625 枚 を変換する際、安全のために徹底したのが次の 3 ステップです。

1. いきなり本番公開せず、全件 hidden: true（非公開フラグ）付きで専用ディレクトリ src/content/blog/review-old/<slug>/ へ隔離出力する
2. まず写真が 30〜60 枚ある複雑な 3 記事だけで「試験変換（ドライラン）」を行い、ビルドが通ることを確認してから残り全件を一括変換する
3. 1,625 枚の画像はすべて各記事フォルダ内の ./images/*.webp へ自動変換・ローカル保存し、旧サイトの wp-content/uploads への外部直リンクをゼロにする

Cocoon独自タグと入れ子枠が招いた変換の癖

HTML から MDX へ自動変換してみると、人気テーマ Cocoon 特有の HTML 構造 がいくつもの面白い「変換の癖」を生むことが分かりました。

Cocoon 側の元要素	自動変換後の MDX コンポーネント	そのままでは起きた問題と手直しポイント
ラベル付きボックス / 白抜き枠	GadgetSection コンポーネント	元記事で枠の中に枠を入れていた箇所が 二重ネスト になったり、## 見出し 直下に同名の枠が来て全文が緑枠で囲まれたりしたため平準化。
キャラクター吹き出し	SpeechBalloon コンポーネント	単なる引用（>）に変換すると掛け合いの楽しさが消えるため、専用アイコン付きコンポーネントへ復元。
星評価ショートコード	Markdown 比較テーブル	[star rate="4.0"] などが剥がれて末尾に 4.0:手頃な価格 のような謎の生文字として残ったため、見やすい表に整形。
自動抜粋の description	80〜140 文字の要約文へ書き直し	本文 1 行目の挨拶や見出しが機械的に切り取られていたため、記事の結論が伝わる要約へ 1 本ずつ改善。

---

カエレバ・KATTENE脱却と広告ブロッカー対策

もしもリンクでAmazonと楽天が消える真犯人

今回の移行で一番の急所であり、かつ「WordPress を卒業して本当に良かった！」と実感したのが 商品紹介リンク（アフィリエイト枠）の再設計 です。

旧ブログでは定番プラグインの『KATTENE』や『カエレバ』を使っていましたが、これらは PHP で動いているため、プラグインの更新が止まるとサーバーの PHP バージョンを 7.4 から 8.x へ上げられなくなる原因になっていました。そこで全記事に散らばっていた 185 個の商品枠 を解析し、記事ごとの型安全なデータファイル（<slug>-affiliate.ts）と共通コンポーネント <AffiliateCard id="..." /> へ統合しました。

ところが、完成したページをブラウザで実機確認していたとき、背筋が凍る現象を発見しました。一部の環境で「Amazon」と「楽天市場」のボタンだけが忽然と消え、「Yahoo!」ボタン 1 個しか表示されていなかったのです！

WebP化と非表示検知フェイルセーフの実装コード

この問題をクリーンに解決するため、自作の AffiliateCard.astro には次の 3 つの設計 を組み込みました。

1. 商品画像は外部サーバー直リンクをやめ、astro:assets の <Image> で 120×120px の軽量ローカル WebP として配信する（外部画像ブロックやリンク切れが永久に起きない）。
2. 不要な 1px トラッキング画像タグを完全撤去し、型定義（AffiliateItem）で存在しない ID を指定したらビルド時に即エラーで知らせる。
3. 広告ブロッカーに display: none で消された場合のみ発動する「非表示検知フェイルセーフ」を入れる：通常環境では素直な <a href="..."> のまま動作し、もし window.getComputedStyle(a).display === 'none' と判定された環境でのみ、data-aff-url に退避しておいた遷移先を click イベントで開くよう href を切り替えます。これにより、どのブラウザ環境でも オレンジ（Amazon）・青（楽天市場）・赤（Yahoo!）の 3 ボタン が崩れず綺麗に並びます！

---
// src/components/AffiliateCard.astro（要部抜粋）
import { Image } from 'astro:assets';
import { affiliateData } from '../data/affiliates/index';

const { id } = Astro.props;
const item = affiliateData[id];
if (!item) {
  throw new Error(`AffiliateCard ID "${id}" が未定義です。データファイルを確認してください。`);
}
---
<div class="p-card-wrap">
  <div class="p-card-img">
    <Image src={item.image} alt={item.title} width={120} height={120} format="webp" />
  </div>
  <div class="p-card-info">
    <p class="p-card-ttl">{item.title}</p>
    <div class="trg-grp">
      <a href={item.amazon} data-aff-url={item.amazon} class="trg-lnk-a" target="_blank" rel="nofollow noopener noreferrer">Amazon</a>
      <a href={item.rakuten} data-aff-url={item.rakuten} class="trg-lnk-r" target="_blank" rel="nofollow noopener noreferrer">楽天市場</a>
      <a href={item.yahoo} data-aff-url={item.yahoo} class="trg-lnk-y" target="_blank" rel="nofollow noopener noreferrer">Yahoo!</a>
    </div>
  </div>
</div>

<script>
  function ensureAffiliateButtonsVisible() {
    document.querySelectorAll('a[data-aff-url]').forEach((a) => {
      if (window.getComputedStyle(a).display === 'none') {
        const url = a.getAttribute('data-aff-url');
        if (url) {
          a.setAttribute('href', '#open-shop');
          a.addEventListener('click', (e) => {
            e.preventDefault();
            window.open(url, '_blank', 'noopener,noreferrer');
          });
        }
      }
    });
  }
  ensureAffiliateButtonsVisible();
  document.addEventListener('DOMContentLoaded', ensureAffiliateButtonsVisible);
</script>

---

移行後の品質を揃えるレビュー記事11大共通ルール

元画像幅を超える拡大禁止とショートコード掃除

自動スクリプトで 70 記事のファイル変換が通ったとしても、それだけで公開すると「昔の記事の粗」がそのまま出てしまいます。そこで、もともと手作業で丁寧に仕上げていた基準レビュー 9 記事を手本にして 『REVIEW_POST_RULES.md（11 大共通ルール）』 を策定し、1 記事ずつ順番に精読・改修してから公開しました。

AI国家本編と文体・見出しを分離する設計原則

また、同じ Astro プロジェクトの中に「硬派な社会制度論考（である調）」と「親しみやすいガジェット・生活レビュー（です・ます調＋吹き出し＋猫様写真）」が同居している場合、AI エディタにルールを 1 つしか渡さないと レビュー記事まで論文調に書き換えてユーモアを消してしまう事故 が起きます。

これを防ぐため、レビュー記事専用のルールファイル（REVIEW_POST_RULES.md）を完全に独立させ、「一次情報・実測値・失敗談・吹き出しの掛け合いは 1 文字も削らず 100% 保全する」という防護壁を敷いたことが大成功の決め手になりました。

---

まとめ：過去の記事資産を10年戦える静的MDXへ

WordPress で何年もかけて書いた記事や写真は、かけがえのない自分の歴史そのものです。PHP やプラグインの寿命に引きずられて放置してしまう前に、純粋なテキスト（MDX）と軽量な WebP 画像として救い出しておけば、10 年先・20 年先もサーバー環境を選ばず光速で表示し続けられます。

1. REST API で記事とメディア構造を取得し、まずは hidden: true で安全に隔離変換する
2. カエレバ・KATTENE 等の PHP 依存枠は型安全な <AffiliateCard> へ統合し、広告ブロッカーによるボタン消失もフェイルセーフで防ぐ
3. 一括変換で終わりにせず、画像の実寸上限や時点明記などの共通ルールで 1 記事ずつ丁寧に磨き上げる

「いつかは脱 WordPress したいな」と考えている方の背中を押す実践ガイドになれば嬉しいです！