다가오는 WordPress Gutenberg 편집기 사용에 대한 궁극적인 가이드

앞으로 몇 달 안에 WordPress로 콘텐츠를 만드는 방식이 근본적으로 바뀔 것입니다. 몇 년 동안 사용했던 현재 텍스트 편집기가 사라지고 새로운 WordPress Gutenberg Editor로 대체됩니다.

이와 같은 큰 변화는 아마도 당신의 머리에 알람 벨이 울리고 있을 것입니다…

작업 흐름이 중단됩니까? 현재 플러그인과 테마가 계속 작동합니까? 이 새로운 편집기로 어떻게 계속 훌륭한 콘텐츠를 만들 수 있습니까?

이 게시물에서는 이러한 질문에 대한 답변 과 더불어 훨씬 더 많은 것을 배우게 될 것입니다.

이것은 WordPress로 콘텐츠를 만드는 모든 사람을 위한 최고의 WordPress Gutenberg Editor 가이드입니다.

당신은 배울 것입니다:

1. WordPress Gutenberg Editor가 무엇인지, 왜/언제 출시되는지, 몇 가지 기본 FAQ에 대한 답변입니다.
2. 현재 편집기 기능을 모방하고 Gutenberg로 기본 블로그 게시물을 만드는 방법.
3. Gutenberg 를 사용하여 보다 생산적으로 작업하기 위한 몇 가지 은밀한 팁( 실시간 사이트에서 사용한 실제 경험을 기반으로 함 ).
4. 이전에 액세스할 수 없었던 콘텐츠 및 레이아웃 기능의 이점을 얻기 위해 Gutenberg의 새로운 기능을 활용하는 방법.

이 새로운 편집기는 무슨 일이 있어도 출시될 예정이므로 시간을 내어 WordPress Gutenberg Editor에 익숙해지십시오. 그래야 출시되는 즉시 작업을 시작할 수 있습니다!

구텐베르그 편집자가 무엇인지, 그리고 관심을 가져야 하는 이유

Gutenberg Editor는 WordPress로 게시물이나 페이지를 만드는 데 사용하는 현재 WordPress 텍스트 편집기를 완전히 재해석한 것입니다.

처음 부터 편집 경험 을 진정으로 재 구축하는 것이기 때문에 재설계 보다 재창조 라고 합니다 .

개발이 완료되면 Gutenberg가 현재 WordPress 텍스트 편집기를 대체하고 앞으로 콘텐츠를 생성하기 위해 Gutenberg 편집기를 사용할 것입니다( 하지만 현재 경험을 고수하려는 경우 옵션이 있습니다 . 자세한 내용은 나중에 설명 ).

그렇다면 구텐베르그 편집기를 "완전한 재창조"로 만드는 것은 무엇입니까?

먼저 "WordPress 편집기"가 의미하는 바를 새로 고치는 것으로 시작하겠습니다. 내가 무슨 말을 했는지 잘 모르겠다면 현재 WordPress TinyMCE 편집기의 모습은 다음과 같습니다 .

Wordable 을 사용하여 Google 문서도구에서 바로 WordPress 게시물을 게시 했다면 그곳에서 많은 시간을 보내지 않았을 것입니다! 하지만 편집자가 어떻게 작동하는지 잘 알고 있을 가능성이 여전히 높습니다.

구텐베르크 편집자는 "블록"이라는 것을 소개합니다.

현재 WordPress 텍스트 편집기는 하나의 긴 Microsoft Word 문서와 같습니다. 구텐베르그는 블록(blocks) 이라는 것으로 그 역학을 변경합니다.

단일 편집 필드가 아니라 구텐베르크의 각 "사물"은 고유한 "블록"입니다. Medium으로 게시물을 작성한 적이 있다면 같은 생각 입니다.

예를 들어:

• 텍스트의 각 단락은 고유한 별도의 블록입니다.
• 이미지는 자체 블록입니다.
• YouTube 동영상은 자체 블록입니다.
• ...당신은 아이디어를 얻습니다.

그런 다음 일련의 블록을 사용하여 콘텐츠를 조합합니다. 예를 들어, 위의 동일한 내용이 구텐베르크에서 어떻게 보이는지 보여줍니다. 네 가지 블록이 있습니다.

