Wordpress를 헤드리스 CMS로 사용하십시오

Sep 11, 2025
어떻게
Use WordPress as a headless CMS

나는 쌍둥이 도시에서 지켜 보는 이야기에서 헤드리스 CMS 접근법에 대해 처음 들어 왔습니다. 저는 저작 콘텐츠와이를보고있는 관심사의 분리에 대한 아이디어를 좋아했습니다.

  • 2019 년 최고의 웹 호스팅 서비스

나는 이미 한 서버가 얼마나 쉽게 떨어질 수 있고, 그것에 대한 모든 사이트를 꺼내, 하트 멈춤 공황의 분 또는 시간을 초월한 것으로 얼마나 쉽게 쉽게 놓을 수 있는지 경험했습니다 (광산에 24 시간이있었습니다). 나는 또한 모 놀리 식 CMS 기반 사이트가 보안 타협을하고 수리하기 위해 많은 노력을 기울이는 방법을 보았습니다 (무급 작업의 2 일 이상이 걸렸습니다). 범위의 범위 웹 호스팅 공급자 옵션, 가이드를 확인하십시오.

  • 23 WordPress 웹 사이트의 훌륭한 예입니다

나는 빠른 배달을 위해 최적화 된 서버에 이미지, 오디오 및 비디오 파일을 저장할 수있는 CDN (콘텐츠 전달 네트워크)의 이점을 보았고 필요할 경우 해당 지역에 빠른 배송을 위해 전세계 파일을 복제 할 수 있습니다. 전체 웹 사이트 가이 접근 방식에서 이익을 얻을 수 있다면 어떨까요?

필요할 것이예요…

● 인터넷 연결이있는 컴퓨터 (OBVS)
● 코드 편집기 (Atom 또는 VS 코드)
● 명령 줄 쉘 / 터미널
● 최근 Node.js의 버전이 설치되었습니다 (다운로드 할 수 있습니다. 여기 )
● 콘텐츠를 가져 오는 WordPress 사이트. 하나가없는 경우 WordPress.com 플랫폼 또는이 기능을 사용할 수 있습니다. 헤르 쿠 빌드 팩 ...에
● 소스 파일 github에서 ...에

시작하기

WordPress는 REST API가있는 상자에서 나온 것이고 데이터가 데이터를 쿼리하는 데 사용할 것입니다. 그래서 우리는 정말로 다른 것을 필요로하지 않습니다! 우리의 디스플레이 사이트는 우리의 콘텐츠 사이트와 완전히 분리되어 있으므로 필요하지 않습니다. WordPress 테마 또는 일부 (선택 사양) 플러그인 외부의 다른 사용자 정의. 물론 당신이 원한다면 이것을 추가 할 수 있습니다.

예외는 추가 콘텐츠 영역을 위해 사용자 정의 메타 필드가 필요한 경우입니다. 그렇게하려면 고급 사용자 정의 필드를 사용하고 있습니다. 그 데이터를 WordPress API에 추가 할 수 있습니다. 이 플러그인 설치 ...에

정적 사이트 생성기를 사용하십시오

Use WordPress as a headless CMS: Gatsby starter screen

Gatsby 기본 시동기 화면

이제 우리의 콘텐츠 소스가 있으므로 정적 사이트 생성기를 사용하여 데이터를 가져 와서 디스플레이 해 보겠습니다. 이 영역에서의 나의 선택의 무기는입니다 개츠비 JavaScript로 구축 된 우수한 정적 사이트 생성기. (이것들을 보아라 웹 사이트 빌더 사이트를 구축하는 간단한 방법으로 선택하십시오.)

JavaScript 기술을 건설하고 일부 코드에 갇혀서 반응을 배우는 좋은 방법을 찾고 있다면, 나는 Gatsby를 시도하는 것이 좋습니다. 나는 그걸 가지고 노는 것으로 나 자신을 많이 배웠다.

먼저 Gatsby 사이트를 만들 수있는 명령 줄 도구를 설치하십시오. 

npm install -global gatsby-cli

이제 사이트를 유지 하고이 명령을 실행할 폴더로 이동하십시오. 

gatsby new blog

