wp_enqueue_media()


WordPress関数wp_enqueue_media()は、メディアアップローダーやメディアライブラリを利用するために必要なスクリプトとスタイルをキューに追加するために使用されます。この関数は通常、管理画面内でカスタムメタボックスやカスタム設定ページを作成するときに利用されます。

シンタックス

wp_enqueue_media();

例1: 管理画面でメディアアップローダーを有効化

管理画面でメディアアップローダーを利用するために、この関数を使用します。

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

例2: カスタムボタンでメディアアップローダーをトリガー

メディアアップローダーを開くためのカスタムボタンを作成します。

add_action( 'admin_enqueue_scripts', function() {
    wp_enqueue_media();
});
add_action( 'admin_footer', function() {
    echo '<button id="custom-media-button">メディアを選択</button>';
    echo '<script>
        jQuery("#custom-media-button").on("click", function() {
            wp.media.editor.open();
        });
    </script>';
});

例3: カスタムメタボックス内で画像をアップロード

カスタムメタボックスで画像をアップロードできるフィールドを作成します。

add_action( 'add_meta_boxes', function() {
    add_meta_box( 'custom_image_box', 'カスタム画像', function() {
        echo '<button id="upload-button">画像をアップロード</button>';
        echo '<script>
            jQuery("#upload-button").on("click", function(e) {
                e.preventDefault();
                var uploader = wp.media({
                    title: "画像を選択",
                    button: { text: "選択" },
                    multiple: false
                }).on("select", function() {
                    var attachment = uploader.state().get("selection").first().toJSON();
                    console.log(attachment.url);
                }).open();
            });
        </script>';
    });
});

例4: カスタム設定ページでメディアアップローダーを追加

カスタム設定ページにメディアアップローダーを統合します。

add_action( 'admin_menu', function() {
    add_menu_page( '設定ページ', '設定ページ', 'manage_options', 'custom-settings', function() {
        echo '<button id="settings-upload-button">画像を選択</button>';
        echo '<script>
            jQuery("#settings-upload-button").on("click", function() {
                wp.media.editor.open();
            });
        </script>';
    });
});
add_action( 'admin_enqueue_scripts', function() {
    wp_enqueue_media();
});

例5: 投稿エディタでカスタムメディアボタンを追加

投稿エディタにカスタムボタンを追加してメディアアップローダーを呼び出します。

add_action( 'media_buttons', function() {
    echo '<button id="editor-media-button" class="button">カスタムメディア</button>';
    echo '<script>
        jQuery("#editor-media-button").on("click", function() {
            wp.media.editor.open();
        });
    </script>';
});

注意点

  • wp_enqueue_media()は通常、管理画面でのみ使用してください。
  • 不要なスクリプトやスタイルをロードしないように注意が必要です。
  • この関数を使用する際は、スクリプトの競合を避けるために適切にキューを設定してください。

関連機能：