구텐베르그 튜토리얼: 새로운 WordPress 블록 편집기를 사용하는 방법

게시 됨: 2019-04-22

인쇄기의 발명가인 Johannes Gutenberg의 이름을 따서 명명된 새로운 WordPress Gutenberg 블록 편집기는 WordPress 5.0 릴리스에서 WordPress의 기본 편집기로 데뷔했습니다.

임무는 간단합니다. WordPress로 새로운 쓰기 및 편집 환경을 만드는 것입니다.

블록을 제공하는 Gutenberg 편집기는 WordPress로 풍부한 미디어 콘텐츠를 만드는 독특한 경험을 제공합니다.

클래식 편집기를 사용하면 작업을 수행하기 위해 플러그인이 필요한 많은 기능을 편집기에 기본적으로 제공합니다.

잠시 후 Gutenberg 블록 편집기를 사용하는 방법을 안내해 드리겠습니다.

WordPress를 사용하는 많은 클라이언트와 함께 작업하면서 편집 환경으로의 힘든 이동에 감명을 받은 사람은 많지 않았습니다.

아마도 수백만 명의 WordPress 사용자가 Gutenberg 출시와 함께 클래식 편집기를 선택한 이유를 설명할 것입니다.

wordpress-classic-editor-plugin

한 부분은 이전 테마와의 호환성, 다른 부분은 사용자의 분노 또는 Gutenberg 블록 편집기 사용 방법에 대한 지식 부족일 수 있습니다.

이 글을 보신 후에 나중에 블록 편집기에 익숙해지길 바랍니다.

단계별: Gutenberg 블록 편집기를 사용하는 방법은 무엇입니까?

페이지나 게시물을 만드는 것으로 시작됩니다. 이미 익숙한 내용입니다.

구텐베르크 블록 편집기로 페이지 또는 게시물 만들기

새 페이지나 게시물을 추가할 때 가장 먼저 주목해야 하는 것은 이 도구 모음입니다.

구텐베르크 편집기 도구 모음

왼쪽에는 + 블록 추가 도구 모음이 있습니다. 콘텐츠에 블록을 추가할 수 있는 곳 중 하나입니다.

구텐베르크 편집기 도구 모음 블록

마지막 블록 아래를 클릭한 다음 나타나는 + 아이콘을 클릭하여 블록을 추가할 수도 있습니다.

또는 블록 사이에 마우스를 가져가면 블록 추가 아이콘이 나타나면 클릭하여 블록을 추가합니다.

구텐베르크 편집기 도구 모음 블록 추가

다음은 실행 취소 및 다시 실행 버튼입니다.

구텐베르크 편집기 도구 모음 블록 실행 취소

상단 도구 모음의 다음 아이콘은 콘텐츠 구조를 보여줍니다.

구텐베르크 편집기 도구 모음 콘텐츠 구조

다음은 블록 탐색입니다.

콘텐츠가 많은 블록으로 늘어나면 여기에서 블록으로 이동할 수 있습니다. 멋지지 않아.

구텐베르크 편집기 도구 모음 탐색

오른쪽으로,

구텐베르크 편집기 도구 모음 오른쪽

이것은 매우 간단합니다. 초안 저장, 게시물 미리보기(새 탭에서 열림) 및 게시입니다.

다음 아이콘은 설정 표시를 토글합니다. 오른쪽 창을 표시하거나 숨깁니다.

Gutenberg 편집기 디스플레이 오른쪽 창 숨기기

설정이 표시되면 클릭하여 더 넓은 방해 없는 편집기를 위해 숨깁니다. 다시 클릭하면 설정이 표시됩니다.

Gutenberg 편집기 도구 모음 오른쪽 창 숨김

도구 모음의 끝 부분에는 세 개의 수직 점이 있습니다. 이를 통해 더 많은 도구와 옵션을 숨기거나 볼 수 있습니다.

구텐베르크 편집기 도구 모음은 더 많은 옵션을 숨깁니다.

그렇다면 더 많은 도구와 옵션으로 정확히 무엇을 할 수 있을까요?

  • 도구 모음이 있습니다. 한 곳에서 모든 블록 및 문서 도구에 액세스할 수 있습니다.
  • 스포트라이트 모드. 한 번에 한 블록에 집중할 수 있습니다.
  • 전체 화면으로보기. 완전히 산만하지 않은 편집 경험을 위해 편집기를 날려보세요.
  • 코드 및 HTML 블록이 처리할 수 없는 코드를 작성해야 하는 경우 시각적 편집기(지금 표시되는 것)와 코드 편집기 사이를 전환합니다.
  • 재사용 가능한 블록 관리
  • 키보드 단축키 및
  • 편집기의 모든 내용을 복사합니다.

구텐베르크 블록

지금까지 계속 블록을 보았지만 블록은 무엇입니까?

