대단합니다. 히로라고 합니다.

이번에는 wp-rest-api와 react.js를 사용하여 여러 가지 시도했습니다. 김에 css-modules에도 처음 시도해 보았습니다.
css-modules에 대해서는 다른 기사에서 썼습니다.

이번에 만든 물건은 이 github의 저장소 에 세트가 있으므로 좋으면 들여다 보세요.

이번 목표

wp-rest-api 사용법을 철저히 이해합니다.

디자인을 단순화하기 위해 material-ui 사용

라는 이유로 조속히 만든 것을 소개합니다!

블로그 사이트의 기사를 wp-rest-api 경유로 취득해 표시하는 무언가를 만들었다

진짜는 window size 400px 정도로 해 보고 받고 싶습니다만, 일단 이런 느낌의 페이지를 만들었습니다.

wp-rest-api 정보

우선 wp-rest-api를 사용하기 위해 기사를 끌어오는 원래 wordpress에 다음 플러그인을 설치합니다.
- WordPress REST API (버전 2)

플러그인을 설치하고 플러그인을 활성화하면 wordpress 측 설정이 완료됩니다.

wp-rest-api의 기본 사용법 정보

container/Main.jsx

import request from 'superagent';
const url = {
  req: 'http://ここにドメインを入れる/wp-json/wp/v2/posts'
}
...
receive() {
    request
    .get(url.req) //リクエストするurl
    .end((err, res) => {
      if(err) {
        console.log(err)
      } else {
        this.setState({
          body: res.body,
          loader: false
        })
      }
    });
  }
...

하는 것은 굉장히 심플. 'http://ここにドメインを入れる/wp-json/wp/v2/posts' 이것이 요구하는 도메인의 포맷이 됩니다. 이번에는 superagent를 사용하고 있습니다 만, ajax에서도 fetch api로 axios로 무엇이든 OK입니다.

또한 this.setState() 에서 응답의 body에 있는 데이터를 돌진하여 처리하고 있습니다.

개별 기사 페이지에 대해서

기사 일람 페이지와 하고 있는 것은 변함이 없습니다만, 차이로서는 썸네일 화상을 로드하고 있습니다.
썸네일 이미지를 wordpress 측에서 끌어오려면 http://mohu-para.com/wp-json/wp/v2/media 에 요청해야 했고, 과연 어쨌든 무엇인가 곤란했습니다.
이번에는 기본적으로
- 개별 페이지의 도메인 http://localhost:8080/9999 ←여기의 9999- 다음으로 끌어온 json 안에 있다 featured_media (이것은 썸네일 이미지의 ID)를 요청 URL에 담아 썸네일 정보를 요청
- 썸네일 정보가 응답으로 반환되면 구성 요소에 반영합니다.

자세한 것은 assets/container/Post.jsx 를 봐 주셨으면 합니다.

전반적인 감상

처음으로 wp-rest-api를 해 보려고 생각했을 때는 왠지 방법을 잘 모르고, 모야모야하고 있었습니다만, 지금은 일본어 참조 도 있거나, 여러분이 설명하고 있는 기사를 써 와서 도입의 문턱 진짜 낮아졌다고 느낍니다.
이번은 기사의 작성이나 삭제라고 하는 인증이 필요한 처리 주위의 방법은 취급하지 않았습니다만, 그 주위도 문서 본 느낌 문턱 낮을 것 같은 생각이 들었습니다.

워드프레스는 1년과 수개월 전까지 골고루 쓰고 있었습니다만, PHP를 그다지 좋아하지 않기 때문에 솔직히 그다지 워드프레스는 사용하고 싶지 않다고 생각했습니다. 그러나, wp-rest-api의 존재를 알고 실제로 사용해 보아 아직도 wordpress 좋다고 생각했다, , 라고 할까 오이타 프런트 엔드 프렌드리가 된구나라고 느꼈습니다.

앞으로 해보고 싶은 것은 wp-rest-api와 react-native를 사용하여 아 M이나 mery 같은 앱을 만들어보고 싶다고 생각했습니다.

참고 자료

wp-rest-api 참조
ㅡtp://그럼. wp-아피. 오 rg / 레후 렌세 /