sori.studio

워드프레스에서 REST API로 글 목록 불러오기

workspace/web
2025. 4. 8. 08:00

📘 워드프레스 REST API를 이용해서 나만의 사이트 만들기 - 1편

워드프레스로 게시물 목록 불러오기 (GET 요청 활용)

 


웹사이트를 구축할 때 가장 쉬우면서도 유연하게 CMS와 백엔드를 구성할 수 있는 방법 중 하나가 워드프레스라고 생각한다.
기본적인 관리 UI도 잘 되어 있고, 무엇보다 REST API를 통해 데이터를 쉽게 가져오고 다룰 수 있어서 프론트엔드는 내가 원하는 대로 자유롭게 만들 수 있다.

그래서 이번에 워드프레스 REST API를 이용해서 내가 원하는 스타일의 웹사이트를 직접 만들어보려고 한다.
이 과정을 정리해서 블로그에 시리즈로 기록해보려고 하고,
이 글들이 나처럼 프론트 중심으로 작업을 하면서 CMS가 필요했던 누군가에게 작은 도움이 되면 좋겠다.

기록은 복잡하게 쓰지 않고, 최대한 내가 생각한 흐름, 개발을 진행한 순서대로 정리해볼 생각이다.

 

 

REST API로 게시물 불러오기

첫 번째는 제일 기본적인 내용부터 시작한다.
워드프레스에서 REST API를 통해 게시물 데이터를 가져와서 웹사이트에 표시하는 방식이다.

 

워드프레스 REST API?

워드프레스는 자체적으로 REST API를 제공한다.
따로 플러그인 설치 안 해도 기본적으로 작동하고, 브라우저에서 주소만 입력해도 JSON 데이터를 확인할 수 있다.

예를 들어 워드프레스 주소가 https://example.com이라면, 게시물 리스트는 아래 주소에서 확인할 수 있다:

https://example.com/wp-json/wp/v2/posts

 

이 URL로 들어가보면 게시물 데이터가 JSON 형식으로 쭉 나온다.
프론트엔드에서는 이 데이터를 fetch 같은 걸로 불러오면 끝이다.

 

예제로 만들어본 게시물 리스트

아래는 간단하게 만든 HTML + JavaScript 예제다.
워드프레스에서 게시물을 가져와서, 제목이랑 요약을 화면에 보여주는 방식으로 만들었다.

 

HTML (index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>워드프레스 게시물 불러오기</title>
</head>
<body>
  <h1>최신 게시물</h1>
  <div id="post-container"></div>

  <script src="main.js"></script>
</body>
</html>

 

JavaScript (main.js)

const apiURL = 'https://example.com/wp-json/wp/v2/posts';

fetch(apiURL)
  .then(res => res.json())
  .then(posts => {
    const container = document.getElementById('post-container');

    posts.forEach(post => {
      const el = document.createElement('div');
      el.innerHTML = `
        <h2>${post.title.rendered}</h2>
        <p>${post.excerpt.rendered}</p>
        <a href="${post.link}" target="_blank">원문 보기</a>
        <hr>
      `;
      container.appendChild(el);
    });
  })
  .catch(err => {
    console.error('에러 발생:', err);
  });

 

참고로 워드프레스는 제목이나 내용 같은 텍스트를 HTML로 감싸서 주기 때문에, title.rendered, excerpt.rendered 같은 필드를 사용해야 한다.
이걸 그대로 innerHTML에 넣어주면 된다.

 

 

워드프레스 REST API에서 excerpt와 content 차이

✅ excerpt

  • 요약된 글 내용을 의미.
  • 워드프레스 편집기에서 요약(Excerpt) 필드에 사용자가 입력한 내용을 표시.
  • 사용자가 입력하지 않았다면, 본문(content)의 앞부분을 자동으로 잘라서 생성.
  • 간단한 요약 정보에 적합.

✅ content

  • 글의 전체 본문을 의미.
  • 워드프레스 편집기에서 작성한 모든 내용을 포함(이미지, 스타일, HTML 포함).

 

 

결과물

워드프레스 관리자 페이지에서 작성한 게시물(좌)을 나의 웹(우)에 그대로 가져와 사용할 수 있게 된다.

 

 

 

티스토리툴바