• 세 개의 개별 단락 블록
• 하나의 이미지 블록

이 블록 기반 접근 방식의 중요성은 콘텐츠 및 레이아웃에 대한 고급 기능의 잠금을 해제한다는 것입니다.

예를 들어 열을 도입하고 단추를 삽입하고 스타일을 지정하고 현재 편집기로는 할 수 없거나 현재 편집기에서는 HTML/CSS가 필요한 많은 다른 작업을 수행할 수 있습니다.

나중에 블록에 대해 더 자세히 다루겠습니다. 하지만 지금 당장 발을 담그고 싶다면 여기로 이동하여 Gutenberg Editor의 라이브 데모를 가지고 놀 수 있습니다. 아무 것도 설치할 필요가 없습니다.

WordPress 핵심 팀이 이러한 변경을 수행하는 이유는 다음과 같습니다.

WordPress는 대부분의 기간 동안 동일한 기본 편집기(TinyMCE)를 사용했습니다. 디자인이 여기저기서 바뀌었지만 핵심 기능은 결코 흔들리지 않았습니다.

왜 지금 변경합니까? 지난 15년 동안 효과가 있었다면 향후 15년 동안 계속 작동할 수 없는 이유는 무엇입니까?

몇 가지 이유가 있습니다.

우선, 현재 편집기는 이 시대의 일반 사용자에게 너무 제한적입니다. WordPress를 사용하면 상상할 수 있는 모든 것을 만들 수 있지만 HTML/CSS를 어느 정도 알고 있는 경우에만 가능합니다 .

이를 Squarespace 및 Wix와 같은 시각적 웹 사이트 빌더와의 경쟁과 결합하면( 둘 모두 지난 1년 동안 사용량 이 두 배 증가했습니다 ) WordPress 핵심 팀이 WordPress가 우위를 유지하기 위해 더 유연한 편집 환경이 필요하다고 느낀 이유를 이해할 수 있습니다.

둘째, Gutenberg는 바쁜 WordPress 사용자가 가지고 있는 많은 이질적인 인터페이스를 통합할 수 있는 기능을 제공합니다. 나는 여기서 너무 기술적으로 접근하고 싶지 않습니다. 그러나 타사 플러그인을 사용하는 경우 WordPress 워크플로의 일부인 다양한 단축 코드, 메타 상자 및 설정 영역이 있을 수 있습니다.

구텐베르크는 이러한 모든 인터페이스를 블록 시스템으로 통합할 수 있습니다.

셋째, 구텐베르그는 워드프레스에 현대 기술을 도입했습니다. 특히, 리액트. 이는 편집기 자체에 도움이 될 뿐만 아니라 타사 개발자가 이러한 최신 기술로 작업할 수 있도록 합니다.

마지막으로 콘텐츠 편집은 이 프로세스의 시작일 뿐입니다. 지금 당장 은 Gutenberg가 게시물과 페이지를 만드는 방법을 변경할 예정이지만 궁극적인 목표는 Gutenberg가 완전한 시각적 웹사이트 디자인으로 이동하도록 하는 것입니다.

새로운 구텐베르그 편집기로 이동의 장단점

그래서... 구텐베르크가 당신에게 좋은 일이 될까요?

글쎄, 그것은 실제로 양쪽에서 열렬한 논쟁과 함께 WordPress 커뮤니티에서 꽤 분열적인 문제였습니다.

한쪽에는 구텐베르크의 장점을 선전하는 사람들이 있습니다.

• 콘텐츠에 대한 더 많은 가능성 – Gutenberg는 버튼, 인용 부호 등을 위해 미리 만들어진 블록을 추가합니다. 이를 통해 사용자 정의 CSS 없이도 콘텐츠를 더 많이 제어할 수 있습니다. 또한 타사 플러그인은 자체 콘텐츠 블록을 추가할 수 있어 훨씬 더 유연합니다.
• 레이아웃에 대한 더 많은 가능성 – 새로운 콘텐츠 가능성 외에도 사용자 정의 코드 없이 열 또는 구분 기호를 포함하는 기능과 같은 새로운 레이아웃 옵션도 얻을 수 있습니다.
• 통합된 경험 – 타사 플러그인의 콘텐츠를 삽입하기 위해 단축 코드를 사용할 필요 없이 해당 플러그인은 자체 블록을 생성할 수 있어 더 간단하고 통합된 편집 경험을 제공합니다.
• 모바일 친화적 – Gutenberg는 기본적으로 모바일에서 잘 작동하므로 모든 장치에서 콘텐츠를 생성하거나 편집할 수 있습니다.

