WordPressのデータ移行でアイキャッチ画像が表示されない原因と対処法

ワードプレスで画像が表示されない時の対処法 ネット・IT

先日、シン・レンタルサーバーと契約してサーバーの引っ越しをしたところワードプレス(wordpress)の記事に設定したアイキャッチ画像が表示されないという困った状況に陥りました。

ネットで色々と調べてみた分かったことは、ただ「画像が消える」と言っても、人によってワードプレスを使用している環境や画像が消えるタイミングに違いがあり、自分がどのケースに該当するのか理解する必要があるということです。

しかし、最終的には移転先で画像が表示されなくなった理由とそれに対処する方法も分かり99%解決することができました。画像が消えるタイミングはおおまかに2パターンに分けることができます。

パターン1:ブログを引っ越すためにデータを別のサーバーに移行した時。
パターン2:なにかのプラグインを使用したタイミングで突然見えなくなる時。

今回この記事で紹介する対処方法はパターン1に関する方法で、パターン2については詳しくないので割愛させて頂きます。

私は典型的なパターン1の該当者で、移転元のデータをプラグインで圧縮してZIPファイルにしたものをFTPでダウロードしてから移転先へFTPでアップロードしましたが、なぜか記事の一覧に設定してあったはずのアイキャッチ画像の大多数が消えていました。

また、気になったのでメディアライブラリーを確認したところ、アイキャッチ画像の設定が削除されたものはメディアライブラリーからも消えていました。

つまり、FTPで/public_html/wp-content/uploads/配下にアップロードしたアイキャッチ画像はフォルダには厳然と存在するのに、記事のアイキャッチ画像として認識されていないだけでなく、そもそもワードプレスの記事作成の過程でメディアファイルとしてアップロードされた事実さえ消えているのです。

WordPressのデータ移行でアイキャッチ画像が表示されない原因

まず結論を先に言いますと、移転先のサーバーで画像が表示されない原因は移転元で管理していた画像ファイルが日本語名だからです。そして、この症状を解決する簡単な方法は、移転元のワードプレス管理画面でXMLファイルをエクスポートして、それを移転先のワードプレスにインポートすることです。

たったこれだけで簡単に解決する問題ではありますが、データ移行が正常に行われないのはバックアップの作成方法に問題があるわけでも、データの復元方法に問題があるわけではないようです。つまり、そもそも移行するデータの中に日本語名の画像ファイルが混ざっていること自体が問題ということです。

下記はFTPソフトのFilezillaを使用して移行先のサーバーの画像ファイルを確認した様子です。”ファイル名”が見事に全て文字化けしているのが分かります。こうなると画像は表示されません。

画像ファイルの文字化け・サンプル

ところが、移行先の画像ファイルをFTPソフトやサーバのファイルマネージャで確認すると、ファイル名が文字化けしているものと正常に日本語で表記されているものに分かれる場合もあります。しかしこれは全く注目すべきことではありません。

ファイル名が文字化けした画像ファイルはワードプレスとの連携が切れた状態になり、記事中のアイキャッチの設定が削除されています。ところが、ファイル名が日本語名のまま正常に移行されたファイルは、ワードプレスとの連携が保たれたままのものと連携が切れたものに分かれていることが分かります。

つまり、運が良ければ日本語名の画像ファイルでも移転先で正常に表示されることもあるというだけで、それはあくまでも運が良いだけの話であって喜ぶべきことではないのです。

WordPressを使ってブログを書いている人がサーバーを変えてデータ移行したところ移転先で画像が表示されなくなるという事例はけっこう多いようで、次に説明する方法でブログの引っ越しをした人が当てはまるケースが多いことも分かりました。

サーバの移転先で画像が表示されない引っ越しの手順を再現

実は今から紹介するブログの引っ越しの方法は多くの人が日常的にやっている常套手段であり、非常に一般的な方法です。そのため、画像が表示されなくなる事例が多いのも当然ですが、防止策も事後処理の方法も両方あります。

今回は防止策を忘れてデータ移行した事例をもとに、事後処理の方法を説明します。まずは私がどうやってデータ移行したのか、世間でもよく使われているデーター移行の方法について解説します。

BackWPupを使用してバックアップを作成する

ワードプレスのデータをバックアップすることができる有名なプラグインはいくつかありますが、無料で利用できるもので利用者も多いのはBackWPupとAll-in-one WP Migrationの2つだと予想されます。ネット上で今回の事例の対処法を調べる過程で見た記事はこの2つのうちどちらかを利用した人の解説がほとんどでした。

