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

시리즈고품격 고품질 워드프레스 무료 사진 저장소완결2

워드프레스 REST API 기본에 관하여 지난 과정에서 살펴봤습니다. 이번 장에서는 예제의 주요 콘텐츠인 attachment 포스트 타입의 이미지 콘텐츠 ‘더보기’ 구현에 필요한 메타 데이터를 REST API 응답에 추가합니다. 이번 장을 포함하여 워드프레스 REST API를 사용한 예제 구성은 넓은 범주의 흐름만 읽기 바라며, 코드 등의 세부 내용은 안내하지 않습니다.

준비

워드프레스 REST API 과정을 위해서 코드 수정 또는 추가가 필요한 파일은 다음과 같은데, 일부는 현재 존재하지 않으므로 만들어야 합니다.

  • assets/js/pics.js
  • inc/enqueue-script.php
  • inc/template-tags.php
  • page-templates/trace-page.php
  • comments.php
  • functions.php
  • inc/rest-api.php
  • inc/header-footer.php

파일

먼저, 다음 링크의 파일을 받고, 압축을 풀어 테마 루트에 덮어쓰세요.

제공한 파일은 3개입니다. 편집기로 테마 루트에 있는 다음 2개의 파일만 엽니다.

  • functions.php
  • inc/rest-api.php

편집기의 functions.php 파일 맨 아래에 다음 코드가 있습니다. 위의 2가지 파일을 인클루드한 것입니다. 확인 후 functions.php 파일은 닫습니다.

require get_parent_theme_file_path( '/inc/header-footer.php' );
require get_parent_theme_file_path( '/inc/rest-api.php' );

포스트 제목으로 아이디 얻기

지난 과정에서 알아본 때가 있는데, 다음 코드를 편집기의 연습장 파일(_note.php)에 추가하고 저장한 후 사이트의 연습장 페이지를 새로 고쳐 숫자를 확인합니다.

$obj_post = get_page_by_title( '달나라 여행', '', 'attachment' );
echo $pid = $obj_post->ID;  // 달나라 여행 포스트 ID

필자는 ‘357’이지만, 각자 다를 수 있으므로 자신의 숫자 아이디를 기억하기 바랍니다.

REST API 응답의 메타 데이터

브라우저에 다음 REST URL을 입력합니다. URL 끝 숫자는 앞에서 확인한 자신의 숫자를 사용하세요.

  • localhost/wp-json/wp/v2/media/357

다음 그림은 해당 이미지 포스트의 JSON 데이터로, 화살표의 meta에는 값이 없습니다.

워드프레스 REST API meta 필드

예제의 이미지 포스트는 attachment 포스트 타입으로, 워드프레스 기본 메타 데이터와 함께 favorites 플러그인에서 추가하는 메타 데이터 및 이미지 업로드 시 추가한 이미지 가로와 세로, 위치 정보 메타 데이터를 가지고 있습니다. 그러나, 워드프레스 REST API 응답에는 나오지 않습니다. 메타 데이터가 있어야 예제의 이미지 포스트 ‘더보기’를 완전하게 구성할 수 있습니다. 물론, 모든 메타 데이터가 필요한 것은 아닙니다.

먼저, 편집기에 열린 rest-api.php 파일에 다음 코드를 추가하고 저장한 후에 ‘달나라 여행’ 포스트 API 응답 페이지를 새로 고칩니다.

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

다음 그림과 같은 결과가 나올 것입니다.

워드프레스 REST API meta 데이터 추가

코드는 그림처럼 포스트의 모든 메타 데이터를 반환하는데, 응답 필드 이름은 존재하는 meta 대신 원하는 새로운 이름을 사용해도 됩니다.

위의 코드 9번 줄 아래에 다음 코드를 추가하고 저장합니다.

register_meta( 'post', 'exist_post_meta_key', array(
    'type' => 'integer',
    'description' => '존재하는 메타 키',
    'single' => true,
    'show_in_rest' => true,
));

