이전 기사에서 Gatsby 소스 wpgraphql 플러그인을 사용하여 분리 된 WordPress 전원 Gatsby 사이트를 만드는 법을 배웠습니다. 이 프로젝트는 WPGRAPHQL의 진행중인 개발 버전과 Henrik Wirth의 훌륭한 튜토리얼에 따라 수행되었습니다. 그 당시 일부 생산 현장에서는 wpgraphql이 사용되었지만, 깨진 변화를 도입하는 많은 반복이있었습니다. 지난 11 월 WPGRAPHQL v1.0의 출시 이후 플러그인은 안정적이며 WordPress 플러그인 디렉토리를 통해 사용할 수 있습니다.
WPGRAPHQL 플러그인은 컨텐츠 관리를 위해 WordPress를 사용하지만 Gatsby가 구동하는 프론트 엔드를 사용하는 사이트를 만드는 데 사용될 수 있습니다. 사이트의 백엔드와 프론트 엔드는 프론트 엔드의 구성 요소가 CMS의 데이터를 소비하는 API를 통해 서로 대화하는 별도의 엔티티이기 때문에 이것을 "분리"또는 "헤드리스"CM이라고합니다.
WPGRAPHQL 플러그인 사이트에는 시작하기위한 확실한 단계별 문서가 있으며 릴리스 공지 게시물에는 플러그인을 사용하여 생산 수준 사이트의 9 가지 예를 나열합니다.
"분리 된"또는 "헤드리스"사이트의 진정한 의미에서 WPGRAPHQL을 사용하여 WordPress 데이터를 Next.js, vue.js와 같은 다른 프레임 워크에 포트로 포트 할 수 있습니다. Gatsby 프레임 워크의 경우 Gatsby 소스 WordPress 플러그인을 권장하며 WPGRAPHQL을 사용하여 WordPress의 데이터를 소스합니다.
모든 것을 함께 설정하고 플러그인을 둘러 보자.
이전 기사에서는 WordPress 및 Gatsby 사이트를 설정하고 백엔드 WordPress 데이터를 사이트 배포가있는 Gatsby 기반 프론트 엔드 사이트로 포팅하는 데 필요한 전제 조건을 다루었습니다. WordPress 데이터가 Gatsby Source WordPress 플러그인에 의해 가져온 것을 제외 하고이 기사의 기본 개념이 동일하기 때문에 여기에서 많은 세부 사항을 건너 뛰고 있습니다.
Gatsby에 익숙하지 않고 지금 Gatsby의 Gattic Site Generator 대문계에 뛰어 들면 React Expert David Cramer의“Gatsby에 대한 정직한 리뷰”와 Jared Palmer의“Gatsby vs Next.js”를 읽는 것이 좋습니다. 우리가 다루 겠다는 것은 모든 사람을위한 것이 아니며,이 기사는 그것이 귀하와 귀하의 프로젝트에 적합한 기술인지 스스로 평가하는 데 도움이 될 수 있습니다.
WPGRAPHQL 또는 GraphQL은 Gatsby의 프레임 워크에 사용되는 기본 쿼리 언어 API입니다. GraphQL에는 빈번한 업데이트가 있으며 종종 전문 지식이 필요하며 변경 사항을 깨뜨리는 데 주시해야합니다. 결국, GraphQL은 다른 React 전문가를 위해 React 전문가가 설계했습니다. 즉, WPGRAPHQL 및 GATSBY 소스 WordPress 플러그인 저자 모두가 적극적으로 참여하고 질문에 답변하는 문제 해결 지침과 WPGRAPHQL 슬랙이 있습니다.
이 기사는 Gatsby Source WordPress 플러그인을 사용하는 방법에 대한 단계별 안내서가 아닙니다. 다시, 그것은 이미 개츠비의 문서에서 사용할 수 있습니다. 반대로, 당신이 React, JavaScript, node.js 또는 GraphQL의 전문가가된다면, 우리가 여기서 다루는 것은 아마도 당신이 이미 알고있는 것일 것입니다. 이 기사는 내 개인적인 경험을 기반으로 한 의견 조각으로, 주제에 대한 기본적인 실무 지식을 가진 평범한 WordPress 사용자에게 유용하기를 바랍니다.
그리고 시작하기 전에 Gatsby Source WordPress 플러그인이 버전 4에서 완전히 다시 작성되어 WPGRAPHQL을 데이터 소스로 사용한다는 것을 언급 할 가치가 있습니다. 이전 릴리스 버전 3은 REST API와 함께 데이터 소스로 구축되었습니다. 플러그인의 안정적인 버전이 최근에 출시되었으므로,이를 지원하는 스타터 테마 및 데모의 수는 제한적입니다.
이 프로젝트에서는 기본 20 테마 테마를 사용하는 Flywheel로 로컬로 새로운 WordPress 사이트를 설정했습니다. WordPress Codex에 설명 된대로 페이지 및 게시물에 대한 테마 단위 테스트 데이터를 가져 왔습니다. 이것이 내가 작업 한 기준 이었지만 원격 서버 또는 로컬 설치에있는 기존 WordPress 사이트 일 수 있습니다.
기준이 확립 된 기준이 있으므로 WordPress 관리자에 로그인하여 WPGRAPHQL 및 WPGATSBY 플러그인을 설치하여 활성화 할 수 있습니다.
이전 기사에서 다루었 듯이 WordPress Admin에서 GraphQL 및 Wpgraphiql API를 노출하여 GraphIQL API가 WordPress 데이터를 기반으로 GraphQL 쿼리를 테스트하기위한 "놀이터"를 생성 할 수 있습니다.
개츠비는 좋은 문서와 견고한 스타터 템플릿으로 잘 알려져 있습니다. 새로운 WordPress 구동 사이트를 만들려면 Gatsby 자습서는 스타터를 사용하거나 처음부터 시작하는 것이 우리가하고있는 일에 적합하다고 제안합니다.
Gatsby는 또한 특정 기술을 중심으로 구축 된 기본 사용 사례를위한 예제 웹 사이트 라이브러리를 제공합니다. 현재 WordPress를 사용하는 것이 있으며 고급 사용자 정의 필드 플러그인과 함께 WordPress를 사용하는 것이 있습니다. 라이브러리의 예제 사이트는 여전히 Gatsby-Source-Wordpress 플러그인 3을 사용하고 있으며이 글을 쓰는 시점에서 버전 4로 아직 업데이트되지 않았습니다.
Gatsby 튜토리얼에 따르면 WordPress 구동 Gatsby 사이트를 만드는 세 가지 옵션이 있습니다. 각각을 봅시다.
문서에는 WordPress-Gatsby 사이트를 설정하는 방법에 대한 단계별 안내서가 있지만 여기에는 요점이 있습니다.
명령 줄에서 다음을 실행하여 Github Repository에서 스타터를 가져와 My-WPStarter 프로젝트 폴더로 클론하십시오.
#! 클론 스타터 레포 Gatsby New My-Wpstarter https://github.com/gatsbyjs/gatsby-starter-wordpress-blog
그런 다음 NPM 패키지를 설치하십시오
#! NPM NPM 설치 #! 또는 원사 원사 설치
스타터가 복제되었으므로 코드 편집기에서 Gatsby-config.js 파일을 열고 URL 옵션을 업데이트하여 WordPress Endpoint (위 참조)에서 데이터를 가져 오십시오.
// gatsby-config.js
{
결의 : Gatsby-Source-Wordpress,
옵션 : {
// WordPress는 GraphQL URL입니다.
url : process.env.wpgraphql_url || https://wpgatsbydemo.wpengine.com/graphql,
},
},이제 스타터의 데이터 소스 엔드 포인트 URL을 자체 WordPress 사이트 URL로 바꿀 것입니다.
// gatsby-config.js 파일
{
결의 :`Gatsby-Source-Wordpress`,
옵션 : {
URL :`http : // gatsbywpv4.local/draphql`,
},
},My-Wpstarter 프로젝트 디렉토리에 있는지 확인합시다. 프로젝트 폴더에서 WordPress 데이터 소스 엔드 포인트에서 새로운 Gatsby 사이트를 구축하기위한 Gatsby 개발 명령을 실행합니다. 터미널에서 우리는 Gatsby-Source-Wordpress 플러그인 페치 데이터 (오류 및 성공적인 사이트 프로세스를 포함하여 데이터를 볼 수 있어야합니다.
결국 성공 건축 개발 번들 번들 메시지가 표시되면 Gatsby 사이트 빌드 프로세스가 완료되고 사이트는 http : // localhost : 8000에서 볼 수 있음을 의미합니다.
이것은 기본 파일과 몇 가지 구성 요소가있는 베어 본 스타터 블로그입니다. 파일 구조는 Gatsby-Starter-Blog와 매우 유사합니다.이 제품에는 Blog-Post.js 및 Blog-Post-Chive.js 템플릿 파일이 포함 된 템플릿 폴더가 있습니다.
http : // localhost : 8000/___ GraphQL에서 graphiql api 탐색기를 볼 때 wpgraphql에 의해 노출 된 WordPress의 모든 데이터를 볼 수있을뿐만 아니라 UI에서 바로 특정 데이터를 검색 할 수 있습니다.
당신은 그것을 얻었습니다! 개츠비는 프레젠테이션을 위해 WordPress 데이터를 가져 오는 Gatsby 구성 요소를 사용하여 나머지는 우리에게 달려 있다고 가정합니다.
Gatsby의 문서는 Gatsby의 기본 스타터 테마를 사용하여 처음부터 새로운 WordPress-Gatsby 사이트를 만드는 방법에 대한 자세한 단계별 안내서를 제공합니다.
명령 줄에서 새로운 프로젝트를 시작할 것입니다.
#! 새 개츠비 사이트를 만듭니다 개츠비 뉴 wpgatsby-from-scratch-demo
이를 통해 스타터 테마가 포함 된 wpgatsby-from-scratch-demo 폴더가 제공됩니다. 여기에서 해당 폴더에 CD를 CD로 만들고 개발을 시작합니다.
CD wpgatsby-from-scratch-demo 개츠비가 개발
이제 브라우저에서 http : // localhost : 8000을 열고 환영 페이지를 얻을 수 있습니다.
이제 우리는 WordPress 사이트에서 데이터를 가져 오기 시작하는 것이 좋습니다. Gatsby 소스 플러그인을 설치합시다.
#! RPM으로 설치하십시오 NPM Gatsby-Source-Wordpress를 설치하십시오 #! 원사로 설치하십시오 원사 Gatsby-Source-Wordpress를 추가하십시오
우리가 지금 우리의 브라우저를 확인하면 아무 일도 일어나지 않는다는 것을 알게 될 것입니다. 우리는 여전히 같은 개츠비를 환영합니다. WordPress 사이트 데이터를 가져 오려면 Gatsby-config.js 파일에 플러그인을 추가해야합니다. 파일을 열고 다음을 삽입하십시오.
// gatsby-config.js
module.exports = {
siteemetadata : {
// ...
},
플러그인 : [
// Gatsby-Source-Wordpress 플러그인 추가
{
결의 :`Gatsby-Source-Wordpress`,
옵션 : {
/*
* WordPress 사이트의 GraphQL API의 전체 URL.
* 예 : 'https://www.example-site.com/graphql'
*/
URL :`http : // gatsbywpv4.local/draphql`,
},
},
// Gatsby-Source-Wordpress에는 다음 플러그인이 필요하지 않습니다 ....
],,
}지난번과 마찬가지로 WordPress 데이터 엔드 포인트 소스를 WordPress 사이트의 URL로 변경해야합니다. Gatsby 개발을 터미널에서 실행하여 일을 시작합시다.
그러나 브라우저에서 http : // localhost : 8000을 열면 아무 일도 일어나지 않는 것 같습니다. 우리는 여전히 같은 환영 화면을 봅니다. 그러나 브라우저 (http : // localhost : 8000/___ GraphQL)에서 GraphIQL을 검사하면 모든 WordPress 데이터가 Gatsby 사이트에 노출되어 원하는대로 쿼리 및 표시 할 수 있습니다.
Gatsby의 튜토리얼에서 graphiql 탐색기에서 바로 가져온 다음 쿼리를 테스트합시다.
쿼리 {
allwppost {
노드 {
ID
제목
발췌
강타
날짜 (형식 스트링 : "Mmmm DD, yyyy")
}
}
}위의 쿼리를 실행하면 allwppost.nodes 속성 값이 표시됩니다.
이제 src/components/pages/index.js 구성 요소 파일을 열고 코드를 다음과 같이 바꾸겠습니다.
// src/components/pages/index.js
"React"에서 React React
"개츠비"에서 {graphql} 가져 오기
"../components/layout"에서 레이아웃 가져 오기
"../components/seo"에서 SEO 가져 오기
내보내기 기본 기능 홈 ({data}) {
반품 (
<seo title="home"></seo>
<h1> 내 WordPress 블로그 </h1>
<h4> 게시물 </h4>
{data.allwppost.nodes.map (node =>
<div>
<p> {node.title} </p>
<diverouslysetinnerhtml : node.excerpt></diverouslysetinnerhtml>
</div>
))}
레이아웃>
))
}
const pagequery = GraphQL`를 내보내십시오
쿼리 {
allwppost (정렬 : {fields : [date]}) {
노드 {
제목
발췌
강타
}
}
}
`저장하고 Gatsby 개발로 서버를 다시 시작하고 페이지를 새로 고치십시오. 빌드가 성공하면 사이트의 홈페이지는 WordPress에서 정렬 된 블로그 게시물 목록을 표시해야합니다!
튜토리얼에 따라 각 블로그 게시물에 대한 페이지를 만들고 목록에서 게시물 페이지에 게시물 제목을 연결하겠습니다. Markdown 데이터를 사용하여 페이지를 작성하는 프로세스는 Gatsby의 기초 자습서 7 부에 자세히 설명되어 있으며 여기서도 다음에 따라갑니다.
튜토리얼에 설명 된 바와 같이 Gatsby는 CreatePages API 또는 "Workhorse"API라고하는 것을 사용하여 데이터에서 페이지를 프로그래밍 방식으로 작성하여 (Markdown 또는 WordPress) Markdown 데이터와 달리 각 WordPress 게시물에는 WordPress 데이터 엔드 포인트에서 가져올 수있는 고유 한 슬러그가 있기 때문에 여기에 슬러그를 만들 필요가 없습니다.
Gatsby는 프로젝트의 루트에 위치한 Gatsby-Node.js 파일을 사용하여 프로그래밍 방식으로 블로그 게시물을 만듭니다. 텍스트 편집기에서 Gatsby-Node.js 파일을 열자 자습서에서 다음 코드를 추가하겠습니다.
// gatsby-node.js
const path = 요구 (`path`)
Exports.createPages = ({graphql, action}) => {
const {createpage} = 동작
return GraphQL (`.
{
allwppost (정렬 : {fields : [date]}) {
노드 {
제목
발췌
콘텐츠
강타
}
}
}
`).
console.log (json.stringify (결과, null, 4))
process.exit ()
})
}Gatsby Part 7 튜토리얼에서 언급 한 바와 같이, 위 코드는 WordPress Data Source에서 게시물 페이지를 작성하는 첫 번째 부분입니다. 가이드에 이어 서버를 다시 시작하고 Gatsby 개발과 함께 사이트를 개발해 봅시다.
단자에 Console.log 출력이 표시 될 때 Console.log 출력을 볼 수 있습니다). 그러나 우리의 홈페이지는 여전히 동일하게 보입니다. 단일 게시물을 만들려면 Gatsby는 다음 단계에서 작성할 템플릿을 작성해야합니다. 다음 단계에서 만들 것입니다. 이것이 우리가 다음에 할 일입니다.
SRC/Directory에서 SRC/Components/Templates 폴더를 만들고 다음 코드 스 니펫을 붙여서 다음 코드 스 니펫을 붙여서 Blog-Post.js 파일을 만듭니다.
// src/templates/blog-post.js
"React"에서 React React
"../components/layout"에서 레이아웃 가져 오기
"개츠비"에서 {graphql} 가져 오기
내보내기 기본 기능 블로그 포스트 ({data}) {
const post = data.allwppost.nodes [0]
Console.log (게시물)
반품 (
<div>
<h1> {post.title} </h1>
<diverouslysetinnerhtml : post.content></diverouslysetinnerhtml>
</div>
레이아웃>
))
}
내보내기 const query = GraphQL`
쿼리 ($ 슬러그 : 문자열!) {
allwppost (필터 : {슬러그 : {eq : $ slug}}) {
노드 {
제목
콘텐츠
}
}
}
`튜토리얼에서 설명한 바와 같이, 위의 코드 스 니펫은 SRC/구성 요소/Layout.js 구성 요소 주변의 React JSX 및 Post.Content (12-13 행)로 단일 게시물을 만듭니다. 파일의 하단 섹션에서 GraphQL 쿼리가 추가되고 Post Slug 변수 $ 슬러그를 기반으로 특정 게시물을 호출합니다. 이 변수는 페이지가 Gatsby-Node.js에서 작성되면 Blog-Post.js 템플릿으로 전달됩니다.
다음으로 Gatsby-Node.js 파일의 12-13 행을 튜토리얼의 다음 코드로 업데이트해야합니다.
// gatsby-node.js
const path = 요구 (`path`)
Exports.createPages = ({graphql, action}) => {
const {createpage} = 동작
return GraphQL (`.
{
allwppost (정렬 : {필드 : [날짜], 주문 : dec}) {
노드 {
제목
발췌
콘텐츠
강타
}
}
}
`).
result.data.allwppost.nodes.foreach (node => {
createpage ({
경로 : node.slug,
구성 요소 : path.resolve (`./src/templates/blog -post.js`),
문맥: {
// 이것은 Blog-Post.js로 전달 된 $ SLUG 변수입니다
슬러그 : node.slug,
},
})
})
})
}Gatsby를 통해 로컬 서버를 중지하고 다시 시작하여 사이트를 개발하고 보자. 블로그 게시물 링크 목록과 함께 홈페이지를 볼 수 없습니다. 그러나 http : // localhost : 8000/abcdf로 확인하면 개별 페이지 및 게시물 링크 목록이있는 다음 404 페이지가 표시됩니다.
http : // localhost : 8000/hello-Gatsby-World를 확인하면“Hello Gatsby WordPress World”게시물을 모든 영광으로해야합니다.
다음 단계는 홈페이지의 게시물 제목을 실제 게시물에 연결하는 것입니다.
홈페이지에서 게시물 페이지에 작업을 연결하는 것은 index.js 파일의 게시물 제목을 Gatsby의 링크 구성 요소로 래핑하여 수행됩니다. 이전에 만든 index.js 파일을 열고 링크 구성 요소를 추가하겠습니다.
// src/components/pages/index.js
"React"에서 React React
"Gatsby"에서 가져 오기 {link, GraphQL}
"../components/layout"에서 레이아웃 가져 오기
"../components/seo"에서 SEO 가져 오기
내보내기 기본 기능 홈 ({data}) {
반품 (
<seo title="home"></seo>
{/* <h1> 내 WordPress 블로그 </h1>
<h4> 게시물 </h4> */}
{data.allwppost.nodes.map (node =>
<div key="{node.slug}">
<h2> {node.title} </h2>
링크>
<diverouslysetinnerhtml : node.excerpt></diverouslysetinnerhtml>
</div>
))}
레이아웃>
))
}
const pagequery = GraphQL`를 내보내십시오
쿼리 {
allwppost (정렬 : {필드 : [날짜], 주문 : dec}) {
노드 {
제목
발췌
강타
}
}
}
`Gatsby에서 링크 구성 요소를 가져온 다음 게시물 제목을 링크 구성 요소로 마무리하고 게시물의 슬러그를 참조했습니다. 페이지 제목을 댓글을 달고 제목 요소를
앞서했던 것처럼 Gatsby 개발로 개발 서버를 중단하고 다시 시작하고 http : // localhost : 8000에서 홈페이지를 보자. 게시물 제목은 단일 게시물 페이지로 연결되어야합니다.
이것은 우리 가이 두 번째 방법을 취할 것입니다. 우리가 다루는 나머지 부분에서는 메뉴 항목을 가져오고 사용자 정의 게시물 유형과 같은 기타 데이터 유형을 쿼리하는 방법을 설명하고 증분 빌드 및 미리보기 등을 구성합니다.
동일한 절차를 호출 및 제작, 사용자 정의 게시물 유형, 사용자 정의 필드, 분류 및 모든 재미 있고 유연한 컨텐츠 WordPress에 알려질 수 있습니다. 이것은 원하는만큼 단순하거나 복잡 할 수 있으므로 탐험하고 재미있게 보내십시오!
—Gatsby 튜토리얼 Doc
기본 WordPress에 대한 Gatsby의 스타터 템플릿은 Henrik Wirth가 20 개의 20 테마를 만들고 유지 관리합니다. Henrik Wirth는 이전 기사에서 기억할 수있는 매우 상세하고 철저한 단계별 안내서가 있습니다. 이 스타터는 다른 스타터와는 달리 실제로 Gatsby 소스 플러그인의 버전 4로 업데이트되며 문서에 설명 된 초기 WordPress 설정 후 상자 밖으로 작동합니다. 개츠비 프론트 엔드 사이트에서 20 개의 20 가지 스타일을 유지하지만 지원되지 않은 주석, 월간 아카이브 페이지 및 태그를 포함하여 제한 사항이 거의 없습니다.
먼저 22 명의 스타터 폴더에서 스타터를 복제합시다.
#! 복제 개츠비 스타터-워드 프레스 -210 세 Gatsby New Twenty-Twenty-Starter https://github.com/henrikwirth/gatsby-starter-wordpress-twenty -tenty
해당 폴더에 CD를 넣은 다음 Gatsby를 실행하여 사이트를 회전시킵니다. Env.example 파일에서 WPGRAPHQL_URL 값을 변경하지 않았기 때문에 처음으로 제대로 작동하지 않습니다. 문서에서 제안한대로 .env.example에서 simply .env로 파일의 이름을 바꿔야합니다.
그 후 Gatsby 개발로 개발 서버를 다시 시작하십시오. 사이트를 성공적으로 구축해야합니다.
WordPress 메뉴의 이름에 따라 메뉴가 나타나지 않을 수도 있습니다. 메뉴 항목 쿼리를위한 스타터의 메뉴 슬러그는 메뉴 (8 행)에서 기본입니다. 대신 Main-Menu를 사용하여 WordPress 사이트를 설정했기 때문에 Menu.js 파일을 그에 따라 업데이트해야했습니다.
스타터는 구형 버전의 도구로 테스트되었으므로 플러그인을 최신 버전 인 WPGRAPHQL 1.2.6, WPGATSBY 1.0.6 및 GATSBY SOURCE WordPress 4.0.1로 넘겨주었습니다.
20 개의 스타터는 Twenty Nineteen Gatsby 테마의 파일 구조와 Gatsby 스타터 WordPress Advanced를 따릅니다. Henrik Wirth는 튜토리얼에서 Muhammad Muhsin과 마찬가지로 Step-wy-Step Guide에서 WordPress 데이터가 Gatsby에 포팅되는 방법을 설명합니다. 그렇지 않으면 페이지, 페이지 템플릿, 포팅 메뉴 항목을 작성하는 것은 정확히 동일합니다.
이 스타터는 기본 WordPress 20 20 테마와 동일한 CSS와 글꼴, 이미지, SVG 파일 및 기본 테마에 포함 된 기타 파일을 포함한 동일한 자산 폴더를 사용합니다.
WordPress Twenty 20 스타일링에 만족한다면 그게 다입니다. 새로운 분리 된 개츠비 사이트를 즐기십시오!
그러나 맞춤형 스타일로 작업하고 싶다고 가정 해 봅시다. CSS 파일은 Gatsby-Browser.js 파일을 통해 자산 폴더에서 가져옵니다.
사이트 헤더, 바닥 글, 게시물 및 페이지의 스타일을 수정하겠습니다. Gatsby는 구성 요소를 스타일링하기위한 다양한 옵션을 제공 하며이 프로젝트에서는 20 개의 스타터 구성 요소의 스타일링 및 수정 된 CSS 마크 업을 위해 CSS 모듈을 따랐습니다.
SRC/Components/Styles에서 스타일 폴더를 만들고 기본 폴더를 만들 수 있습니다. 우리가 목표로하는 일반적인 파일 구조는 다음과 같습니다.
#! /스타일 폴더의 부분 구조
SRC
|-/구성 요소
|-/스타일
|-메인 .CSS
|-/베이스
|-reset.css
| -variables.css
|-/scss
|-헤더 .module.css
| -Mainnav.module.css
|-footer.module.css
|-elements.module.css
// 등 ...우리는 사이트의 헤더와 바닥 글을 스타일링하려고합니다. 따라서 스타터에서 Header.js 및 Footer.js 구성 요소를 열고 코드를 다음으로 바꾸겠습니다.
// src/components/header.js
"React"에서 React React
"Gatsby"에서 {GraphQL, Link, UsestaticQuery} 가져 오기
"./menu"에서 메뉴 가져 오기
"../styles/scss/header.module.css"에서 스타일 가져 오기 "
'../images/gatsby-icon.png'에서 로고 가져 오기
const 헤더 = () => {
const {wp} = usestaticQuery (GraphQL`
{
wp {
장군 세트 {
제목
설명
}
}
}
`)
반품 (
<header classname="{Style.masThead}">
<div classname="{style.masthead_info}">
<img src="%7Blogo%7D" alt="로고" style="max-width:90%" style="max-width:90%" display="Inline-Block" marginbottom="0" classname="{style.site_logo}">
링크>
<div classname="{style.site_header}">
<div classname="{style.site_title}">
</div>
<div classname="{style.site_description}" ganterouslysetinnerhtml="{{__html" : wp.generalsettings.description></div>
</div>
헤더>
))
}
기본 헤더 내보내기<p> 마찬가지로, 바닥 글은 다음과 같이 수정되었습니다.</p>
<pre rel="JavaScript" data-line=""> // src/components/footer.js
"React"에서 React React
"../styles/scss/footer.module.css"에서 가져 오는 스타일
내보내기 default () => (
<p> © {new Date (). getlyear ()} | 이 사이트는 { ''} <a href="https://www.gatsbyjs.org"> gatsbyjs </a> { 'and'} <a href="https://www.wordpress.org"> WordPress </a> </p>로 구동됩니다.
바닥다>
))이제 개발 서버를 다시 시작합시다. 우리는 새로운 맞춤형 헤더와 바닥 글을 포함하여 다음을 볼 수 있어야합니다. 저는 Morten Rand-Hendriksen의 온라인 코스 인 Gatsby를 배우는 것과 같은 스타일을 사용했습니다 (나는 팬입니다!).
Github에서 내가 사용한 모든 코드를 잡을 수 있습니다.
Gatsby 예제와 같이 분리 된 WordPress 및 Jamstack 사이트의 장점과 단점을 비교하는 많은 게시물이 있습니다. 저의 연구에서 나는 Chris가 이미 쓴 것만 큼 철저하지 않다는 것을 깨달았습니다.“WordPress and Jamstack”에서 성능과 기능에서 개발자 경험 및 구축 프로세스 및 그 이후의 모든 것을 비교하는 모든 것을 비교합니다.
다음 기사에서 다음을 포함하여 다양한 주제에 대한 유용한 결론을 도출했습니다.
일반적인 가정은 Jamstack 호스팅이 전통적인 램프 스택 호스팅보다 저렴하고 저렴하다는 것입니다. 그러나 실제로 고려해야 할 약간의 비용이 있으며 실제 비용은 다를 수 있습니다.
WordPress에서 "무료"로 얻을 수있는 모든 것 (주석, 플러그인, 통합 등을 고려하면 클라이언트 측 솔루션을 위해 서버 측 설정에서 거래 할 가치가 있는지 궁금 할 것입니다. 그의“정적이든 아니든?”에서 게시물, Chris는 다른 하나를 선택하고 싶은 이유를 세분화합니다.
우리는 WordPress와 함께 상자 밖에서 원시 댓글을 얻습니다. 그러나 정적 사이트에 대한 의견을지지하는 것은 약간의 저글러입니다. CSS- 트릭의“Jamstack CommentS”에서 저자는 Gatsby와 같은 정적 사이트에서 NetLify 서비스를 사용하여 동적 댓글을 구현할 수있는 방법을 설명합니다. 나는 이전 기사에서 이것에 대해 간단히 다루었 다.
현재 비 개발자를 대상으로하는 Gatsby React 템플릿은 없지만 Gatsby WP 테마 및 Themeforest Marketplace와 같은 일부 대행사가 격차를 메우기 시작했습니다. 예를 들어, Gatsby WP 테마는 Mailchimp 통합과 같은 동적 컨텐츠 용 플러그인을 다루고, Contact Form 7 플러그인, Yoast SEO 등을 사용합니다. Themeforest는 Gatsby - WordPress 전자 상거래 테마를 포함하여 30 개의 개츠비 템플릿을 나열하여 이러한 종류의 설정으로 얼마나 멀리 갈 수 있는지에 대한 아이디어를 제공합니다. 그냥 기억하십시오 : 이것들은 상업용 사이트이며, 당신이 찾을 수있는 대부분의 비용은 비용이 첨부되어 있습니다.
기억한다면, 나는 Gatsby를 프론트 엔드로 사용하는 헤드리스 워드 프레스 사이트를 만들기위한 여정에 대한 개인적인 반성으로 마지막 기사를 끝냈습니다. 나의 초기 테이크는 빛나는 검토보다 적었다.
저의 매우 제한된 경험을 바탕으로, 현재 사용 가능한 Gatsby WordPress 테마는 나와 같은 사용자에게 프라임 타임 사용할 준비가되지 않았다고 생각합니다. 예, 많은 WordPress 사용자와 개발자의 마음 속에있는 피가 나는 가장자리에서 무언가를 시도하는 것이 흥미 롭습니다. 동시에, WordPress 블록 편집기 인 WPGRAPHQL 및 GATSBY 소스 WordPress 플러그인에서 끊임없이 발전하는 작업은 상황이 어디로 가고 있는지 예측하기가 어렵고 다른 상황에서 안전한 상태로 정착 할 때를 예측하기가 어렵습니다.
그래서, Headless WordPress 사이트로의 긴 여행 후, 지금 내 테이크는 무엇입니까? 열린 마음을 가진 학습자로서 내 생각은 여전히 발전하고 있습니다. 그러나 나는 Chris가 그의“정적이든 아니든?”에서 말하는 것에 더 동의 할 수 없었습니다. 우편:
WordPress 사이트를 운영하는 것은 완벽하고 수용 가능하고 종종 현명한 선택입니다. 견고성과 기능 준비 측면에서 그것에 대해 생각합니다. 전자 상거래가 필요하십니까? 거기에 있습니다. 양식이 필요하십니까? 훌륭한 플러그인이 있습니다. CMS의 작동 방식을 강화해야합니까? 콘텐츠 유형과 그 안에있는 내용을 제어 할 수 있습니다. 인증이 필요하십니까? 그것은 핵심 기능입니다. 훌륭한 편집 경험이 있었으면 좋겠어요? 구텐베르크는 영광 스럽다.
나는 WordPress 애호가이며 CMS로 WordPress를 좋아합니다. 그러나 기술 학습 과제로서, 나는 개인 프로젝트로 분리 된 WordPress 사이트를 아직 포기하지 않았습니다.
WordPress로 분리 된 Gatsby 사이트를 만드는 법을 배우는 것은 계속 실망 스러웠다는 것을 인정해야합니다. 나는 모든 현대 기술 스택이 많은 WordPress 사용자에게 "차 한 잔"이 아님을 인정합니다. Gatsby는 이러한 스택이 경험이 풍부한 React 및 JavaScript 개발자를 대상으로함으로써 가파른 학습 곡선을 가지고 있습니다.
자체 학습 새로운 기술은 실망스러운 경험이 될 수 있습니다. Gatsby를 배우는 것은 우리가 (당신을 포함하여) Node, React, JavaScript 및 가장 중요한 GraphQL에 대한 경험이 부족한 경우 특히 실망 스럽습니다. 내 학습 프로젝트 사이트는 의존성으로 인해 어려움을 겪고 며칠간의 연구가 필요할 수 있습니다. 나는 때때로 문제가 결과의 가치가 있는지 궁금합니다. 나를 잘못 이해하지 마십시오. 나의 좌절은 프레임 워크 자체가 아니라 내 자신의 경험 부족으로이다 (그들은 놀랍기 때문에).
David Cramer와 Jared Palmer와 같은 경험이 풍부한 개발자조차도 Gatsby와 GraphQL이 실망스럽고 GraphQL을 사용할 때 초보자와 같은 감정을 반영합니다. 나는 다음과 같이 글을 쓰는 David와 더 동의 할 수 없었다.
정적 웹 사이트 생성기입니다. 문자 그대로 모든 곳에서 GraphQL이 필요하지 않습니다. 실제 세계에는 귀중한 인스턴스가 거의 없지만 이미 메모리에있는 객체를 읽기 위해 GraphQL API가 필요하지 않아야합니다.
GraphQL은 의견이 많은 쿼리 언어 API이며 사양이 자주 변경됩니다. 실제로, WPGRAPHQL SLACK에서의 대부분의 논의는 쿼리와 관련이 있습니다.
이 프로젝트를 수행하는 동안 CSS- 트릭에 관한 기사를 읽는 동안 Frontity React 프레임 워크를 교차했습니다. 단일 쿼리를 쓰지 않고 REST API로 모든 WordPress 데이터를 가져옵니다. 적어도 내 사용 사례에 대해 더 나은 옵션 인 것 같습니다. 또한 훨씬 간단한 대안 인 것 같습니다. 그것에 대한 간단한 경험에서, 나는 의존성이나 도서관 문제를 전혀 다룰 필요가 없었습니다. Frontity 's Themes Concept는 WordPress-Y이며 훌륭한 자습서를 제공합니다.
현재 Frontity 프레임 워크가 디퍼링 된 프로젝트 사이트에 더 나은 옵션이 될지 여부를 탐색하고 있으며 향후 기사에서 내 경험을 공유 할 것입니다.
개츠비는 경험이 풍부한 React 및 JavaScript 개발자를 대상으로 한 것 같습니다. Gatsby-Source-Wordpress와 Gatsby-Source-WpgraphQL 플러그인은 WordPress 데이터를 Gatsby 사이트에 노출시키는 데 탁월한 작업을 수행하지만 나머지는 사용자에게 달려 있습니다.
React 및 JavaScript에 대한 건전한 지식이 부족한 것은 초보자에게 주요 장애물입니다. 개츠비 커뮤니티는 이러한 격차를 많이 메 웁니다. 학습과 탐험을 계속할 수있는 많은 자원이 있습니다.
최근 2021 개 개츠비 컨퍼런스의 두 워크숍 대화는 개츠비 워드 프레스 사이트와 관련이있었습니다. Jason Bahl은 WordPress Data로 구동되는 Gatsby 블로그를 작성하는 방법과 Yoast SEO 플러그인 지원 및 사이트를 Gatsby Cloud에 배포하는 방법을 살펴 보는 워크숍을 개최합니다.
WP Engine의 Matt Landers가 주최하는 또 다른 워크샵이있어 Advanced Custom Fields 플러그인을 사용하여 팀 구성원 페이지를 작성하는 방법을 보여줍니다.
특히 실습 경험으로 더 잘 배우는 경우 두 대화는 모두 좋습니다. 또한 Jason Bahl과 함께이 Matt Report Podcast 에피소드를 발견했습니다. 여기서 Jason은 초보자를 대상으로하는 기본 질문에 대답했습니다.
Morten Rand-Hendriksen은 Gatsby Source WordPress 플러그인을 사용하는 LinkedIn 학습에 대한 훌륭한 과정을 보유하고 있습니다. 우리가 다루는 두 개의 개츠비 스타터를 확장하는 맞춤형 사이트를 만드는 더 많은 실습 경험에 관심이 있다면,이 과정은 드롭 다운 헤더 탐색, 바닥 글 메뉴, 게시물, 페이지, 카테고리, 태그 및 페이지 탐색으로 완성하는 완전한 작업 사이트를 만드는 방법을 가르치기 때문에 훌륭합니다.
코스의 연습 파일은 Github LinkedIn 학습 저장소에서 제공됩니다.
내가 이것을 쓸 당시에는 WordPress를위한 10 개의 개츠비 스타터가 있습니다. 앞에서 언급했듯이 Gatsby 스타터 WordPress Twenty만이 Gatsby 소스 WordPress 플러그인의 최신 버전을 기반으로합니다. 나머지는 버전 3입니다.
읽어 주셔서 감사합니다. 나와 같은 기술 경험이 부족한 동료 WordPress 사용자 가이 플러그인을 사용하는 방법을 항상 알고 싶습니다. 의견이 있으시면 의견에 자유롭게 게시하십시오.
위 내용은 새로운 Gatsby 소스 WordPress 플러그인 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
