워드프레스에서 REST API로 외부 사이트에 포스트 보내기

by


워드프레스 초보자라면 REST API를 보안에 취약할 수 있는 문제 요소 정도로 생각할 텐데요. 물론 REST API는 보안 취약점이 되긴 합니다. 하지만 외부 워드프레스 사이트의 포스트를 실시간으로 다른 사이트에 불러오는 데 아주 유용한 기능입니다.

예를 들어, 제가 어떤 사이트에 정기적으로 글을 연재하고 있다고 칩시다. 그리고 제 개인 홈페이지에 저의 연재 시리즈물을 나열해 주고 싶은 상황입니다.

만약 네이버 블로그처럼 외부 콘텐츠 연동에 폐쇄적인 플랫폼이라면, 일일이 연재글이 업데이트될 때마다 개인 홈페이지에 나열되어 있는 연재 리스트도 바꿔줘야 할 것입니다. 제목을 복사하고 URL을 복사해 링크해야 합니다.

연재물의 개수가 적다면 괜찮을 수 있지만, 제법 귀찮은 일이 될 수 있습니다. 잠깐 업데이트하는 걸 까먹으면 오랫동안 옛날 콘텐츠가 방치되는 불상사가 생길 수도 있습니다.

이럴 때 API 기능을 사용하면 실시간으로 업데이트된 콘텐츠가 외부 사이트에 적용되도록 설정할 수 있습니다. 특히 워드프레스 사이트끼리는 매우 편리하게 콘텐츠를 공유할 수 있는데, 이걸 가능하게 해주는 것이 REST API인 것입니다.

REST API 사용 방법

REST API 사용방법은 생각보다 간단합니다. 우선 워드프레스 사이트가 REST API를 허용하고 있는지 확인합니다.

웹브라우저에서 https://사이트주소/wp-json 을 입력했을 때 페이지가 출력되면 REST API를 사용하고 있는 것입니다. 만약 동작하지 않는다면 보안 플러그인이나 호스팅 업체에서 막고 있을 수도 있습니다.

원하는 글 목록의 주소를 구해봅시다. 아래와 같이 다양한 형식으로 불러올 글을 선택할 수 있습니다.

  • 사이트주소/wp-json/wp/v2/posts : 사이트의 모든 포스트
  • 사이트주소/wp-json/wp/v2/pages : 사이트의 모든 페이지
  • 사이트주소/wp-json/wp/v2/posts?categories=ID : 특정 카테고리 ID의 모든 포스트
  • 사이트주소/wp-json/wp/v2/posts?tags=ID : 특정 태그 ID의 모든 포스트

더 다양한 방식으로 활용하고 싶다면 ChatGPT나 Copilot같은 AI 도구에 물어볼 수 있습니다.

이제 글을 출력하고 싶은 홈페이지에 아래와 같은 코드를 입력합니다. 사용자 정의 html 블록을 사용하면 됩니다.

예를 들어, site.com에서 review라는 카테고리와 column이라는 카테고리의 글을 각각 5개씩 불러오려면 아래처럼 입력하면 됩니다. 불러온 글에는 하이퍼링크를 걸어 해당 링크로 이동하게 했습니다. 

<script type="text/javascript">
  // 각 카테고리에 대한 id 설정
  const categoryIdMapping = {
    '000': 'column',
    '111': 'review'
  };

  // 각 카테고리에 대해 데이터를 불러오는 함수
  function fetchData(categoryId) {
    let url = 'https://site.com/wp-json/wp/v2/posts?categories=' + categoryId;
    console.log(`Fetching data for category ID: ${categoryId} with URL: ${url}`); // 카테고리 ID와 URL을 콘솔에 출력
    fetch(url)
    .then(res => {
      if (!res.ok) {
        throw new Error(`HTTP error! status: ${res.status}`);
      }
      return res.json();
    })
    .then(wptalk_result => {
      console.log(`Data for category ID ${categoryId}:`, wptalk_result); // API 응답을 콘솔에 출력
      let output = '<ul>';
      wptalk_result.slice(0, 5).forEach((item, index) => {
        output += '<li><a href="' + item.link + '" target="_blank" rel="noopener noreferrer">' + item.title.rendered + '</a></li>';
      });
      output += '</ul>';
      const id = categoryIdMapping[categoryId];
      const element = document.getElementById(id);
      if (element) {
        element.innerHTML = output;
      }
    })
    .catch(error => {
      console.error(`Fetching data for category ID ${categoryId} failed:`, error);
    });
  }

  // column과 review 카테고리에 대해 데이터를 불러옴
  fetchData('000'); // 'column' 카테고리
  fetchData('111'); // 'review' 카테고리

</script>

그리고 원하는 위치에 사용자 정의 html 블록을 만들어 아래와 같이 작성해주면 site.com의 리뷰와 칼럼 글의 링크가 나오게 될 것입니다.

<div id="column"></div>
<div id="review"></div>

여기서 임의로 작성한 000, 111 아이디를 직접 사용할 카테고리 ID로 바꿔주고, site.com을 진짜 웹사이트 주소로 바꿔주면 바로 사용할 수 있습니다.

혹은 위 텍스트를 복사해서 ChatGPT한테 코드를 바꿔달라고 요청해보세요.

아래와 같은 코드가 나왔습니다.

<script type="text/javascript">
  // 각 카테고리에 대한 id 설정
  const categoryIdMapping = {
    '969': 'column',
    '977': 'review'
  };

  // 각 카테고리에 대해 데이터를 불러오는 함수
  function fetchData(categoryId) {
    let url = 'https://mixing.co.kr/wp-json/wp/v2/posts?categories=' + categoryId;
    console.log(`Fetching data for category ID: ${categoryId} with URL: ${url}`); // 카테고리 ID와 URL을 콘솔에 출력
    fetch(url)
    .then(res => {
      if (!res.ok) {
        throw new Error(`HTTP error! status: ${res.status}`);
      }
      return res.json();
    })
    .then(wptalk_result => {
      console.log(`Data for category ID ${categoryId}:`, wptalk_result); // API 응답을 콘솔에 출력
      let output = '<ul>';
      wptalk_result.slice(0, 5).forEach((item, index) => {
        output += '<li><a href="' + item.link + '" target="_blank" rel="noopener noreferrer">' + item.title.rendered + '</a></li>';
      });
      output += '</ul>';
      const id = categoryIdMapping[categoryId];
      const element = document.getElementById(id);
      if (element) {
        element.innerHTML = output;
      }
    })
    .catch(error => {
      console.error(`Fetching data for category ID ${categoryId} failed:`, error);
    });
  }

  // column과 review 카테고리에 대해 데이터를 불러옴
  fetchData('969'); // 'column' 카테고리
  fetchData('977'); // 'review' 카테고리
</script>

실제로 적용해보면 아래와 같이 나오는군요.

이처럼 요즘은 어느 정도 원리만 이해하면 AI 도구를 통해 손쉽게 코드를 만들어낼 수 있습니다.



관련 글