그러나 다른 한편으로는 이렇게 야심찬 프로젝트에 대한 몇 가지 큰 문제를 지적하는 사람들이 있습니다.

• 이전 버전과의 호환성 – 전체 인터넷의 ~32%가 현재 WordPress 편집기를 사용하므로 완전히 새로운 편집 환경으로 전환하기가 매우 어렵습니다. 기본적으로 오래된 콘텐츠가 포함된 엣지 케이스가 너무 많아서 원활한 전환을 보장하기 어렵습니다.
• 개발자 를 위한 어려움 – 테마 및 플러그인 개발자는 플러그인 및 테마에 Gutenberg 호환성을 구축해야 하며 이전 확장이 항상 완벽하게 작동하지 않을 수 있습니다. 호환성 문제가 발생할 수 있는 수만 개의 이전 플러그인이 있습니다.
• 사용자 교육 – 신규 사용자는 Gutenberg를 좋아할 수 있지만 기존 사용자는 새로운 워크플로를 배워야 합니다. 이는 비기술적 클라이언트를 위한 사이트를 구축한 개발자에게 특히 어렵습니다.

그렇다면 워드프레스 구텐베르크 에디터는 좋은 것일까요 나쁜 것일까요?

글쎄, 나는 여기에 약간의 개인적인 의견을 끼얹는 것이지만, 나는 Gutenberg가 장기적으로 긍정적인 변화가 될 것이라고 생각합니다. 외부 솔루션이나 사용자 지정 코드 솔루션 없이도 콘텐츠의 모양과 기능을 더 잘 제어할 수 있습니다.

즉, 사용할 수 있는 기존 플러그인과의 호환성과 관련하여 단기 성장통의 가능성이 분명히 있습니다. 그리고 WordPress의 거대한 사용자 기반이 새로운 인터페이스를 배우도록 강요하는 것은 어려울 것입니다.

구텐베르크 에디터는 언제 출시되나요?

짧은 대답은 – 우리는 정확한 날짜를 모릅니다 . 구텐베르그는 워드프레스 5.0의 일부로 출시될 예정이지만 정확한 워드프레스 5.0 출시 날짜에 대한 공식적인 언급은 아직 없습니다.

그러나 우리는 이제 대략적인 아이디어를 가지고 있습니다. 최근 WordPress 5.0 시작 회의 에 따르면 예상 날짜는 빠르면 2018년 11월 19 일 또는 늦어도 2019년 1월 22일 입니다.

더 긴 답변은 다음과 같습니다.

현재 Gutenberg Editor 는 베타 상태 에서 플러그인으로 존재 합니다. 원한다면 실제로 플러그인을 설치하고 오늘 사이트에서 사용할 수 있습니다( 베타 버전이므로 권장하지 않습니다 ).

베타 및 테스트가 완료되면 WordPress 팀은 Gutenberg Editor를 WordPress 5.0 의 핵심 WordPress 소프트웨어에 병합합니다. 그런 다음 WordPress 사이트를 WordPress 5.0으로 업데이트하면 Gutenberg 편집기가 현재 TinyMCE 편집기를 자동으로 대체합니다.

Gutenberg Editor가 출시되면 기존 콘텐츠는 어떻게 됩니까?

Gutenberg가 현재 편집기를 대체하고 있기 때문에 기존의 모든 콘텐츠가 어떻게 될지 궁금할 것입니다.

걱정하지 마십시오. Gutenberg는 이전 버전과 호환되도록 제작되었습니다 .

현재 상태 그대로 Gutenberg는 모든 오래된 콘텐츠를 단일 Classic 블록에 넣습니다. 예를 들어 Gutenberg를 설치할 때 위의 TinyMCE 예제는 다음과 같습니다.

