목차
나의 WordPress Journey : 테마 개발 및 그 너머
JavaScript 명령과 개츠비의 부상
초기 반응 및 휴식 API 기반 테마 탐색
반응을 받아들이고 개츠비를 발견했습니다
Gatsby와 WordPress 통합 : 자원 및 과제
개츠비 테마 및 플러그인
필수 가이드
부분적으로 포팅 된 개츠비 사이트와 향후 방향
최종 생각
웹 프론트엔드 CSS 튜토리얼 분리 된 WordPress Gatsby 사이트로의 긴 여행

분리 된 WordPress Gatsby 사이트로의 긴 여행

Apr 04, 2025 am 10:08 AM

분리 된 WordPress Gatsby 사이트로의 긴 여행

과학 실험실에서 웹 디자인에 이르기까지 : 생물 학자의 예기치 않은 경로. 저의 과학적 배경은 깊은 호기심, 현미경과 페트리 요리에서 매혹적인 웹 개발 세계로 나를 이끌었던 특성을 심어주었습니다. 나는 처음에 홈 사이트 및 Dreamweaver와 같은 도구를 사용하여 원심 분리 샘플과 동결 실험 속에서 HTML을 배웠습니다. 10 년 전, WordPress는 내 인생에 들어와 취미를 전임 열정으로 변화 시켰습니다.

나의 WordPress Journey : 테마 개발 및 그 너머

자체적으로 선포 된 WordPress 애호가 인 나의 초기 진출은 테마 해킹과 관련이 있었으며, Morten Rand-Hendriksen의 "밑줄을 사용하여 처음부터 빌드 테마"에 크게 의존했습니다. 이 튜토리얼은 Morten의 Github 저장소와 함께 귀중한 자원이되었습니다. Sara Soueidan의 "Just Write"철학에서 영감을 얻은 개인적인 검색 엔진-친선 아카이브를 위해 커스텀 테마 (Kuhn, Popper 등)를 만들었습니다. 플러그인과 위젯 개발에도 덤벼 들었지만 주로 주로 주제에 중점을 두었습니다.

JavaScript 명령과 개츠비의 부상

Matt Mullenweg의 2015 년 Gutenberg 편집자 발표와 함께 더 깊은 JavaScript 능력을 요구하는 것은 전환점이되었습니다. JavaScript의 중요성을 인식하면서, 나는 Zell Liew의 "학습 JavaScript - 당신이 어디서 시작해야하고 당신이 붙어있을 때 무엇을해야합니까?"

초기 반응 및 휴식 API 기반 테마 탐색

Foxhound, Picard 및 Celestial과 같은 React 기반 WordPress 테마의 출현은 처음에 저의 관심을 끌었습니다. 그러나 이것들은 실험적인 것처럼 보였고 제한된 JavaScript/React 지식은 더 깊은 탐구를 방해했습니다.

반응을 받아들이고 개츠비를 발견했습니다

Robin Wieruch의 "JavaScript Fundamentals를 배우기 전에 JavaScript 기초"를 로드맵으로 사용하여 React를 다루었습니다. @Reach/Router를 사용하는 Gatsby의 라우팅의 단순성은 게임 체인저로 입증되었습니다. Gatsby의 속도와 효율성은 마케팅 자료에 설명 된 바와 같이이 결정에 초점을 맞추기위한 결정을 더욱 강화했습니다. 나는 Gatsby의 튜토리얼과 Justin Formentin의 "Gatsby 사이트 구축에 대한 Gatsby 사이트 구축에 대한 가이드"와 같은 Gatsby의 튜토리얼과 레버리지 자원을 부지런히 일하고 Reactgo의 "Gatsby를 사용하여 고급 블로그 구축 및 React"를 통해 내 기술을 구축했습니다. CSS 모듈의 장점을 인정하지만 Sass Styling의 친숙 함과 가독성으로 인해 Sass 스타일을 선택했습니다.

Gatsby와 WordPress 통합 : 자원 및 과제

수많은 Gatsby 기반 사이트가 성능 및 보안 장점을 강조합니다. 그러나 WordPress와 통합하면 문제가 발생했습니다. Northstack 튜토리얼에 자세히 설명 된대로 Disqus와 같은 대체 솔루션이 필요했습니다.

개츠비 테마 및 플러그인

저의 탐색에는 다양한 WordPress에서 영감을 얻은 Gatsby 테마 (Tabor, Gatsby 테마 WordPress 스타터, WordPress 소스 테마) 및 Gatsby WP 테마 프로젝트가 포함되었습니다. 유망한 반면, 많은 테마에는 초보자 친화적 인 문서가 부족했습니다. 또한 Gatsby Source WordPress Experimental 및 Gatsby WordPress Gutenberg와 같은 실험 플러그인을 조사했습니다.

