본문 바로가기
워드프레스 꿀팁

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

워드프레스톡 매거진(WP-TALK)


◼︎ 목차 업데이트 : --01


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


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


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


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


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


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




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


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


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



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


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


이 중, 워드프레스톡(WP-TALK.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 코드를 입력합니다.


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



◼︎ 4. 결과 확인


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




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





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



◼︎ 맺음말

워드프레스톡 매거진


워드프레스톡(WP-TALK.COM)이 소개해 드리는 방법들을 통해, 워드프레스를 보다 편리하게 활용하는데 도움이 되기를 바랍니다.


워드프레스(WordPress) 사이트 개선 및 각종 문제 해결, 워드프레스 핵심 원리 교육, 코딩을 통한 온라인 업무 자동화(Task Automation) 등에 대한 문의 사항이 있으시면, 카카오톡으로 연락 주세요.



◼︎ 도움이 될 만한 연관 추천 글

워드프레스톡 온라인 레슨 강좌 및 강의 교육


[참고] 워드프레스 핵심 원리 강의 레슨 및 교육 강좌 문의 (1:1개인/그룹/기업, 월) - 워드프레스톡


[참고] 워드프레스 관련 각종 문제 및 오류(에러)를 스스로 해결할 수 없을 때 추천 방법


[참고] 워드프레스(WP) 초보자가 알아두면 좋은 추천 글 모음


[참고] 워드프레스(WP) 설치에 최적화된 추천 호스팅 서비스 모음


[참고] 워드프레스(WP) 초보자들이 흔히 하는 실수 및 필수 상식


[참고] 워드프레스(WP) 플러그인을 가급적 사용하면 안 되는 이유 및 추천 방법


[추천] 워드프레스(WP) 책으로 보다 체계적으로 학습하기 - 쿠팡(웹/모바일앱)




워드프레스톡(WP-Talk)은 워드프레스(WP) 웹사이트에 대한 문제가 있을 시, 문제를 신속하게 진단하고 해결해 드립니다. 서비스에 대한 문의 사항이 있으시면, 카카오톡으로 연락 주세요.




워드프레스톡 매거진(WP-TALK)



저작권자 ⓒ 워드프레스톡 ( news.wp-talk.com ) | 무단 전재 및 재배포 금지




태그