WP Rest API：注目のメディアURLを含む最新の投稿の詳細を1つのリクエストに含めますか？

15

私はwp-rest apiを使用して投稿情報を取得しています。また、wp rest apiフィルター項目を使用してフィールドをフィルターし、結果を要約します。

呼び出すhttp://example.com/wp-json/wp/v2/posts?items=id,title,featured_mediaと、次のような結果が返されます。

[

    {
        "id": 407,
        "title": {
            "rendered": "Title 1"
        },
        "featured_media": 399
    },
    {
        "id": 403,
        "title": {
            "rendered": "Title 2"
        },
        "featured_media": 401
    }

]

問題は、このIDを使用して特集メディアのURLを生成するにはどうすればよいですか？デフォルトで呼び出すとhttp://example.com/wp-json/wp/v2/media/401、ソース画像のさまざまなサイズのURLに関するすべての詳細を含む新しいjsonが返されます。

{

    "id": 401,
    "date": "2016-06-03T17:29:09",
    "date_gmt": "2016-06-03T17:29:09",
    "guid": {
        "rendered": "http://example.com/wp-content/uploads/my-image-name.png"
    },
    "modified": "2016-06-03T17:29:09",
    "modified_gmt": "2016-06-03T17:29:09",
    "slug": "my-image-name",
    "type": "attachment",
    "link": "http://example.com/my-post-url",
    "title": {
        "rendered": "my-image-name"
    },
    "author": 1,
    "comment_status": "open",
    "ping_status": "closed",
    "alt_text": "",
    "caption": "",
    "description": "",
    "media_type": "image",
    "mime_type": "image/png",
    "media_details": {
        "width": 550,
        "height": 250,
        "file": "my-image-name.png",
        "sizes": {
            "thumbnail": {
                "file": "my-image-name-150x150.png",
                "width": 150,
                "height": 150,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-150x150.png"
            },
            "medium": {
                "file": "my-image-name-300x136.png",
                "width": 300,
                "height": 136,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-300x136.png"
            },
            "one-paze-port-thumb": {
                "file": "my-image-name-363x250.png",
                "width": 363,
                "height": 250,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-363x250.png"
            },
            "one-paze-blog-thumb": {
                "file": "my-image-name-270x127.png",
                "width": 270,
                "height": 127,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-270x127.png"
            },
            "one-paze-team-thumb": {
                "file": "my-image-name-175x175.png",
                "width": 175,
                "height": 175,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-175x175.png"
            },
            "one-paze-testimonial-thumb": {
                "file": "my-image-name-79x79.png",
                "width": 79,
                "height": 79,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-79x79.png"
            },
            "one-paze-blog-medium-image": {
                "file": "my-image-name-380x250.png",
                "width": 380,
                "height": 250,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name-380x250.png"
            },
            "full": {
                "file": "my-image-name.png",
                "width": 550,
                "height": 250,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/my-image-name.png"
            }
        },
        "image_meta": {
            "aperture": "0",
            "credit": "",
            "camera": "",
            "caption": "",
            "created_timestamp": "0",
            "copyright": "",
            "focal_length": "0",
            "iso": "0",
            "shutter_speed": "0",
            "title": "",
            "orientation": "0",
            "keywords": [ ]
        }
    },
    "post": 284,
    "source_url": "http://example.com/wp-content/uploads/my-image-name.png",
    "_links": {
        "self": [
            {
                "href": "http://example.com/wp-json/wp/v2/media/401"
            }
        ],
        "collection": [
            {
                "href": "http://example.com/wp-json/wp/v2/media"
            }
        ],
        "about": [
            {
                "href": "http://example.com/wp-json/wp/v2/types/attachment"
            }
        ],
        "author": [
            {
                "embeddable": true,
                "href": "http://example.com/wp-json/wp/v2/users/1"
            }
        ],
        "replies": [
            {
                "embeddable": true,
                "href": "http://example.com/wp-json/wp/v2/comments?post=401"
            }
        ]
    }

}

しかし、投稿とそのサムネイルのリストを取得したい場合を考えてみましょう。一度呼び出す必要があります。http://example.com/wp-json/wp/v2/posts?items=id,title,featured_media次にhttp://example.com/wp-json/wp/v2/media/id、メディアIDごとに10回呼び出し、結果を解析して、メディアサムネイルの最終URLを取得します。したがって、10件の投稿の詳細を取得するには、11件のリクエストが必要です（リストに1件、サムネイルに10件）。この結果を1つのリクエストで取得することは可能ですか？

