WordPressのメディアライブラリに画像が表示されないときの対処例。 / いがわ

.

Memo

WordPressのメディアライブラリが表示されないときの対処。

WordPressのメディアライブラリが表示されない?

メディアライブラリにファイルが表示されない。

メディアの追加とアイキャッチ画像の設定ができない。
今回の現象。

WordPressの投稿画面から、メディアを追加しようとすると、メディアファイルが空欄になっていた。

つまり、メディアライブラリにファイルが表示されない。

アイキャッチ画像(サムネイル画像)の設定をしようとしても、おなじくメディアファイルが空欄になっており、画像を投稿画面へ挿入や設定ができない。

該当箇所のWordPressの設定やファイルなどは変えていなかったため、原因を見つけるのにかなりの時間を要してしまった。

WordPressでもFTPでも、バックアップファイルのダウンロードができないという症状も出ていたので、なおさら沼った。

WordPressのメディアライブラリに画像表示ができない猫ちゃん。


メディアファイルの問題かと思いきや、文字コードが原因。

メディアライブラリに表示されない現象が起こるときの例。

メディアファイルではなく文字コードの問題。

結論としては、下記が原因だった。サーバーの自動アップデートやWordPressの自動アップグレードが影響したと思われる。

  • サーバーの文字コードが「EUC-JP」のとき。(さくらインターネットの共用サーバーなど。)
  • WordPress投稿画面が、「クラシックエディタ」のとき。
  • WordPressのテーマをデフォルトに変えても改善されないとき。

上記に当てはまる場合は、気をつけた方が良いかもしれない。

初心者向けの「ブロックエディタ(Gutenberg)」を使っていないひとほど、ハマってしまうという皮肉が起きる可能性がある。

functions.phpへブロックエディタ無効の記述している場合も同様。)
WordPressは現時点最新の6.6.1。それ以外のバージョンの場合は不明だが、セキュリティの観点から最新版にしておくように推奨されている。)

メディアライブラリの表示対処をする猫ちゃん。

サーバーについて。

今回のサーバーは大手なので、利用者も多いはず。

ただし、Googleで検索するとサジェストで「サポート ひどい」という言葉が出てくるように、残念ながらサポートの役割は機能していない。

サポートについて。

Googleのサジェスト機能がパーソナライズされていることも想定されるが、そもそも自分は15年来かつ複数契約のさくらインターネットのユーザーなので考えにくい。

キーワード分析ツールの、「Googleサジェストキーワード取得ツール | ラッコキーワード」を使用しても、同様の結果となる。(APIはGoogleのもののはず。ただしパーソナライズまではされていない可能性がある。)

自分がサポートへ問い合わせるのは年に1度あるかないかの頻度。)

そんなものなのかなと、ためしに他に5つのサーバー会社で検索してみたところ、そのようなサジェストは表示されなかった。

迷惑メールについて。

思えば2022年、サーバー上で迷惑メールフィルターを設定しているのにもかかわらず、半日で約1,800通の迷惑メールが届いたことがあった。2023年にも別のメールアドレスへ同じことがあった。

2023年は2度目だったので、おそらく数百通で止められたと思う。

その後、2024年3月に「高精度迷惑メールフィルタ」がリリースされているので、他のユーザーの方々へも同様のことが起こったと思われる。

さくらインターネットは以前はむしろ良いイメージだったため、どこが良いかと聞かれたときはこのサーバーは必ず提案に入れていた。2009年から使用しているが、いまもうお勧めできない状態となっている。

メディアの追加とアイキャッチ画像の設定について。

wp-admin/admin-ajax.phpの可能性。

ネット上では下記の「wp-admin/admin-ajax.php」の記述を変えて改善したという例がいくつか見られたが、自分の場合はメディアファイルの追加は改善されたがアイキャッチ画像の設定は改善されなかった。

