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

연재고품격 고품질 워드프레스 무료 사진 저장소완결2

예제 사이트의 ‘발자국’ 페이지는 이미지 포스트의 _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 GEO 필드 추가

이처럼 이미지 업로드만으로 워드프레스 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로 표기하는 때가 있다면 ‘엔드포인트’로 생각하면 됩니다.

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

워드프레스 8 - 무료 이미지 저장소

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 애플리케이션으로 확인한 다음 그림에서 추가한 네임스페이스와 엔드포인트를 볼 수 있습니다.

워드프레스 REST API 커스텀 네임스페이스와 라우트 및 엔드포인트

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

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

엔드포인트 콜백

커스텀 엔드포인트 추가 후 남은 것은 콜백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번 줄로 대체해도 결과는 같습니다.

커스텀 엔드포인트 응답

다음 3개의 엔드포인트로 응답 결과 및 header 정보를 확인해보세요. 두 번째와 세 번째 숫자는 PhotoMan(12), PhotoWoman(13) 기여자 회원 아이디로, 자신의 관리페이지에서 각 회원의 아이디를 확인하여 추가해야 합니다.

  • localhost/wp-json/picspress/v1/geo
  • localhost/wp-json/picspress/v1/geo/12
  • localhost/wp-json/picspress/v1/geo/13

다음 그림은 브라우저에서의 응답 결과로 header 정보가 추가된 것을 볼 수 있습니다.

워드프레스 REST API 커스텀 엔드포인트 응답

원하는 결과나 기능 및 구현 방식에 따라 다르겠지만, 기본적으로 엔드포인트 추가는 간단합니다. 예제처럼 구글 지도 마커와 인포 윈도를 위한 워드프레스 REST API 엔드포인트는 상대적으로 더 간단하므로 처음 경험할 때 쉽게 접근할 수 있습니다.

편집기의 rest-api.php 파일을 닫고, 다음 링크의 이번 장 완성 파일을 받고 압축을 풀어 테마 루트에 덮어쓰세요.

다음 장에서는 이번 장의 커스텀 엔드포인트를 사용해 발자국 페이지를 변경합니다.

예제 목차

0. 고품격 고품질 워드프레스 무료 사진 저장소

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

3. 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

7. 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

9. 워드프레스 이미지 파일 제어

10. 타입 attachment 템플릿과 image.php

11. 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

13. 이미지 메타 데이터를 포스트 메타 데이터에 추가

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

18. 워드프레스 싱글 이미지 포스트 페이지

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

24. 구글 지도에 표시하는 사진 촬영 위치

25. 워드프레스 attachment 포스트 타입의 아카이브

26. 워드프레스 함수로 자바스크립트 변수 데이터 생성

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘pic_album’

30. 커스텀 포스트 타입의 싱글 페이지

31. 워드프레스 WP_Query

32. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 워드프레스 옵션 페이지, 옵션 필드

38. 워드프레스 사이트 프런트 페이지

39. 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 워드프레스 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

43. 간단한 워드프레스 코멘트 폼 수정

44. 워드프레스 대시보드 위젯 추가

45. 워드프레스 REST API 간략 이해

46. 워드프레스 REST API 응답에 커스텀 필드 추가

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

48. 워드프레스 REST API 커스텀 엔드포인트로 구글 클러스터 지도 마커와 인포 윈도 표시

49. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 포스트 Ajax Load More

50. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 코멘트 Ajax Load More

51. 워드프레스 REST API 인증과 제한 및 제어

어떤 의견이 있거나 궁금한 무언가 있다면 다음 링크의 사이트를 이용하세요.

이메일로 소식 받기

이메일로 새로운 포스트를 받으려면 아래에 이메일 주소를 입력하고, 구독합니다! 버튼을 클릭하세요. 그리고 입력한 이메일 계정에 접속하여 구독 확인 메일 내용을 확인하세요.