【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では、「画像を選択」「画像をクリア」をクリックした際の機能を、それぞれ実装しています。