WordPress API를 사용하여 블로그 전원

Sep 14, 2025

어떻게

지난 몇 년 동안 WordPress의 REST API 개발이 개발자를위한 새로운 문을 열었습니다. 이전에 PHP에서 WordPress-Powered Project를 작성하는 것으로 제한된 개발자는 이제 웹 사이트의 기술 스택에 어떻게 접근하는 방식에 대한 유연성과 통제를 제공합니다.

즉, 인기가 매우 유연하게 만들어진 브릴리언트 워드 프레스 제어 패널의 모든 장점을 유지할 수 있음을 의미합니다. WordPress 플러그인 고급 사용자 정의 필드와 같은 WordPress가 필요할 때만 워드 프레스와 상호 작용하는 완전히 사용자 정의 빌드 프런트가 있습니다.

자습서 파일을 다운로드하십시오

이걸로 WordPress 자습서 현재 로컬 JSON 파일을 데이터 원본으로 사용하고있는 간단한 블로그 응용 프로그램으로 WordPress REST API를 구현하는 방법을 탐색하고 인기있는 JavaScript 프레임 워크를 사용하여 단일 페이지 응용 프로그램 (SPA)으로 빌드됩니다. vue.js. ...에 이렇게하면 Vuex의 구현이 포함될 것입니다.이 구현은 그 작업 및 돌연변이 방법의 조합을 사용하여 WordPress에서 요청한 데이터를 저장하는 데 사용할 데이터를 저장할 수 있습니다.

완료되면 vue.js의 모든 반응성이있는 린이가 간단한 스파를 만들어야합니다.

더 멋진 API를 탐험하기 위해 우리 가이드를 가장 잘 살펴보십시오. JavaScript Apis. , HTML APIS. 과 Google API. ...에

01. 작업 공간 및 종속성을 설정합니다

첫 번째 일이 먼저해야합니다 프로젝트의 파일을 다운로드하십시오 귀하가 선호하는 편집기에서 열 수 있습니다.