원한다면 그 단일 Classic 블록 내에서 계속 작업할 수 있지만 경험은 약간 어색합니다. 또는 점 3개 아이콘을 클릭하여 기존 콘텐츠를 구텐베르크 블록으로 변환할 수 있습니다.

기존 콘텐츠를 블록으로 변환하면 다른 구텐베르크 에디터 게시물처럼 작동합니다.

구텐베르크 편집기는 오래된 콘텐츠에 대해 이 단일 클래식 블록 접근 방식을 사용하기 때문에 전환 문제가 발생하지 않아야 합니다. 그러나 타사 플러그인에 문제가 발생할 수 있으므로 여전히 경계를 유지하고 이전 콘텐츠를 확인해야 합니다.

Gutenberg 편집기는 모든 WordPress 테마에서 작동합니까?

네! 다시 말하지만, Gutenberg는 기본 편집기가 될 것이기 때문에 자연스럽게 모든 WordPress 테마와 함께 작동해야 합니다.

즉, 개발자가 Gutenberg에 대한 특수 기능을 추가하기 위해 할 수 있는 몇 가지 작업이 있으므로 곧 많은 테마의 마케팅 자료에 "Gutenberg 호환"이 표시되기 시작할 것입니다.

다음은 Gutenberg와 호환되는 테마를 만드는 것입니다.

• 특수 블록 스타일 - 테마는 핵심 구텐베르크 블록에 대한 특수 스타일을 추가할 수 있습니다. 이렇게 하면 구텐베르크의 모든 블록이 테마 디자인과 완벽하게 일치합니다.
• 전체 너비 정렬 – Gutenberg를 사용하면 전체 화면에 걸쳐 확장되는 전체 너비 이미지를 만들 수 있지만 테마 개발자가 특별히 활성화한 경우에만 가능합니다.
• 편집기 스타일 – 테마 개발자는 백엔드 구텐베르그 편집 인터페이스 에 자신의 스타일 을 추가할 수도 있습니다. 이것은 더 많은 시각적 디자인 접근 방식을 만듭니다. 여기에서 예 를 볼 수 있습니다.

WordPress 5.0이 출시되면 Gutenberg Editor를 사용해야 합니까?

아니! Gutenberg는 WordPress 5.0의 기본 편집기이지만 실제로 사용할 필요는 없습니다.

현재 WordPress 편집기를 계속 사용하려면 Gutenberg의 모든 흔적을 숨기고 현재 편집 환경을 복원 하는 공식 Classic Editor 플러그인 이 있습니다.

또는 이 플러그인을 사용하면 두 편집기를 모두 사용하고 포스트별로 전환할 수 있습니다.

WordPress Gutenberg 튜토리얼 – 새 편집기 사용 방법

자, 이제 Gutenberg 101 단기집중과정을 마쳤으므로 Gutenberg Editor를 직접 사용해 보겠습니다.

이 섹션의 목표는 구텐베르그 편집기에 익숙해지도록 하여 일단 출시되면 제대로 작동할 수 있도록 하는 것입니다.

시작하기 위해 다음은 구텐베르크 편집기 인터페이스의 핵심 요소를 이해하는 데 도움이 되는 그래픽입니다.

1. 에디터의 본체입니다. 콘텐츠로 작업할 곳입니다.
2. 이 버튼을 사용하여 새 블록 을 추가 할 수 있습니다 . 이미지, 비디오 또는 기타 블록 콘텐츠를 추가하려는 경우 해당 콘텐츠를 사용합니다.
3. 여기에서 게시물의 제목을 추가합니다.
4. 이러한 옵션을 사용하면 초안을 저장하고 미리보기를 보고 결국에는 게시물을 게시할 수 있습니다.
5. 차단을 선택 하지 않은 경우 이 사이드바를 사용하여 카테고리 및 추천 이미지와 같은 게시물에 대한 전체 옵션을 관리할 수 있습니다. 당신이 블록을 선택해야 할 때, 그것은 당신에게 특정 블록에 대한 옵션을 제공합니다.