私はBackWPupを使用しました。BackWPupはワードプレスのデータベース以外のデータをZIPファイルに圧縮して規定のフォルダに保存してくれます。バックアップ作業自体は手動で随時実行することも可能ですし、タイムスケジュールを設定して時間割通りに実行させることも可能です。

いずれの場合も指定しなければ、/public_html/wp-content/uploads/配下に”2022-10-31_17-35-13_2AGA6IFD02.zip”みたいなファイル名を自動で付けてくれます。

BackWPupで作成したバックアップファイルには/public_html/配下のフォルダ・ファイルが全て含まれます。つまり、ワードプレスをインストールしたフォルダのデータを全てバックアップしてくれます。

  • ワードプレス
  • ワードプレスのテーマ
  • プラグイン
  • アップロードしたデータ(画像)  等々・・・

BackWPupは/public_html/配下のあらゆるデータを全てZIPファイルとして圧縮します。ただし、これにはデータベースが含まれていません。データベースの情報は別途ダウンロードする必要があります。

この工程ではBackWPupが作成したバックアップファイルをFTPソフトを使用してローカルフォルダへダウンロードします。FTPソフトはFilezillaやFFFTPなどメジャーなフリーソフトで十分間に合います。

phpmyadminを使用したsqlファイルのエクスポート

  • Apache・・・Webサーバの種類のひとつ
  • mysql・・・データベースの種類のひとつ
  • phpmyadmin・・・データベース管理ツールの種類のひとつ

サーバによってデータベースを管理するソフトウェアは異なりますが、多くのサーバではWebサーバにApacheを採用しています。

Apacheではデータベースにmysqlが採用され、mysqlが採用されるとデータベースの管理ツールとしてphpmyadminが採用されます。

私はミックスホストとロリポップで2つのブログを運営していたのをシン・レンタルサーバーで一括管理したかったので、

ミックスホスト→シン・レンタルサーバ

ロリポップ→シン・レンタルサーバ

という2つの引っ越し作業をしました。手順は下記の通りです。

  1. phpmyadminにログイン
  2. 利用しているドメインに対応したデータベースを選択
  3. sqlファイルをエクスポート

ミックスホストもロリポップもsqlファイルをエクスポートすると自動でローカルフォルダにダウンロードしてくれます。その際、ファイル名は適当なネーミングなので拡張子の”.sql”で判別します。

いずれのサーバもデータベース管理ツールがphpmyadminだったのであまり悩まずに済みましたが、ひとつのサーバで複数ドメインのブログを運営する場合、普通はひとつのドメインに対してひとつのデータベースが作成されるため、sqlファイルをエクスポートする際はドメインとデータベース名の対応を把握しておく必要があります。

これを間違うとエクスポートしたSQLファイルを移転先のDBにインポートした後で500エラーが出るなど必ずトラブルが発生します。

バックアアップファイルを解凍する

次に、FTPソフトでダウンロードしたBackWPupのZIPファイルを解凍します。

ワードプレスのデータ移行の際、バックアップファイルが圧縮ファイルのままだとアプロードしても圧縮ファイルのままで機能しないため、ダウンロードしたローカル環境で解凍する必要があります。

ZIPファイルを解凍するには、ファイルを右クリックして”展開”を選択する方法もありますが、データが大きくなると既存の機能では対応できない場合があります。

私の場合はバックアップファイルが3Gを越えていたので、ZIPファイルを解凍するためにWinBarという有料ソフトを無料お試しでタウンロードして解凍しました。

3Gともなると解凍するのに時間がかかります。圧縮ファイルを解凍したらすぐに移転先のフォルダへアップロードしたいところですが、その前にひと手間加える必要があります。

解凍ソフトで有名なLhaplusは3Gを越えるファイルには対応していないようで、エラーが出て使用できませんでした。

wp-config.phpとSQLファイルを編集する

解凍したファイルのうち、wp-config.phpと移転元のDBからエクスポートしたSQLファイルを編集します。

①wp-config.phpの編集

  1. データベース名を書き変える。
  2. データベースのユーザー名を書き変える。
  3. データベースのバスワードを書き換える。
  4. データベースのホスト名をに書き変える。

上記の4項目は移転先のサーバの管理パネルでワードプレスをインストールしたドメインとデータベースの関連付けを確認し、該当するものに書き変えます。

wp-config.phpをテキストエディタで開いたら下記の箇所を探して編集します。赤文字で記載してある箇所が編集の必要がある箇所になります。

// ** データベース設定 – この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define( ‘DB_NAME’, ‘データベース名‘ );

/** データベースのユーザー名 */
define( ‘DB_USER’, ‘データベースのユーザー名‘ );

/** データベースのパスワード */
define( ‘DB_PASSWORD’, ‘データベースのパスワード‘ );