콘솔에서 CD를 넣습니다 웹 사이트 - 템플릿 아래 명령을 실행하여 프로젝트의 노드 종속성을 설치하십시오 (노드가 설치되지 않은 경우, 그 일을 먼저하십시오 짐마자 우리는 순전히 일을 할 것입니다 src. 여기서 디렉토리가 있습니다.

npm install

02. vuex를 설치합니다

그런 다음 아래 명령을 사용하여 설치할 것입니다 vuex. Vue.js 응용 프로그램을위한 상태 관리 패턴 및 라이브러리입니다. 이는 WordPress API에서받는 데이터에 의존하는 모든 Vue 구성 요소에 대한 중앙 정보 저장소로 작동합니다. 대응에 익숙한 개발자의 경우 Vuex는 플럭스로 무겁게 영감을 받았습니다.

npm install vuex --save

03. 개발 서버를 시작합니다

콘솔에서 아래 명령을 실행하여 개발 서버를 시작합니다. 이렇게하면 VUE.JS 프로젝트가 현재 표시되고 URL에 할당하여 액세스 할 수 있습니다. 이것은 대개입니다 localhost : 8080. ...에

하나의 큰 장점이 일단 앱을 변경하고 저장하면 브라우저의 페이지가 수동으로 다시로드 할 필요없이 업데이트됩니다.

npm run dev

04. Vuex Store를 만듭니다

에 src. 디렉토리를 만듭니다 저장 그리고 IT 내에서 새 파일이 호출되었습니다 index.js. ...에 이는 vuex 저장소가 정의 될 곳입니다. 우리가 얻기 전에 우리는 처음에는 vue.js 앱이 존재를 알고 있는지 확인해야합니다. 이렇게하려면 열어줍니다 main.js. 상점을 가져 와서 아래의 스 니펫에서와 같이 종속성으로 포함하십시오.

 'VUE'에서 VUE 가져 오기
'./app'에서 앱 가져 오기 '
'./Router'에서 라우터 가져 오기
'./store'에서 저장소 가져 오기
vue.config.productiontip = false.
/ * eslint-no-new * /
새로운 vue ({
  엘 : '#app',
  라우터,
  저장,
  템플릿 : '& lt; app / gt;',
  구성 요소 : {앱}
})

05. Store Scaffolding 및 Axios 설치를 만듭니다

Ajax 요청이 Store가 WordPress API로 만들어 낼 수 있도록 돕기 위해 Promise 기반 HTTP 클라이언트 인 Axios를 설치합니다. 이렇게하려면 별도의 콘솔 창을 열고 웹 사이트 - 템플릿 디렉토리 및 실행 NPM 설치 axios - 저장 ...에

그런 다음 새로운 빈 Vuex 저장소 개체를 인스턴스화하여 저장소를 발판으로 시작하겠습니다. 현재는 아무 것도하지는 않지만 적어도 VUE는 그것을 알고 있어야합니다.

 'Axios'에서 Axios 가져 오기 '
'VUE'에서 VUE 가져 오기
'Vuex'에서 Vuex 가져 오기 '
Vue.Use (Vuex)
const store = new vuex.store ({
  주 : {},
  조치 : {},
  돌연변이 : {}
})
기본 저장소 내보내기

06. 게시물을 만듭니다

Vuex에서 State 객체는 응용 프로그램 정보를 보유하고 있으며이 경우 WordPress Post 데이터가 API를 사용하여 잡을 수 있습니다. 이 객체에서 게시물이라는 새 속성을 만들고 값을 null 값 할당합니다.

 상태 : {
  게시물 : null.
}

07. GetPosts 조치를 만듭니다

VUEX에서는 비동기 요청이 처리되는 주요 방법입니다. 이들은 일반적으로 저장소에 정의 된 메소드이며 앱에서 요구하는대로 전달할 수 있습니다.

빈 행위 Object, Posts 상태가 여전히 널 (NULL) 인 경우 AXIOS는 WordPress API에 Ajax 요청을 수행하고 게시물 목록을 반환하는 데 사용됩니다. 긍정적 인 반응을 받으면 약속을 해결하고 게시물을 해결할 것입니다. 저장소 돌연 변이.

 getPosts : 함수 (컨텍스트) {
  새 약속 반환 ((해결, 거부) = & gt; {
  if (context.state.posts) {
  결의()
  }
  else {
  axios.get ( 'http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / POSTS ')
  .then ((응답) = & gt; {
  context.commit ( 'storeposts',
  response.data)
  결의()
  }). catch ((에러) = & gt; {
  거부 (오류);
  });
  }
  })
}

08. Storeposts 돌연변이 생성

Vuex가 도입 한 또 다른 개념은 일반적으로 상점에서 정의 된 메서드 인 돌연변이입니다. 돌연변이는 디버깅 할 때 주 상태를 쉽게 쉽게 추적 할 수있는 VUEX 저장소에서 상태를 변경하는 유일한 방법입니다.

빈 돌연변이 객체, 그를 정의합시다 저장소 이전 단계에서 참조하는 방법 및 돌연변이가 페이로드로받는 데이터가있는 모든 데이터가있는 상태 오브젝트의 POST 속성을 덮어 씁니다.

 storeposts (상태, 응답) {
   state.posts = 응답}

09. GetPosts를 트리거합니다

WordPress API에서 게시물을 잡고 Vuex 상태로 커밋하는 작업 및 돌연변이 메소드를 만들었지 만 이제는 실제로이 프로세스를 어딘가에서 트리거해야합니다. 최상위 Vue.js 구성 요소에서 앱 , 아래에 스 니펫을 추가하십시오.

만들어진() vue 구성 요소가로드에서 생성되는 즉시 코드를 트리거하는 라이프 사이클 훅이며, 글로벌의 사용은 $ Store. 변수를 사용하면 Vuex Store의 내용에 액세스하여 파견 할 수 있습니다. GetPosts 7 단계에서의 조치.

 생성 () {
   이. $ store.dispatch ( 'getPosts')}

10. 속성 경로를 업데이트합니다

The Vue DevTools extension gives you the power to debug your Vue.js app — VUE DevTools 확장자는 Vue.js 앱을 디버깅 할 수있는 권한을 제공합니다.

크롬이나 파이어 폭스에서 일하고 있고 Vue.js DevTools 확장자 (그렇지 않다면, 당신이 매우 유용 할 때 당신이하는 것이 좋습니다.) 이제로드 된 WordPress 게시물을 볼 수 있어야합니다. 기본 상태 아래의 vuex. 탭.

앱으로 돌아 가기, /components/posts/posts.vue. 템플리트 HTML 이이 데이터를 가리켜 야하므로 일부 속성 경로를 조정하겠습니다.

 'post.title'을 'post.title.rendered'로 전환하십시오.
 'post.preview'를 'post.acf.preview'로 전환하십시오.
 'post.acf.header_image_small'을 'Post.PreviewImage'를 전환하십시오

11. v-for 루프를 업데이트합니다

게시물 구성 요소에는 사용중인 VUE.JS 지침이 있습니다. v-for. ...에 이 루프는 모든 게시물을 통해 그리고 각각에 대해 게시 요소의 인스턴스를 인쇄하여 목록에 표시합니다.

이 지침에 통과 된 경로를 업데이트해야합니다. 여전히 로컬 더미 테스트 데이터를 사용하고 있으므로 Vuex Store에서 저장된 게시물을 가리 키도록 아래의 스 니펫으로 V-for Directive를 업데이트하십시오.

 V-FOR = "이 (가) $ STORE.STATE.POSTS"

12. 일부 가사를하십시오

WordPress Posts 목록을 표시해야합니다. 더 이상 로컬 게시물 데이터를 사용하지 않으므로 삭제하겠습니다. src / data. ...에 그런 다음 게시물 구성 요소에서 그를 제거하십시오 게시물 : PostData.Data. 구성 요소의 로컬 데이터 저장소의 속성과 PostData 가져 오기.

13. 우편 작성자를 수정하십시오

작성자가 숫자로 표시되는 각 게시물에 대해 알 수 있습니다. 이것은 WordPress API가 이름이 아닌 작성자 ID를 반환하기 때문입니다. 전체 저자 정보에 대한 WordPress를 쿼리하려면이 ID를 사용해야합니다. 우리의 게시물 정보와 함께 Vuex Store에서 이것을 보관할 장소를 만들어서 시작합시다. 저장소 / index.js. ...에

 상태 : {
  저자 : null,
  게시물 : null}

14. Getauthors 조치를 만듭니다

게시물과 마찬가지로 우리는 액션을 만들 것입니다 /store/index.js. WordPress API를 쿼리하도록 AJAX 요청을 트리거합니다. 성공적인 응답이 수신되면 약속이 해결되고 트리거됩니다. StoreAuthors. 돌연변이, 우리가 다음을 만들 것입니다.

 getAuthors : 함수 (컨텍스트) {
  axios.get ( 'http://lukeharrison.net/
  WebDesigner / WP-JSON / WP / V2 / 사용자의)
  .then (기능 (resoces) {
  context.commit ( 'StoreAuthors',
  response.data)
  })
}

15. StoreAuthors 돌연변이를 만듭니다

Vuex 저장소의 돌연변이 객체 내에서 StoreAuthors. 아래 스 니펫을 사용하는 돌연변이. 곁에 저장소 8 단계 에서이 페이로드가 전달되어 가게의 상태에서 저자 속성의 가치로 설정합니다.

 StoreAuthors (상태, 응답) {
  state.authors = 응답}

16.로드에서 Getauthors를 유발합니다

앱이로드되기 시작하자마자 WordPress에서 작성자 정보를 가져와야합니다. 최상위 구성 요소를 수정 해 봅시다 앱 다시 그리고 그를 파견하십시오 Getauthors. 같은 행동 만들어진() 라이프 사이클 후크로서 GetPosts 동작.

 생성 () {
  이. $ store.dispatch ( 'getauthors')
   이. $ store.dispatch ( 'getPosts')}

17. GetUsername 메서드를 만듭니다

이제 WordPress가로드에 대한 WordPress를 쿼리합니다. 우리가해야 할 일은 우리가 작성자 ID를 전달하고 리턴으로 이름을 가져올 수있는 메서드를 정의하는 것입니다. 아래의 스 니펫을 기존의 메서드 구성 요소의 메서드 객체에 복사합니다. getSinglePost. 방법.

 GetUserName : 함수 (사용자 ID) {
  var username = '알 수 없음';
  이. $ store.state.
  authors.Filter (함수 (사용자) {
  if (user.id === userid) {
  username = user.name.name
  }
  });
  사용자 이름을 반환합니다.
}

18. GetUsername 메서드를 호출합니다

이제 우리는 단지 전화 할 필요가 있습니다 GetUsername ...에 여전히 게시물 구성 요소의 템플릿에서 작성자 속성의 참조를 바꾸기 Post.Author. 그래서 그것은 아래의 스 니펫을 반영합니다. 이제 저자 이름이 각 게시물에 대해 올바르게 표시되어야합니다.

 : 작성자 = "getUsername (post.author)"

19. 블로그 적재

우리가 게시물 데이터를 비동기 적으로로드하고 있으므로 응용 프로그램이 비어있는 위치가 완료되기 전에 순간이 있습니다. 이를 위해 블로그가 완전히 채워질 때까지 활성화 된로드 상태를 구현합니다. 게시물 구성 요소에서 개방 직후에 스 니펫을 붙여 넣습니다. & lt; script & gt; 우리가 사용할 아이콘을 가져 오는 태그.

 '@ / 구성 요소 / 아이콘 / 아이콘'에서 가져 오기 아이콘
'./../../에서로드 가져 오기
자산 / img / loading.svg '

20. 구성 요소 목록에 아이콘을 추가하십시오

다음으로, 게시물 내에 여전히 구성 요소 개체에 아이콘에 대한 참조를 추가하십시오. 이렇게하면 POSTS 구성 요소가 최근 수입 된 아이콘 구성 요소를 알고 있습니다.

 구성 요소 : {
   상,
   게시물}

21.로드 요소를 만듭니다

이제 우리는 페이지에 표시되므로 게시물 템플릿에로드 요소를 추가해야합니다. 첫째, 두 번째 DIV 주위의 스 니펫의 두 번째 DIV를 V-If. 로드가 완료 될 때까지 게시물이 표시되지 않도록 지시문.

그런 다음 첫 번째 DIV를 위의 스 니펫에서 추가하십시오. 여기에는로드 아이콘이 포함됩니다 V-If. 지시문은 앱이 완전히로드되는 지점까지만 볼 수 있음을 의미합니다. 완료되면 이제로드가 구현되어야합니다.

& lt; div v-if = "! $ store.state.posts" class = "U-Align-Center"& gt; & lt; 아이콘 클래스 = "C-icon-loading" = "로딩"& gt; & lt; / icon & gt; & lt; / div & gt; & lt; div v-if = "이것은 $ store.state.posts"& gt; [...] & lt; / div & gt;

22. 단일 게시물 속성 경로를 업데이트합니다

남은 유일한 것은 Vuex 저장소의 WordPress Post 데이터를 사용하도록 단일 게시물이 올바르게 설정되어 있는지 확인하는 것입니다. 첫 번째 단계는 게시물 구성 요소 템플릿의 속성 경로를 업데이트하는 것입니다. V-IF = "this.type === 'single'" DIV는 단일 게시물의 디스플레이를 처리합니다.

 'singlepost.title'스위치를 '싱글 포스트] 렌더링'
 '싱글 포스트 .Author'를 'getUsername (inetionpost.author)'로 전환하십시오. '
 '싱글 포스트 .Fullimage'를 'singlepost.acf.header_image'로 전환하십시오.
 '싱글 포스트 .Content'를 '싱글 포스트로 전환하십시오. content.rendered '

23. Refactor GetSinglePost 방법

우리는 또한 게시물 구성 요소를 리팩토링해야합니다 getSinglePost. 방법. 그것은 당신을 파견하는 약속을 반환해야합니다 GetPosts 동작. 후속 조치에 그때 기능으로 URL에서 전달 된 하나의 슬러그와 일치하는 슬러그가있는 항목에 대한 Vuex Store의 게시물을 검색합니다. 발견되면 데이터를 구성 요소의 로컬 상태로 복사하고 약속을 해결합니다. 발견되지 않으면 약속이 거부됩니다.

 getSinglePost : 함수 () {
   새로운 약속 반품
   ((해결, 거부) = & gt; {
  이. $ store.dispatch ( 'getposts')
  .then ((() = {
  var foundpost = false;
  이. $ store.state.posts.
  필터 ((POST) = {
  if (post.slug ===)
  이. $ route.params.slug) {
  이것은 템플릿 = 게시물;
  foundpost = true; }
  });
  Foundpost? 해결 () : 거부 ();
  })
  })
}

24. 리팩터 게시물 () 후크

다음으로, 우리는 리팩터를 필요로합니다 만들어진() Lifecycle hock posts 구성 요소. 우리가 하나의 게시물을 표시 해야하는 경우 후크는 getSinglePost. 이전 단계의 방법 및 그 약속이 거부되면 사용자를 404 '페이지를 찾을 수 없음'페이지로 보내십시오. 이는 사용자가 URL에 존재하지 않는 게시물 슬러그를 입력하는 시나리오를 설명하는 것입니다.

 생성 () {
  if (this.type === 'single') {
  getSinglePost (). 그런 다음 (null, () = {{
  이. $ router.push ({name : 'pageNotFound'})
  });
  }
}

25. V-IF 지시문을 추가하십시오

마지막 단계는 아래의 스 니펫을 POST 구성 요소에 추가하는 것입니다. V-IF = "this.type === 'single'" 템플릿의 div. 이 지시문은 로컬 게시물 데이터가 이용 가능한 경우에만 게시물이 getSinglePost. 메소드가 채워집니다. 이는 구성 요소를 조기에 렌더링하고 오류를 일으키는 것으로부터 VUE를 멈추는 것입니다.

 V-IF = "싱글 포스트"

26. 앱을 만드십시오

이제는 모든 일을 일하고 콘솔에서 취소 NPM Run Dev. 명령 또는 새 콘솔을 열고 아래 명령을 실행하여 자신의 서버에 업로드 할 프로덕션 준비 버전을 생성하십시오. 이것은 그 안에 나타납니다 배단 예배 규칙서.

 NPM RUN 빌드

이 기사는 웹 디자이너 인 Creative Web Design Magazine - 전문 자습서, 최첨단 트렌드 및 무료 리소스를 제공하는 웹 디자이너의 문제 268에 등장했습니다. 웹 디자이너를 구독하십시오.

자세히보기 :

32 최고의 무료 Wordpress 테마
10 상단 WordPress 자원
그만큼 최고의 무료 블로깅 플랫폼