우리는 그것들이 어떻게 작동하는지 보기 위해 먼 길을 갈 것이고, 바라건대 그것은 이해가 될 것이고, 당신은 그것에 대한 이해를 바탕으로 정의를 내릴 수 있을 것입니다.

구텐베르크에는 가장 많이 사용되는 블록, 공통 블록, 서식 지정, 레이아웃 요소, 위젯 및 포함을 포함하여 각각 6가지 범주의 블록이 있습니다.

구텐베르크 에디터 포스트 블록 추가

콘텐츠를 만드는 동안 클래식 편집기를 사용하면 텍스트 영역에 콘텐츠를 입력하기만 하면 됩니다.

새 편집기를 사용하면 콘텐츠 유형에 따라 구성된 블록을 활용할 수 있습니다. 텍스트 콘텐츠를 추가하려면 텍스트/단락 블록, 이미지 – 이미지 블록, HTML, HTML 블록이 필요합니다.

이것은 모든 콘텐츠를 한 곳에 삽입하는 기존 편집기와 다릅니다.

블록 도구 사용

각 블록에는 콘텐츠를 만들고 편집할 때 사용할 수 있는 도구가 있습니다.

모든 도구가 표시되는 클래식 편집기와 달리.

이러한 도구에 액세스하려면 블록의 콘텐츠를 클릭합니다. 이것은 당신이 자주 사용할 것이므로 단락/내용을 사용할 것입니다.

구텐베르크 편집자 액세스 차단 도구

블록의 텍스트나 콘텐츠를 클릭하면 콘텐츠 위에 도구 상자가 열립니다.

구텐베르크 오픈 블록 도구

표시되는 도구는 사용 중인 블록에만 적용되므로 미디어 블록을 클릭할 때 동일한 도구가 표시될 것으로 기대하지 마십시오.

예를 들어 단락 블록에는 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬, 굵게, 기울임꼴, 하이퍼링크 삽입 및 텍스트 취소선이 있는 텍스트 서식 도구가 있습니다.

또한 기본 블록 기능을 확장하기 위해 설치한 다른 플러그인에 의해 추가된 더 많은 서식 도구입니다.

블록을 가로지르는 블록 도구 키트의 두 가지 기능은 시작 부분의 " 블록 변환 "이고, 끝 부분에는 블록에 대한 추가 설정이 포함된 " 추가 옵션" 아이콘(세로 점 3개)이 표시되어야 합니다. 당신은 함께 일하고 있습니다.

구텐베르크 블록 변환

블록을 변형하려면 위의 단락 블록에서 본 것처럼 블록을 클릭합니다.

첫 번째 단락을 인용문으로 변환하려는 경우 해당 단락을 클릭한 다음 Transform to Icon을 클릭한 다음 변환할 새 블록을 선택합니다.

구텐베르크 블록 변환

이제 단락 블록을 인용으로 변환하면 다음과 같습니다.

블록을 인용으로 변환

추가 옵션 버튼

블록 도구 키트에 있는 다른 버튼은 세 개의 수직 점인 " 추가 옵션 " 아이콘입니다. 블록을 클릭하면 볼 수 있습니다.

변형 블록 도구 추가 옵션

추가 옵션을 사용하면 다음과 같이 블록으로 더 많은 작업을 수행할 수 있습니다. 블록 설정 숨기기, 블록 복제, 이전 및 진행 블록 앞이나 뒤에 블록 삽입, HTML로 블록 편집, 재사용 가능한 블록에 블록 추가, 마지막으로 블록 제거 또는 삭제.

Gutenberg 블록 편집기로 게시물 또는 페이지의 퍼머링크 변경

게시물 또는 페이지의 제목을 클릭합니다. 그 위에 링크가 표시됩니다.

구텐베르크 에디터 변경 퍼머링크

편집 버튼을 클릭하고 링크를 수정한 다음 저장을 클릭합니다.

구텐베르크 편집기 변경 영구 링크 저장

구텐베르크 블록 편집기의 문서 및 블록 설정

모든 구텐베르크 게시물 또는 페이지의 오른쪽에는 두 개의 탭이 있는 창이 있습니다.

문서 창에는 상태 및 가시성, 게시물 작성자, 태그, 기능 이미지, 토론을 포함하여 페이지 또는 게시물에 대한 문서 전체 설정이 있습니다.

구텐베르크 편집기 문서 설정

블록 창에는 블록별 설정이 있습니다.

콘텐츠 영역에서 블록을 클릭한 다음 오른쪽 창에서 블록 창을 클릭합니다.

구텐베르크 편집기 블록 설정

결론

우리는 Gutenberg Blocks 편집기에 대한 몇 가지 정보를 다루었습니다.

그 지식으로 콘텐츠 제작 및 게시에 사용하는 것이 덜 위협적이기를 바랍니다.

새로운 블록 편집기를 사용하고 있습니까? 그것에 대한 당신의 경험은 무엇입니까?

기존 WordPress 게시물을 Gutenberg 블록으로 변환할 수도 있습니까?