/** データベースのホスト名 */
define( ‘DB_HOST’, ‘localhost‘ );

/** データベースのテーブルを作成する際のデータベースの文字セット */
define( ‘DB_CHARSET’, ‘utf8’ );

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define( ‘DB_COLLATE’, ” );

利用するサーバーにもよりますが、シン・レンタルサーバーの場合データベースとドメインの関連情報は次の画面で簡単に確認できます。

サーバーパネルログイン→パネルトップ→ワードプレス簡単インストール→ドメイン選択画面

シン・レンタルサーバー・DB情報確認画面

②sqlファイルの編集

次に移転元のDBからエクスポートしたsqlフィルに、移転先で利用するDBの名前を明示的に指定するために1行だけ追記します。

この作業は必要ない場合もあるようですが、私の場合は移転先のDB名を指定せずにsqlファイルをインポートすることができませんでしたが、DB名を追記して指定すると正常にインポートできました。

SQLファイルを編集せずにSQLファイルのインポートを試みて失敗した場合、”no database”というエラーメッセージが表示されるので、エクスポートしたsqlファイルをテキストエディタで開きSQLコマンドが記述され始める冒頭の箇所に次のように追記します。

冒頭で移転先で使用するデータベースを使用することを”USE データベース名;”で宣言します。データベース名はwp-config.phpに記載したデータベース名と同じ名前を記入します。


— Table structure for `wp_actionscheduler_actions`

USE 移転先のデータベース名;
DROP TABLE IF EXISTS `wp_actionscheduler_actions`;
/*!40101 SET @saved_cs_client = @@character_set_client */;
/*!40101 SET character_set_client = ‘utf8mb4’ */;

移転先のDBにsqlファイルをインポートする

wp-config.phpとエクスポートしたsqlファイルの編集が終わったら、移転先のサーバの管理画面からphpmyadminにログインしてsqlファイルをインポートします。

この時、wp-config.phpの編集内容に誤りがあったとしてもsqlファイルは正常にインポートされます。wp-config.phpの記載内容はワードプレスが動作するうえでDBを参照する際に必要になるので、sqlファイルをインポートするだけならwp-config.phpの記載内容は全く影響しません。

つまり、sqlファイルのインポートの可否とwp-config.phpの記載内容は関係ありません。

解凍したバックアップファイルを移転先へアップロードする

次に、FTPソフトを使用してローカル環境で解凍したバックアップファイルを移転先サーバーの/public_html/配下にアップロードします。

利用するサーバーによってワードプレスをインストールするフォルダは異なりますが、シン・レンタルサーバーの場合、/public_html/がドキュメントルートに設定されるため、バックアップファイルはまるごとこのフォルダの直下に配置します。

ワードプレスの管理画面で動作確認すると画像がかなり消えていた!

以上が私が実行したサーバーの引っ越しの手順ですが、私の場合はドメインは移転元・移転先で同じドメインを使用しているので、ドメインの管理会社(お名前.comなど)でネームサーバーの設定をシン・レンタルサーバーで指定されたものに変更しないと移転先のデータが正常に表示されるか確認できませんでした。

ネームサーバーの設定が反映されるまでの時間は毎回異なりますが、長い時は24時間くらいかかることもあるそうです。私の場合は最大で1時間くらいで、早ければ15分くらいで反映されることもありました。この時間に関してはマチマチです。

サーバーの引っ越しでは移転元のデータと移転先のデータの違いを確認する必要性あります。その理由は移転元と移転先で同じドメインを使用する場合、きちんと表示確認しないと表示されているのが実は移転元のワードプレスの画面だったということが起こり得るからです。データ移行が正常であればあるほど見た目だけでは違いを判別しにくくなります。

ただし、私の場合はワードプレスの管理画面にログインして記事の一覧を表示してすぐにアイキャッチ画像がほとんど消えているので移転先のデータだとすぐに分かりました。

最初は画面の不具合化だと勘違いしましたが、記事を編集モードにすると”アイキャッチ画像を設定”の箇所が青色になっているので、そもそも設定されていないのだと気付きました。そして、メディアライブラリーでメディアファイルを確認すると、アイキャッチ画像の設定が解除された画像はメディアライブラリーにも表示されていませんでした。

この段階で分かったことをまとめると下記の通りとなります。

  1. 移転先ではアイキャッチ画像に設定してあったはずの画像の設定が解除されている。
  2. サーバの/public_html/wp-content/uploads/配下にメディアファイルがあるのにメディアライブラリーに表示されない。

この2つが意味することは、「サーバの所定のフォルダにメディアファイルは存在するがワードプレスとの紐づけが切れた状態になっている」とうことです。

