GatsbyJS 101을 사용한 헤드리스 워드프레스

WordPress에는 Rest API에 대한 지원 기능이 내장되어 있습니다. 따라서 많은 도구를 사용하여 WordPress를 헤드리스로 만드는 것이 가능합니다. 이 기사에서는 "GatsbyJS를 사용하여 WordPress 사이트에서 데이터를 가져오는 방법"을 보여줍니다.

왜 GatsbyJS인가?
동적 경로를 쉽게 만들고 사용자 지정할 수 있습니다. Gatsby에는 WordPress를 헤드리스로 쉽게 만들기 위해 기본적으로 작동하는 몇 가지 플러그인이 있으며 해당 문서도 훌륭합니다. Gatsby는 또한 Graphql을 기본적으로 지원합니다.

이 문서를 시작하기 전에 무엇을 알아야 합니까?

WordPress, WordPress 플러그인 설치

JavaScript에 대한 더 나은 지식

ReactJS, GatsbyJS, Graphql에 익숙함

먼저 로컬 환경이나 라이브 서버에 WordPress를 설치한 다음 다음 두 플러그인을 설치합니다: WP Graphql , WP Graphiql
WP Graphql은 WordPress용 graphql API를 생성하고 WP Graphiql은 이를 위한 사용자 인터페이스를 생성합니다. 시간을 주고 인터페이스에 익숙해지십시오.

이제 전역적으로 Gatsby CLI를 설치합니다. npm install -g gatsby-cli그런 다음 Gatsby 스타터를 설치합니다.gatsby new wp-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-worldwp-gatsby 디렉토리에 Gatsby 시작 프로젝트를 설치합니다. 이제 cd 해당 폴더로 이동하고 다음을 실행합니다. gatsby develop
이제 다음에서 실행 중인 새 Gatsby 사이트를 볼 수 있습니다. http://localhost:8000/"Gatsby Source WordPress"플러그인 설치: npm install gatsby-source-wordpress . 그리고 gatsby-config.js 파일을 아래와 같이 변경합니다.

module.exports = {
  plugins: [
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            baseUrl: `siteUrl`, // site url without http/https
            protocol: `http`,
            hostingWPCOM: false,
            useACF: false,
        },
    },
  ]
}

이 Gatsby 플러그인은 Graphql을 사용하여 WordPress 사이트에서 데이터를 가져오는 데 도움이 됩니다. 이제 다시 gatsby develop 를 실행하고 http://localhost:8000/___graphql 로 이동합니다. 여기에서는 WordPress 사이트에서 이전에 본 것과 거의 동일한 Graphql IDE를 볼 수 있습니다... ..

myblog에서 원본 전체 기사 읽기