WordPress移行したら画像が表示されない【対処方法まとめ】
ワードプレスサイトを他サーバーに移行させると画像だけ上手く表示されない、画像は存在しているけど表示されない感じ?サーバー移行時に何か間違えたわけでもないんだけど、どうしてだろう。
こんなワードプレス移行あるあるに答えます。
本記事を書いている私はWEB制作会社に勤めるWEBエンジニアです、今回はWordPress移行時によく聞く問題と解決策についてまとめてみました、是非参考にしてみてください。
WordPress移行時に画像が表示されない時の解決策
移行といってもシュチュエーションは様々だと思います、その中からよくあるパターンを挙げて解説してみましたので、自分の環境に近いものを選んで参考にしてください。
- All-in-One WP Migrationで移行した時
- 改造したテーマを移行した時(子テーマ含む)
- FTPを使って画像を直接移行した時
- 記事や固定ページをインポートした時
①:All-in-One WP Migrationで移行した時
「WordPressでサイトを移行させる = All-in-One WP Migrationを使う」と言っても過言ではない、移行プラグインの定番「All-in-One WP Migration」
WordPressサイト同士で移行する場合によく使われるプラグインですが、画像ファイルだけ上手くいかないという声が多いです。
ファイル名に日本語を含むファイルは移行先で認識されません「悪い例:TOP背景.jpg」、必ずアルファベットで名前を付ける必要があります「良い例:top-bg.jpg」。
WordPress内(メディア)に画像をアップする際はファイル名に日本語を使用しない、これを心がけましょう。
解決策:ファイル名をリネーム(名前を変更)する
原因は「画像ファイル名が日本語」、であるならばリネームした上で画像を再度アップすればいい話、ただこれって面倒ですよね。
そんな時に使えるプラグイン「Media File Renamer」、これを使えば現在アップされている画像の名前を簡単に変更できます。
プラグインをインストールし有効化、メディア項目に「Rename」とあるのでそれをクリック、4つ並んでいるボタンの一番左にある「Rename ALL」をクリックすれば全て自動で名前を変更してくれます。
※SEO等で変更後の名前を意識するなら、メディアから画像を開いて、タイトルを変更し更新すればファイル名を自分で変える事ができます(ちょっと時間がかかる)
このプラグインの良いところは名前を変更しても紐づいている記事や固定ページのリンクも自動で変わること。
②:改造したテーマを移行した時(子テーマ含む)
テーマをカスタマイズしCSSを適用、配置した画像のパスは自サイトからの絶対パス、このまま移行させると移行先でパスは繋がりません(画像だけ表示されない)
WEB制作に慣れていない人にありがち。
解決策:絶対パスの指定の仕方を変える
テーマ内に作成した「例:img」ディレクトリにパスをつなぐ場合は下記のようにしましょう。
<!-- 親テーマにあるimgフォルダにパスをつなぐ -->
<img src="<?php echo get_template_directory_uri(); ?>/img/画像ファイル名">
<!-- 子テーマにあるimgフォルダにパスをつなぐ -->
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/画像ファイル名">
親テーマか子テーマかによって記述が変わる点に注意です、こんな感じでパスを指定すれば環境が変わっても同じテーマを使用している限りパスは通ります。
③:FTPを使って画像を直接移行した時
FTPを使って画像を移行先の[uploads]フォルダに直接移した、しかし、管理画面のメディアでは一切認識されていない。
こんな時はどうすればいいか。
解決策:画像とメディア管理の関連付けを行う
[wp-content/uploads]に画像を移してもメディアには認識されません、そんな時は「Add From Server」を使う事でメディアに認識させる事ができます。
プラグインをインストールし有効化、メディア項目にある「Add From Server」をクリック、[uploads/]をクリック、画像を置いたとこまでパスを追っていきます。
画像ファイルをチェックできる画面まできたら、認識されていない画像にチェックを入れてインポートボタンを押せば完了です。
④:記事や固定ページをインポートした時
記事や固定ページなど限定的にインポートした際、移行元と移行先のドメインが異なると移行元のドメインのまま反映される場合があります、以下例。
- 移行元:http://localhost/
- 移行先:http://sample.com/
画像など古い方のドメインで指定されているともちろん画像のパスは通らず表示されません、そんな時はどうするか。
解決策:画像パスを置換する
移行先で古い方のドメインで指定されている部分を新しい方のドメインで置換する事で解決できます。
一つ一つ変えていくのは面倒なので、「Search Regex」を使って対応します(最終更新がかなり前なので「Better Search Replace」の方がいいです、今回は直感的に使える「Search Regex」で解説します)
Search Regexの使い方
- プラグインをインストールし有効化、ツール項目にある「Search Regex」をクリック
- [Search pattern]に置換先を入力し「Search」ボタンをクリック
- [Replace pattern]に置換後を入力「Replace」ボタンをクリック
- [Results]の結果で問題なければ「Replace & Save」をクリック
参考画像を置いておきます。
ちょっと小走り気味で解説しましたので一部分かりにくい点があったかもしれません、質問に関しては受け付けますので気軽にご連絡ください。
記事は以上になります。
飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。