これを理解するのに時間がかかりましたが、原因と解決方法を理解するのにもっと時間がかかりました。

画像のファイル名が日本語だと移転先でワードプレスに認識されない

移転先で画像が表示されない原因

細かい理屈は分かりませんが、移転元のワードプレスで使用していた画像のファイル名が日本語になっていると、データを移行した先のサーバでワードプレスがファイルの認識に失敗する確率が高くなることが分かりました。

私の場合はごく一部の記事だけ画像ファイルが日本語名であるにも関わらず記事とアイキャッチ画像の設定が保たれたままデータの復元に成功しましたが、大部分の日本語名の画像はワードプレスに認識されずアイキャッチ画像の設定が外されてメディアライブラリーからも追い出されていました。

日本語が表示されない現象の防止策

これは移転元のサーバーで画像ファイルに日本語名を使わず半角英数字を使用していれば防げた問題で、WP Multibyte Patchというプラグインを使用すると、アイキャッチ画像として使用する画像ファイルをメディアライブラリーにアップロードするたびに日本語で保存したファイル名を自動で半角英数字に変換することができます。

ただし、すでにアップロードしているファイルについては対象外で、あくまでWP Multibyte Patchをインストールして有効化した後でアップロードされたファイルが対象になります。つまり、画像ファイルを使用するなら最初からWP Multibyte Patchをインストールしておくべきだったということです。

というわけで、すでにやってしまった失敗については手動でファイル名を書き直すしかないのですが、あまりにも画像フィルの量が多いとウンザリしますし現実的ではありません。

しかも、サーバーを引っ越す段階で気付いても時すでに遅しです。WP Multibyte Patchをインストールするのを忘れて日本語名の画像ファイルを量産してしまった場合は次に紹介する方法で解決することをオススメします。

移転先のサーバでワードプレスの画像が表示されない時の対処法

まず手順を箇条書きで一覧表示します。

  1. 移転元のワードプレスからXMLファイルをエクスポート(全てのコンテンツ)
  2. 移転元のワードプレスからXMLファイルをエクスポート(メディアのみ)
  3. 移転先のワードプレスにXMLファイルをインポート(全てのコンテンツ)
  4. 移転先のワードプレスにXMLファイルをインポート(メディア)
前提条件

  • 画像ファイルがFTPソフトで移転先サーバーの所定のフォルダにアップロードされていること。
  • 移転先で利用するドメインがすでにサーバーに登録されてワードプレスがインストールされていること。

手順は至って簡単ですが、XMLファイルのエクスポートとインポートをする際、に少しだけ決まり事があります。

XMLファイルをエクスポートする順番については前後しても構いませんが、インポートする時は必ず”全てのコンテンツ”のXMLファイルが先で、”メディア”のXMLファイルが後です。

また、XMLファイルをインポートする際、インポートする方法がファイルによって異なります。詳しくは追って説明します。

移転元のサーバーからXMLファイルを2回に分けてエクスポートする

ワードプレスの管理画面からワードプレスの情報をXMLファイルとしてエクスポートする方法はいくつかありますが最もポピュラーなのは、ツール→エクスポート、でエクスポートする方法です。 

ただし、今回のような移転先で画像が表示されないケースの場合は2回に分けてエクスポートする必要があります。

XMLファイルのエクスポート:1回目

1回目は”エクスポートする内容を選択”のなかから”全てのコンテンツ”を選択してダウンロードします。

ワードプレス・XMLエクスポート①

XMLファイルのエクスポート:2回目

2回目は”エクスポートする内容を選択”のなかから”メディア”を選択してダウンロードします。

ワードプレス・XMLエクスポート②

「全てのコンテンツ」と「メディア」のXMLファイルは自分で違いが分かるようように適当に名前を付け直すと作業し易いです。

移転先のワードプレスにXMLファイルをインポートする

①”全てのコンテンツ”のXMLファイルをインポート

まず、画像が表示されない状態の移転先のワードプレスにツール→インポートで移転もとからエクスポートしたXMLファイルをインポートします。

ただし、インポートする順番は必ず、①全てのコンテンツ②メディア、の順番でインポートする必要があります。

”全てのコンテンツ”のXMLファイルは、ツール→インポート→wordpressインポーターの実行、からインポートします。

ワードプレス・XMLインポート①

 

②”メディア”のXMLファイルをインポート

ここでは注意が必要です。全てのコンテンツ”のXMLファイルは”wordpressインポーターの実行”からインポートしましたが、”メディア”のXMLファイルはAttachment Importerというプラグインを利用してインポートする必要があります。

