Home IT/WEB wordress rest api 에 featured image 경로 추가

wordress rest api 에 featured image 경로 추가

포스트에 featured image 를 추가하면 wordpress rest api 에는 featured_media 에 대한 id 만 응답받을 수 있다. 
이미지의 경로가 필요가 필요하여 추가적으로 넣어주었다. 이미지도 full 사이즈와 medium 사이즈가 따로 필요해서 각각 생성해주었다. 

아래 구문을 function.php 에 추가해주면 된다.
register_rest_field( array('portfolio') 에서 portfolio 에는 커스텀포스트타입 이름을 넣어주면 된다.
inline ad
add_action('rest_api_init', 'register_rest_images' );
function register_rest_images(){
    register_rest_field( array('portfolio'),
        'featured_image',
        array(
            'get_callback'    => 'get_rest_featured_image',
            'update_callback' => null,
            'schema'          => null,
        )
    );
    register_rest_field( array('portfolio'),
        'featured_thumbnail',
        array(
            'get_callback'    => 'get_rest_featured_medium_image',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}

function get_rest_featured_image( $object, $field_name, $request ) {
    if( $object['featured_media'] ){
        $img = wp_get_attachment_image_src( $object['featured_media'], 'app-thumb' );
        return $img[0];
    }
    return false;
}

function get_rest_featured_medium_image( $object, $field_name, $request ) {
    if( $object['featured_media'] ){
        $img = wp_get_attachment_image_src( $object['featured_media'], 'medium' );
        return $img[0];
    }
    return false;
}

아래와 같은 결과를 확인하실 수 있습니다.

"featured_image": "https://markettraders.kr/wp-content/uploads/2021/03/photo-1604922824961-87cefb2e4b07.jpg",
"featured_thumbnail": "https://markettraders.kr/wp-content/uploads/2021/03/photo-1604922824961-87cefb2e4b07-512x512.jpg",

RECENT POSTS

[javscript]API 응답에서 키 값들을 검증하는 방법

API 응답에서 다수의 키 값들을 검증할 때 코드의 중복을 줄이는 것은 유지보수성을 향상시키고, 가독성을 높이는 데 중요합니다. 이를 위해 몇 가지 접근 방법을 사용할...

[javscript]특정 키를 제외하고 두 객체를 비교하는 방법

특정 키를 제외하고 두 객체를 비교하는 작업은 데이터의 동등성을 평가하고 싶을 때 유용합니다. Lodash 라이브러리를 통해서 처리할 수 있는 방법에 대해서 살펴보겠습니다. Lodash를 사용한 특정...

[javscript]배열을 특정 키의 값에 따라 정렬하는 방법, _.orderBy

Lodash의 _.orderBy 메소드를 사용하면 배열을 특정 키의 값에 따라 정렬할 수 있습니다. 이 메소드는 배열의 각 항목을 정렬할 기준이 되는 하나 이상의 속성 이름과...

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...