그러면 '블로그'라는 새 폴더가 생성되어 Gatsby를 설치 하고이 폴더에 종속성을 설치합니다. 좋아하는 텍스트 편집기 에서이 폴더를 엽니 다. 거기에 많은 파일이있는 것 같습니다. 걱정하지 마십시오. 우리는 직접 편집 할 것입니다 gatsby-config.js. , gatsby-node.js. 파일 및 src. 폴더, 우리 템플릿이 살고있는 곳입니다.

저장할 파일이 많으면 업그레이드 할 가치가 있습니다. 클라우드 스토리지 ...에

우리의 콘텐츠 얻기

우리가 취할 첫 번째 단계는 WordPress 사이트의 API에서 콘텐츠를 가져 오는 것입니다.

그렇게하기 위해 우리는 설치할 것입니다 Gatsby-source-wordpress. , WordPress 용 사전 펀드 플러그인. 이것은 내가 Gatsby를 좋아하는 주요 이유 중 하나를 보여줍니다. 다양한 소스에서 데이터를 얻을 수 있습니다. 정적 사이트 생성기가 많이 마찰 파일 사용으로 제한되지만 Gatsby는 매우 유연합니다.

개츠비의 플러그인 생태계는 매우 성숙합니다. 데이터와 많은 다른 영리한 기능도 유용하게 제공하는 데 많은 다른 영리한 기능을 얻는 데 많은 사전 삭제 방법이 있습니다.

플러그인을 설치하려면이 명령을 사용하여 새 Gatsby 사이트로 디렉토리를 먼저 변경하십시오. CD 블로그 ...에

이제이 명령을 실행하십시오. NPM 설치 - 간략한 GATSBYSOURCE-WREDPRES 에스.

일단 완료되면 gatsby-config.js 파일을 열 수 있습니다. Gatsby가 우리에게 기본적으로주는 곳에서 이미 기본적인 설정이 있음을 알 수 있습니다. 우리는 플러그인을 여기에서 구성하는 것이 좋습니다. 

 module.exports = {
 SiteMetadata : {
  제목 : 'Gatsby Default Starter',
 },
 플러그인 : [
  'Gatsby-Plugin-react-헬멧',
  {
   해결 : "Gatsby-source-wordpress",
   옵션 : {
    baseURL : "my-wordpress-site.com",
    프로토콜 : "https",
    HostingWPCOM : 거짓,
    USEACF : TRUE,
    searchAndReplaCeContentURLS : {
     sourceurl : "https://my-wordpress-site.com",
     replaceMenturl : "https://my-static-site.com",
    }
   },
  },
 ],
}

그것이 일 했나요?

터미널을 열어서 확인할 수 있습니다 개츠비가 개발합니다 무슨 일이 일어나는지 보아라. 경고 받다! 당신이 당신의 설정을 정확하게 알게 되더라도, 어쨌든 어떤 경고를 얻을 수 있습니다 - 이것은 당신이 아직 쓰지 않은 콘텐츠를 찾는 개츠비가 될 수 있습니다.

이제 브라우저에서 Gatsby-Starter-Default를 볼 수 있습니다.

<미리 언어 = "http"> http : // localhost : 8000 /

사이트의 데이터와 스키마를 탐색하기 위해 브라우저 인-브라우저 IDE 인 GraphIQL을 봅니다.

<미리 언어 = "http"> http : // localhost : 8000 / ___ graphql

개발 빌드는 최적화되지 않습니다. 생산 빌드를 만들려면 Gatsby Build를 사용하십시오.

Gatsby Default Starer (오른쪽)가 얻는 것이 아닌 경우 WordPress 사이트가 하위 도메인에 있지 않은지 확인하십시오. HTTPS 또는 HTTP를 사용하고 설정에서 동일하게 사용하는 것입니다.

이제 우리는 http : // localhost : 8000 /와 Gatsby 사이트를 참조하십시오!

우리는 데이터를 쿼리 할 수 ​​있습니까?

여기에 WordPress 내용이 없음을 알아 차릴 수도 있습니다. 이것은 우리가 아직 그걸 아직해야 할 일을 Gatsby에게 말하지 않았기 때문입니다. 우리가 그렇게하기 전에 우리는 실제로 Gatsby가 우리의 콘텐츠를 사용할 수있는 것을 확인하자. 이를 수행하려면이 URL을 방문하십시오.

