WordPressの管理画面でアイキャッチができないエラー

状況

wordpressサイトについてお問合せがありました。
弊社で扱うお仕事の中には、弊社でゼロから制作したシステムだけでなく、別の業者さんだったりお客様自身だったり弊社以外で制作されたものについて改善・改修・修正するお仕事もあります。

今回は、wordpressで作成したサイトで投稿画面にあるアイキャッチ画像を使おうとしたけど、何度やっても画像が保存されない、ということで相談がありました。

まずは状況確認ということでログイン情報を頂いて拝見したところ、割とカスタマイズの多いサイトのようでした。デザイン的なカスタマイズもですが、機能的なカスタマイズも多く作りこまれている印象です。

調査環境の準備

まずは相談者さんの了解を得て、対象のwordpressサイトのシステム一式をダウンロードし、弊社ローカル環境に同じものを作成しました。

・ローカル環境 > 開発や実験的な試み
・本番環境 > 完成したプログラムの適用
です。

本番環境とは切り離した、ローカル環境を作ることで「壊しても安心」というメリットが生まれます。
壊しても安心ですので、ガンガン壊して、ドンドン真相・深層に迫っていけます。

たまに、「ローカルにコピーするのダメ、本番上でやってください」という状況もあったりするのですが、この場合「サイトを停止させるわけにいかない」というプレッシャーと、すべてを頭ん中でイメージして原因を探すわけなので、とても非効率だったりします。

不具合の内容

wordpress管理画面の「投稿」ページに下図のような「アイキャッチ」というものがあります。

「アイキャッチ画像に設定」をクリックすると、下図のような画像を選択したりアップしたりできる画面が出てきます。

よく見ると何かおかしいです。

1つ目の選択されている画像は灰色になってます。
※選択されてない他の7枚はボカしたので灰色ですがきちんと画像が出ています。

で、1つ目の画像（？）は選択されているのに、右のURLとかタイトルとかの欄が何も入っていません。
画像を選択すると、ここは選択した画像の情報が出てきます。

とりあえず気にせず、設定したい画像を選択して「アイキャッチ画像に設定」を押してみます。

選択されてません。

何度、「アイキャッチ画像に設定」を押して、他の画像を選択したりしても設定できません。

これが今回調査する対象です。

調査らしい調査はせずに

調査というか、最初に実際の画面を触って現状を確認したところで、なんとなく目星はついてました。
なぜなら同じ現象を以前に見たことがあり、解決したことがあるからです。

なので、まずはその周辺から確認です。

wordpressのPHPファイルを対象にwp_enqueue_mediaというキーワードで全ファイル検索を行います。

wp-content/themes/フォルダの下にwp_enqueue_mediaを使っている箇所を発見できました。

試しに次のようにwp_enqueue_mediaをコメントアウトしてみます。

// wp_enqueue_media();

で、投稿画面を再読み込みしてから「アイキャッチ画像に設定」を押してみます。

先頭にあった謎の枠が消えました。

で、どれか画像を選択して「アイキャッチ画像に設定」を押してみます。

画像がセットされました。

これで解決です。
じゃないです。
解決はまだです。

wp_enqueue_media の確認

wp_enqueue_mediaをコメントアウトすることで正常に動くようになったのですが、 wp_enqueue_mediaって消してしまって良いものなのでしょうか。

wp_enqueue_mediaを消すことで、他のどこかに問題が発生していないでしょうか。
そこが問題です。
なので、そのあたりを調査します。

wp_enqueue_mediaを使っているということは、javascriptファイルでwp.mediaが使われているはずです。

wordpressのjavascriptファイルを対象にwp.mediaというキーワードで全ファイル検索を行います。
wp-content/themes/フォルダの下にwp.mediaを使っている箇所を発見できました。

wp.mediaの周辺のプログラムを見た限りでは「とある機能」のために使っているようです。
プログラムからどこの画面で実際に使用されているか特定できました。

上でコメントアウトした下記のコメントを外して元に戻します。

wp_enqueue_media();

で、wp.mediaが使われているページを表示して、wp.mediaの動きを確かめます。
問題なさそうです。

では、またまたwp_enqueue_mediaをコメントアウトしてみます。

// wp_enqueue_media();

で、wp.mediaが使われているページを表示して、wp.mediaの動きを確かめます。
今回は問題が発生しました。

wp_enqueue_mediaを無くしたことで必要なファイルが読み込まれずに動かなくなってしまっています。

解決方法

ここまでで次のことが分かりました。

• wp_enqueue_mediaが原因でアイキャッチが使えない
• wp_enqueue_mediaを除去することはできない

wp_enqueue_mediaは１回しか使ってはいけないことになっています。wp_enqueue_mediaのソースコードを見たことがある方ならご存知だと思いますが、2回以上実行しようとしても問題ないような仕組みが入っていることに気が付くと思います。

でも、2回以上実行できてしまうこともあるのです。
wp_enqueue_mediaの使い方を誤っていれば。

wp_enqueue_mediaが実行されるまでに、どこからどのようにプログラムが流れているか追ってみます。
やっぱりでした。

なので、次のようになっている個所を・・

wp_enqueue_media();

次のようにactionのadmin_enqueue_scriptsで行うように変更します。

function action_admin_enqueue_scripts_wp_enqueue_media(){
wp_enqueue_media();
}
\add_action( 'admin_enqueue_scripts', 'action_admin_enqueue_scripts_wp_enqueue_media' );

上の書き方でもいいし、次のような書き方でも大丈夫です。やっていることは同じです。

add_action( 'admin_enqueue_scripts', function(){
wp_enqueue_media();
} );

動作確認

それでは、念のため動作確認をしてみます。

• アイキャッチは問題なく設定できました。
• wp.mediaを使っている個所も問題なく動作しました。

これで解決です。