Gutenberg를위한 빌드 : 플러그인 및 테마 작성자가 Gutenberg 로의 전환을 해결하는 방법

Gutenberg를위한 빌드 : 플러그인 및 테마 작성자가 Gutenberg 로의 전환을 해결하는 방법

Gutenberg를위한 빌드 : 플러그인 및 테마 작성자가 Gutenberg 로의 전환을 해결하는 방법
СОДЕРЖАНИЕ
02 июня 2020

Gutenberg를위한 빌드 : 플러그인과 테마 작성자가 전환을 해결하는 방법


WordCamp Europe 2018에서 Matt Mullenweg는 다음 몇 개월 동안 Gutenberg에 대한 대략적인 로드맵을 제시했습니다. 7 월에는 구텐베르크 채택률을 높이고 자 8 월 (또는 그 이후, 실제로는 그 이상) 5.0 베타 버전이 출시 될 예정입니다. 임박한 통합으로 WordPress 개발자가 Gutenberg를 위해 어떻게 구축 할 것인지 궁금해 할 수 있습니다..

즉, 개발자가 구텐베르크를 위해 제공하는 다양한 방법은 무엇입니까? 구텐베르크 사람들은 새롭고 흥미로운 일을하고 있습니까??

이 글에서는 플러그인과 테마 개발자가 구텐베르크를 위해 구축 할 수있는 방법에 대한 실제적이고 구체적인 예를 제공합니다..

개발자가 블록과 스타일을 사용하여보다 통합 된 편집 환경을 만드는 방법에 대한 실제 사례를 살펴보면 다음과 같은 희망이 있습니다.

  • Gutenberg가 최종 사용자로서 어떤 혜택을 얻을 수 있는지 이해.
  • 자신의 WordPress 프로젝트를 위해 Gutenberg를 위해 만들 아이디어를 얻으십시오..

여전히 구텐베르크 편집기가 무엇인지 확실하지 않은 경우 구텐베르크 편집기 전체 자습서를 먼저 확인하십시오..

기존 플러그인이 Gutenberg 로의 전환을 해결하는 방법에 대한 6 가지 예

플러그인 작성자가 Gutenberg를 위해 빌드하는 방식은 주로 플러그인의 기능에 달려 있습니다..

한편으로는 프런트 엔드 컨텐츠 추가에 중점을 둔 플러그인이 있습니다. 주로 단축 코드를 추가하여 이전에 수행했던 작업입니다..

좋은 예는 폼 플러그인입니다. 거의 모든 양식 플러그인은 양식을 작성하기위한 별도의 인터페이스를 제공 한 다음 해당 양식을 실제로 프론트 엔드에 임베드하는 단축 코드를 제공합니다..

이러한 유형의 플러그인은 일반적으로 맞춤 블록 내용을 쉽게 삽입 할 수 있습니다. 이 섹션의 몇 가지 예는 다음과 같습니다.

  • 닌자 양식
  • 주기
  • WooCommerce

그런 다음 비하인드 디테일을 제어하는 ​​데 도움이되는 다른 플러그인이 있습니다. 일반적으로 이러한 플러그인은 메타 박스를 사용합니다..

가장 잘 알려진 예는 Yoast SEO와 같은 것입니다. 콘텐츠를 추가하는 것이 아니라 모든 메타 박스 정보가 필수적입니다..

메타 박스는 이제 구텐베르크와 함께 작동하지만 구텐베르크를 활용하기 위해 플러그인에서 기능을 변경할 수 있습니다. Yoast SEO가이 문제를 해결할 수있는 몇 가지 방법과 자체 플러그인으로 작업을 수행하는 방법을 보여 드리겠습니다..

1. Ninja Forms, 새로운 구텐베르크 블록 추가

닌자 양식 WordPress.org 리포지토리에서 가장 많이 사용되는 양식 플러그인 중 하나입니다. 지금까지 간단하게 추가하여 구텐베르크 문제를 해결했습니다. 닌자 양식 블록.

다른 Gutenberg 블록과 같이 블록을 삽입하십시오.

닌자 폼 개발자가 구텐베르크를 위해 구축하는 방법

그런 다음 드롭 다운에서 양식을 선택할 수 있습니다.

닌자 폼 블록

