WordPress→note移行：アイキャッチ漏れ・画像取得エラーをエクスポート時だけで一発解決する方法

たーさん

最終更新日時 : 2026.10.06

nWordPressからnoteへ記事をインポートした際、「画像がごっそり抜け落ちる」「アイキャッチが消える」というトラブルに直面したことはないでしょうか。

実際に挙動を検証したところ、取り込みに失敗する明確な原因と、手作業を最小限にして一括解決する方法が見えてきました。エクスポート時のPHPコードも含めて共有します。

検証：なぜ画像がインポートされないのか？

noteのXMLインポート機能において、画像の取り込みパターンを検証した結果がこちらです。

× ① アイキャッチ（メタデータ管理）：noteの見出し画像としては引き継がれない
◯ ② フルパスのPNG/JPEG：正常に取り込まれる
× ③ 相対パスの画像（/wp-content/...）：外部取得できずスキップされる
× ④ フルパスのWebP（.webp）：note側の仕様で取り込み不可

結論として、「https:// から始まる絶対URL」かつ「JPEGまたはPNG形式」で本文内に存在している画像のみが、note側に正常取得されます。

また、WordPressのアイキャッチ画像は本文データ（<content:encoded>）の外で管理されているため、noteのインポート処理では無視されてしまいます。

しかし、本文最上部にある画像をnote側のアイキャッチ（見出し画像）として設定する、という情報もあります。

目指す解決アプローチ

元の記事データベースやWebp画像を壊さず、移行をスムーズに行うための作戦は以下の通りです。

アイキャッチ画像を記事本文の最先頭に自動挿入する
（note上で記事を開いた瞬間、最上部に元画像がある状態を作る）
相対パスをすべて絶対URLに書き換える
WebP画像をサーバー上で自動的にJPEGへ複製・変換し、URLを差し替える
これらをすべて「XMLエクスポートの瞬間」にだけ動かす

この方法なら、通常サイトの表示やDBには一切手を加えずに、noteが完璧に読み込めるXMLを生成できます。

functions.php に追記するコード

お使いのテーマ（または子テーマ）の functions.php に以下を記述してエクスポートを実行します。


/**
 * noteインポート用にXMLエクスポート内容を補正する
 * 1. アイキャッチ画像を本文先頭に絶対URLで挿入
 * 2. 相対パス画像を絶対URLに変換
 * 3. WebP画像をJPEGに自動変換してURLを差し替え
 */

// WebPをJPEGに自動変換してそのURLを返すヘルパー関数
function convert_webp_to_jpeg_url($image_url) {
    // 拡張子がwebpでない場合はそのまま返す
    if (!preg_match('/\.webp(\?.*)?$/i', $image_url)) {
        return $image_url;
    }

    $upload_dir = wp_upload_dir();
    $base_url = $upload_dir['baseurl'];
    $base_dir = $upload_dir['basedir'];

    // サイト内の画像か判定
    if (strpos($image_url, $base_url) === false) {
        return $image_url; // 外部URLの場合は変換スキップ
    }

    // URLからサーバー上の絶対パスを特定
    $rel_path = str_replace($base_url, '', strtok($image_url, '?'));
    $file_path = $base_dir . $rel_path;

    if (!file_exists($file_path)) {
        return $image_url;
    }

    // 出力先JPEGのパスとURL
    $jpeg_path = preg_replace('/\.webp$/i', '-exported.jpg', $file_path);
    $jpeg_url  = preg_replace('/\.webp(\?.*)?$/i', '-exported.jpg', $image_url);

    // すでに変換済みファイルが存在すれば再利用
    if (file_exists($jpeg_path)) {
        return $jpeg_url;
    }

    // WordPress標準の画像エディタでJPEGへ変換・保存
    $editor = wp_get_image_editor($file_path);
    if (!is_wp_error($editor)) {
        $editor->save($jpeg_path, 'image/jpeg');
        return $jpeg_url;
    }

    return $image_url;
}

add_filter('the_content_export', function ($content) {
    $post_id = get_the_ID();
    $home_url = untrailingslashit(home_url());

    // --------------------------------------------------
    // A. アイキャッチ画像を本文先頭に追加
    // --------------------------------------------------
    if ($post_id && has_post_thumbnail($post_id)) {
        $thumbnail_url = get_the_post_thumbnail_url($post_id, 'full');
        if ($thumbnail_url) {
            // WebPならJPEGに変換
            $safe_thumbnail_url = convert_webp_to_jpeg_url($thumbnail_url);

            $featured_tag = sprintf(
                '<p><img src="%s" alt="%s" /></p>',
                esc_url($safe_thumbnail_url),
                esc_attr(get_the_title($post_id))
            );
            $content = $featured_tag . "\n\n" . $content;
        }
    }

    // --------------------------------------------------
    // B. 本文中の相対パス解決 & WebP差し替え
    // --------------------------------------------------
    $content = preg_replace_callback('/<img\s+[^>]*src=[\'"]([^\'"]+)[\'"][^>]*>/i', function ($matches) use ($home_url) {
        $tag = $matches[0];
        $src = $matches[1];

        // 1. 相対パスを絶対URLに補正 (例: /wp-content/... -> https://example.com/wp-content/...)
        if (strpos($src, '//') === false && strpos($src, 'http') !== 0) {
            $src_abs = $home_url . '/' . ltrim($src, '/');
            $tag = str_replace($src, $src_abs, $tag);
            $src = $src_abs;
        }

        // 2. WebP画像をJPEGに変換して置換
        if (preg_match('/\.webp(\?.*)?$/i', $src)) {
            $jpeg_src = convert_webp_to_jpeg_url($src);
            $tag = str_replace($src, $jpeg_src, $tag);
        }

        return $tag;
    }, $content);

    return $content;
});

インポート後のnote側での作業

XMLをnoteにインポートしたときに最上部の画像が見出し画像に設定されない場合は、以下手順で手動で設定を行います。

本文先頭の画像を右クリックして「名前を付けて画像を保存」
noteエディタ上部の「見出し画像」エリアにその画像をドラッグ＆ドロップ
本文先頭に残った元の画像を削除（2重表示を防ぐため）

noteはアップロード時にファイル名がランダムに再生成される仕様のため、ローカルでファイル名を探して突合するよりも、「開いた記事の目の前にある画像をヘッダーに引き上げる」運用が最も迷わず確実です。

移行作業が終わったら、functions.php から追記したコードを削除（またはコメントアウト）して完了です。

投稿者プロフィール

たーさん代表者

東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。

その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。

開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。

現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。

見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。

WordPress→note移行：アイキャッチ漏れ・画像取得エラーをエクスポート時だけで一発解決する方法

検証：なぜ画像がインポートされないのか？

目指す解決アプローチ

functions.php に追記するコード

インポート後のnote側での作業

投稿者プロフィール

最新の投稿

株式会社マルヤカンパニー様のWebサイトをリニューアルさせていただきました。

なぜバーチャルな「推し活」は暴走するのか？アバター配信における課金設計と心理的搾取のメカニズム

検証：なぜ画像がインポートされないのか？

目指す解決アプローチ

functions.php に追記するコード

インポート後のnote側での作業

投稿者プロフィール

最新の投稿

株式会社マルヤカンパニー様のWebサイトをリニューアルさせていただきました。

なぜバーチャルな「推し活」は暴走するのか？ アバター配信における課金設計と心理的搾取のメカニズム

なぜバーチャルな「推し活」は暴走するのか？アバター配信における課金設計と心理的搾取のメカニズム