그런 다음 새 블록을 추가하려고 하면 사용 가능한 모든 블록 목록이 있는 이 팝업 창이 표시됩니다. 다음 중 하나를 수행할 수 있습니다.

1. 사용 가능한 모든 블록을 탐색하려면 아코디언 탭을 사용하십시오.
2. 원하는 블록을 직접 검색

Gutenberg Editor로 간단한 블로그 게시물을 만드는 방법

이 섹션에서는 현재 WordPress 편집기에서 이미 수행할 수 있는 동일한 유형의 작업 을 수행하는 방법을 배웁니다.

기본적으로 기존 워크플로를 Gutenberg Editor에 적용하는 방법을 배우게 됩니다. 그런 다음 다음 섹션에서는 구텐베르크 편집기의 새로운 기능을 활용하는 방법을 보여 드리겠습니다.

기본 텍스트 콘텐츠 추가 또는 서식 지정

기본 단락 텍스트 내용은 간단합니다. 클릭하고 입력하기만 하면 됩니다. 유일한 즉각적인 차이점은 Enter 키 를 눌러 새 줄을 만들 때마다 Gutenberg가 다음 단락에 대한 새 블록을 자동으로 생성한다는 것입니다.

블록을 클릭하면 다음을 수행할 수 있는 서식 도구 모음이 표시됩니다.

• 정렬 변경
• 굵게 및 기울임꼴 추가
• 링크 삽입
• 등.

기본적으로 이것은 현재 편집기의 도구 모음과 매우 유사합니다.

나중에 이 기본 접근 방식에 대한 깔끔한 대안을 보여 드리겠습니다.

도구 모음의 서식 옵션 외에도 오른쪽 사이드바에 다음을 수행할 수 있는 몇 가지 옵션이 있습니다.

• 텍스트 크기 및 색상 제어
• 단락 시작표시문자 추가

여기까지는 간단하죠?

A 표제 작성(H1, H2 등)

제목을 만드는 몇 가지 다른 옵션이 있습니다.

먼저 + 아이콘을 사용하여 새 제목 블록을 삽입할 수 있습니다.

표제 블록을 삽입하면 텍스트를 추가하기 위해 입력하고 사이드바 또는 도구 모음을 사용하여 사용할 표제(예: H2 대 H3)를 제어할 수 있습니다.

또는 다음을 수행할 수도 있습니다.

• 블록 유형 변경 버튼을 사용하여 일반 단락 블록을 제목 블록으로 변환합니다.
• 마크다운을 사용하여 제목을 만듭니다(예: "## 이것은 제목 2입니다").

다음은 이 두 가지 방법을 설명하는 GIF입니다.

이미지, 비디오 또는 기타 미디어 콘텐츠 삽입

자, 이제 기본 텍스트와 제목을 모두 만들고 서식을 지정할 수 있습니다. 그러면 대부분의 방법을 얻을 수 있습니다!

그러나 미디어 콘텐츠를 삽입하는 것은 어떻습니까?

미디어 콘텐츠를 삽입하려면 동일한 + 아이콘을 사용하여 블록을 삽입할 수 있습니다.

기존 콘텐츠 아래에 미디어 콘텐츠를 삽입하려면 왼쪽 상단 모서리에 있는 + 아이콘을 사용합니다.

또는 콘텐츠를 삽입하려는 지점 위로 마우스를 가져가서 기존 콘텐츠 사이에 새 블록을 삽입할 수도 있습니다. 그런 다음 새 블록 왼쪽에 있는 블록 추가 버튼을 사용합니다.

블록 삽입 팝업을 열면 다음 중에서 선택할 수 있습니다.

• 이미지 – WordPress 미디어 라이브러리 또는 외부 URL의 이미지를 삽입합니다.
• 비디오 – WordPress 미디어 라이브러리 또는 외부 URL의 비디오를 포함합니다.
• 퍼가기 - 도움에 별도의 블록 당신은 유튜브, 비 메오, 스포티 파이, 사운드 클라우드, 인스 타 그램 및 기타 소스의 톤에서 내용을 포함.

예를 들어 WordPress 미디어 라이브러리에서 이미지를 삽입하는 방법은 다음과 같습니다.