admin-ajax.php(変更前)
header('Content-Type: text/html; charset=' . get_option('blog_charset'));
admin-ajax.php(変更後)
if( in_array( $_POST['action'], array( 'query-attachments', 'send-attachment-to-editor' ))){
 header( 'Content-Type: application/json; charset=' . get_option('blog_charset' ));
}else{
 header( 'Content-Type: text/html; charset=' . get_option( 'blog_charset' ) );
}
WordPressのいわゆるコアファイル。
  • WordPressのルートディレクトリのファイル。
  • wp-adminフォルダ。
  • wp-includesフォルダ。

wp-adminフォルダはWordPressのアップデートで上書きされるコアファイルが含まれている。

なのでこれで解決した場合でも、WordPressのアップデートの都度、書き換えなくてはならなくなるという可能性が出てくる。

wp-admin/admin-ajax.phpの情報。

それでも、「wp-admin/admin-ajax.php」の情報は、文字コードの指定に関する記述だったため、原因の切り分けにはとても助かった。

メディアライブラリとサーバー、データベースの意味。


メディアライブラリが表示されないときの対処例。

メディアライブラリ表示不可の対応として、UTF-8で指定する。
保存だけでなく、UTF-8形式であることを記述する。

HTMLもCSSも、データベースもWordPressもUTF-8。

対応としては、とにかく文字コードは「UTF-8」であることを記述する。

現代では、HTMLもCSSもデータベースもWordPressもVS Codeも、ほとんどの場合、文字コードは「UTF-8」で指定されている。

データベースは絵文字対応をする場合、「utf8mb4」を選択)。

Webデザインでは、UTF-8、BOMなしが基本。

Webデザインの学校やスクールなどで習うときも、「UTF-8」で保存しましょう、と言われているはず。

2010年頃にはすでにハローワークの職業訓練校でも「UTF-8」と確立されていた。

VS Codeなどの現在主流のエディタも、普通に保存すれば「UTF-8、BOMなし」となる。

参照元:VS Code PowerShell Microsoft

なので、サーバーへもあちこちで、わたしたちは「UTF-8」ですよ、と伝えてあげる。

HTML
HTML
<meta charset="UTF-8">
style.css
CSS
@charset "UTF-8";

HTMLとCSSは普通、初期状態で記述するのでおそらく大丈夫。問題はここから。

普段では必要のない箇所へも、文字コードの指定を記述していく。

編集するときはバックアップを忘れずに。)

wp-config.php
PHP
// Set the default charset to UTF-8 / デフォルトの文字コードをUTF-8に設定
ini_set('default_charset', 'UTF-8');
functions.php
PHP
// Set the Content-Type header to application/json with the blog's charset for AJAX requests / AJAXリクエストのために、Content-Typeヘッダーをapplication/jsonとブログの文字セットに設定
function set_json_content_type_for_ajax() {
    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
        header( 'Content-Type: application/json; charset=' . get_option( 'blog_charset' ) );
    }
}
add_action('init', 'set_json_content_type_for_ajax');

// Force the encoding of the post content to UTF-8 / 投稿コンテンツのエンコーディングをUTF-8に強制
function force_utf8_encoding($content) {
    return mb_convert_encoding($content, 'UTF-8', 'auto');
}
add_filter('the_content', 'force_utf8_encoding');
.htaccess
.htaccess
# Set the default character encoding to UTF-8 for the server response / サーバーのレスポンスのデフォルト文字エンコーディングをUTF-8に設定
AddDefaultCharset UTF-8

後日追記)

サーバーエラーの発生がひどく、SEOに大ダメージがあり、4ヶ月続いていた月間約30,000人のアクティブユーザー数が、3ヶ月ほどで半分まで減少。

ユーザー数が大きく減少したのは初めての経験で、Googleのコアアップデート(2024年3月と8月)とも重なっておらず。

そのため、やむなくエックスサーバーへ移転。(前払いのサーバー代約30,000円も無駄に。)

エラーログを見てみたところ、WordPressサイトであってもなくても、1日で300,000件超のエラーが度々あり、700,000件超も。

エックスサーバーが全て良しというわけではなく、エラーの基準も違うはずですが、エラーログはあっても1日数件か十数件です。

WordPressのメディアライブラリとわんちゃん。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

WordPress 関連メモ。


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。