WordPress REST API: 차세대 CMS 기능

웹의 1/4 이상이 WordPress에서 실행됩니다. 10년 이상 사용되었다는 점을 고려하면 상당히 놀라운 업적입니다.

WordPress의 비밀 소스는 무엇입니까? 간편함 – 콘텐츠를 관리하는 가장 간단하면서도 가장 확장 가능한 방법입니다. 하지만 한동안 워드프레스는 뒤쳐진 듯했다.

웹이 몰입형 대화형 경험을 만들기 위해 JavaScript에 점점 더 의존함에 따라 WordPress는 사용자와 개발자가 콘텐츠와 상호 작용할 수 있는 새로운 방법을 제공해야 한다는 것이 점점 더 명확해졌습니다.

WordPress가 PHP를 기반으로 구축되었으며 앞으로도 계속 구축될 예정이지만 WP REST API는 PHP WordPress 코어의 유산과 JavaScript 웹 애플리케이션 및 기본 모바일의 잠재력과 힘 사이에 다리를 만들려는 시도입니다. 및 데스크탑 애플리케이션.

WordPress REST API는 WordPress 웹사이트의 콘텐츠를 쉽게 사용할 수 있는 API로 가져와서 WordPress가 웹에 콘텐츠를 게시하기 위한 저장 및 검색 시스템 역할을 할 수 있도록 합니다.

REST API를 WordPress로 가져오기

WP REST API가 아무데도 나타나지 않았다고 생각한다면 오산입니다.

WordPress에 완전히 새로운 기능을 추가하는 것은 간단한 작업이 아닙니다. 오픈 소스 소프트웨어의 특성상 WordPress 개발은 커뮤니티 전체에 의존하여 진행됩니다.

API 개발은 몇 년 전에 개발자가 통제된 환경에서 프로젝트를 실험하고 프로젝트에 기여할 수 있도록 하는 별도의 기능 플러그인으로 시작되었습니다.

많은 반복과 개선, 완전히 별개의 두 버전을 통해 REST API의 기여자는 수천만 웹 사이트의 데이터에 대한 개방형 API 액세스를 제공하는 이점과 엄청난 결과를 테스트하고 평가해야 했습니다.

코드명 "Clifford"인 WordPress 4.4는 프로젝트의 초기 인프라를 WordPress 코어로 가져왔지만 끝점은 WordPress 4.7, "Vaughan"이 나올 때까지 나타나지 않았습니다.

본질적으로 이를 통해 개발자는 데이터 자체를 실제로 노출하지 않고도 API를 구동하는 기능을 테스트할 수 있습니다.

이제 초기 콘텐츠 엔드포인트가 모든 최신 버전의 WordPress에 병합되었으므로 플러그인 개발자와 테마 작성자는 기존 wp-admin 환경 외부에서 데이터를 검색, 확인 및 변경할 수 있는 흥미롭고 새로운 방법을 실험할 수 있습니다.

약어 분리: HTTP에서 JSON REST API로

WP REST API의 중요성을 이해하려면 온라인에서 데이터를 공유하는 방법과 인터넷이 어디로 향할 것인지에 대한 기초를 이해하는 것이 도움이 될 수 있습니다.

HTTP는 우리가 매일 처리하는 대부분의 웹 트래픽의 기반입니다. 브라우저에 URL을 입력하면 요청 을 하는 것입니다. 해당 서버는 귀하의 요청을 수신하고 응답 을 제공합니다. 이 거래는 우리가 온라인에서 하는 거의 모든 일의 기초입니다. 브라우저는 요청을 하고 서버는 응답을 제공합니다.

우리가 만드는 요청 유형은 우리가 받는 응답 유형에 영향을 줄 수 있습니다. 대부분의 경우 우리는 간단한 GET 요청을 합니다. "Hey Google, 방문 페이지를 가져오세요." Google에서 답변을 제공합니다.

웹이 보다 대화식으로 바뀌면서 PUT , POST 및 DELETE 를 포함한 다른 HTTP 요청을 활용하기 시작했습니다.

예를 들어, 우리는 웹사이트의 검색창을 채웁니다. "Hey Google, 내 이메일 주소와 비밀번호를 로그인 페이지에 게시해 주세요." Google은 새로운 세션을 시작하고 다른 응답을 제공합니다.

이 프로토콜은 WordPress 사이트를 구축하는 기본 기반입니다.