YouTube 동영상을 삽입하는 방법은 다음과 같습니다.

다른 플러그인에서 단축 코드 삽입

대부분의 WordPress 사용자와 같은 경우 단축 코드를 사용하여 게시물이나 페이지 콘텐츠에 포함하는 플러그인이 있을 것입니다.

결국 목표는 이러한 유형의 플러그인이 직접 사용할 수 있는 고유한 구텐베르크 블록을 만드는 것입니다( 자세한 내용은 나중에 설명 ). 그러나 그때까지는 Shortcode 블록을 사용하여 Gutenberg 콘텐츠에 단축 코드를 계속 포함할 수 있습니다.

콘텐츠 재정렬(두 가지 옵션이 있음)

자, 지금까지는 충분히 쉽습니다. 하지만 블록의 순서를 변경하려면 어떻게 해야 할까요?

그렇게 하려면 두 가지 옵션이 있습니다.

먼저 블록* 왼쪽으로 마우스를 가져가면 끌어서 놓기를 사용하여 블록을 이동할 수 있습니다.

둘째, 위 또는 아래 화살표를 사용하여 블록을 한 위치 위 또는 아래로 이동할 수도 있습니다.

*드래그 앤 드롭을 활성화하려면 위쪽 화살표와 아래쪽 화살표 사이에 있는 6개의 점 위에 마우스를 놓으십시오.

비하인드 스토리 정보 작업(카테고리, URL 슬러그 등)

자, 위의 내용은 기본적인 블로그 콘텐츠를 추가하는 방법을 다루어야 합니다. 그러나 게시를 위해 게시물을 준비하는 다른 모든 비하인드 스토리 부분은 어떻습니까?

대부분의 작업에서 사이드바의 문서 탭을 사용할 수 있습니다. 여기에서 다음을 수행할 수 있습니다.

• 게시 날짜를 선택하거나 게시물을 미리 예약하세요.
• 작성자 선택
• 카테고리 및 태그 추가
• 추천 이미지 선택
• 발췌문을 입력하세요

또한 해당 사이드바 위의 버튼을 사용하여 다음을 수행할 수 있습니다.

• 게시물 미리보기
• 초안 저장( Gutenberg은 자동으로 초안을 저장하므로 일반적으로 수동으로 수행할 필요가 없습니다 )
• 게시물 게시

유일한 까다로운 것은 게시물 또는 페이지의 URL 슬러그를 설정하는 것입니다. 수정하려면 제목을 클릭하세요. 그런 다음 슬러그를 편집할 수 있습니다.

Yoast SEO와 같은 플러그인은 어떻습니까? 어떻게 작동합니까?

콘텐츠의 각 부분에 대해 구성해야 하는 다른 백엔드 플러그인이 있을 가능성이 큽니다.

이 플러그인과 상호 작용하는 두 가지 방법이 있습니다.

우선 많은 개발자들이 이미 구텐베르그와의 직접적인 호환성을 위해 노력하고 있습니다. 예를 들어, Yoast SEO는 이미 Gutenberg를 지원하며 동일한 문서 사이드바에서 바로 Yoast SEO 설정을 구성합니다.

아직 Gutenberg를 지원하지 않는 레거시 플러그인의 경우 TinyMCE 편집기에서와 같이 메타 상자를 계속 사용할 수 있습니다.

구텐베르크와 함께 더 생산적으로 작업하기 위한 6가지 팁

Gutenberg Editor로 처음 작업을 시작하면 약간 느려질 수 있습니다. 이러한 팁은 프로세스 속도를 높이고 필요한 블록을 더 쉽게 빠르게 삽입하고 사용자화할 수 있도록 도와줍니다.

1. "/"를 입력하여 블록을 빠르게 삽입하여 엄청난 시간 절약

위에서 보여드린 블록을 삽입하는 방법은 사용 가능한 모든 블록을 볼 수 있기 때문에 구텐베르크를 막 시작하는 경우에 유용합니다.

그러나 필요한 블록에 익숙해지면 빠른 삽입 기능을 사용하여 훨씬 빠르게 삽입할 수 있습니다.

+ 아이콘을 클릭하는 대신 다음을 수행하십시오.

