ডাব্লুপি রেস্ট এপিআই: এক অনুরোধে বৈশিষ্ট্যযুক্ত মিডিয়া ইউআরএল সহ সর্বশেষ পোস্টের বিশদ?


15

পোস্টের তথ্য পেতে আমি ডাব্লুপি-রেস্ট এপি ব্যবহার করছি । ক্ষেত্রগুলি ফিল্টার করতে এবং ফলাফলের সংক্ষিপ্তসার জন্য আমি wp রেস্ট এপি ফিল্টার আইটেমগুলিও ব্যবহার করি :

যখন আমি 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
    }

]

প্রশ্নটি হল আমি কীভাবে এই আইডি ব্যবহার করে বৈশিষ্ট্যযুক্ত মিডিয়া ইউআরএল তৈরি করতে পারি? ডিফল্ট কলিংয়ের মাধ্যমে http://example.com/wp-json/wp/v2/media/401একটি নতুন জসন ফিরে আসে যার উত্সের চিত্রের বিভিন্ন আকারের url সম্পর্কে সমস্ত বিবরণ রয়েছে:

{

    "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প্রতিটি মিডিয়া আইডির জন্য আমার 10 বার কল করা উচিত এবং তারপরে ফলাফলগুলি বিশ্লেষণ করে মিডিয়া থাম্বনেইলের চূড়ান্ত url পাওয়া উচিত। সুতরাং এটির জন্য 10 টি পোস্টের বিশদ (তালিকার জন্য একটি, থাম্বনেইলের জন্য 10) বিশদ পেতে 11 টি অনুরোধ দরকার। এক অনুরোধে এই ফলাফল পাওয়া সম্ভব?


1
আপনি রেজিস্ট্রার_রেস্ট_ফিল্ডের সাথে আপনার প্রতিক্রিয়ার জন্য একটি নতুন ক্ষেত্র?
বেনোটি

@ বেনোটি আমি এর ডকুমেন্টেশন চেক করব। যদি জিজ্ঞাসা করার মতো আরও কিছু জিনিস থাকে তবে আমি আপনার কাছে ফিরে আসব :)
ভিএসবি

এটি ঠিক আছে, পোস্টের অনুরোধে আপনার কাছে চিত্রের তারিখ নেই, কেবলমাত্র ডাব্লুপিআইপিআইপি-র ডিফল্ট বৈশিষ্ট্যযুক্ত মিডিয়া এবং একটি নতুন অনুরোধের আইডি প্রয়োজন।
বুলেটজ

আপনি যদি _embedপ্যারামিটারটি যুক্ত করেন তবে প্রত্যাশিত পোস্ট অবজেক্টে বৈশিষ্ট্যযুক্ত মিডিয়া এবং এর সমস্ত আকার উপলব্ধ about উদাহরণ হিসাবে আমার প্রতিক্রিয়া পরীক্ষা করুন।
জেসেস ফ্রাঙ্কো

উত্তর:


18

আহ আমি নিজেই এই সমস্যা ছিল! এবং _embedদুর্দান্ত হওয়ার সময় , আমার অভিজ্ঞতায় এটি খুব ধীর এবং জেএসএনের পয়েন্টটি দ্রুত হওয়া উচিত: ডি

আমার একটি প্লাগইনে নিম্নলিখিত কোড রয়েছে (কাস্টম পোস্টের ধরণের যোগ করার জন্য ব্যবহৃত), তবে আমি ধারণা করি আপনি এটি আপনার থিমের 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()কার্য এবং কার্যকারিতা সম্পর্কে এখানে আরও তথ্য :
১) https://developer.wordpress.org/references/funitions/register_rest_field/
2.) https://developer.wordpress.org/references/function/wp_get_attachment_image_src/

** দ্রষ্টব্য: <?php ?>এটি কোনও নতুন পিএইচপি ফাইল হলে ট্যাগগুলি ভুলে যাবেন না !


2
এটি দুর্দান্ত কাজ করে এবং সহায়তা করে যে _ এম্বেডটি ব্যবহার করার দরকার নেই যেহেতু আমি কেবল ফুলসাইজ বৈশিষ্ট্যযুক্ত চিত্র চাই। আমাকে এটিতে পরিবর্তন করতে হয়েছিল: ($object['featured_media'], 'fullsize', false);আমাকে থাম্বনেইল ইউআরএল না দেওয়ার জন্য, তবে ফাংশন.এফপি - এর মাধ্যমে পুরোপুরি কাজ করে - ধন্যবাদ!
জর্ডান

1
আরইএস এপিআই এর শেষ পয়েন্টের সাথে এই সমস্ত জবরদস্তি আমাকে স্মরণ করিয়ে দেয় যে আমি গ্রাফকিউএল কেন পছন্দ করি এবং আমার কাছে REST এপিআই এবং নতুন কাস্টম রিসলভারগুলি সমাপ্ত করা উচিত ;-) যাইহোক, এটি একটি চতুর সমাধান এবং আসলে আমি তথ্য পেতে প্রোডাক্টে কাস্টম এন্ডপয়েন্টগুলি ব্যবহার করি আমার দরকার (এবং ঠিক তাই)
জেসেস ফ্রাঙ্কো 16

নতুন প্লাগইনে রয়েছে http://mahditajik.ir/wp-json/wp/v2/media/<id>তবে এর মধ্যে অনেকগুলি অতিরিক্ত ডেটা রয়েছে যা প্রতিক্রিয়াটি ধীর করে দেয় তাই আমি কীভাবে REST এপিআই সাড়া দিতে পারি ডেটো?
মাহদী

1
অনেক ধন্যবাদ, এটি আমার বৈশিষ্ট্যযুক্ত সামগ্রী বৈশিষ্ট্যটি শেষ করতে আমাকে সহায়তা করেছিল! : ডি
অ্যাটেম 18

1
আমি কেবল আপনাকে জানাতে চেয়েছিলাম যে আমার লোডিংয়ের সময়টি এই কাটা 2s! আপনাকে অনেক ধন্যবাদ এবং আপনার যত্ন সহকারে সংকলন গ্রন্থপঞ্জির জন্য!
গুইহরিসন

7

_embedপোস্টগুলির জন্য জিজ্ঞাসা করা আপনার ইউআরএলটিতে কেবল ক্যোয়ারী যুক্তি যুক্ত করুন , এবং প্রতিটি পোস্ট অবজেক্টে সেই _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

এটি হ'ল, ডাব্লিউপি: বৈশিষ্ট্যযুক্ত মিডিয়া এম্বেড করা অবজেক্টটিতে আপনার পোস্টের জন্য উপলব্ধ প্রতিটি আকারের সমস্ত 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);
    });
});

দেখা? দুটি প্রশ্নের দরকার নেই, কেবল _embedএকটি ক্যোয়ারী যুক্তি হিসাবে যুক্ত করুন এবং তারপরে আপনার ভিউয়ের জন্য সেরা আকার ব্যবহার করার জন্য আপনার প্রয়োজনীয় সমস্ত তথ্য রয়েছে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.