양식과 PHP를 사용하여 데이터베이스에 데이터를 가져오고 POST합니다. 대중적인 의견과 달리 WordPress의 기본 기반은 조만간 변경되지 않을 것입니다. WordPress가 현재 하고 있는 일은 개발자에게 RESTful API를 통해 WordPress 데이터와 상호 작용할 수 있는 새로운 방법을 제공하는 것입니다.

대표 상태 이전(REST)

WordPress 개발자는 Shortcode API 및 Options API와 같은 일반적인 API에 익숙해야 합니다. 이러한 API는 WordPress를 구성하는 구성 요소의 기능을 정의하므로 테마 및 플러그인 작성자는 WordPress의 핵심 기능을 확장할 수 있습니다. 그러나 WP REST API는 약간 다릅니다.

REST 또는 RESTful, API는 외부 소스의 HTTP 요청에 데이터를 안전하게 노출하는 것입니다. 또한 이러한 요청에 응답하기 위한 공통 아키텍처 및 프로토콜 집합을 설정하는 것입니다. 이러한 유형의 서비스 이면에 더 발전된 아이디어와 원칙이 있지만 이러한 내용은 이 기사의 범위를 벗어납니다.

특히 WordPress 4.7 이후에 WP REST API가 존재한다는 것은 게시물, 페이지, 댓글 및 모든 공개 게시물 메타를 포함한 사이트의 모든 콘텐츠에 이제 원시 데이터로 직접 액세스할 수 있음을 의미합니다. 또한 원하는 경우 모바일 또는 데스크톱 앱을 통해 기존 wp-admin 외부에서 이 데이터를 변경할 수 있음을 의미합니다.

데이터를 단순히 데이터베이스의 행으로 생각하는 대신 JSON 형식으로 직렬화된 액세스를 가질 수 있습니다.

JSON - XML은 어떻게 되었나요?

WordPress 수의사는 사이트 간에 콘텐츠를 공유하는 일반적인 형식인 XML에 대한 많은 경험을 가지고 있습니다.

XML과 유사하게 JSON은 단순히 데이터를 특정 구문으로 묶어서 쉽게 전송할 수 있는 메커니즘입니다. JSON은 실제로 문자열이며, 키-값 쌍 세트에 데이터를 저장하는 JavaScript 객체의 텍스트 표현입니다. WordPress 게시물의 일반적인 JSON 표현은 다음과 같습니다.

 { “id”: 1, “title”: { “rendered”: “Hello World” }, “content”: { “rendered”: “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” } }

(필요한 경우 JSON 포맷터 도구를 사용하여 JSON 응답을 예쁘게 만들 수 있습니다.)

WP REST API를 통한 전체 JSON 응답에는 메타데이터를 비롯한 게시물에 대한 추가 정보가 포함됩니다. 이 데이터를 JSON 형식으로 편리하게 묶음으로써 새롭고 흥미로운 방식으로 WordPress 콘텐츠와 상호 작용할 수 있습니다.

JSON이 JavaScript와 가장 잘 짝을 이루는 것은 우연이 아닙니다. 더 많은 WordPress 개발자가 "JavaScript를 자세히 배우기" 시작하면서 WordPress를 백엔드로 점점 더 많이 사용하게 될 것입니다.

데이터를 찾는 방법: 끝점으로 가는 경로 따라가기

REST API를 통해 모든 사이트 데이터에 액세스하는 것은 URL을 작성하는 것만큼 간단합니다.

