web-dev-qa-db-ja.com

JSで添付ファイル/画像情報を取得する

JSで添付ファイル/画像情報を取得するための特定の方法はありますか？添付ファイルIDを持っていて、使用する前に

add_action("wp_ajax_get_image_info", "get_image_info");

このトラフJSだけを実行するためのネイティブな方法があるかどうかを確認したいと思います。

wp-get-attachment-image
4
Benn

手短に言えば、wp.media.attachment()関数を使って添付ファイルに関する情報を得ることができます。この添付ファイルが別のスクリプトまたはwp.media()ポップアップによってすでにロードされている限り、これによって完全なデータが得られます。

データがまだロードされていない場合は、添付ファイルの.fetch()メソッドを使用してロードできます。これは Backbone.Collection であるため機能します。添付ファイルには複数のファイルが選択されている可能性があるため、これはCollectionです。

// preload your attachment
wp.media.attachment(ID).fetch().then(function (data) {
  // preloading finished
  // after this you can use your attachment normally
  wp.media.attachment(ID).get('url');
});

プリロードを行う簡単な方法：

function preloadAttachment(ID, callback) {
  // if it doesn't have URL we probably have to preload it
  if (wp.media.attachment(ID).get('url')) {
    wp.media.attachment(ID).fetch().then(function () {
      callback(wp.media.attachment(ID);
    });

    return;
  }

  callback(wp.media.attachment(ID));
}

// USAGE:
preloadAttachment(10, function (attachment) {
  console.log(attachment.get('url'));
  console.log(wp.media.attachment(10).get('url')); // this also works
})

そしてそれが、1つのAJAXリクエストで、複数の attachment をプリロードすることを望む方法です。

// An array of attachments you may want to preload
var attachment_ids = [10, 11, 12, 13];
wp.media.query({ post__in: attachment_ids })
  .more()
  .then(function () {
    // You attachments here normally
    // You can safely use any of them here
    wp.media.attachment(10).get('url');
  })

wp.media.query()によって実行されたAJAXリクエストはページ付けされているという事実に注意してください。たくさんの添付ファイルをロードするための堅牢なソリューションが必要な場合は、 hasMore()およびmore()メソッド を使用して各ページを解析する必要があります。

免責事項：

私はwp.media.queryについて知る前にこの方法を使いました、しかしそれはプレロードされた添付ファイルごとに1つの要求をすることの不利益を持ちます。しかし、これにはNice機能もあります。プリロードする必要があるすべての添付ファイルが既に取得済み状態になっている場合は、要求はありません。

function preloadMultipleAttachments(attachment_ids) {
    // I'd rather use Promise.all() here but they do not work with
    // jQuery deferreds :/
    if (jQuery.when.all===undefined) {
        jQuery.when.all = function(deferreds) {
            var deferred = new jQuery.Deferred();
            $.when.apply(jQuery, deferreds).then(
                function() {
                    deferred.resolve(Array.prototype.slice.call(arguments));
                },
                function() {
                    deferred.fail(Array.prototype.slice.call(arguments));
                });

            return deferred;
        }
    }

    return jQuery.when.all(
        attachment_ids.filter(function (attachment_id) {
            return ! wp.media.attachment(attachment_id).get('url');
        }).map(function (id) {
            return wp.media.attachment(id).fetch();
        })
    );
},
11
Andrei Glingeanu

JetpackにはJSON APIがあり、これを使用すると、指定したインストール内のほとんどすべてのものに対してクエリを実行できます。 http://jetpack.me/support/json-api/

0
user12479