양식을 선택하면 편집기에서 실시간 미리보기가 표시됩니다.

양식의 실시간 미리보기

지금은 그게 전부입니다. 그러나 이것은 다음과 같은 이유로 확실한 기본 방법입니다.

  • 짧은 코드로 직접 작업 할 필요가 없습니다.
  • 여전히 페이지를 편집하는 동안 디자인의 실시간 미리보기를 볼 수 있습니다

다음 두 개의 플러그인은 좀 더 깊은 스타일링 / 제어 옵션을 사용하여 빌드 할 것입니다.

2. 레이아웃 옵션으로 두 개의 구텐베르크 블록 추가

주기 Gutenberg 에디터와 함께 Give를 통합하는 데 매우 적극적으로 참여한 개발 팀이 제공하는 인기있는 기부 플러그인입니다 (이 게시물의 주제가 마음에 들면 블로그 제공, (Give 팀을 위해 구텐베르크를 건설 할 계획을 구체적으로 제시).

Give는 내가 시도한 가장 간결한 Gutenberg 경험 중 하나를 가지고 있습니다. Give의 두 블록을 통해 기부 기부 양식을 가져올 수있을뿐만 아니라 Gutenberg 인터페이스를 사용하여 기부 양식을 지정할 수도 있습니다..

다음 두 가지 블록을 사용하여 삽입 할 수 있습니다.

  • 단일 기부 양식
  • 기부 양식 그리드

givewp 구텐베르크 블록

Ninja Forms와 마찬가지로 양식을 실시간으로 미리 볼 수 있습니다. 그러나 당신은 또한 얻을 블록 편집 옵션 :

  • 형식을 선택하십시오
  • 기부금 목표 활성화 / 비활성화
  • 컨텐츠를 배치 할 위치를 선택하십시오

블록 레이아웃 옵션

양식 위로 마우스를 가져 가면 양식을 수정할 수있는 직접 링크가 제공됩니다.

블록 편집

따라서 블록이 닌자 폼의 현재 구현보다 조금 더 깊어 질 수있는 방법에 대해 살펴 보겠습니다. 그러나 WooCommerce는 한 걸음 더 나아갑니다…

3. WooCommerce는 열 통제를 가진 제품 구획을 추가합니다

WooCommerce는 WordPress 5.0이 가까워 질수록 Gutenberg 통합을 더 추가 할 것입니다 (일부 여기에 제품을 추가하는 방법에 대한 아이디어), 팀은 이미 공식적으로 구텐베르크에 발가락을 담갔다 WooCommerce Gutenberg 제품 블록 플러그인.

예 – 지금은 별도의 플러그인입니다. 그러나 일단 설치하면 기존 WooCommerce 제품을 Gutenberg 컨텐츠의 블록으로 삽입 할 수 있습니다.

추가하면 제품 차단할 제품을 선택할 수 있습니다.

구텐베르크 woocommerce 블록

그런 다음 블록 편집 옵션을 사용하여 레이아웃을 변경할 수 있습니다.

구텐베르크에서 woocommerce 레이아웃 변경

구텐베르크가 비표준 컨텐츠를 스타일링 / 구성 할 수있는 방법에 대한 훌륭한 예이기 때문에 매우 흥분됩니다..

4. 비버 빌더는 "비버 빌더로 변환" 선택권

페이지 빌더가 Gutenberg를 어떻게 다루는 지에 대해 많은 이야기가있었습니다. 아직 구체적인 내용은 없지만 Beaver Builder는 Beaver Builder 2.1에 Gutenberg 레이아웃을 Beaver Builder로 변환 할 수있는 기능을 추가했습니다.

비버 빌더 구텐베르크

지금은 변환 과정이 완벽하지 않습니다. 그러나 Gutenberg와 페이지 빌더 사이를 이동할 수 있다는 아이디어는 전환이 원활하지 않은 경우 흥미 롭습니다..

5. 메타 박스가 여전히 작동해야 함 – Yoast SEO가 좋은 예입니다.

Yoast SEO가 아직 구텐베르크를 해결하기 위해 어떤 변경 사항도 발표하지 않았다고 생각합니다. 지금은 기존 메타 박스가 구텐베르크와 작동하는 방식에 대한 예입니다. 비록 장기 솔루션보다 이전 버전과의 호환성).

