WordPress: 画像が表示されない - 画像の src が IP アドレスになっている

WordPress: 画像が表示されない - 画像の src が IP アドレスになっている

April 11, 2022

(友人にヘルプを求められ、そのとき対応した内容をメモ)

状況整理 #

経緯 #

ワードプレスで表示されない画像があるとのこと。

環境 #

Amazon Lightsail 上にインストールされた WordPress

原因 #

デベロッパーツールで確認すると、うまく表示されない画像の src は IP アドレスになっていた。

表示されている画像

<img src="https://example.com/wp-content/uploads/2022/04/hello-world.png" />

表示されない画像

<img src="https://123.123.123.123/wp-content/uploads/2022/04/good-bye.png" />

どうやら IP アドレスの URL を用いてワードプレスにログインし、画像をアップロードすると、画像のパスも IP アドレスで登録されてしまう様子。

  • https://example.com/wp-login.php でログインして画像をあげると https://example.com/wp-content/~ となる。
  • http://123.123.123.123/wp-login.php でログインして画像をあげると https://123.123.123.123/wp-content/~ となる。

対応 #

IP アドレスで登録されている画像は削除して、ドメインの URL からワードプレスにログインして再アップロードすれば OK.

このような画像が大量にある場合には、プラグインを用いて URL を置換するのが楽だが、件数が少ないならば削除・再アップロードの方が間違いがなくて安心。ケースバイケースで。

補足 #

実際には IP アドレスで登録されている画像であっても、ワードプレスにログインして「メディアライブラリ」から「ファイルの URL」を見た際にはドメインで表示されていた。

しかし以下のようにデータベースを確認すると IP アドレスで登録されていることが確認できた。

(以下 Lightsail のコンソールで作業)

1. DB のログインパスワードを確認 #

cat /home/bitnami/bitnami_credentials

******************************************************************************
The default username and password is 'user' and 'PASSWORD1234'.
******************************************************************************

You can also use this password to access the databases and any other component the stack in
cludes.

You can also use this password to access the databases and any other component the stack in cludes.

とあるように、このパスワードは DB のパスワードにもなっている。

2. DB にログイン、テーブル一覧表示まで #

MySQL(MariaDB)にログインする。

mysql -u root -p

パスワードは先ほど確認したもの(例:PASSWORD1234)を入力する。

Welcome to the MariaDB monitor.

DB 一覧を確認。

show databases;

+--------------------+
| Database           |
+--------------------+
| bitnami_wordpress  |
| information_schema |
| mysql              |
| performance_schema |
| test               |
+--------------------+

bitnami_wordpress に接続する。

use bitnami_wordpress

テーブル一覧を確認。

show tables;

+-----------------------------+
| Tables_in_bitnami_wordpress |
+-----------------------------+
| wp_commentmeta              |
| wp_comments                 |
| wp_links                    |
| wp_options                  |
| wp_postmeta                 |
| wp_posts                    |
| wp_term_relationships       |
| wp_term_taxonomy            |
| wp_termmeta                 |
| wp_terms                    |
| wp_usermeta                 |
| wp_users                    |
+-----------------------------+

3. 画像の情報を取得する。 #

Select * from wp_posts where post_type = 'attachment';

+-------------+-----+-----------------------------------------------------------------+-----+
| ID          | ... | guid                                                            | ... |
+-------------+-----+-----------------------------------------------------------------+-----+
| hello-world | ... | https://example.com/wp-content/uploads/2022/04/hello-world.png  | ... |
| good-bye    | ... | https://123.123.123.123/wp-content/uploads/2022/04/good-bye.png | ... |
+-------------+-----+-----------------------------------------------------------------+-----+

画像のパスが確認できる。

参考 #

画像の src が IP アドレスになる件に関して #

ワードプレスにおけるデータベースへの画像情報の保存方法に関して #