워드프레스 실시간 외부 컨텐츠를 내 웹사이트로 가져 오는 방법 (REST API)

업데이트 : --01

워드프레스 REST API 활용 방법
1. 워드프레스 REST API 주소 찾기
2. 자바스크립트(JS) 코드 입력하기
3. HTML 코드 입력
4. 결과 확인
맺음말
도움이 될 만한 연관 추천 글

◼︎ 워드프레스 REST API 활용 방법

워드프레스(WordPress)의 큰 장점 중 하나는, 외부 사이트와의 데이터 교환을 편리하게 구현할 수 있는 “REST API” 기능이 기본적으로 내장되어 있다는 점입니다. (Version 4.4 이상)

워드프레스 REST API를 활용하면, 서로 다른 웹사이트 간에 데이터를 실시간으로 자유롭게 전송 및 생성, 수정, 삭제할 수 있습니다.

또한 워드프레스 REST API를 통한 외부로부터의 데이터 접근 권한은 사이트 관리자가 자유롭게 설정 할 수 있습니다.

현재 워드프레스 REST API가 제공하는 주요 기본 URI(엔드포인트, Endpoint)은 다음과 같습니다.

www.test.com/wp-json/wp/v2/posts // 포스트(글) 목록
www.test.com/wp-json/wp/v2/pages // 페이지 목록
www.test.com/wp-json/wp/v2/categories // 카테고리 목록
www.test.com/wp-json/wp/v2/comments // 댓글 목록
www.test.com/wp-json/wp/v2/tags // 태그 목록
www.test.com/wp-json/wp/v2/media // 미디어 목록
www.test.com/wp-json/wp/v2/users // 사용자 목록

워드프레스(WordPress) REST API : 공식 매뉴얼

◼︎ 1. 워드프레스 REST API 주소 찾기

워드프레스 REST API 기능을 통해 외부 웹사이트 또는 쇼핑몰의 데이터(컨텐츠)를 실시간으로 가져 오기 위해서, 먼저 가져올 데이터를 제공하는 외부 워드프레스 웹사이트의 API 주소를 확인합니다. ( 예: www.test.com/wp-json/wp/v2/posts )

참고할 점은, 모든 워드프레스 웹사이트는 기본적으로 REST API 기능이 활성화 되어 있지만, 워드프레스 사이트 관리자의 REST API 권한 설정에 따라, 데이터를 대외적으로 비공개 설정한 웹사이트가 있을 수도 있습니다.

◼︎ 2. 자바스크립트(JS) 코드 입력하기

워드프레스(WordPress)가 제공하는 REST API 기능을 프론트엔드(브라우저)에서 활용하기 위해서, PHP, JavaScript 등 다양한 방법을 사용할 수 있습니다.

이 중, 워드프레스웹코리아(WP-KR.COM)는 최근 활용도가 높아지고 있는 자바스크립트 방식(Fetch API)을 소개해 드리겠습니다.

먼저 외부 워드프레스 웹사이트에서 가져온 실시간 최근 글 목록(Latest Posts) 데이터를 표시 하기 위해, 사용 중인 웹사이트의 원하는 페이지 하단에 아래의 자바스크립트 코드를 입력합니다.

<script type="text/javascript">

  const url = 'https://woocommerce.com/wp-json/wp/v2/posts'; // 외부 워드프레스 웹사이트 REST API URL 입력

  fetch(url)
  .then(res => res.json())
  .then(wptalk_result => {
    let output =
      '<table><thead><tr><th>순서</th><th>최신 글 목록</th><th>작성일자</th></thead><tbody>';
    for (let i in wptalk_result) {
      id = Number(i) + 1;
      output +=
        '<tr><td>' +
        id +
        '</td><td>' +
        '<a href="' + wptalk_result[i].link + '" target="_blank" rel="noopener noreferrer">' +
        wptalk_result[i].title.rendered +
        '</a>' +
        '</td><td>' +
        wptalk_result[i].date.slice(0,10) +
        '</td></tr>';
    }
    output += '</tbody></table>';
    document.getElementById('data').innerHTML = output;
  })

</script>

◼︎ 3. HTML 코드 입력

자바스크립트를 통해 외부에서 가져온 데이터를 표시하기 위해, 웹페이지의 원하는 부분에 아래의 HTML 코드를 입력합니다.

1	<div id="data"></div>

◼︎ 4. 결과 확인

워드프레스 REST API를 통해 외부에서 실시간으로 가져 온 컨텐츠의 결과물은 아래와 같습니다.

외부 웹사이트 : 우커머스(WooCommerce) 공식 웹사이트
URL : www.woocommerce.com

위와 같이 워드프레스 REST API 기능을 활용하여, ‘글 제목(Title)’, ‘작성 일자(Date)’ 뿐만 아니라, ‘글 본문(Content)’, ‘작성자(Author)’, ‘포스트 ID’, ‘글 수정 일자’ 등 외부 워드프레스 사이트가 제공하는 다양한 데이터를 실시간(동적)으로 가져와서 간편하게 표시할 수 있습니다.