本記事ではブログページの復旧時に掲載していた画像が表示されない場合の解消法について説明します。
問題発生の経緯
ブログページを見やすくしようとカスタマイズしていたら、画面が真っ白になってしまいました。
変更点を記録しておいたので、原因は分かっているつもりでしたが、書き加えたコードを削除しても完全には戻すことができませんでした。
仕方なく契約しているサーバに残っているバックアップデータで復旧させ、WordPressをアンインストールして、さらに再インストールをすることで表示させることができました。
いろいろと調べながら試して勉強するのも良いですが、時間がない方にはこの復旧方法が一番だと思います。
しかし、それでも2つの問題が残りました。
- 新規記事を投稿できない
- 過去の記事に掲載している画像が一部表示されない
これらの問題を解消する方法を説明します。
新規記事が投稿されない問題
記事自体は普通に執筆もできて、あとは公開ボタンを押すだけの状態へ進めることができます。
そして公開ボタンを押すと、残念なことにPushPressプラグインに関する2つのNoticeと3つのWarningが返されました。
Notice: Trying to access array offset on value of type bool in /home/pcslpjxl/public_html/wp-content/plugins/pushpress/class-pushpress.php on line 204
Notice: Trying to access array offset on value of type bool in /home/pcslpjxl/public_html/wp-content/plugins/pushpress/class-pushpress.php on line 212
Warning: Cannot modify header information - headers already sent by (output started at /home/pcslpjxl/public_html/wp-content/plugins/pushpress/class-pushpress.php:204) in /home/pcslpjxl/public_html/wp-admin/post.php on line 231
Warning: Cannot modify header information - headers already sent by (output started at /home/pcslpjxl/public_html/wp-content/plugins/pushpress/class-pushpress.php:204) in /home/pcslpjxl/public_html/wp-includes/pluggable.php on line 1329
Warning: Cannot modify header information - headers already sent by (output started at /home/pcslpjxl/public_html/wp-content/plugins/pushpress/class-pushpress.php:204) in /home/pcslpjxl/public_html/wp-includes/pluggable.php on line 1332
この問題の解決法はPushPressプラグインを無効化することです。
これらのメッセージはpublic_html/wp-config.phpの100行目前後を
define( 'WP_DEBUG', true);
と設定することで返されます。
表示を必要としない場合は、trueをfalseにします。
ブログページに問題がないか常に確認できるので、trueにしておいた方が良いかもしれません。
実は問題となったプラグインはPushPressだけではありません。
いろいろと操作しているとどんどんNoticeやらWarningが返されます。
そのような場合は、一度すべてのプラグインを無効化します。
そして1つずつ有効化にしては問題が発生しないか、調べていきます。
sappeast.netでは19個のプラグインを稼働させていましたが、有効化して問題がなかったのは10個です。
残り9個のプラグインはいったん削除し、インストールしなおしました。
そこで問題は発生せず、今は元どおりになっています。
画像が一部表示されない問題
すべての画像ではなく、一部の画像が表示されない問題が発生しました。
代替テキストのみ表示され、画像が表示されていません。
画像サイズのフレーム内に設定していた画像情報を示す代替テキストだけが残っている状態です。
カーソルを青字のリンクへ重ねるとWebブラウザ下部に記されるようにファイル名が「図1-1.jpg」であることが分かります。
サーバ上の画像データのファイル名は「蝗ｳ1-1.jpg」となっています。
ブログ上では「図1-1.jpg」、サーバ上では「蝗ｳ1-1.jpg」と食い違いが生じています。
この問題は画像に紐づけしてある代替テキストは読み込めているが、画像自体が読み込めていないということが原因となっています。
つまり画像URLがsappeast.net/wp-content/ploads/2021/06/******.jpgと指定しているのに、******.jpgが存在しないということです。
https://sappeast.net/wp-content/uploads/2021/06/Screenshot_20210614-133546.jpg
https://sappeast.net/wp-content/uploads/2021/06/Screenshot_20210614-133546.jpg
- 拡張子前のドットを無視したファイル名
- 日本語で作成したファイル名
ドットを無視したファイル名
基本的にファイル名は”xxx.yyy”のように”xxx”のファイル名と”yyy”の拡張子をドット（.）で隔てています。
今回の問題はLDPlayerエミュレータで取得したスクリーンショットのファイル名が複数のドットを使っていたためでした。
com.jdgames.p20n.googleplay_Screenshot_2021.01.25_15.11.11.jpg
このように日付や時間以外のところにも多くのドットが使われていたため、拡張子が消えたりして正しいファイル名でデータ復旧されなかったようです。
日本語で作成したファイル名
これは日本人であればよくあるパターンです。
sappeast.netはLinuxサーバのmixhost上で動かしています。
そのため2バイト文字である日本語を1バイト文字の半角英数で扱う際に文字化けの問題が発生しました。
最初に画像で例示したように「図1-1.jpg」というファイル名は「蝗ｳ1-1.jpg」と文字化けしました。
サーバ上のファイル名を修正することで画像が表示されました。
そこでサーバ上の「蝗ｳ1-1.jpg」というファイル名を「図1-1.jpg」へ修正すれば、上図のとおり正しく画像が表示されるようになります。
これくらいであれば元のファイル名を簡単に解明できます。
しかし複雑な日本語で作成したファイル名となると、1つずつリンクへカーソルを重ねて文字化け前の日本語ファイル名を調べなくてはなりません。
このような問題に陥らないためにもサーバ上にアップするファイル名は画像ファイルに限らず半角英数で作成することをお勧めします。
ファイル名を一括修正する方法
サーバ上へアップしたファイル数は1,000以上あり、それを一つずつ手作業で修正するのは多くの時間を費やすことになります。
以下のようなファイル名の問題であればコマンドプロンプトのrenコマンドで一括修正することをお勧めします。
- ファイル名末端の拡張子が消えたファイルに拡張子を付ける
- 「図」→「蝗ｳ」のように規則性があり、手作業で修正するにはファイル数が多すぎる
renコマンドの操作については、IT media Inc.さんの「Windowsでファイルの拡張子をまとめて変更する（コマンドプロンプト編）」を参考にしました。
「蝗ｳ」を「図」に修正しようとしたら、どうしても「ｳ」だけ除けなくて手作業になったりしましたが、それでも作業としてはかなり楽になりました。
まとめ
- カスタマイズの過程で表示されなくなったブログページを復旧させたが一部の問題が残った
- プラグインはすべて無効化してから1つずつ有効化して問題発生の有無を調べた
- 問題が発生したプラグインは削除し、再インストールすることで問題が解消された
- サーバへアップするファイルは半角英数にするべき
- ファイル名の修正はコマンドプロンプトを利用すれば、かなりの時間を省ける
最近のコメント