カスタムプラグインの「メディアの追加」ボタン

12

カスタムプラグインを作成していて、[メディアの追加]ボタンを追加したいと思います。

メディアをアップロードするだけで、アップロードしたファイルからコンテンツやデータを取得する必要はありません。

このボタンを追加するにはどうすればよいですか？

ありがとう

plugins uploads media

— ペポッツォ
ソース

21

メディアの追加ボタンを管理パネルに追加する場合：

wp_enqueue_media（）;を使用する必要があります。

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

次に、このjsを使用します。

jQuery(document).ready(function() {
    var $ = jQuery;
    if ($('.set_custom_images').length > 0) {
        if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
            $('.set_custom_images').on('click', function(e) {
                e.preventDefault();
                var button = $(this);
                var id = button.prev();
                wp.media.editor.send.attachment = function(props, attachment) {
                    id.val(attachment.id);
                };
                wp.media.editor.open(button);
                return false;
            });
        }
    }
});

このhtmlを使用：

<p>
    <input type="number" value="" class="regular-text process_custom_images" id="process_custom_images" name="" max="" min="1" step="1">
    <button class="set_custom_images button">Set Image ID</button>
</p>

— 傾いた
ソース

1

パーフェクト！「$」を「jQuery」に置き換えたいだけで、すべてが期待どおりに機能します。ありがとうございました。

— Libin 2014

is_admin()フックを使用するときに必要ありませんadmin_enqueue_scripts。また、正しいページにいるかどうかをで確認しget_current_screen()ます。

— ビョルン

私のように、画像のURLも必要な場合は、以下を使用できますvar attachmentURL = wp.media.attachment(attachment.id).get("url");。私はこれを中に入れましたfunction(props, attachment)

— seveninstl

2

番号の代わりにサムネイルプレビューを表示

ちょうど微調整として、私はこれをしました...

入力番号を非表示に変更しました。

追加：

$imgid =(isset( $instance[ 'imgid' ] )) ? $instance[ 'imgid' ] : "";
$img    = wp_get_attachment_image_src($imgid, 'thumbnail');

そして...隠しフィールドの上。

if($img != "") {
?>
  <img src="<?= $img[0]; ?>" width="80px" /><br />
<?php 
}

これにより、番号ではなくサムネイルがユーザーエンドに表示されます。

— ロブ・マッカイ
ソース