WordPress Gutenberg를 시작하는 데 필요한 모든 것

2018년 WordPress는 Gutenberg로 콘텐츠 제작 경험을 현대화하고 단순화하는 것을 목표로 합니다. 그 이름은 인쇄술의 창시자인 요하네스 구텐베르그의 이름에서 따왔습니다. 이것은 WordPress 사용자 경험 및 테마 개발 워크플로에 대한 가장 큰 변경 사항 중 하나로 간주됩니다.

구텐베르크란?

우리 대부분은 구텐베르그가 그저 새로운 편집자일 뿐이라고 생각하지만, 그게 전부는 아닙니다. 편집자가 지금 집중하고 있는 동안 프로젝트는 궁극적으로 사용자 정의를 포함한 전체 출판 경험에 영향을 미칩니다.

지금까지 페이지를 편집하려면 제목, 본문 및 사용자 정의 필드를 수정해야 했습니다. Gutenberg를 사용하면 이 논리가 완전히 바뀌고 블록 개념이 도입됩니다. 블록은 wp-admin을 통해 동적으로 추가되는 독립형의 격리된 동적 사용자 인터페이스 구성 요소입니다. 다음 비디오에서 모든 것을 자세히 설명하므로 이에 대해서는 자세히 설명하지 않겠습니다.

State of the Word 2017에 대한 Matt Mullenweg Gutenberg 프레젠테이션

Gutenberg는 이미 플러그인으로 사용할 수 있으며 2018년 4월에 출시될 예정인 WordPress 5.0에 통합될 예정입니다. 이 팀은 현재 편집 후 경험에 집중하고 있습니다. 그러나 그때부터 템플릿 생성, 사이트 생성 등을 포함하도록 접근 방식을 확장할 것입니다. 구텐베르크로의 전환을 더 원활하게 하기 위해 팀이 마이그레이션 작업을 할 때 현재 편집기를 사용할 수 있도록 하는 클래식 편집기라는 플러그인이 있습니다.

구텐베르크가 나에게 좋은 이유는 무엇이며 이것이 WordPress의 미래에 어떤 의미가 있습니까?

Gutenberg는 의심할 여지 없이 주요 변경 사항이며 많은 개발자가 이에 적응해야 합니다. 그러나 제 생각에는 이것은 WordPress가 경험한 최고의 변화 중 하나입니다. 테마 개발 프로세스를 현대화하고 더 깨끗한 코드 기반, 더 나은 유지 관리 및 편집으로 모듈화하기 때문입니다. 더 많은 안정성을 제공하고 기존의 모놀리식 해킹 가능한 접근 방식을 제거합니다.

블록을 사용하여 페이지를 구축하는 모든 방법(단축 코드, 위젯, 사용자 정의 HTML, 미디어, 텍스트 서식, 포함 및 메타박스)을 최적화하고 단순화합니다. Matt는 자신의 게시물에서 다음과 같이 설명합니다.

• 개발자와 에이전시 는 클라이언트가 깨지거나 사용자 정의 게시물 유형을 다루지 않고 쉽게 업데이트할 수 있는 대화형 템플릿을 만들 수 있습니다.
• 플러그인 개발자 는 WordPress의 모든 부분에 완전히 통합할 수 있습니다. TinyMCE를 해킹하거나 도구 모음 버튼 뒤에서 전체 기능을 짜낼 필요 없이 게시물, 페이지, 사용자 정의 게시물 유형 및 사이드바를 포함합니다.
• 테마 개발자 는 수많은 플러그인을 번들로 제공하거나 자체 페이지 빌더를 만들 필요가 없습니다. 게시물에 대한 풍부한 레이아웃을 만들고 인터페이스에서 바로 설정을 통해 사람들을 안내하는 표준적이고 이식 가능한 방법이 있을 것입니다. 20단계 자습서 또는 긴 비디오가 필요합니다.
• 핵심 개발자 는 최신 기술로 작업할 수 있으며 15년 동안의 이전 버전과의 호환성에 대해 걱정할 필요가 없습니다.
• 사용자 는 마침내 자신의 상상력으로 구축한 사이트를 만들 수 있습니다. 그들은 이전에 해보지 못한 일을 모바일에서 할 수 있게 될 것입니다. 그들은 다시는 단축 코드를 볼 필요가 없습니다. Word에서 붙여넣은 텍스트가 자동으로 즉시 정리되고 블록으로 변환됩니다.