• Enter 키를 눌러 새 블록을 만듭니다.
• "/"를 입력하십시오
• 블록 이름 입력 시작

입력하는 동안 Gutenberg는 일치하는 블록을 자동 제안합니다. 그런 다음 Enter 키 를 눌러 원하는 블록을 삽입하십시오.

작동 중입니다.

훨씬 빠르죠?

2. 빠른 편집을 위한 키보드 단축키 배우기

Gutenberg에는 작업 속도를 높일 수 있는 키보드 단축키가 포함되어 있습니다.

CTRL + Alt + H (Windows) 또는 CMD + Alt + H (Mac)를 클릭하여 이러한 단축키의 전체 목록을 불러올 수 있습니다.

전체 목록을 읽어야 하지만 다음은 가장 도움이 되는 몇 가지입니다.

• Ctrl + S – 초안을 저장합니다.
• Ctrl + Z – 실행 취소 또는 Ctrl + Y – 다시 실행.
• Ctrl + Alt + 백스페이스 – 선택한 블록을 삭제합니다( 정말 편리합니다 ).
• Ctrl + Shift + D - 선택한 블록을 복제합니다.
• Ctrl + Alt + T - 선택한 블록 앞에 새 블록을 삽입합니다.
• Ctrl + Alt + Y - 선택한 블록 뒤에 새 블록 을 삽입합니다.

굵게 표시 하려면 Ctrl + B 또는 붙여넣으려면 Ctrl + V 와 같은 대부분의 전역 단축키를 사용할 수도 있습니다.

3. 데스크탑에서 Gutenberg 콘텐츠로 이미지 드래그

많은 이미지를 포함해야 하는 경우 이것은 또 다른 깔끔한 트릭입니다.

각 이미지에 대해 새 이미지 블록을 수동으로 생성할 필요 없이 데스크탑의 폴더에서 게시물에 포함할 수 있는 위치로 이미지를 바로 드래그할 수 있습니다.

그러면 WordPress가 미디어 라이브러리에 자동으로 업로드하여 바로 삽입합니다. 주의 해야 할 것은 단 한 가지입니다 . 이미지를 드래그할 때 파란색 선이 표시되는지 확인하세요 . 그렇지 않으면 작동하지 않습니다.

4. 고정 편집 도구 모음 추가

일부 사람들이 Gutenberg에서 어렵게 느끼는 한 가지는 다른 단락 블록 사이를 클릭할 때 편집 도구 모음이 계속 깜박거린다는 것입니다.

마음에 들지 않으면 통합 도구 모음 옵션을 켜서 구텐베르크 인터페이스 상단에 항상 표시되는 도구 모음 을 얻을 수 있습니다.

5. 표제, 목록 등에 마크다운 구문을 사용합니다.

마크다운 사용을 좋아한다면 구텐베르크에서 일부 마크다운 구문을 통합할 수 있습니다.

예를 들어:

• ## -는 H2를 생성한다 (당신은 이미 이것을보고 - 그것은 제목 블록으로 변환).
• * – 정렬되지 않은 목록을 시작합니다.
• 1. – 순서가 지정된 목록을 시작합니다.
• > – 블록 인용을 생성합니다( 인용 블록으로 변환 ).

모든 마크다운 구문을 사용할 수는 없습니다. 그러나 위의 예는 이미 빠른 서식 지정에 매우 유용합니다.

6. 필요한 경우 HTML을 직접 편집

HTML을 직접 편집하려는 상황이 발생하면 오른쪽 상단 모서리에 있는 세 개의 점 을 클릭하거나 Ctrl + Shift + Alt + M 단축키를 사용하여 코드 편집기에 액세스할 수 있습니다.

열, 버튼 등 구텐베르크의 새로운 기능 활용!

좋습니다. 우리는 다음을 다뤘습니다.

• Gutenberg를 사용하여 기본 블로그 게시물을 만드는 방법.
• 구텐베르그와의 작업 속도를 높이는 몇 가지 팁.

이제 Gutenberg로 할 수 있는 멋진 새 기능 에 대해 알아보겠습니다. 이것은 WordPress 팀이 Gutenberg로 나아가기로 결정한 이유를 설명하는 데 도움이 되는 흥미로운 기능입니다.

