워드프레스 REST API 커스텀 라우트 및 엔드포인트

예제 사이트의 ‘발자국’ 페이지는 이미지 포스트의 _location 커스텀 필드 메타 데이터의 위도와 경도, 섬네일 이미지와 이미지 포스트 URL을 사용하여 구글 지도 마커와 인포 윈도를 출력하고 있습니다. 위도와 경도 및 섬네일 이미지 URL 데이터는 이미지를 업로드할 때 _wp_attachment_metadata 메타 데이터 필드에 저장되며, 이미지 포스트 URL은 따로 저장하지 않아도 기본으로 생성 및 저장되는 데이터입니다.

기본 라우트와 엔드포인트의 메타 데이터

지난 과정에서 살핀 것처럼 다음 코드만으로 구글 지도 마커와 인포 윈도를 위한 워드프레스 REST API 메타 데이터 응답은 충분합니다.

register_rest_field( 'attachment', 'meta', array(
    'get_callback' => function( $object ) {
        $post_id = $object['id'];
        return get_post_meta( $post_id );
    },
    'schema' => null,
) );

위의 코드 대신에 다음 코드를 사용하여 조금 더 직관적 응답을 얻을 수 있습니다.

register_rest_field( 'attachment', 'geo', array(
    'get_callback' => function( $object ) {
        $post_id = $object['id'];
        $geo = get_post_meta( $post_id, '_location', true );
        return $geo;
    },
    'schema' => array(
        'description' => __( '위도와 경도 및 이미지와 이미지 포스트 URL.' ),
        'type' => 'string'
    ),
) );

다음 그림은 위의 코드를 사용했을 때 POSTMAN 애플리케이션으로 확인한 결과입니다. ‘357’ 숫자는 자신의 ‘달나라 여행’ 이미지 포스트 아이디임을 잊지 마세요.

이처럼 이미지 업로드만으로 워드프레스 REST API를 사용한 구글 지도 데이터 응답은 충분한데, 이미지를 업로드할 때 _location 커스텀 필드에 따로 저장한 것은, 워드프레스 REST API 커스텀 라우트와 엔드포인트를 구성을 위해 일부러 설정한 기준이며, PHP 기준 사용에도 편리하므로 때로 구성의 필요가 있습니다.

커스텀 라우트와 엔드포인트

현재 발자국 페이지는 로그인 전과 후를 구분하지 않고, 334개의 지도 마커를 모두 출력합니다. 개수는 이미지 업로드 과정에 따라 다를 수 있으므로 염려하지 않아도 됩니다. 지금 정의할 라우트와 엔드포인트의 커스텀 REST API URL은 다음처럼 기여자(Contributor) 기준으로 2가지입니다.

localhost/wp-json/picspress/v1/geo
localhost/wp-json/picspress/v1/geo/{author_id}

첫 번째는, 방문자가 로그인 전에 발자국 페이지에 접근했을 때와 로그인 후 회원의 역할(Role)이 기여자가 아닐 때 사용합니다. 두 번째는 로그인 후 회원이 기여자일 때 사용합니다. 기여자가 이미지를 업로드하므로 기여자가 로그인하면 지도에 자신의 이미지 마커만 보여준다는 기준의 뜻입니다.

용어 기준 간략하게 정하기, 엔드포인트

라우트는 네임스페이스가 있는 복수의 엔드포인트 모두를 말하며, 라우트를 구분하여 말할 때 wp-json 워드프레스 REST API 기본 경로(path)는 제외합니다. 또, 커스텀 라우트의 엔드포인트는 보통 새로운 네임스페이스를 정의하여 구성하므로 필요한 때가 아니면 라우트나 엔드포인트를 구분하여 말하지 않고, 모두 ‘엔드포인트’로 표기합니다. 용어 정의가 아닌 예제에서 정하는 기준입니다.

만약, 워드프레스 퍼머링크를 기본 설정으로 사용한다면 REST URL은 다음처럼 rest_route 파라미터에 엔드포인트를 추가합니다.

http://localhost/?rest_route=/wp/v2/media/357

프로토콜과 도메인 및 기본 경로를 포함한 라우트를 ‘워드프레스 REST URL’로 지금까지 표기하였지만, 워드프레스 REST API는 특정 데이터 요청의 응답이 목적이며, 도메인과 기본 경로는 요청에 포함되므로 결국, 개념적인 ‘엔드포인트’입니다. 따라서 REST URL로 표기하는 때가 있다면 ‘엔드포인트’로 생각하면 됩니다.

커스텀 엔드포인트는 다음의 함수로 쉽게 구성할 수 있습니다.

register_rest_route

편집기로 테마 루트의 inc/rest-api.php 파일을 열고 34번 줄에 다음 코드를 추가하고 저장합니다.

$namespace = 'picspress/v1'; // 네임스페이스(namespace)

register_rest_route( $namespace, '/geo/', array(
    'methods' => WP_REST_Server::READABLE, // 또는 'methods' => 'GET',
    'callback' => 'picspress_get_geo',
) ); // 로그인 전과 로그인 사용자가 기여자(contributor)가 아닐 때

register_rest_route( $namespace, '/geo/(?P<author_id>[\d]+)', array(
    'methods' => WP_REST_Server::READABLE,
    'callback' => 'picspress_get_geo',
) ); // 기여자(contributor)가 로그인한 경우

POSTMAN 애플리케이션으로 확인한 다음 그림에서 추가한 네임스페이스와 엔드포인트를 볼 수 있습니다.

다음 그림의 엔드포인트도 브라우저 또는 POSTMAN 애플리케이션으로 확인해보세요.

엔드포인트 콜백

커스텀 엔드포인트 추가 후 남은 것은 콜백^callback을 정의하는 것인데, 앞에서 rest-api.php 파일에 추가한 코드에 picspress_get_geo 함수를 지정하였습니다. 다음 코드를 rest-api.php 파일 맨 아래에 추가하고 저장합니다.

function picspress_get_geo( $data ) {
    $geo_for = new WP_Query( array(
        'post_type' => 'attachment',
        'post_status' => 'inherit',
        'posts_per_page' => -1,
        'post_parent' => 0,
        'author' => $data['author_id'],
        'meta_key' => '_location',
    ) );

    $geo = array();
    while ( $geo_for->have_posts() ) : $geo_for->the_post();
        $geo[] = get_post_meta( get_the_ID(), '_location', true );
    endwhile; wp_reset_postdata();  

    $total_posts = $geo_for->found_posts;
    $max_pages = $geo_for->max_num_pages;
    $response = rest_ensure_response( $geo );
    $response->header( 'X-WP-Total', (int) $total_posts );
    $response->header( 'X-WP-TotalPages', (int) $max_pages );

    return $response;
    //return $geo;

}

WP_Query 쿼리 클래스를 사용하면 19, 20번 줄처럼 응답 header 정보 추가가 쉽습니다. 그러나, 지금의 예제는 전체 개수를 지도에 출력하므로 추가 응답 코드가 없어도 되며, 위의 코드에서 16번에서 22번 줄을 23번 줄로 대체해도 결과는 같습니다.