plugins  filters  json  rest-api 
— VSB
ソース
1
register_rest_fieldを使用して、応答用の新しいフィールドを登録しましたか？
— Benoti、2016年
@Benotiそのドキュメントを確認します。質問することがもっとあれば、また戻ってきます:)
— VSB
そうです、投稿リクエストに画像の日付がありません。フィーチャーされたメディアのIDのみで、WP APIのデフォルトで新しいリクエストが必要です。
— bueltge
_embedパラメータを追加すると、返される投稿オブジェクトには、注目のメディアに関するすべての詳細と利用可能なすべてのサイズが含まれます。例について私の応答を確認してください。
— ヘススフランコ

回答:

18

ああ、私はこの問題を自分で抱えていました！そして_embed素晴らしいですが、私の経験では非常に遅く、JSONのポイントは高速であることです：D

プラグイン（カスタム投稿タイプの追加に使用）に次のコードがありますが、テーマのfunction.phpファイルに配置できると思います。

php

add_action( 'rest_api_init', 'add_thumbnail_to_JSON' );
function add_thumbnail_to_JSON() {
//Add featured image
register_rest_field( 
    'post', // Where to add the field (Here, blog posts. Could be an array)
    'featured_image_src', // Name of new field (You can call this anything)
    array(
        'get_callback'    => 'get_image_src',
        'update_callback' => null,
        'schema'          => null,
         )
    );
}

function get_image_src( $object, $field_name, $request ) {
  $feat_img_array = wp_get_attachment_image_src(
    $object['featured_media'], // Image attachment ID
    'thumbnail',  // Size.  Ex. "thumbnail", "large", "full", etc..
    true // Whether the image should be treated as an icon.
  );
  return $feat_img_array[0];
}

JSON応答"featured_image_src":に、サムネイルへのURLを含むという新しいフィールドが表示されます。

レスポンスの変更について詳しくは、http：//v2.wp-api.org/extending/modifying/をご覧ください。

そして、ここでの詳細な情報だregister_rest_fieldとwp_get_attachment_image_src()機能は：
1）https://developer.wordpress.org/reference/functions/register_rest_field/
2）https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

**注：<?php ?>これが新しいphpファイルの場合は、タグを忘れないでください。

— ステファニーQ
ソース
2
これは非常に効果的で、フルサイズのフィーチャー画像のみが必要なので、_embedを使用する必要がありません。私はそれを次のように変更する必要がありました：($object['featured_media'], 'fullsize', false);サムネイルのURLを与えず、functions.phpを介して完全に機能するように-ありがとう！
— ジョーダン
1
RES APIエンドポイントとのこのジャグリングのすべては、なぜGraphQLが好きで、REST APIと新しいカスタムリゾルバーのラッパーを完成させる必要があることを思い出させます;-)とにかく、それは巧妙なソリューションであり、実際に本番環境でカスタムエンドポイントを使用してデータを取得します私は（そしてそれだけで）必要です。
— ジェス・フランコ
新しいプラグインがありますがhttp://mahditajik.ir/wp-json/wp/v2/media/<id>、応答が遅くなる多くの追加データがあるため、REST API応答DTOをどのようにカスタマイズできますか？
— Mahdi、
1
どうもありがとうございました。特集コンテンツの機能を完成させるのに役立ちました。：D
— Atem18
1
これにより、読み込み時間が2秒短縮されたことをお知らせします。丁寧にキュレーションされた参考文献をありがとうございました！
— GuiHarrison
7

_embed投稿を要求するクエリ引数をURLに追加するだけで、すべての投稿オブジェクトに_embedded.[wp:featuredmedia]、/media/$idリソースと同じようにすべての画像を含むオブジェクトが含まれます。特定のサイズが必要な場合は、プロパティ名（つまり：_embedded[wp:featuredmedia][0].media_details.sizes.full.source_urlまたはそのサムネイル）でアクセスします。_embedded[wp:featuredmedia][0].media_details.sizes.thumbnail.source_url

つまり、wp：featuredmedia埋め込みオブジェクトには、投稿に使用できるすべてのサイズのすべてのURLと詳細が含まれますが、元のフィーチャー画像だけが必要な場合は、このキーの値を使用できます。 post._embedded["wp:featuredmedia"][0].source_url

私は次のようなサイトで使用します（もちろん、独自のドメインを使用します）：

$.get('https://example.com/wp-json/wp/v2/posts/?categories=3&_embed', 
    function(posts) { 
        var elems = '';
        posts.forEach(function(post){ 
            var link = post.link;
            var title = post.title.rendered;
            var pic = post._embedded["wp:featuredmedia"][0].source_url);
            elems += '<div class="this_week"><a href="' + link + '" target="_blank">';
            elems += '<img src="' + pic + '" title="' + title + '"/><span class="title">';
            elems += title + '</span></a></div>';
        });
        $('#blockbusters').html(elems);
    });
});

見る？2つのクエリは必要ありません。_embedクエリ引数として追加するだけで、ビューに最適なサイズを使用するために必要なすべての情報が得られます。

— ヘスス・フランコ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.