ここでは敢えてwordpressインポーターを使用せずにAttachment Importerを使用することに意味があります。

Attachment Importerはワードプレスの管理画面から、プラグイン→新規追加、で検索して表示されたものをインストールして有効化するとインポートの一覧に表示されます。

ワードプレス・XMLインポート②

ワードプレスの投稿一覧から画像の表示確認をする

XMLファイルのエクスポートとインポートに関する作業は以上で完了です。

最後に移転先のワードプレスの投稿一覧から画像の表示確認をして終わりになります。

私の場合、なぜか最近アップロードした画像ファイルが1件だけアイキャッチ画像に反映されていなかった他、300件にのぼる画像と記事の関連付けは正常に復元することに成功しました。

なお、1件だけ復元できなかった理由は不明です。まあ、成功率99%といったところでしょうか。

ワードプレスでブログ運営している人がサーバーを移転した際、移転先でアイキャッチ画像が表示されなくなるトラブルの解決方法としてこれ以上確実な方法は見つかりませんでした。ただし、ワードプレスと画像の紐づけを復元させる方法のなかではこの方法が最も簡単で確実です。

”全てのコンテンツ”のXMLファイルをインポートすることは記事のデータを取り込んでいるわけではありませんし、”メディア”のXMLファイルをインポートすることはメディアファイルを取り込んでいるわけでもありません。

ワードプレスでXMLファイルをインポートすることは、投稿・固定ページ・コンタクトフォーム・メディア、の4項目の関係性を復元するものであり、移転元で使用していたテーマやプラグインは自力で設定し直す必要がありますし、メディアファイルも前述の通り手動でアップロードする必要があります。

ちなみに、画像などのメディアファイルをアップロードする作業とXMLファイルをインポートする作業は前後しても結果的に全く問題ありません。最終的にはお互いが関連し合って正常に動作します。

そして、XMLファイルのインポートが終わりワードプレスと画像ファイルの紐づけが正常に行われると、文字化けしていたファイル名が半角英数字に変換されて文字化けファイルが無くなります。これは画像ファイルが上書きされたのではなくファイル名が正常に書き直されたと理解したほうが正確です。

もっとも効率の良いデータ移行はWP Multibyte Patchで画像のファイル名を半角英数字に変換しながら運用したブログのデータをBackWPupなどのプラグインでバックアップする方法だと思います。

ただし、この方法も絶対に成功するわけではなく、私は500エラーを発生させて大変な目に遭ったこともあります。ワードプレスのデータ移行はサーバーが異なると意識してファイルの内容を操作しなくても、.htaccessの内容が変更されたりするので非常に難解です。

.htaccess内の半角〈〉が勝手に全角<>に変換されて500エラーが発生した時は、レンタルサーバーに問い合わせて調査してもらうまで原因が分かりませんでした。

サーバーの引っ越しに関しては、専門家でない限り経験を重ねる以外に対処する術を身に付ける方法はないのかもしれません。

以上、同じトラブルで困っている方の参考になれば幸いです。

なお、今回サーバーの移転に伴って新たに使用することになったシン・レンタルサーバーの使い方については、シン・レンタルサーバーの評判を実際に利用して検証してみたで詳しく解説しています。

DMM TV

月額550円
【30日間無料トライアル可能】
アニメ・エンタメが見放題!
途中解約しても費用はかかりません。
VODの新しいサブスクを無料でお試し!

d-アニメストア

月額480円
国内最安のVODサービス!
初月限定 無料お試し視聴期間あり!

Hulu 無料会員登録

2週間、無料トライアル!
100,000万本以上の作品が見放題。
月額1,026円(税込)

U-NEXT 無料トライアル

『天気の子』『君の名は』配信開始
1 180,000本以上の動画が見放題
2 動画だけでなく、電子書籍も1つのアプリで楽しめる
  マンガ、ラノベ、書籍、雑誌など豊富なラインナップ
3 毎月1,200円分のポイントが貰える
月額2,189円(税込)

*2022年10月20時点の情報です。
◆31日間無料トライアルの特典◆
 1 見放題作品が31日間無料で視聴可   
 2 600円分のポイントプレゼント
 3 追加料金なく、80誌以上の雑誌が読み放題

ブック放題

初月無料!
漫画40,000冊・雑誌700誌・漫画雑誌80誌が読み放題

Amazonプライムビデオ

月額500円でアニメ・映画の対象作品が見放題!
プライム・ビデオ限定の独自コンテンツが多数。
30日間無料おためし期間あり!

ネット・IT
シェアする
ドッピオをフォローする
ドッピオの黄金体験

コメント

タイトルとURLをコピーしました