버전 4.7 이상을 실행하는 WordPress 사이트의 경우 사이트 URL 끝에 /wp-json/wp/v2 (예: http://example.com/wp-json/wp/v2 ) 문자열을 추가합니다. 해당 URL을 브라우저에 입력하고 무엇이 나타나는지 확인하십시오.

JSON을 정리하는 브라우저 확장을 설치하지 않는 한 결과는 아마도 데이터가 엉망이 된 것처럼 보일 것입니다. 데이터의 큰 혼란은 JSON 형식의 특정 WordPress 사이트의 콘텐츠 및 메타 정보입니다.

해당 콘텐츠를 로드하여 경로 를 정의하고 브라우저에 GET을 요청한 것입니다.

경로는 특정 메서드에 매핑되는 URL입니다. WordPress 코어는 해당 경로를 읽습니다. 슬래시 '/'는 따라야 하는 특정 경로 또는 매개변수를 나타냅니다.

경로는 끝점 에서 끝납니다. 여기서 워드프레스 코어 깊숙한 곳의 기능은 제공할 데이터와 제공된 데이터로 수행할 작업에 대한 결정을 내릴 수 있습니다.

엔드포인트의 예는 '/wp-json/wp/v2/posts/1'일 수 있으며 여기에 '/posts' 및 '/1' 경로가 추가되었습니다. 이 특정 끝점은 사이트에 데이터를 살펴보고 게시물을 가져오고 ID가 1인 게시물을 가져오도록 지시합니다.

REST API를 매우 유용하게 만드는 것은 확장 가능하다는 사실입니다. 즉, 웹 사이트 내의 모든 데이터를 가져와 끝점으로 추가할 수 있습니다. 대부분의 핵심 WordPress 기능은 현재 지원되거나 곧 지원될 예정입니다.

그러나 테마 및 플러그인 개발자는 사용자 지정 콘텐츠 및 설정을 끝점으로 추가하기 시작하여 사용자가 새로운 방식으로 웹 사이트와 상호 작용할 수 있습니다.

현재 WordPress 사이트에서 사용할 수 있는 엔드포인트가 궁금하다면 Postman과 같은 브라우저 애플리케이션이 API 탐색을 위한 GUI를 제공합니다.

헤더 및 인증

브라우저에 URL 끝점을 입력하는 것은 간단해 보이지만 실제로는 요청과 함께 기본 헤더 집합이 포함되어 있습니다. 차례로 헤더 세트도 응답과 함께 다시 전송됩니다. 이 헤더에는 유용한 정보가 많이 포함되어 있지만 목적에 가장 중요한 것은 요청 유형 및 인증 여부와 관련이 있습니다.

브라우저의 "개발자 도구"로 이동하면 HTML 파일, CSS 스타일시트, 이미지 등을 포함하여 브라우저 창에 로드되는 모든 자산에 대한 HTTP 헤더를 검사할 수 있습니다.

고려해야 할 첫 번째 헤더는 이전에 배운 HTTP 요청에 직접 해당하는 Request Method 입니다. 여기에서 단순히 페이지를 보고 있는 경우 요청 방법으로 GET 을 볼 가능성이 가장 큽니다.

REST API를 호출하는 애플리케이션은 헤더의 요청 메소드를 POST로 변경하도록 선택할 수 있습니다.

POST 메서드는 웹사이트에 새 데이터를 입력하거나 WordPress 데이터베이스의 기존 데이터를 변경하도록 지시합니다. POST 방법을 통해 정보를 보내면 다른 응용 프로그램이 wp-admin에 로그인하지 않고도 데이터를 변경할 수 있습니다.

그러나 인증 을 위한 적절한 자격 증명을 제공하는 헤더도 포함하지 않는 한 웹사이트에서 이를 거부하므로 걱정할 필요가 없습니다.

참고: REST API에 대한 호출을 인증하는 방법은 아직 확정되지 않았으므로 REST API를 사용하여 데이터를 추가하거나 변경하려는 개발자가 인증을 시작하는 데 가장 큰 장벽이 됩니다.

현재로서는 REST API 뒤에 있는 개발자의 플러그인을 포함하여 사용 가능한 옵션이 있습니다. 인증을 둘러싼 표준 절차가 핵심으로 진행됨에 따라 WP REST API의 광범위한 사용을 위한 마지막 장애물이 명확해질 것입니다.

WP REST API 샘플 애플리케이션

WP REST API를 강력하게 만드는 것은 일관성이 있기 때문에 WordPress 4.7 이상을 실행하는 모든 사이트에서 동일한 기본 결과를 기대할 수 있습니다. 그러나 WordPress는 분산 API이므로 모든 데이터를 가져올 수 있는 곳이 한 곳만 있는 것은 아닙니다.

WordPress를 실행하는 각 웹사이트는 고유한 사용자와 인증을 가진 고유한 애플리케이션입니다. REST API를 통해 콘텐츠를 편집하려면 고유한 권한 부여 기술이 필요할 수 있지만 실제로 대부분의 WordPress 실행 블로그 게시물에 매우 쉽게 액세스할 수 있습니다.

시연하기 위해, 우리는 물론 모두 WordPress에서 실행되는 일부 인기 있는 WordPress 관련 블로그에서 최신 게시물의 발췌문을 로드하는 빠른 codepen 데모를 만들 것입니다. 그 동안 검색 양식을 포함하여 실제로 이러한 모든 사이트를 한 번에 검색하고 각 사이트에서 관련 기사를 가져올 수 있습니다.

마지막으로 원본 웹사이트에서 전체 기사 텍스트를 읽을 수 있는 링크를 포함할 것입니다.

1단계: 최근 게시물 가져오기

빠른 Vue 인스턴스를 설정하고 요소에 마운트하는 것으로 시작하겠습니다. 또한 나중에 추가할 양식 요소에 대한 그리드와 기본 스타일을 가질 수 있도록 Bootstrap을 포함할 것입니다.

데이터를 정의할 때 사이트 이름(기본 응답에 포함되지 않음), URL 및 일단 얻은 게시물을 저장할 장소가 필요합니다. 다음은 예입니다.

 { “name”: “wordpress.org”, “url”: “https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”, “posts”: [] }

URL 끝에 per_page 라는 첫 번째 매개변수도 포함되었음을 알 수 있습니다. 일반적으로 WP REST API는 일반 WP_Query 루프를 페이지 매김하는 것과 동일한 규칙에 따라 결과를 페이지 매김합니다. 쿼리를 처음 세 개의 게시물로 제한합니다.

다음으로, 소스 목록을 순환하고 vue-resource로 결과를 가져오고 각 소스의 빈 posts 배열을 결과로 채우는 loadPosts() 메서드를 정의합니다.

 loadPosts : function(){ var self = this; self.sources.forEach(function(source, index){ self.$delete(source, 'posts'); // Get API with vue-resource self.$http.get(source.url).then(function(response) { self.$set(source, 'posts', response.data); }, function(response) { console.log('Error'); }); }); }

Vue 인스턴스가 성공적으로 마운트되면 loadPosts() 에 대한 초기 호출도 포함합니다.

 mounted : function(){ this.$nextTick(function(){ // Load posts on initial page load this.loadPosts(); }); }

loadPosts() 를 별도의 메서드로 유지하는 것은 API를 여러 번 호출하기 시작할 때 앞으로 유용할 것입니다. HTML에서는 Vue의 간단한 목록 렌더링 지시문과 템플릿 구문을 사용하여 모든 게시물을 출력합니다.

작동 데모는 내장형 펜을 참조하십시오.

CodePen에서 Brian Coords(@bacoords)의 Pen WP REST API 검색 예제(1단계)를 참조하십시오.

2단계: 결과 필터링

사이드바를 추가하고 다양한 소스를 표시하거나 숨기는 필터를 만들어 보겠습니다. 이렇게 하기 위해 우리는 sources 객체에 새로운 속성을 추가합니다. 이 속성은 우리가 이름을 붙일 부울 입니다 .

필터를 추가하는 동안 날짜도 제대로 표시할 수 있도록 Vue 필터를 생성해 보겠습니다. WordPress는 게시물의 날짜와 시간을 Unix 타임스탬프로 저장합니다.

우리는 타사 라이브러리인 Moment.js를 사용하여 날짜를 더 읽기 쉬운 형식으로 변환합니다.

 filters: { // Using Moment.js to convert post date to a readable format prettyDate: function(value){ // Return if date is empty if(!value) return ''; // Convert date to Moment.js var date = moment.utc(value); // Return formatted date return date.format("MMM DD, YYYY,"); } },

작동 데모는 내장 펜을 참조하십시오.

CodePen에서 Brian Coords(@bacoords)의 Pen WP REST API 검색 예제(1단계)를 참조하십시오.

최종 단계: 검색어

여기에서 API 요청에 새 매개변수를 추가합니다. 이미 각 사이트에서 얻을 수 있는 결과 수를 제한하기 위해 per_page=3 매개변수를 추가했습니다. 검색창에 글이 있으면 추가 매개변수로 추가합니다.

이렇게 하면 마치 해당 웹사이트의 검색창을 쿼리하는 것처럼 각 사이트의 기본 제공 검색 기능을 사용할 수 있습니다.

검색 표시줄을 추가하고 Vue의 v-model 지시문을 사용하여 변수에 연결합니다.

모든 API를 즉시 호출하는 대신 사용자가 입력을 시작할 때 버튼을 추가하고 이벤트를 양식 제출에 바인딩합니다. 그런 다음 검색 매개변수(물론 인코딩된 URL)를 URL에 추가하는 메서드를 Vue 인스턴스에 추가합니다.

 generateUrl : function(source){ var self = this; // Add search parameters. if(self.searchQuery){ return source.url + '&search=' + encodeURI(self.searchQuery); }else{ return source.url; } }

작동 데모는 내장 펜을 참조하십시오.

CodePen에서 Brian Coords(@bacoords)의 Pen WP REST API 검색 예제(1단계)를 참조하십시오.

이것은 WP REST API의 간단한 예이지만 WordPress 자체 내에서 이와 같은 잠재적인 응용 프로그램을 상상할 수 있습니다. 예를 들어, 이미 'WordPress News' 메타박스가 있습니다.

이 데모를 WordPress 플러그인으로 쉽게 변환하여 WordPress 대시보드에 표시할 수 있습니다. 이제 최고의 WordPress 및 웹 디자인 튜토리얼 사이트에서 도움말을 검색하는 기능을 자체 웹사이트에서 바로 통합했습니다.

REST API의 미래 가능성

위의 예는 WP REST API 기능의 표면을 긁는 것일 뿐이지만 데이터를 사용하기 시작할 때 나타나기 시작하는 가능성의 일부를 전달해야 합니다. 웹사이트 자체에서 사용자 경험을 향상시키는 데 사용하든 외부 소스에서 데이터를 수집하고 조작하는 데 사용하든 강력한 도구입니다.

일부 업계 전문가들은 귀하의 콘텐츠가 '스크레이핑'되어 다른 곳에 표시될 가능성에 대해 우려를 표명했지만 이 기능은 RSS 피드와 유사하며 사이트 관리자가 데이터가 무엇인지 명확하게 제어하는 ​​것이 중요하다는 점을 기억하는 것이 중요합니다. 공개되지 않습니다.

WP REST API가 WordPress의 구조에 더 깊이 뿌리내리게 되면서 우리는 아마 깨닫지도 못한 채 그 효과를 보기 시작할 것입니다. 예는 단순한 것(Chris Coyier's Quotes on Design)에서 복잡한 단일 페이지 애플리케이션(Guggenheim 사이트)에 이르기까지 다양합니다.

WP REST API의 또 다른 인기 있는 사용 사례는 모바일 애플리케이션 개발입니다.

REST API를 통해 콘텐츠에 액세스할 수 있기 때문에 개발자는 iOS 및 Android용 기본 앱을 만들고 중복 데이터 소스를 만들 필요가 없습니다.

사용자가 이러한 모바일 앱과 상호 작용할 때 개발자가 이를 지원하기 위해 복잡한 인프라를 만들 필요 없이 원래 웹 사이트의 데이터를 검색하고 직접 변환할 수 있습니다.

그러나 REST API의 이러한 방문자 대면 애플리케이션은 시작에 불과합니다. 실제 의미는 훨씬 더 깊기 때문입니다. 핵심 개발 팀의 목표 중 하나는 wp-admin 인터페이스 전체에서 사용을 시작하는 것입니다.

향후 WordPress 업데이트를 통해 admin-ajax가 API로 대체되는 것을 보기 시작하여 메뉴 편집 또는 게시물 게시와 같은 기본 기능의 속도가 향상되기를 바랍니다.

이는 WordPress 초보자를 위한 사용자 친화적인 시작점으로 사용자 지정 프로그램 및 편집기에 대한 WordPress의 증가된 초점과 잠재적으로 함께 갈 수 있습니다.

WP REST API는 있는 그대로 매우 유용하지만 아직 해야 할 일이 더 있습니다. API가 완전하지 않습니다. 아직 추가할 기능과 끝점이 더 있습니다.

결국 방문하지 않고도 WordPress 사이트와 상호 작용할 수 있습니다. 많은 서비스가 이제 WordPress와 상호 작용하기 위해 사용자 지정 API를 사용하지만 하나의 표준 WordPress REST API로 이동하면 더 많은 사이트와 서비스가 동일한 언어로 상호 연결될 수 있습니다.

WordPress는 블로거가 연결하고 생각과 아이디어를 공유할 수 있는 블로깅 플랫폼으로 시작되었습니다. WordPress REST API의 개발과 함께 우리는 무대 뒤에서 새로운 수준의 연결 및 공유를 보기 시작할 것입니다. 이를 통해 사용자는 이전에는 고려하지 않은 방식으로 생각과 아이디어를 구축할 수 있으며 WordPress와 사용자를 완전히 새로운 영역으로 안내합니다.