필수 가이드

Mohammad Mohsin의 Smashing Magazine 기사는 테마를 반응하고 Gatsby에게 20 개의 19 개를 포팅하는 것이 귀중한 것으로 판명되었습니다. WPGRAPHQL을 사용하여 WordPress 사이트를 Gatsby에 포팅하는 것에 대한 Henrik Wirth의 포괄적 인 7 부 가이드는 Jason Longstorf의 Jamstack으로의 마이그레이션에 대한 튜토리얼 ( Jason Podcast와의 학습을 기반으로)과 마찬가지로 매우 도움이되었습니다.

부분적으로 포팅 된 개츠비 사이트와 향후 방향

이 여정의 정점은 내 자신의 부분적으로 포팅 된 WordPress Gatsby 사이트입니다 (자세한 연습은 다음 주에 출판 될 것입니다). 공식 릴리스를 기대하면서 실험적인 WordPress 플러그인의 개발을 면밀히 모니터링하고 있습니다. WordPress 블록 편집기, WPGraphQL 및 Gatsby 소스 플러그인의 지속적인 진화는 흥미로운 가능성과 지속적인 과제를 제시합니다.

최종 생각

현재 Gatsby WordPress 테마는 초보자에게 완전히 성숙하지 않습니다. 분리 된 접근 방식은 대규모 프로젝트에 대한 상당한 이점을 제공하지만, 개인적 요구에 대해 마크 다운 컨텐츠가있는 표준 Gatsby 사이트만으로도 충분합니다. 개츠비와 워드 프레스 통합의 미래는 유망하지만 현재의 한계는 신중한 고려가 필요합니다. 다음 주에 자세한 튜토리얼을 계속 지켜봐 주시기 바랍니다!

위 내용은 분리 된 WordPress Gatsby 사이트로의 긴 여행의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Google 글꼴 변수 글꼴 Google 글꼴 변수 글꼴 Apr 09, 2025 am 10:42 AM

Google Fonts가 새로운 디자인 (트윗)을 출시 한 것을 볼 수 있습니다. 마지막 큰 재 설계와 비교할 때 이것은 훨씬 더 반복적 인 느낌이 듭니다. 차이를 간신히 말할 수 있습니다

HTML, CSS 및 JavaScript로 애니메이션 카운트 다운 타이머를 만드는 방법 HTML, CSS 및 JavaScript로 애니메이션 카운트 다운 타이머를 만드는 방법 Apr 11, 2025 am 11:29 AM

프로젝트에 카운트 다운 타이머가 필요한 적이 있습니까? 그런 것은 플러그인에 도달하는 것이 당연하지만 실제로는 훨씬 더 많습니다.

HTML 데이터 속성 안내서 HTML 데이터 속성 안내서 Apr 11, 2025 am 11:50 AM

HTML, CSS 및 JavaScript의 데이터 속성에 대해 알고 싶었던 모든 것.

Sass를 더 빨리 만들기위한 개념 증명 Sass를 더 빨리 만들기위한 개념 증명 Apr 16, 2025 am 10:38 AM

새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.

SVG에서 타탄 패턴을 생성하는 정적 사이트를 만드는 방법 SVG에서 타탄 패턴을 생성하는 정적 사이트를 만드는 방법 Apr 09, 2025 am 11:29 AM

타탄은 일반적으로 스코틀랜드, 특히 세련된 킬트와 관련된 패턴의 천입니다. tartanify.com에서 우리는 5,000 개가 넘는 타탄을 모았습니다

WordPress 테마에서 VUE 구성 요소를 빌드하는 방법 WordPress 테마에서 VUE 구성 요소를 빌드하는 방법 Apr 11, 2025 am 11:03 AM

Inline-Template 지시문을 사용하면 기존 WordPress 마크 업에 대한 진보적 인 향상으로 풍부한 VUE 구성 요소를 구축 할 수 있습니다.

PHP는 템플릿을위한 A-OK입니다 PHP는 템플릿을위한 A-OK입니다 Apr 11, 2025 am 11:04 AM

PHP 템플릿은 종종 서브 파 코드를 용이하게하는 데 나쁜 랩을 얻지 만, 그렇지 않아야합니다. PHP 프로젝트가 기본을 시행 할 수있는 방법을 살펴 보겠습니다.

접근 가능한 색상 조합을 생성하기 위해 SASS를 프로그래밍합니다 접근 가능한 색상 조합을 생성하기 위해 SASS를 프로그래밍합니다 Apr 09, 2025 am 11:30 AM

우리는 항상 웹에 더 액세스 할 수 있도록하고 있습니다. 색상 대비는 수학 일 뿐이므로 Sass는 디자이너가 놓친 에지 케이스를 다룰 수 있습니다.

See all articles