<미리 언어 = "http"> http : // localhost : 8000 / ___ graphql

이 기본 제공 도구는 Graphiql이라고하며 Gatsby의 또 다른 비밀 능력입니다.

GraphQL은 휴식과 유사합니다. 데이터를 쿼리하는 방법입니다. 그러나 Graphql을 사용하면 데이터와 쉽게 데이터와 상호 작용할 수 있습니다. graphiql (Graphql 용 시각적 인 IDE)은 이러한 트릭 중 일부를 보여줄 수 있습니다. 왼쪽 패널에서 다음을 입력하십시오. 

 {
 AllWordPressPost {
  가장자리 {
   노드 {
    신분증
    강타
    상태
    주형
    체재
   }
  }
 }
}

이것은 JSON과 같이 조금처럼 보이지만 그렇지 않습니다. 그것은 언젠가는 API와의 통신하는 방법으로 휴식을 크게 대체 할 것이라고 생각하는 새로운 쿼리 언어입니다.

Ctrl + Ctrl + Enter를 눌렀을 때 무엇을 얻었습니까? 당신은 화면의 오른쪽에있는 WordPress Posts와 페이지를 듣는 희망을 갖게됩니다.

우리는 실제로 다음 단계 에서이 쿼리를 사용할 것입니다. 그래서 그것을 편리하게 유지하십시오! 여기있는 동안 Graphiql을 사용하면 다른 데이터를 볼 수있는 데이터를 볼 수 있습니다. 이렇게하려면 커서를 이동하여 Ctrl + Space 및 / 또는 Ctrl + Enter를 입력하십시오. 다른 콘텐츠 그룹을 밝힐 것입니다.

그래서 우리는 이제 Gatsby에 만족합니다. 다음으로, 우리는 그것을 표시해야합니다.

우리의 게시물을 표시하십시오

Use WordPress as a headless CMS: Gatsby development 404 screen

Gatsby Development 404 Page 모든 WordPress 게시물을 보여주는

이 다음 단계를 위해 우리는 gatsby-node.js. 파일.

gatsby-node.js. Gatsby의 "노드 API"와 상호 작용하는 데 사용할 수있는 파일입니다. 여기서 사이트가 생성되고 페이지, 게시물 등을 생성하는 방법을 제어 할 수 있습니다.