삽입 버튼 – HTML 필요 없음

이전 편집기에서 버튼을 만드는 유일한 방법은 수동으로 CSS 클래스를 추가하거나 타사 플러그인을 사용하는 것이었습니다.

Gutenberg에서는 Button 블록을 추가하기만 하면 됩니다. 버튼 텍스트를 편집하려면 클릭하고 입력하기만 하면 됩니다. 색상을 변경하려면 사이드바를 사용할 수 있습니다.

다중 열 레이아웃 생성

이전 편집기에서는 사용자 정의 HTML 또는 타사 플러그인 없이 다중 열 레이아웃을 생성할 방법이 없었습니다.

Gutenberg를 사용하면 Columns 블록을 추가하기만 하면 됩니다. 그런 다음 다른 열 안에 다른 블록을 추가할 수 있습니다.

전체 너비로 늘인 이미지 만들기

테마가 지원하는 경우 전체 화면에서 이미지를 늘릴 수 있는 새로운 전체 너비 정렬 옵션이 제공되어 흥미로운 콘텐츠 레이아웃이 열립니다.

재사용 가능한 블록 템플릿 생성

정기적으로 동일한 블록 조합을 사용하는 경우 재사용 가능한 블록 그룹을 생성하여 시간을 절약할 수 있습니다.

먼저 클릭하고 끌어 포함하려는 모든 블록을 선택할 수 있습니다. 그런 다음 세 개의 점 을 사용하여 재사용 가능한 블록 에 추가 할 수 있습니다.

당신은 그것에 이름을 줄 것입니다. 그런 다음 다른 블록과 마찬가지로 전체 템플릿을 삽입할 수 있습니다.

타사 플러그인을 사용하여 더 많은 블록과 기능을 추가할 수 있습니다.

여기에서 구텐베르크가 더욱 쿨해지기 시작합니다.

타사 플러그인은 구텐베르크 디자인에 사용할 수 있는 자체 블록을 추가할 수 있습니다.

이것이 당신에게 도움이 될 수 있는 두 가지 방법이 있습니다:

• 이미 사용 하고 있는 플러그인은 고유한 구텐베르크 블록을 생성합니다. 예를 들어 이벤트 캘린더 플러그인을 사용하는 경우 플러그인의 이벤트 블록을 사용하여 이벤트를 삽입할 수 있습니다.
• 개발자는 디자인을 더 잘 제어할 수 있는 수많은 일반 새 콘텐츠 블록을 추가하는 전용 Gutenberg 플러그인을 만들고 있습니다.

예를 들어 무료 Stackable 플러그인을 확인하세요. 설치 및 활성화하면 구텐베르크에서 완전히 새로운 스택 가능 블록 세트를 얻을 수 있습니다.

그런 다음 해당 블록을 사용하여 가격표 또는 고객 평가 삽입과 같은 멋진 작업을 수행할 수 있습니다.

이것은 WordPress Gutenberg Editor의 시작일 뿐입니다.

그리고 그게 다야! 여기까지 했다면 WordPress 5.0이 출시되는 즉시 실행할 준비가 된 Gutenberg 전문가가 되어야 합니다.

새로운 워크플로를 배우는 것이 대부분의 사람들이 "주말을 보내는 재미있는 방법" 목록에 포함되어 있지는 않지만, WordPress를 사용하는 모든 사람에게는 Gutenberg의 모든 기능을 마스터하는 것이 필수적입니다.

Gutenberg는 현재 콘텐츠를 만드는 방식에 영향을 미칠 뿐만 아니라 앞으로 WordPress에서 중요한 역할을 할 것입니다.

위에서 본 모든 것은 구텐베르크의 1단계에 불과합니다. 2단계에서 Gutenberg는 페이지 템플릿으로 이동하고 3단계에서는 Gutenberg를 완전한 웹사이트 사용자 정의 도구로 전환합니다.

그러니… 구텐베르그와 좋은 친구가 되십시오. 앞으로 몇 년 동안 구텐베르그를 많이 보게 될 것이기 때문입니다!