보시다시피, 주요 Yoast SEO 메타 박스는 Gutenberg와 함께 제공됩니다.

구텐베르크 요스트 서 메타 박스

하지만 사이드 바에서 사용했던 SEO 및 콘텐츠 분석 점수가 누락되었습니다..

Yoast가 Gutenberg가 어떻게이를 해결하기 위해 구축 할 수 있을까요?? 여기 모형이 있습니다. Yoast가 분석을 실제 Gutenberg 인터페이스에 통합 할 수있는 가능한 방법 :

모형 Byoast seo 경고
모형 Cyoast seo 콘텐츠 분석

6. WP Product Review에서 메타 박스를 처리하는 방법

우리의 WP 제품 검토 플러그인 메타 박스를 사용하여 프론트 엔드의 출력을 제어하는 ​​플러그인 중 하나입니다 (이 경우 검토 상자)..

WP Product Review를 Gutenberg 편집기에 통합하는 방법은 다음과 같습니다.

wp 제품 리뷰 구텐베르크

사용자가 게시물이 사이드 바 토글이있는 검토라고 표시하면 위 옵션에서 검토 상자에 대한 모든 것을 구성 할 수 있습니다.

WP 검토 프로 구텐베르크 토글

개발자 – 여기 Gutenberg를위한 플러그인을 준비 할 수있는 훌륭한 자료가 있습니다.

실제 플러그인 개발자라면 특정 플러그인을 위해 Gutenberg를 어떻게 구축해야하는지 궁금 할 것입니다. 글쎄요 … 말할 수 없습니다. 그러나 우리 자신의 Hardeep Asrani 가이 멋진 게시물을 지적 할 수 있습니다. Hardeep은 Gutenberg를위한 플러그인을 준비하기위한 유용한 팁을 제시합니다..

개발자는 새로운 플러그인으로 구텐베르크를 구축 할 수 있습니다

개발자는 기존 플러그인을 구텐베르크 (Gutenberg)와 호환되도록 만드는 데 집중할뿐만 아니라 새로운 플러그인으로 구텐베르크 (Gutenberg)를 구축 할 계획입니다..

새로운 구텐베르크 블록

한편으로는 새로운 유형의 콘텐츠 블록을 추가하는 수많은 일반 플러그인이 있습니다. 이것들은 Gutenberg에게 더 많은 페이지 빌더 느낌을줍니다. 다음에 대한 블록을 찾을 수 있습니다.

  • 가격표
  • 회원 평가
  • 팀 멤버
  • 기타.

예를 들어 다음은 Stackable – Ultimate Gutenberg Blocks 플러그인. 블록 편집 옵션이 얼마나 상세한지 살펴보십시오.

새로운 구텐베르크 블록

WordPress.org에는 이미 이러한 플러그인이 많이 있습니다. 그러나 위에서 언급 한 Stackable 플러그인 외에 다른 인기있는 제품은 다음과 같습니다.

라는 오퍼링도 있습니다 코 블록 어느 시장 자체로 "콘텐츠 마케팅 담당자를위한 구텐베르크 블록".

이 틈새 접근 방식은 특히 흥미 롭습니다. 아마도 우리는 다음과 같은 특별한 구텐베르크 블록 세트를 보게 될 것입니다.

그만큼 서평 블록 플러그인은 틈새 구텐베르크 블록이 어떻게 될 수 있는지에 대한 또 다른 미니 예입니다..

Gutenberg에서 사용자 정의 필드가 작동하는 방법의 예

구텐베르크 커스텀 필드 약간의 견인력을 얻는 것으로 보이는 또 다른 흥미로운 플러그인입니다.

특정 사용자 정의 게시물 유형과 관련된 사용자 정의 필드 또는 필드 그룹을 쉽게 설정할 수 있습니다.

구텐베르크 편집기 사용자 정의 필드

그런 다음 Gutenberg 편집기로 이동하면 해당 사용자 정의 필드가 블록으로 미리 채워집니다.

구텐베르크 커스텀 필드 예제

많은 사람들이 맞춤 입력란이 구텐베르크와 어떻게 작동하는지 궁금해하고 있습니다. 이것은 이미 유망한 예입니다. 당신은 할 수 있습니다 여기에 대해 자세히 알아보십시오.

