アイキャッチ画像が反映されない(原因:wp_enqueue_media())

アイキャッチ画像がなぜか反映されない事象が発生。少しはまってしまい、調査した結果、原因はwp_enqueue_media()の呼び出し位置でした。はまったときはこんなもんです(泣)。

今回は、wp_enqueue_media();についてのおさらいと、発生した事象と、その解決策について記載いたします。

1.wp_enqueue_mediaとは、
2.注意点
3.発生した事象
- NG例
4.解決策

1.wp_enqueue_mediaとは、

WordPressの｢メディア｣アップローダーやライブラリを利用する際に、必要なスクリプトやスタイルを読み込んでくれる関数です。本ファンクションを呼び出せば、wp.mediaといった｢メディア｣アップローダーのJavaScript APIが利用できますので、管理画面をカスタマイズする際の、画像などのファイルの設定で、Wordpressの｢メディア｣と同じ機能が利用できます。

2.注意点

この関数が呼ばれると、｢メディア｣アップローダーやライブラリに関するスクリプトやスタイルが全て読み込まれます。そのため、場合によっては、それらのスクリプトやスタイルがフロントエンドや管理画面に、意図しない影響を与える場合があります。
基本は、必要な場合のみ呼び出す必要があり、管理画面のカスタマイズなどで｢メディア｣アップローダーを利用したい時にのみ、管理画面の処理内で呼び出します。

3.発生した事象

当初、管理画面のスタイルシートの読み込み(admin_init)と合わせて、｢wp_enqueue_media｣を呼び出していたが、これだと｢アイキャッチ画像｣の処理とぶつかってしまっており、各機能のアイキャッチ画像が読み込めなくなってしまいました。

NG例

add_action('admin_init', 'admin_init_style');
function admin_init_style() {
	$date_query = date("Ymd-His", filemtime( get_stylesheet_directory() . '/admin_style.css'));
	wp_enqueue_style( 'rishun_config_style', get_stylesheet_directory_uri() . '/admin_style.css', NULL, $date_query);
	wp_enqueue_media(); //ここはNG
}

1

2

3

4

5

6

add_action('admin_init', 'admin_init_style');

function admin_init_style() {

$date_query = date("Ymd-His", filemtime( get_stylesheet_directory() . '/admin_style.css'));

wp_enqueue_style( 'rishun_config_style', get_stylesheet_directory_uri() . '/admin_style.css', NULL, $date_query);

wp_enqueue_media(); //ここはNG

}

4.解決策

｢メディア｣アップローダーを使うオリジナルのjsを読み込む箇所で利用すべきでした。

add_action('admin_print_scripts', 'add_basic_conf_scripts');
function add_basic_conf_scripts() {
	$date_query = date("Ymd-His", filemtime( get_stylesheet_directory() . '/media_upload.js'));
	wp_enqueue_script( 'admin_media_script', get_stylesheet_directory_uri() . '/media_upload.js', array('jquery'), $date_query, true );	//after theme rishun.js
	wp_enqueue_media(); //media uploader
}

1

2

3

4

5

6

add_action('admin_print_scripts', 'add_basic_conf_scripts');

function add_basic_conf_scripts() {

$date_query = date("Ymd-His", filemtime( get_stylesheet_directory() . '/media_upload.js'));

wp_enqueue_script( 'admin_media_script', get_stylesheet_directory_uri() . '/media_upload.js', array('jquery'), $date_query, true ); //after theme rishun.js

wp_enqueue_media(); //media uploader

}

以上、今回はここまでです。