WordPress 데이터가 포함 된 Gatsby 사이트 작성

이 튜토리얼은 이전 기사를 바탕으로 Gatsby와 WordPress 통합의 상세한 연습을 제공합니다. Gatsby의 속도 및 보안 혜택은 WordPress 사용자에게 호소하여 친숙한 WordPress 컨텐츠 관리 경험을 유지하면서 이러한 장점을 활용할 수있는 방법을 제공합니다.

이 안내서는 다양한 자원을 바탕으로 잠재적 인 과제를 해결하는 실제 구현에 중점을 둡니다. WPGRAPHQL 및 GATSBY CLI는 적극적으로 개발되었으므로 버전 호환성이 중요합니다. 이 프로젝트는 WPGRAPHQL 0.8.3, gatsby-source-wpgraphql 2.5.1 및 GATSBY CLI 2.12.21을 사용합니다. 최신 업데이트는 항상 공식 문서를 참조하십시오.

Alexandra Spalato의 gatsby-wordpress-theme-blog 및 Zac Gordon 및 Muhammad Muhsin의 twenty-nineteen-gatsby-theme 포함하여 몇 가지 훌륭한 개츠비 스타터가 있습니다.

전제 조건

따라 가려면 다음과 같이 필요합니다.

• 기본 반응 및 자바 스크립트 지식. 수많은 온라인 리소스가 입문 안내서를 제공합니다.
• 개츠비의 역동적 인 페이지 제작 메커니즘의 파악. 포괄적 인 튜토리얼을 쉽게 사용할 수 있습니다.
• 작업 WordPress 설치. 설정을 지원하기 위해 많은 가이드가 존재합니다.

기존 리소스를 활용합니다

이 프로젝트는 이전 개츠비 경험과 재사용 가능한 구성 요소 (타이포그래피, 레이아웃 등)의 혜택을 받았습니다. 주요 리소스 포함 :

• Henrik Wirth의 포괄적 인 Gatsby WordPress 스타터 가이드.
• Jason Lenstorf의 Jamstack Migration Tutorial.
• Muhammad Muhsin 's Guide Twenty Nineteen 테마의 가이드.

이 튜토리얼은 Henrik Wirth의 구조를 반영하여 이미지 처리 및 ACF Flexible Content와 같은 고급 기능을 생략합니다.

프로젝트 단계 :

1. WordPress 및 Gatsby 설정
2. 콘텐츠 마이그레이션
3. 내비게이션 구현
4. 블로그 게시물 표시
5. 스타일링 및 배포

1 단계 : WordPress 및 Gatsby 설정

WordPress 사이트 (기존 또는 신규, 심지어 로컬 설치 작업)를 설정하여 시작하십시오. 이 프로젝트는 20 개의 테마를 사용합니다.

필수 플러그인을 설치하십시오

WPGRAPHQL (GraphQL API의 경우) 및 WPGRAPHIQL (선택 사항이지만 쿼리 테스트에 유용)을 설치하십시오. 이 플러그인은 WordPress 플러그인 디렉토리에서 사용할 수 없습니다. GitHub에서 직접 다운로드하고 수동으로 설치하십시오. WPGRAPHIQL은 WordPress 대시 보드 내에서 편리한 테스트 인터페이스를 제공합니다.

개츠비 사이트 초기화

기본 스타터를 사용하여 로컬 개츠비 사이트를 만듭니다.

 Gatsby New WordPress-Gatsby https://github.com/gatsbyjs/gatsby-starter-default

개발 서버 ( gatsby develop )를 시작하고 localhost:8000 에서 스타터 페이지에 액세스하십시오.

gatsby-source-graphql 플러그인을 설치하고 구성하십시오.

 원사 Add Gatsby-Source-GraphQL # 또는 NPM 설치 -Save Gatsby-Source-GraphQL

gatsby-config.js 구성 :

 module.exports = {
  플러그인 : [
    {
      해결 : "Gatsby-Source-GraphQL",
      옵션 : {
        typeName : "wpgraphql",
        FieldName : "WPContent",
        URL : "https://tinjurewp.com/wp-gatsby/graphql"또는 환경 변수를 사용합니다
      },
    },
  ],,
};

환경 변수에 dotenv 모듈을 사용하여 민감한 데이터를 관리하는 것을 고려하십시오.

서버를 다시 시작한 후 WPGRAPHQL API는 https://localhost:8000/__graphql/ 에서 Gatsby를 통해 액세스 할 수 있습니다.

2 단계 : WordPress 컨텐츠 마이그레이션

Gatsby는 GraphQL로 데이터를 쿼리하여 빌드 프로세스 중에 페이지를 만듭니다. 여기에는 Gatsby의 onCreateNode 및 createPages API를 사용하는 것이 포함됩니다.

