WordPressの編集画面での差し替えた画像が古い状態で表示される？（画像キャッシュ）

WordPressの画像キャッシュ問題により、差し替えた画像が古い状態で表示されることがあります。
これは、ブラウザのキャッシュと画像URLの仕様が主な原因でした。
キャッシュが読み込まれないように、functions.phpに管理者用に JavaScriptのコードを追加して、動的に画像URLにタイムスタンプを付与するようにしました。

1. WordPressの画像キャッシュ問題

WordPressでサイトを運営しているのですが、差し替えた画像ファイルをプラグイン（Media Cleaner）で削除しています。
ところが、編集画面で作業していて新しい画像を挿入すると、古い画像キャッシュが表示されることがあり困っています。

WordPressで画像の表示に関する問題が発生している要因として、以下があります。

ブラウザのキャッシュ
WordPressのメディア管理
ウェブサーバ側のキャッシュ
画像アドレスの問題

特に、重要なのは「ブラウザのキャッシュ」です。

ブラウザは、ページの表示を速くするために、一度表示した画像データを保存しています。
このため、同じアドレス（URL）の画像を新しいものに変更しても、ブラウザが古い画像データを表示してしまうことがあります。

目次に戻る

1-1. 画像のアドレス（URL）の問題

WordPressは画像のアドレスに更新日時などの情報を含めません。

そのため、画像を新しいものに替えても、同じアドレスの画像は同じものとして扱われがちです。
また、プラグインで画像を削除しても、ページの編集画面で使用している画像のアドレスが更新されないことがあります。

目次に戻る

2. functions.phpで処理

そこで、functions.phpに以下のようなコードを追加してみました。

function prevent_image_cache_in_admin() {
    if (!is_admin()) {
        return;
    }
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // メディアボタンクリック時の処理
        document.querySelectorAll('.add_media').forEach(button => {
            button.addEventListener('click', refreshImageUrls);
        });

        // クリップボードからのペースト時の処理
        document.addEventListener('paste', function(e) {
            setTimeout(refreshImageUrls, 1000); // ペースト完了後に実行
        });

        // エディタ内の画像更新処理
        function refreshImageUrls() {
            setTimeout(function() {
                document.querySelectorAll('.attachment img, .wp-block-image img').forEach(img => {
                    if (img.src && !img.src.includes('?v=')) {
                        img.src = img.src + '?v=' + Date.now();
                    }
                });
            }, 500);
        }

        // DOM変更の監視（動的に追加される画像用）
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length) {
                    refreshImageUrls();
                }
            });
        });

        // エディタ領域の監視を開始
        const editor = document.querySelector('#editor, #content');
        if (editor) {
            observer.observe(editor, {
                childList: true,
                subtree: true
            });
        }
    });
    </script>
    <?php
}
add_action('admin_footer', 'prevent_image_cache_in_admin');

目次に戻る