Gatsby에게 데이터로 무엇을 해야하는지 Gatsby에게 알리기 위해 몇 가지 지침을 작성하려고합니다. 

 const path = 요구 (`경로 ');

exports.createpages = ({graphql, bindActionCreators})
= & gt; {
 const {createPage} = bindActionCreators.
 새 약속 반환 ((해결, 거부) = & gt; {
  graphql (
   `
   {
    AllWordPressPost {
     가장자리 {
      노드 {
       신분증
       강타
       상태
       주형
       체재
      }
     }
    }
   }
  `
 ) .then (결과 = & gt; {
   if (result.errors) {
    console.log (result.errors)
    거부 (result.errors)
   }

   const posttemplate = path.resolve (`./src/templates/
post.js`)

   result.data.AllWordPrespost.Edges.Foreach (가장자리 = & gt; {
    CreatePage ({
     경로 :`/ $ {edge.node.slug} /`,
     구성 요소 : Posttemplate,
     문맥 : {
      ID : edge.node.id,
     },
    })
   })
   결의()
  })
 })
}

이 코드는 GraphQL 쿼리에서 페이지를 생성하고 각 페이지에 대해 정의한 템플릿을 사용할 것입니다 ( /src/templates/post.js. 짐마자 그렇다면 해당 파일을 만들어야합니다!

게시물 템플릿을 만듭니다

/ src / 폴더 내에서 템플릿이라는 폴더와 파일 내부의 파일을 만듭니다. post.js. ...에 이 코드에 추가하십시오 : 

 수입 '반응'
'반응 헬멧'에서 가져 오기 헬멧

PostTemplate 클래스는 react.component {
 렌더링 () {
  const post = this.props.data.wordpresspresspost;
  const slug = this.props.data.wordpresspost.slug;

  반환 (
   & lt; div & gt;
   & lt; 헬멧 제목 = {`$ {titleString} | $ {SiteTitle}`} / gt;
   & lt; h1 위험 = {{__html : post.title}} / & gt;
   & lt; div dangerouslysetinnerhtml = {{__html : post.content}} / gt;
   & lt; / div & gt;
  )
 }
}

기본 pageTemplate 내보내기

song query = graphql` 내보내기
 CurrentPost ($ ID : String!) {
  WordPressPost (ID : {eq : $ id}) {
   표제
   함유량
   강타
  }
  사이트 {
   SiteMetadata {
    표제
   }
  }
}

이는 다른 GRAPHQL 쿼리를 사용하여 특정 게시물에 대한 데이터를 얻습니다. gatsbynode.js. 파일을 사용하여 React를 사용하여 브라우저로 렌더링합니다.

모든 게시물 목록을 빠르게 보려면 다음을 입력 할 수 있습니다. http : // localhost : 8000 / A. 브라우저의 주소 표시 줄에 이렇게하면 모든 게시물을 나열하는 개발 404 페이지로 이동합니다. 그것을 방문하려면 하나를 클릭하십시오!

다음 단계

Wordpress를 헤드리스 CMS로 사용하는 방법의 표면을 긁어 냈고 앞으로도 사용할 수 있고 실험 할 수있는 흥미로운 개념과 도구에 여러분을 소개했습니다.

이 이야기와 동료에게 더 많은 것이 있습니다. 그리고 나는 그것에 대해 광범위하게 블로깅했습니다. 인디고 나무 ...에 나는 또한 내 개인적인 블로그에 더 많이 썼다. 맛있는 reverie. ...에

헤드리스 CMS의 세계에서 더 많은 흥미 진진한 발전을 듣기 위해 그 채널과 트위터를 통해 나와 함께 연락하십시오!

이 기사는 원래 308 호에 발표되었습니다 그물 웹 디자이너 및 개발자를위한 세계 최고의 잡지. 여기 문제를 구입하십시오 또는 여기를 구독하십시오 ...에

관련 기사:

  • 40 훌륭한 WordPress 자습서
  • WordPress에서 CRO 성공을위한 6 가지 팁
  • 디자이너를위한 10 개의 훌륭한 WordPress 플러그인

어떻게 - 가장 인기있는 기사

3 가지 필수 ZBrush 탈학 기술

어떻게 Sep 11, 2025

(이미지 크레딧 : 글렌 남부) Zbrush 탈영학, 또는 일반적으로 모델을 습지하는 방법은 3D 3D..

자신의 사업 시작을위한 7 가지 팁

어떻게 Sep 11, 2025

당신이 창조적 인 망토에 갇혀있는 느낌이 들면, 당신의 경력을주는 순간을 가질 가치가 있고, 다..

웹 글꼴 사용 방법

어떻게 Sep 11, 2025

다음은 Bram Stein의 WebFont Handbook에서 가져온 발췌문입니다. 여기 그것을 구입하십..

Papercraft 로봇을 만드는 방법

어떻게 Sep 11, 2025

지난 여름 졸업 만해, 나는 여전히 프리랜서 그림의 세계에 꽤 새로운 것입니다. 그러나 나의 스�..

Zbrush의 현실적인 해부학

어떻게 Sep 11, 2025

[삼] 페이지 1 / 2 : 페이지 1 페이지 1 2 쪽 당신이 그냥 사용하는 것보다..

아이소 메트릭 타이포그래피를 설계하는 방법

어떻게 Sep 11, 2025

전망은 디자인의 모든 것입니다. 당신이 그려진 무언가가 완벽한 관점을 가지고 있다면, 당신의 �..

고스트 라이더 변환 시뮬레이션

어떻게 Sep 11, 2025

페이지 1 / 2 : 페이지 1 페이지 1 ..

After Effects에 대한 일러스트 레이터 그래픽을 준비하는 방법

어떻게 Sep 11, 2025

나는 당신에게 얼마나 많은 것을 말하지 않을 수 없다 Adobe Illustrator. 파일은 분명히 준..

카테고리