next wordpress starter
1.0.0
Next.js와 정적 웹의 전력으로 WordPress를 스케일링하십시오!
yarn create next-app -e https://github.com/colbyfayock/next-wordpress-starter
# or
npx create-next-app -e https://github.com/colbyfayock/next-wordpress-starter 다음과 함께 .env.local 파일을 루트에 추가하십시오.
WORDPRESS_GRAPHQL_ENDPOINT="http://wordpressite.com/graphql"
어떤 경우에는 위의 일이 작동하지 않을 수 있습니다. 다음과 같이 변경하십시오.
WORDPRESS_GRAPHQL_ENDPOINT="http://yourhost.com/index.php?graphql
이 프로젝트의 목표는 WordPress를 헤드리스 CMS로 취하고 Next.js를 사용하여 어디서나 배포 할 수있는 제 3 자 서비스없이 정적 경험을 만드는 것입니다.
희망은 WordPress의 상자 외부 테마에서 일반적으로 예상되는 것을 지원하기 위해 최대한 많은 기능을 구축하는 것입니다. 현재 이러한 기능은 다음과 같습니다.
또한 테마는 SEO 친화적이며 다음을 포함하여 상자 밖으로 공연 할 것으로 예상됩니다.
선택적으로 YOAST SEO 플러그인 지원을 활성화하여 SEO를 슈퍼 충전 할 수 있습니다! (아래 참조)
덱에있는 문제에 대한 문제를 확인하십시오!
좀 더 기본적인 것을 원하십니까? WordPress에서 WPGRAPHQL을 통해 UPGRAPHQL을 시작하여 실행할 MVP 설정이있는 다른 스타터를 확인하십시오.
이 프로젝트는 WPGRAPHQL을 사용하여 GraphQL을 사용하여 WordPress를 쿼리합니다. 해당 요청을 적절한 엔드 포인트로 만들려면 다음.js에 사이트 정보를 요청할 위치를 알려주기 위해 환경 변수를 설정해야합니다.
.env.local 이라는 로컬로 호출 된 새 파일을 만들고 다음을 추가하십시오.
WORDPRESS_GRAPHQL_ENDPOINT= " [WPGraphQL Endpoint] " 변수의 내용을 WPGRAPHQL 엔드 포인트로 교체하십시오. 기본적으로 [Your Host]/graphql 과 유사해야합니다.
참고 : 환경 변수는 선택적으로 Next.config.js에서 정적으로 구성 될 수 있습니다.
| 이름 | 필수의 | 기본 | 설명 |
|---|---|---|---|
| WordPress_graphql_endpoint | 예 | - | WordPress wpgraphql endpoint (예 : host.com/graphl) |
| WordPress_menu_location_navigation | 아니요 | 주요한 | 헤더 탐색 메뉴 위치를 구성합니다 |
| WordPress_plugin_seo | 아니요 | 거짓 | SEO 플러그인 지원 활성화 (True, False) |
일부 테마에는 기본 메뉴 위치가 없습니다.
로컬로 프로젝트를 시작하려면 실행하십시오.
yarn dev
# or
npm run dev이 프로젝트는 이제 http : // localhost : 3000에서 사용할 수 있습니다!
개발 경험을 향상시키기 위해이 확장을 활용할 수 있습니다. Visual Studio Code에서 Eslint Extension을 설정하려면 루트 .vscode 에 새 폴더를 추가하십시오. 내부에 파일 settings.json 다음 내용이 포함되어 있습니다.
{
"editor.formatOnSave" : false ,
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
}
}이 파일을 사용하면 eslint는 구문 오류를 자동으로 수정하고 검증하고 저장의 코드를 더 예쁘게 구성합니다 (더 예쁘게 구성).
이 프로젝트를 NetLify에 배포 할 수있는 방법에 대한 두 가지 옵션이 있습니다.
next export 통해 프로젝트 수출Essential Next.js 플러그인은 이 스타터를 기반으로 프로젝트를 처음 가져올 때 옵션으로 제공되어야합니다. 그렇지 않은 경우 NetLify 플러그인 디렉토리를 사용 하여이 플러그인을 설치할 수 있습니다. 이를 통해 NetLify 가이 플러그인을 지원하는 모든 Native Next.js 기능을 최대한 활용할 수 있습니다.
프로젝트를 내보내면 Next.js는 프로젝트를 HTML 파일을 포함한 정적 자산으로 컴파일 할 수 있습니다. 이를 통해 프로젝트를 다른 사이트와 마찬가지로 NetLify로 직접 정적 사이트로 배포 할 수 있습니다. package.json build 명령의 끝에 next export next build && next export 하여이를 수행 할 수 있습니다.
선택한 옵션에 관계없이 새 사이트를 만들 때 또는 사이트 설정> 빌드 및 배포> 환경으로 탐색하고 추가 된 새 배포를 트리거하여 환경 변수를 구성 할 수 있습니다.
Next.js는 Vercel 지원 프로젝트입니다. 프로젝트를 새 사이트로 가져 와서 가져 오기 중에 추가하거나 설정> 환경 변수로 탐색하고 추가 된 새로운 빌드를 트리거하여 프로젝트 변수를 구성 할 수 있습니다.
추가 구성 파일을 피하기 위해 웹 사이트의 일부를 구성하기 위해 package.json 의 내장 속성을 활용합니다.
| 이름 | 필수의 | 설명 |
|---|---|---|
| 홈페이지 | 예 | 전체 URL을 구성하는 데 사용되는 홈페이지 또는 호스트 이름 (Ex Open Graph) |
homepage 속성 설정은 열린 그래프 태그와 같은 전체 URL이 필요한 인스턴스를 업데이트합니다.이 프로젝트는 일반적인 WordPress 테마와 같이 기본적으로 많은 내장 WordPress 기능을 활용하는 것을 목표로합니다. 다음에는 다음이 포함됩니다.
| 이름 | 용법 |
|---|---|
| 사이트 언어 | <html> 태그의 lang 속성 |
| 사이트 제목 | 홈페이지 헤더, 페이지 메타 데이터 |
| 태그 라인 | 홈페이지 자막 |
이 스타터를 최대한 활용하려면 특정 WordPress 구성이 필요합니다.
이 스타터는 현재 WordPress의 이미지 컨텐츠를 다루기위한 메커니즘을 제공하지 않습니다. 이미지는 "그대로"에 연결되어 있습니다. 즉, 이미지가 WordPress 인터페이스를 통해 업로드되면 이미지가 WordPress에서 제공됩니다.
이미지를 정적으로 제공하려면 몇 가지 옵션이 있습니다.
JetPack에서 이미지 가속기를 활성화하면 이미지가 자동으로 정적으로 제공되고 WP.com CDN을 통해 캐시됩니다. 이 기능은 JetPack의 기본 설치로 무료로 제공되므로 WordPress 사이트를 JetPack 서비스에 연결해야합니다.
Jetpack CDN
Yoast SEO 플러그인은 메타 데이터 및 오픈 그래프 사용자 정의와 같은 대부분의 주요 기능을 포함하여 부분적으로 지원됩니다.
플러그인을 활성화하려면 WORDPRESS_PLUGIN_SEO 환경 변수로 또는 Next.config.js 내에서 true 로 구성하십시오.
Next.js WordPress 스타터로 시작한 웹 사이트의 예
WP 엔진이 제공하는 공개 프로젝트를위한 WordPress 호스팅.
이 멋진 사람들에게 감사합니다 (이모티콘 키) :
콜비 페이록 | 케빈 커닝햄 | 길레르모 앙골로 | 하인 스키먼 | 그리슈 ? | Jatin Rathee | 데이브 |
브래드 개로피 | 파비오 판매 | 레오나르도 로소비스 | Avneesh Agarwal | Phattarapol L. | Peter Cruckshank | Shane O'Grady |
Nick Gaswirth | Alexandruvisan19 | 리틱 chourasiya ? | Rick Knowlton | 제 디디아 아마라 헤부 |
이 프로젝트는 All-Contritors 사양을 따릅니다. 모든 종류의 공헌을 환영합니다!
