【WordPress】管理画面内に画像を追加・選択できる項目を作成|メディアモーダルの利用

WordPressには、画像のアップロードやメディアライブラリから画像を選択できる「メディアモーダル」という機能があります。

WordPressのメディアモーダルの画像
WordPressのメディアモーダル

今回は、そのメディアモーダルを管理画面内に設置する例となります。

【WordPress】管理画面内に画像を追加・選択できる項目を作成

例では、管理画面の固定ページ編集画面に、メディアモーダルで画像を選択・追加できる項目を作成し、次の機能を実装します。

  • 「画像を選択」ボタンをクリックし、メディアモーダルから画像を選択すると、項目内にサムネイル画像を表示
  • 「画像をクリア」ボタンをクリックすると、サムネイル画像を削除
画像を選択・追加できる項目例の画像
画像を選択・追加できる項目の例

上記機能を実装するには、functions.phpとJavaScriptファイルに、それぞれ次のソースコードを記述します。

functions.phpに記述するコード

以下、functions.phpに記述するソースコードとなり、メディアモーダルを利用する準備と、管理画面内に追加する項目を作成します。

また、メディアモーダルを利用するにはjQueryを利用するため、例ではjQueryのライブラリー本体をすでに読み込んでいる前提としています。

// メディアモーダルを利用する準備
function my_admin_scripts() {
	// 固定ページ以外の場合はreturn
	if ( get_post_type() != 'page' ) {
		return;
	}
	// メディアモーダルを利用するために必要なスクリプトを追加
	wp_enqueue_media();
	// メディアモーダルを実行させるスクリプトを追加
	wp_enqueue_script(
		'my-modal',
		get_template_directory_uri() . '/js/media-modal.js',
        array('jquery')
    );  
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

// 固定ページ編集画面に追加する項目を定義
function my_meta_boxes() {
	add_meta_box(
		'my_section_id', // 項目を識別するID
		__( 'Section Title', 'my_theme' ), // 項目のタイトル
		'my_meta_boxes_callback', // 項目の内容を出力する関数を指定
		'page' // 項目を追加するページを指定
	);
}
add_action( 'add_meta_boxes_page', 'my_meta_boxes' );

// 項目の内容を出力する関数を作成
function my_meta_boxes_callback( $post ) {
	?>
	<div class="my_uploader">
		<input type="submit" class="select_img" value="画像を選択" />
		<input type="submit" class="remove_img" value="画像をクリア" />
		<div class="current_img"></div>
	</div>	
	<?php	
}

JavaScriptファイルに記述するコード

例では、テンプレートディレクトリ直下のjsフォルダ内にmedia-modal.jsファイルを作成し、そのファイル内にメディアモーダルを実行させる以下のjQueryを記述します。

jQuery(function($){
    // 「画像を選択」ボタンをクリックした際に実行
    $(".select_img").click(function(event) {
        // jQueryでクリック時の機能を実装するため、通常のクリックイベントをブロック
        event.preventDefault();

        // メディアモーダルの設定
        const modal = wp.media({
            /* メディアモーダルに表示するタイトル */
            title: "Select Image",
            /* メディアライブラリに画像のみを表示 */
            library: {
                type: "image"
            },
            /* 選択できる画像を1つのみにする */
            multiple: false
        });

        // メディアモーダルを開く
        modal.open();
        
        // 項目内に画像選択を2箇所以上、設置する場合に、クリックした要素の先祖要素を利用し現在の箇所を判断
        const group = $(this).parents('.my_uploader'); 
        const current = group.find('.current_img');

        // メディアモーダルで画像を選択
        modal.on("select", function() {
            // 選択した画像データを取得
            const images =  modal.state().get("selection").first();
            // 項目内の画像を削除
            current.empty();
            // 項目内に選択した画像を項目内に挿入
            current.append('<img src="'+images.attributes.sizes.thumbnail.url+'" />');
            // 今回の例では利用していませんが画像IDを取得する場合
            const imageId =  images.id;
        });
    });
 
    // 「画像をクリア」ボタンをクリックした際に実行
    $(".my_uploader .remove_img").click(function(event) {
        // jQueryでクリック時の機能を実装するため、通常のクリックイベントをブロック
        event.preventDefault();

        // 項目内の画像を削除
        const group = $(this).parents('.my_uploader'); 
        const current = group.find('.current_img');
        current.empty();
    });
});

以上が管理画面内に、メディアモーダルで画像を選択・追加できる項目を作成する例となります。

選択した画像データの保存について

今回の例は、メディアモーダルを設置するだけの例となり、メディアモーダルで選択した画像情報をデータベースへ保存する場合には、カスタムフィールドなどを利用して保存します。

データをカスタムフィールドへ保存する方法については、以下のリンク先を参考にしてみてください。

ソースコードの説明

以下、ソースコードのポイントとなる箇所の説明となります。

メディアモーダルを利用する準備

functions.phpに記述したソースコード1行目からの箇所では、アクションフックadmin_enqueue_scriptsを利用し、管理画面の固定ページ編集画面のみに次のスクリプトを追加しています。

  • wp_enqueue_media()でメディアモーダルを利用するために必要なスクリプトを追加
  • wp_enqueue_script()でメディアモーダルを実行するスクリプトを追加

admin_enqueue_scriptsの詳細については、以下のリンク先を参考にしてみてください。

管理画面内に追加する項目を作成

functions.phpに記述したソースコード18行目からの箇所は、管理画面内に追加する項目を作成しています。

管理画面内に項目を追加する方法の詳細は、以下のリンク先を参考にしてみてください。

メディアモーダルを実行するスクリプト

media-modal.jsファイルに記述したjQueryでは、「画像を選択」「画像をクリア」をクリックした際の機能を、それぞれ実装しています。

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。