내용 준비

WordPress 사이트에 게시물과 페이지를 추가하십시오. 갈등을 피하기 위해 Gatsby pages 폴더에서 index.js 및 page-2.js 제거하십시오.

템플릿 생성

게시물 ( /src/templates/post/index.js ) 및 pages ( /src/templates/page/index.js ) 용 템플릿 생성 :

 // src/templates/post/index.js (예)
"React"에서 React React;
"../../components/layout"에서 레이아웃 가져 오기;
"../../components/seo"에서 SEO 가져 오기;

const post = ({pagecontext}) => {
  const post = pagecontext.post;
  반품 (
    <layout>
      <seo title="{post.title}"></seo>
      <h1 id="post-title">{post.title}</h1>
      <div dangerouslysetinnerhtml="{{" __html: post.content></div>
    </layout>
  );
};

내보내기 기본 게시물;

createPages API 구현

Gatsby의 createPages API를 사용하여 WordPress 데이터에서 페이지를 생성하십시오. 여기에는 GraphQL 쿼리 및 데이터 매핑이 포함됩니다. (연결된 GitHub 리포지토리의 전체 코드를 참조하십시오).

3 단계 : 내비게이션 구현

WordPress의 내비게이션 관리는 메뉴를 생성 할 수 있습니다. 이 섹션에서는 기본 메뉴를 Gatsby로 포팅하는 데 중점을 둡니다.

WordPress의 메뉴 작성

WordPress에서 "Primary"라는 메뉴를 작성하여 홈페이지, 샘플 페이지 및 기타 관련 콘텐츠에 링크를 추가하십시오.

그래프 QL 쿼리

graphiql을 사용한 쿼리 메뉴 항목 :

 쿼리 myQuery {
  menuitems (여기서 : {location : primary}) {
    노드 {
      상표
      URL
      제목
      목표
    }
  }
}

구성 요소 생성

메뉴 항목 ( MenuItem.js ) 및 메뉴 자체 ( Menu.js )의 구성 요소를 절대에서 상대 경로로 처리합니다. (연결된 GitHub 리포지토리의 전체 코드를 참조하십시오).

메뉴 통합

Layout 구성 요소에 Menu 구성 요소를 추가하십시오. 내부 및 외부 링크를 모두 처리 할 수있는 UniversalLink 구성 요소를 구현하십시오.

4 단계 : 블로그 게시물 표시

이 단계는 페이지 매김을위한 블로그 게시물 템플릿 및 구성 요소를 만드는 데 중점을 둡니다.

글로벌 변수

blogURI 와 같은 설정을 관리하기 위해 globals.js 파일을 만듭니다.

블로그 템플릿

PostEntry 및 Pagination 구성 요소를 사용하여 게시물을 표시하려면 블로그 템플릿 ( /src/templates/post/blog.js )을 만듭니다.

입력 후 구성 요소

추천 이미지 및 발췌문을 포함하여 개별 게시물을 표시하기 위해 PostEntry 구성 요소를 작성하십시오.

이미지 구성 요소

폴백 이미지를 포함하여 주요 이미지를 처리 ​​할 Image 구성 요소를 만듭니다.

페이지 매김 구성 요소

Paginated Post를 탐색하기위한 Pagination 구성 요소를 만듭니다.

Refactoring createPages 및 createPosts

createPages.js 및 createPosts.js Refactor GraphQL 조각을 사용하여 코드 구성 및 유지 관리 가능성을 향상시킵니다. (연결된 GitHub 리포지토리의 전체 코드를 참조하십시오).

5 단계 : 스타일링 및 배포

이 섹션에서는 스타일링 및 배포 전략을 다룹니다.

스타일링

스타일링에 SASS 또는 기타 선호하는 방법을 사용하십시오. @wordpress/block-library 사용하여 WordPress 블록 스타일을 통합하는 것을 고려하십시오.

전개

지속적인 배포를 위해 NetLify 또는 기타 플랫폼을 활용하십시오. WordPress 변경에 의해 트리거 된 자동 배포에 Jamstack Deployments 플러그인 사용을 고려하십시오.

이 포괄적 인 가이드는 Gatsby와 WordPress를 통합하기위한 탄탄한 기반을 제공합니다. 전체 코드 예제 및 자세한 내용은 링크 된 Github 저장소에 문의하십시오. 이 과정에는 여러 단계가 포함되며 개츠비와 워드 프레스를 잘 이해해야합니다. 그러나 결과는 빠르고 안전하며 유지 관리 가능한 웹 사이트입니다.

위 내용은 WordPress 데이터가 포함 된 Gatsby 사이트 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!