데모 및 예제

WordCamp US 2017의 이 강연에서 Morten은 WordPress 개발자가 집중해야 할 사항과 WordPress가 Gutenberg로 어떻게 변모할 것인지 설명합니다.

Morten Rand-Hendriksen: 구텐베르크와 미래의 WordPress

이 스크린캐스트에서 Human Made는 Gutenberg 블록의 일련의 고급 구현을 보여줍니다.

시작하는 방법

구텐베르크 편집 환경에 익숙해지는 데 도움이 될 구텐베르크 편집기의 제한된 프론트엔드 라이브 데모 인 Frontenberg와 함께 플레이 하십시오.

Frontenberg – 즉각적인 테스트를 위한 로그아웃된 Gutenberg 놀이터

Gutenberg 의 수석 엔지니어 중 한 명인 Matias Ventura Bausero의 다음 기사를 읽어보십시오.

구텐베르크, 또는 테세우스의 배 – 어떻게 시스템이 크게 변화하지 않고 근본적으로 진화할 수 있습니까?

이 스케치 기호를 가지고 놀고 자신만의 맞춤 블록을 디자인해 보세요.

Automattic/gutenberg-themes-sketch – gutenberg-themes-sketch – 블록 기반 WordPress 테마를 디자인하는 데 도움이 되는 스케치 파일 세트

wordpress.org에서 공식 개발자 핸드북을 읽으십시오. 깨끗하고 읽기 쉽고 끊임없이 발전합니다. 또한 업데이트를 받으려면 메일링 리스트에 가입해야 합니다.

소개 – "Gutenberg"는 2017 WordPress 편집기 포커스의 코드명입니다.

구텐베르크가 그 위에 구축되었으므로 ReactJS를 파헤쳐 보십시오.

React – 사용자 인터페이스 구축을 위한 JavaScript 라이브러리 – 사용자 인터페이스 구축을 위한 JavaScript 라이브러리

WordPress 핵심 팀에서 구축한 구텐베르크 예제 를 확인하십시오.

WordPress/gutenberg-examples = gutenberg-examples – 블록으로 WordPress/Gutenberg를 확장하는 예

Human Made(최고의 WP 개발 에이전시 중 하나)의 상세한 전자책을 읽어보십시오.

Gutenberg, 새로운 WordPress 편집기(백서) – 이 백서는 구현 및 채택의 주요 과제와 기업이 지금 행동할 수 있는 방법에 대한 조언을 다룹니다.

가장 인기 있는 교육 플랫폼인 FrontendMasters, Treehouse 및 Udemy의 교육자인 Zac Gordon의 이 개발 과정을 확인하십시오.

Zac Gordon의 Gutenberg 개발 과정 – Gutenberg 과정

마지막으로 Ahmad Awais의 WordPress Gutenberg 블록 플러그인 구축을 위한 구성이 필요 없는 개발자 툴킷을 설치합니다.

워드프레스 구텐베르그 블록 구축을 위한 구성이 필요 없는 #0JS 개발자 툴킷.

지금은 여기까지입니다. 이 게시물을 읽어주셔서 감사합니다. 생각, 질문 또는 제안 사항이 있으면 댓글을 남겨주세요.

웹사이트 성능, 보안 및 호스팅 경험을 향상시키려는 에이전시, 기업 또는 WordPress 개발자라면 당사 엔지니어링 팀에 문의하십시오. 우리의 관리형 WordPress 호스팅 플랫폼은 비할 데 없는 성능, 안정성 및 기술 고객 지원을 통해 업계 최고 중 하나로 간주됩니다.

우리 팀은 WordPress 개발자가 웹사이트를 구축, 호스팅 및 확장하는 방식을 재정의하는 사명을 띠고 있으므로 언제든지 연락하고 자유롭게 이야기하십시오.