테마 개발자가 구텐베르크로의 전환을 해결하는 방법에 대한 세 가지 예

방금 플러그인 개발자가 구텐베르크를 위해 빌드하는 방법에 대한 몇 가지 예를 보았지만 테마는 어떻습니까??

테마 개발자는 전환을 해결하기 위해 두 가지 주요 방법을 따르는 것 같습니다.

  • 블록 스타일을 추가하고 구텐베르크 레이아웃 옵션을 지원하여 구텐베르크를 테마로 테마 만들기
  • Gutenberg 블록을 사용하여 테마 컨텐츠 작성

그림을 그리는 몇 가지 예는 다음과 같습니다.

1. 구텐베르크 편집기에 사용자 정의 스타일 추가

개발자가 실제로보고있는 것 중 하나는 실제 백엔드 구텐베르크 인터페이스에 테마 스타일을 추가하는 것입니다. BigBox WooCommerce의 Spencer가 진정한 WYSIWYG 경험을 제공 할 수있는 기회를 제공합니다. 타사 블록 스타일링과 관련된 몇 가지 문제에 대해 자세히 설명합니다..

예를 들어, ThemeShaper의 Ohana 테마가 게시물 제목을 포함하여 모든 구텐베르크 컨텐츠를 완전히 재구성하는 방법을 살펴보십시오.

구텐베르크 인-보드 스타일

실제로보고 싶다면, GitHub에서 Ohana 테마를 다운로드하십시오. 그리고 ThemeShaper는이 효과를 어떻게 달성했는지 설명합니다. 이 블로그 게시물에서.

2. 새로운 전각 정렬 옵션 추가

또 다른 멋진 테마 호환성 조정 기능은 넓은 정렬 지원하다. 기본적으로 특정 블록을 전체 너비로 만들 수 있습니다. 가장 일반적인 예는 전각 이미지를 삽입하는 것입니다..

다시 한 번 Ohana 테마로이 효과를 볼 수 있습니다.

구텐베르크 와이드 레이아웃

이러한 정렬이 작동하려면 테마 작성자가 명시 적으로 지원을 선언해야합니다..

3. 블록으로 테마 데모 컨텐츠 작성 – 예 : 블록 테마

마지막으로, Organic Themes의이 접근 방식은 매우 멋집니다.

블록 테마 데모 내용은 Gutenberg 블록으로 완전히 구축됩니다..

Matt가 구텐베르크 로드맵에서 7 월에 탐험을 포함 할 것이라고 명시 적으로 말했듯이 이것은 의심 할 여지없이 계속 성장할 것입니다. "구텐베르크를 포스트를 넘어 사이트 커스터마이징으로 확장."

블록 테마 외에도 Array Themes에는 원자 블록 테마 위에서 언급 한 Atomic Blocks 플러그인과 통합되도록 특별히 설계되었습니다..

개발자 – Gutenberg에 테마를 준비하는 방법은 다음과 같습니다.

기존 테마를 Gutenberg와 호환 가능하게 만드는 방법을 궁금해하는 테마 개발자 인 경우, 빌 에릭슨은 훌륭한 가이드가 있습니다 높은 점수로. 그리고 테마 지원 구텐베르크 핸드북 섹션 또 다른 좋은 자원입니다.

앞으로 더 멋진 것들이있을 것입니다.

위의 샘플링에서 플러그인 및 테마 개발자가 Gutenberg를 위해 어떻게 구축 할 것인지 더 잘 이해하기를 바랍니다..

개인적으로, 나는이 게시물을 작성하면 구텐베르크의 가능성에 대해 훨씬 더 흥분했다는 것을 알고 있습니다..

플러그인 전면에서 블록을 사용하여 이전에 단축 코드로 수행했던 모든 작업을 대체하는 것은 특히 일반 사용자의 사용 편의성을 크게 향상시킵니다..

또한 테마 개발자가 자신의 스타일을 취하고 블록을 통합 할 수있는 방법도 흥미 롭습니다. 특히 구텐베르크가 사이트 커스터마이징으로 더 많이 확장함에 따라.

이제 여러분에게 – 구텐베르크를 위해 구축 할 흥미로운 방법을 찾는 훌륭한 플러그인 또는 테마 작성자를 발견 하셨나요? 의견에 알려주십시오!

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector