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

/ REST-API  


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

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

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

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

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

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



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

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

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

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


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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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 코드 입력

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

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

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


◼︎ 4. 결과 확인

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

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


  • 외부 웹사이트 : 우커머스(WooCommerce) 공식 웹사이트

  • URL : www.woocommerce.com


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

◼︎ 맺음말

워드프레스톡 매거진

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

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


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

워드프레스 애널리틱스(WordPress Analytics)

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


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

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