Wordpress

WordPress REST API로 커스텀 필드와 게시물 개수 제한하는 방법

0

이번 글에서는 WordPress REST API를 사용하여 커스텀 필드를 가져오고, 게시물의 개수를 제한하는 방법을 알아보겠습니다. REST API를 통해 효율적으로 데이터를 관리하고, 이를 React와 Next.js 같은 프론트엔드 프레임워크에서 활용할 수 있도록 하는 방법을 구체적으로 설명할 예정입니다.

우리는 두 가지 핵심 작업에 집중할 것입니다:

  • 게시물 개수 제한: `per_page` 파라미터를 통해 한 번에 가져오는 게시물 수를 제한하는 방법.
  • 커스텀 필드 가져오기: WordPress의 커스텀 필드(예: `set_lang`)를 REST API 응답에 포함시키는 방법.

이 글을 통해 [API의 활용도]와 [WordPress 커스텀 필드 사용 방법]에 대해 확실하게 이해할 수 있을 것입니다.

WordPress API로 게시물 개수 제한하기

REST API를 통해 불필요하게 많은 게시물을 불러오지 않고, 원하는 개수만 가져올 수 있도록 설정하는 것은 중요한 작업입니다. `per_page` 파라미터를 사용하면 이 문제를 쉽게 해결할 수 있습니다. 기본적으로 한 번에 10개의 게시물이 반환되지만, 이 값을 필요에 따라 조정할 수 있습니다.

API 요청 예시

여기서는 한 번에 5개의 게시물만 가져오는 예시를 살펴보겠습니다:

async function fetchPosts() {
  const res = await fetch('https://example.com/wp-json/wp/v2/posts?per_page=5');
  if (!res.ok) {
    throw new Error('Failed to fetch posts');
  }
  return res.json();
}

이 예시에서는 API 호출 시 `?per_page=5`를 추가하여 최대 5개의 게시물만 반환되도록 설정했습니다. 간단하지만 매우 유용한 방법입니다. 이를 통해 [웹 페이지의 성능]을 크게 개선할 수 있습니다.

커스텀 필드 가져오기: `set_lang` 필드

WordPress는 기본적으로 REST API 응답에 커스텀 필드를 포함하지 않지만, 이를 설정하는 방법은 의외로 간단합니다. 우리는 WordPress의 Advanced Custom Fields (ACF) 플러그인을 사용하거나, 테마의 `functions.php` 파일을 수정하여 이 문제를 해결할 수 있습니다.

ACF 플러그인 사용하기

ACF를 설치하고 `set_lang` 필드를 추가한 후, 해당 필드를 API에 포함시키는 방법은 다음과 같습니다.

// functions.php에 추가할 코드
function add_custom_fields_to_rest_api( $data, $post, $context ) {
    // 커스텀 필드 값을 가져옴
    $custom_field = get_post_meta( $post->ID, 'set_lang', true );
    
    // API 응답에 필드 추가
    $data->data['set_lang'] = $custom_field;

    return $data;
}

// API 호출 시 커스텀 필드 포함
add_filter( 'rest_prepare_post', 'add_custom_fields_to_rest_api', 10, 3 );

위 코드를 사용하면, `set_lang`이라는 커스텀 필드가 WordPress REST API 응답에 포함됩니다. 이렇게 하면 프론트엔드에서 필요한 데이터를 받아서 처리할 수 있게 됩니다.

React와 Next.js에서 API 데이터 활용하기

이제 API에서 데이터를 받아와서 React와 Next.js에서 활용하는 방법을 살펴보겠습니다. 커스텀 필드와 함께 게시물 목록을 화면에 출력하는 예시입니다.

async function fetchPosts() {
  const res = await fetch('https://example.com/wp-json/wp/v2/posts?per_page=5');
  if (!res.ok) {
    throw new Error('Failed to fetch posts');
  }
  return res.json();
}

export default async function Home() {
  const posts = await fetchPosts();

  return (
    <div>
      <main>
        <h1>Latest WordPress Posts</h1>
        <ul>
          {posts.map((post: any) => (
            <li key={post.id}>
              <h2>{post.title.rendered}</h2>
              <p>Language: {post.set_lang || 'N/A'}</p> {/* 커스텀 필드 값 사용 */}
              <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
            </li>
          ))}
        </ul>
      </main>
    </div>
  );
}

이 코드에서는 `post.set_lang`을 통해 커스텀 필드 값을 렌더링합니다. 이를 통해 각 게시물의 언어 정보를 간단히 확인할 수 있습니다. React와 WordPress API의 결합은 매우 강력하며, 커스텀 필드를 사용해 동적인 콘텐츠를 쉽게 구현할 수 있습니다.

결론

WordPress REST API는 매우 유용한 도구입니다. 특히 커스텀 필드와 게시물 개수를 제한하는 방법을 통해 API의 성능을 최적화하고, 프론트엔드에서 보다 나은 사용자 경험을 제공할 수 있습니다.

이번 글에서 배운 내용을 통해, WordPress 사이트의 효율성을 높이고 사용자 경험을 개선하는 데 기여할 수 있을 것입니다.

Leave a Reply