브라우저에서 다음 주소를 입력하여 아래 그림과 같은 exist_post_meta_key를 찾으세요.

  • localhost/wp-json/wp/v2/posts

register_meta 함수

register_rest_field VS register_meta

코덱스는 register_rest_field 함수와 register_meta 함수에 관하여 따로 안내하고 있습니다.

register_meta

방금 추가하여 확인한 register_meta 함수는 커스텀 포스트 타입이나 커스텀 분류를 등록하는 것처럼 커스텀 필드를 등록하는 함수입니다. 마찬가지로, pic_album 커스텀 포스트 타입에서 확인한 것처럼 다음 코드의 true 설정에 의해 위의 그림과 같은 REST API 응답의 meta에 포함된 것을 확인할 수 있습니다.

// register_meta 함수에서
'show_in_rest' => true,

그러나, 이 함수는 워드프레스 기본 오브젝트 요소(타입 post, user, comment 등)에만 적용되므로 커스텀 포스트 타입과 예제의 핵심 콘텐츠로 사용하는 attachment 타입에는 적용되지 않습니다.

사용하는 커스텀 필드라면 REST API를 위해 따로 정의할 필요가 없으므로 편리하지만, 제한적 사용은 단점임을 코덱스에서 안내하고 있습니다. 개선이나 변경 가능성이 있지만, 이 글을 쓰는 시점까지는 다음 함수 사용을 권장하고 있습니다.

register_rest_field

앞에서 register_rest_field 함수를 사용할 때 해당 이미지 포스트의 커스텀 필드(메타 필드)를 모두 요청하였는데, 예제에서는 이미지 포스트에 2개만 추가합니다. 물론, 추가하는 필드도 앞의 응답에 포함되어 있습니다. 편집기의 rest-api.php 파일에 앞에서 추가한 코드를 모두 지우고, 다음 코드를 추가한 후 저장하세요.

add_action( 'rest_api_init', 'rest_api_posts_meta_and_route' );
function rest_api_posts_meta_and_route() {
    // 다운로드 수 필드
    register_rest_field( 'attachment', 'download_count', array(
        'get_callback' => function( $object ) {
            $post_id = $object['id'];
            $dc = get_post_meta( $post_id, 'download_count', true );
            return (int) $dc;
        },
        'schema' => array(
            'description' => __( '이미지 다운로드 수.' ),
            'type' => 'integer'
        ),
    ) );
    // 추천 수 필드
    register_rest_field( 'attachment', 'like_count', array(
        'get_callback' => function( $object ) {
            $post_id = $object['id'];
            $lc = get_post_meta( $post_id, 'simplefavorites_count', true );
            return (int) $lc;
        },
        'schema' => array(
            'description' => __( '이미지 추천 수.' ),
            'type' => 'integer'
        ),
    ) );
}

‘달나라 여행’ 이미지 포스트의 REST URL을 브라우저에 입력하고 응답을 확인하면 다음 그림을 볼 수 있습니다.

워드프레스 REST API register_rest_field 함수

워드프레스 REST API 응답 필드를 추가하는 것은 문제가 없지만, 코덱스는 삭제에 관하여 주의할 것을 안내합니다. 사실, 예제에서 워드프레스 REST API를 사용하여 특정 기능을 구현할 때 필요한 응답 필드의 데이터는 전체와 비교하면 몇 가지에 불과합니다. 필요한 필드만 구성한 커스텀 엔드포인트를 새로 정의하는 방법도 있지만, 워드프레스의 기본을 사용할 때는 사용하지 않는 응답이 있어도 그대로 사용할 것을 코덱스는 권장하고 있습니다.

다음 파일을 받고 압축을 풀어 테마 루트에 덮어쓰세요.

다음 장에서는 구글 지도 마커를 위해 간단한 방법으로 커스텀 라우트와 엔드포인트를 정의합니다.

예제 목차

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 간략 이해

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

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

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

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

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

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