Gutenberg 사용 방법 (WordPress Editor)


구텐베르크 블록 사용법2018 년에 WordPress는 오랜 편집기에서 “Gutenberg”라는 이름으로 바뀌 었습니다..


기존의 편집기와 달리 WordPress 사용자는 이제 최신 끌어서 놓기 블록 편집기를 사용하여 웹 사이트를 구축 및 사용자 정의하고, 컨텐츠를 게시하고, 서비스 및 제품을 온라인으로 판매합니다.

오랜 시간 동안 새로운 편집자를 이해하려고하거나 워드 프레스를 처음 접하는 사람이든 상관없이이 가이드는 그에 대한 정보를 제공합니다. 당신은 배울 것입니다 :

  • 구텐베르크 블록과 클래식 에디터의 차이점.
  • 블록 빌더를 사용하여 페이지를 작성하고 편집하는 방법.
  • 구텐베르크 블록의 역할.
  • 사이드 바로 추가 설정을 잠금 해제하는 방법.
  • 툴바를 사용하여 생산성을 높이는 방법.

Contents

클래식 에디터 vs 구텐베르크 블록

클래식 에디터에서 구텐베르크 블록으로의 전환은 워드 프레스의 비약적인 발전입니다. 편집자가 어떻게 진화했는지 봅시다.

클래식 워드 프레스 에디터

2003 년부터 2018 년까지 WordPress는 사용자에게 기본 텍스트 편집기를 제공했습니다..

워드 프레스 클래식 에디터

고전적인 워드 프레스 편집기는 전형적인 WYSIWYG ( “보이는 것이 무엇인지”) 편집기였습니다..

즉, 공개 입력란에 콘텐츠를 입력하고 제공된 툴바를 사용하여 형식을 지정하면 웹 사이트에서 텍스트의 모양이 다소 달라집니다..

워드 프레스 -WYSIWYG- 편집기

인터페이스가 간단하고 많은 WordPress 사용자가 수년 동안 익숙해졌습니다. 그러나 그것은 한계가 있었다.

예를 들면 다음과 같습니다.

워드 프레스 페이지 예

콘텐츠가 게시 된 웹 사이트에 표시되는 방식입니다. 그러나 “미리보기”기능을 사용하여 모든 것이 편집기에서 페이지로 올바르게 번역되었는지 확인할 수 있습니다..

실제 페이지 컨텍스트 내에서 콘텐츠를 작성할 수있는 방법이 없었습니다. 또한 HTML에 익숙하거나 플러그인에 대한 의존도가 높아 고급 디자인과 레이아웃을 만들 수있었습니다..

2018 년에 WordPress는 새로운 WordPress 편집기 (예 : Gutenberg)를 출시하여 이러한 제한을 수정하기 시작했습니다..

구텐베르크 블록 에디터

새로운 워드 프레스 편집기는 드래그 앤 드롭 블록 편집기입니다.

구텐베르크

이는 컨텐츠가 더 이상 하나의 기본 편집기에서 작성되지 않음을 의미합니다. 페이지의 내용을 만들기 위해 개별 블록을 제자리에 놓습니다..

구텐베르크 블록

각 블록을 선택하면 고유 한 도구 모음이 제공됩니다. 이를 통해 당시 필요한 편집 컨트롤 만 표시되므로보다 능률적이고 맞춤화 된 편집 환경이 가능합니다.

또한 구텐베르크 편집기는 워드 프레스 초보자가 스스로 수행하기에는 너무 많은 시간이 걸리거나 어려울 수있는 종류의 컨텐츠와 레이아웃을 훨씬 쉽게 추가 할 수 있도록했습니다..

더 많은 구텐베르크 블록 예

또한 더 이상 추측 게임이 없습니다. 블록 편집기에서 생성하는 것은 웹 사이트에 표시되는 방식입니다. 글꼴, 스타일 및 레이아웃이 모두 일치합니다.

구텐베르크와 함께하는 워드 프레스 페이지 예

하나의 워드 프레스 편집기가 다른 것보다 낫다?

클래식 에디터 나 구텐베르크 중 어느 쪽이 더 좋은지 스스로 알아 내야합니다..

WordPress는 Gutenberg와 함께 자동으로 설치되지만 사용자는 설치할 수 있습니다 클래식 에디터 플러그인 아직 블록 편집기로 이동할 준비가되지 않은 경우.

사용 가능한 다른 편집기 애드온 옵션도 있습니다. 소원비버 빌더 가장 인기있는 드래그 앤 드롭 편집기 대안 중 하나 인 블록 범주
더 많은 기능을 잠금 해제해야하는 전문 디자이너 및 개발자에게 가장 적합하지만.

지금은 구텐베르크에 대해 자세히 알아보고 워드 프레스 드래그 앤 드롭 편집기에서 무엇을 기대해야하는지 더 잘 이해하겠습니다..

구텐베르크 블록 에디터 사용법

새 페이지 (또는 게시물)를 설정하여 Gutenberg 블록 편집기를 검토하겠습니다..

화면 왼쪽의 워드 프레스 메뉴로 시작하십시오. 새 웹 페이지를 만들려면 “페이지”위로 마우스를 가져간 다음 “새로 추가”를 선택하십시오. 새 블로그 게시물을 작성하려면 “게시물”위에 마우스를 놓고 “새로 추가”를 선택하십시오..

워드 프레스 추가-새 페이지

제목 추가

새 페이지 나 게시물이 생성되면 “제목 추가”블록에 제목을 지정하십시오.

구텐베르크-타이틀 블록

첫 번째 블록 만들기

단락은 일반적으로 우리가 웹 페이지에 넣은 내용의 대부분을 구성하므로 구텐베르크가 우리에게 제공하는 첫 번째 블록은 항상 단락 블록입니다.

구텐베르크-새-단락-블록

단락으로 시작하려면 “쓰기 시작 또는 입력 / 블록 선택”이라는 빈 블록에 커서를 추가하십시오. 입력하면 콘텐츠가 블록을 채 웁니다.

블록의 컨텐츠 사용자 화

단락 스타일을 사용자 정의하려면 바로 위에 나타나는 도구 모음을 사용하십시오..

조정

대부분의 구텐베르크 블록을 사용하면 블록 내부의 내용 정렬을 변경할 수 있습니다.

구텐베르크-정렬

왼쪽이 기본값입니다. 콘텐츠를 중앙 정렬 또는 오른쪽 정렬하도록 선택할 수도 있습니다.

서식

블록 내에 텍스트가있을 때마다 굵게 표시 할 수 있습니다.

구텐베르크-단락-볼드

텍스트를 기울임 꼴로 만듭니다.

구텐베르크-단락-이탤릭

또는 하이퍼 링크를 추가하십시오.

구텐베르크-단락-링크

새 브라우저 창에서 링크를 열려면 하이퍼 링크 표시 줄에서 아래쪽 화살표를 클릭하십시오. 변경을 마치면 “Return”화살표를 클릭하여 링크를 저장하십시오.

추가 스타일 옵션

툴바에서 아래쪽 화살표를 클릭하면 추가 텍스트 디자인 옵션이 있습니다.

구텐베르크-텍스트 옵션

“code”는 텍스트를 코드 편집기로 작성된 것처럼 스타일을 지정합니다.

구텐베르크-단락 부호

“인라인 이미지”를 사용하면 이미지 주위에 텍스트를 감쌀 수 있습니다.

구텐베르크-단락-인라인 이미지

보시다시피, 구텐베르크에서 이미지와 텍스트를 서로 페어링하는 효율적인 방법은 아닙니다. 나중에 다른 방법으로 검토하겠습니다.

마지막 옵션으로 강조 표시된 텍스트를 통해 취소 선을 추가 할 수 있습니다.

구텐베르크-단락-파업

더 많은 블록 옵션

툴바의 마지막 버튼에는 항상 더 많은 블록 옵션이 표시됩니다.

구텐베르크-더 많은 블록 옵션

편집하는 블록의 종류에 관계없이이 옵션은 동일합니다.

이 작업을 간단히 요약 해 보겠습니다.

  • 블록 설정 숨기기: 오른쪽의 사이드 바가 사라집니다.
  • 복제:이 블록의 정확한 복제본을 만듭니다.
  • 전에 삽입:이 블록 위에 새로운 빈 블록을 추가합니다.
  • 이후에 삽입:이 블록 아래에 새로운 빈 블록을 추가합니다.
  • HTML로 편집: HTML로 작성하려면 블록을 코드 편집기로 바꿉니다..
  • 재사용 가능한 블록에 추가: 블록을 저장하여 사이트의 다른 곳에서 재사용 할 수 있습니다..
  • 블록 제거: 블록을 삭제합니다.

변형 블록

툴바에는 알아야 할 다른 버튼이 하나 있습니다.

구텐베르크 스위치 블록

이 버튼이 항상 이런 식으로 보이는 것은 아니므로 첫 번째 버튼을 사용하면 현재 블록을 관련 블록으로 변환 할 수 있습니다..

예를 들어 단락과 같은 텍스트 기반 블록을 제목, 목록 또는 따옴표로 바꿀 수 있습니다. 그러나 단락과 같은 것을 이미지 나 구분선으로 바꿀 수는 없습니다. 이를 위해 새로운 블록이 필요합니다.

새 블록 추가

페이지에 새 블록을 추가하려면 여러 가지 옵션이 있습니다.

전후에 삽입

이미 블록 툴바에 삽입 / 삽입 옵션이 있습니다. 그렇게하는 한 가지 방법입니다.

기존 블록에서 벗어나 클릭하고 그 위에 마우스를 올리면 작은 더하기 기호가 나타납니다.

구텐베르크-애드-블록-크로스

클릭하면 블록이 나타납니다.

구텐베르크 추가 블록 플러스 부호

기존 블록 위에 새 블록을 추가 할 블록을 선택하십시오.

블록 하단에 마우스를 올리면 동일한 더하기 부호가 표시됩니다. 유일한 차이점은 가지고있는 블록 아래에 새로운 블록을 추가한다는 것입니다.

키보드 사용

새 블록을 추가하는 또 다른 방법은 키보드에서 “Return”키를 누르는 것입니다.

구텐베르크 추가 블록 입력

페이지에 새 단락 블록이 즉시 추가됩니다..

다른 종류의 블록으로 변경하려면 새 블록 왼쪽의 더하기 부호를 사용할 수 있습니다.

구텐베르크 변경 새 블록

또는 슬래시 (/)와 사용하려는 블록 이름을 입력 할 수 있습니다.

구텐베르크 변경 블록 슬래시

예를 들어 이미지를 추가하려면 “/ image”를 입력하십시오. 일치하는 이름을 입력하면 차단 옵션이 자동으로 채워집니다..

툴바에서 블록 추가

툴바에서 항상 기본 블록 추가 기능을 사용할 수 있습니다.

구텐베르크 추가 블록

옵션을 스크롤하거나 찾고있는 블록 이름을 입력하십시오..

블록을 이동

블록 생성을 시작한 후에는 표시 순서에 만족하지 않을 수 있습니다. 또는 아래에 있어야 할 때 위의 블록을 추가했을 수도 있습니다..

한 블록에서 다른 블록으로 블록을 삭제하거나 잘라 내기 및 붙여 넣기를 할 필요가 없습니다. 해결책은 간단합니다.

Gutenberg는 끌어서 놓기 블록 편집기입니다. 즉, 원하는 곳 어디에서나 쉽게 블록을 움직일 수 있습니다.

이를 수행하는 두 가지 방법이 있습니다.

이동 화살표 사용

첫 번째 옵션은 각 블록의 왼쪽에있는 이동 화살표를 사용하는 것입니다. 이동하려는 블록 위로 마우스를 가져 가면 위쪽 및 아래쪽 화살표가 나타납니다.

구텐베르크 이동 화살표

블록을 위나 아래로 한 번만 이동하면이 옵션이 제대로 작동합니다..

구텐베르크 이동 블록

드래그 앤 드롭 사용

블록을보다 과도하게 재정렬하려면 드래그 앤 드롭을 사용해야합니다.

화살표와 같은 곳에 있습니다. 이동하려는 블록 위로 마우스를 가져가 중간에 나타나는 점을 잡습니다. 다음과 같이하면 커서가 손 모양으로 바뀝니다.

구텐베르크 그라브 앤 드롭

블록을 페이지의 새로운 부분으로 옮길 때 드롭 다운하기 전에 어두운 선이 나타나는지 확인하십시오.

구텐베르크 이동 블록

이를 통해 블록을 사용 가능한 공간으로 옮겼 음을 알 수 있습니다. 해당 선이 없으면 드래그 앤 드롭이 작동하지 않습니다.

블록 삭제

블록을 모두 제거하기로 결정한 경우이 옵션도 있습니다..

이 중 하나를 이미 보았습니다. 블록의 추가 옵션 안에 있습니다. “블록 제거”를 클릭하면 삭제됩니다.

구식으로도 언제든지 삭제할 수 있습니다. 커서를 블록 안에 넣고 키보드의“삭제”버튼을 사용하여 제거하십시오.

그러나 텍스트 기반 블록 인 경우이 방법으로 삭제하기 전에 먼저 컨텐츠를 제거해야합니다. 이미지, 내장형 위젯 등 기타 모든 사항에 대해서는“삭제”키를 사용하면됩니다..

커서를 블록 위로 드래그하여 블록을 강조 표시 한 다음“삭제”키를 누를 수도 있습니다. 한 번에 둘 이상의 블록을 강조 표시하고 삭제하려는 경우에 유용합니다.

재사용 가능한 블록 생성

재사용 가능한 블록은 블로그 게시물의 홍보 블록 또는 클릭 유도 문안과 같이 사이트 전체에서 사용할 수있는 요소를 만들 때 유용합니다..

구텐베르크 작성 재사용 블록

계속 진행해야하는 페이지에서 블록을 다시 만들지 말고 블록 옵션을 열고 “재사용 가능한 블록에 추가”를 클릭하십시오. 그런 다음 이름을 지정하십시오.

구텐베르크 이름 재사용 가능

일단 저장되면 구텐베르크 블록과 같은 방식으로 검색하고 사용할 수 있습니다. “재사용 가능”이라는 새로운 범주에서 찾을 수 있습니다.

구텐베르크 재사용 가능 카테고리

구텐베르크 블록 투어

고전적인 WordPress 편집기는 사용자가 복잡한 컨텐츠 및 레이아웃을 작성하는 데 도움이되는 측면에서 많이 남아있었습니다. 구텐베르크 블록은 그로드 블록을 없애.

블록에 대해 알아 봅시다 :

블록 카테고리

WordPress는 블록을 범주로 구성하는 훌륭한 작업을 수행했습니다..

공통 블록

다음은 일반적인 블록입니다.

공통 블록

페이지에서 사용하는 기본 텍스트 및 시각적 요소는 다음과 같습니다..

포맷팅 블록

다음은 포맷팅 블록입니다.

포맷팅 블록

이것들은 대부분 개발자에게 친숙한 블록이므로 많이 필요하지 않을 수도 있습니다. 테이블 및 풀 따옴표 블록이 유용 할 수 있습니다..

레이아웃 블록

다음은 레이아웃 블록입니다.

레이아웃 블록

넓은 공간이나 구분선과 같은 내용이나 버튼과 같은 특수 요소에 내용을 나누려면 여기에서 해당 내용을 찾으십시오..

위젯 블록

다음은 위젯입니다.

위젯 블록

대부분의 경우 이러한 요소는 블로그 사이드 바에 들어가고 페이지에는 표시되지 않는 요소입니다. 이 WPForms 예제와 같은 다른 플러그인으로 생성 된 블록은 예외입니다..

퍼가기 블록

이들은 당신의 임베드입니다 :

임베드 블록

이를 사용하여 다른 플랫폼에서 컨텐츠를 가져올 수 있습니다. YouTube 동영상, SoundCloud 클립 및 Twitter 게시물과 같은 것을 포함하는 데 좋습니다..

가장 일반적으로 사용되는 구텐베르크 블록

보시다시피, 수십 개의 구텐베르크 블록이 있습니다. 즉, WordPress에서 페이지 또는 게시물을 만드는 데 사용하는 특정 요소가 있으므로 기본 사항을 배우는 것으로 시작하십시오.

단락 블록

단락 블록을 사용하여 페이지에 일반 텍스트를 추가하십시오.

단락 블록

제목 블록

제목 블록을 사용하여 페이지에 헤더를 추가하십시오..

제목 블록

이를 통해 콘텐츠를보다 쉽게 ​​읽을 수 있도록 페이지에 새로운 주제를 소개 할 수 있습니다. H2, H3 및 H4 버튼을 사용하면 페이지 머리글에 대한 계층도 설정할 수 있습니다.

리스트 블록

목록 블록을 사용하여 글 머리 기호 또는 번호 매기기 목록을 페이지에 추가하십시오.

리스트 블록

또한 가독성을 향상시키는 데 유용합니다.

이미지 블록

이미지 블록을 사용하여 페이지에 이미지를 추가하십시오..

이미지 블록

드라이브에서 이미지를 업로드하거나 미디어 라이브러리에 이미 존재하는 이미지를 선택할 수 있습니다.

비디오 블록

비디오 블록을 사용하여 페이지에 이미지를 포함.

비디오 블록

비디오 파일을 업로드하거나 라이브러리에서 파일을 선택하거나 링크에서 가져올 수 있습니다.

비디오는 많은 공간을 차지하므로 Vimeo 또는 YouTube와 같은 비디오 공유 플랫폼에 파일을 저장하는 것이 가장 좋습니다. 그런 다음 링크와 함께 포함.

이를 위해 비디오 블록을 사용하지 않습니다. 대신 해당 임베드를 찾으십시오..

YouTube에는 하나가 있습니다.

YouTube 내장

Vimeo와 마찬가지로 :

비 메오 임베딩

페이지에 추가하려는 모든 오디오 파일 (예 : 팟 캐스트 또는 사운드 트랙)에 대해서도 동일하게 수행해야합니다. 이를 위해 오디오 블록 또는 해당 내장 (Spotify와 같은)을 사용하십시오..

버튼 블록

방문자 또는 독자가 조치를 취하도록 지시하려면 단추 블록을 사용하십시오.

버튼 블록

“지금 예약”,“가입”,“더 읽기”등으로 안내 할 수 있습니다..

미디어 및 텍스트 블록

앞에서 언급했듯이 단락 블록의 인라인 이미지 옵션은 텍스트와 이미지를 병합하는 비효율적 인 방법입니다. 대신 미디어 및 텍스트 블록을 사용하여 다음을 수행하십시오.

미디어 및 텍스트 블록

열 블록

서로 동일하거나 다른 유형의 서로 다른 두 블록을 배치하는 또 다른 방법은 열 블록을 사용하는 것입니다.

열 블록

오른쪽 또는 왼쪽에 열을 추가하려면 열 내부의 블록 위로 마우스를 가져간 다음 더하기 부호를 누르십시오. 새 블록을 추가하는 것과 동일하지만이 블록 만 수평으로 추가합니다..

소셜 미디어 임베딩 블록

소셜 미디어의 소스 코드를 사용하여 페이지에 게시물을 게시하지 말고 여기에 게시물에 대한 링크를 추가하십시오.

소셜 미디어 임베드

Facebook, Twitter 및 Instagram에 대한 내장 블록이 있으므로 소셜 미디어 게시물에 해당하는 Embed 블록을 찾으십시오..

클래식 블록

클래식 블록을 사용하면 클래식 편집기를 사용하여 WordPress에서 계속 컨텐츠를 작성할 수 있습니다.

구텐베르크-클래식 블록

클래식 블록은 웹 사이트가 클래식 편집기에서 구텐베르크 편집기로 이동할 때마다 작동합니다. 구텐베르크는 자동으로 텍스트를 자체 블록으로 변환하지 않습니다. 그냥 고전적인 편집기 인터페이스에 넣습니다..

클래식 블록을 구텐베르크 블록으로 변환하려면 “추가 옵션”으로 이동하여 “블록으로 변환”을 선택하십시오.

구텐베르크-변환 블록

편집기의 각 요소를 해당 블록으로 변환하는 것이 가장 좋습니다.

구텐베르크 변환 블록

변경 사항을 저장하기 전에 출력 된 블록에 오류가 있는지 검토하십시오..

워드 프레스 플러그인 블록

WordPress 사용자가 사용하는 대부분의 플러그인은 Gutenberg와 호환됩니다. 경우에 따라 이러한 플러그인은 편집기에 표시되는 특수 블록을 만들었습니다..

예를 들어 다음과 같은 연락처 양식 플러그인을 사용하는 경우 WPForms, 해당 블록을 찾아야합니다.

WP 폼 블록

플러그인에서 양식을 만든 다음 여기에 제공된 드롭 다운에서 찾으십시오. 더 이상 양식 단축 코드를 추적하여 붙여 넣을 필요가 없습니다..

요스트, 인기있는 SEO 플러그인은 Gutenberg에 새로운 블록을 추가 한 또 다른 플러그인입니다.

요스트 블록

WooCommerce, 워드 프레스의 전자 상거래 솔루션도 마찬가지입니다.

WooCommerce-Blocks

빌더에 새로운 블록을 추가하는 “궁극적 인”Gutenberg 플러그인도 있습니다. 구텐베르크를위한 최고의 애드온:

궁극 애드온-구텐베르크

이러한 유형의 플러그인은 블록 빌더의 기능을 확장합니다. Google지도, 회원 평가 블록 또는 전자 상거래 기능과 같은 특수 요소가 필요한 웹 사이트를 구축하는 경우 다음과 같은 플러그인으로 구텐베르크에 추가 할 수 있습니다.

문서 및 블록 사이드 바 개요

이제 블록 편집기가 다운되었으므로 문서 및 블록 사이드 바에주의를 기울 이겠습니다..

커서가 제목 블록에 있거나 블록이 존재하지 않는 페이지 어딘가에 있으면 사이드 바가 문서 설정을 가리 킵니다.

문서 사이드 바

이를 통해 페이지의 상태 및 모양과 같은 것을 제어 할 수 있습니다.

알아야 할 주요 내용은 다음과 같습니다.

상태 및 가시성

상태 및 가시성이 패널에서 페이지를 볼 수있는 사람 (공개, 개인 또는 암호로 보호 된) 및 게시 시점 (즉시 아님)을 조정할 수 있습니다. 페이지를 완전히 삭제하려면 당신도 여기서 할 수 있습니다.

퍼머 링크이 패널을 사용하여 슬러그 (URL의 식별 부분)를 변경하십시오. 예를 들어 :

https://mywebsite.com/구텐베르크 블록 빌더 /

나타난 그림추천 이미지는 블로그 게시물이 기본 블로그 피드에 표시 될 때 사람들이 보는 썸네일 이미지입니다. 또한 링크 미리보기를 표시 할 때 소셜 미디어 플랫폼이 사용하는 것.

카테고리

카테고리블로그 게시물에만 사용할 수 있습니다. 이것을 사용하여 주제를 정리하십시오.

태그

태그이것은 블로그 게시물에만 사용할 수있는 또 다른 설정입니다. 게시물에 나타나는 키워드를 추가하고 독자가 관련 주제에 대한 내용을 찾도록 도와줍니다.

커서가 페이지의 블록 중 하나에 있으면 (제목 제외) 사이드 바가 블록 편집기로 전환됩니다.

블록 사이드 바

이 사이드 바는 원하는 경우 블록에 대한 추가 편집 옵션을 제공합니다. 작업중인 블록의 종류에 따라 블록 사이드 바가 변경됩니다..

예를 들어, 단락 사이드 바는 다음에 대한 편집 옵션을 보여줍니다.

단락 블록 사이드 바

텍스트의 크기와 블록의 텍스트 또는 배경색을 조정할 수 있습니다. CSS 클래스를 사용하는 방법을 알고 있다면“고급 설정”을 사용하여 블록 모양을 추가로 사용자 정의 할 수 있습니다..

반면 이미지 사이드 바는 다음과 같은 설정을 제공합니다.

이미지 블록 사이드 바

이미지에 대체 텍스트를 추가하고 (SEO에 중요) 이미지 크기를 변경하고 이미지를 웹 페이지에 링크 할 수 있습니다.

일부 블록은 Twitter 내장과 같은 사이드 바에 추가 설정을 제공하지 않습니다.

트위터 블록 사이드 바

할 수있는 유일한 것은“고급 설정”에서 사용자 정의 CSS 클래스를 만드는 것입니다..

결론 : 블록 툴바로 블록을 완전히 편집 할 수 없다고 생각되면 사이드 바에서 추가 옵션을 확인하십시오.

툴바로 수행 할 작업

편집기의 마지막 부분은 자신의 상단에있는 도구 모음입니다.

구텐베르크 툴바

‘미리보기’및 ‘게시’버튼을 저장하기위한 장소 일 뿐이지 만 더 많은 기능과 할까요 툴바를 사용하여.

필수 사항을 검토하겠습니다.

블록

툴바의 첫 번째 버튼은 새로운 블록에 액세스 할 수있는 위치입니다.

구텐베르크 툴바 블록

실행 취소 / 다시 실행

다음 두 버튼을 사용하면 페이지에서 마지막으로 변경 한 내용을 실행 취소 (왼쪽 화살표) 또는 다시 실행 (오른쪽 화살표) 할 수 있습니다.

구텐베르크 툴바-실행 취소

페이지 정보

방문자가 쉽게 스캔 할 수있는 페이지를 만들려는 경우 “i”(정보) 버튼을 사용하면 컨텐츠에 대한 개요를 볼 수 있습니다.

구텐베르크 툴바 정보

당신은 볼 수:

  • 당신이 쓴 단어 수.
  • 제목이 몇 개이고 그 아래 제목이 몇 개입니까?.
  • 몇 개의 문단이 있습니까.
  • 사용한 블록 수.

여기서 중점을 두어야 할 가장 중요한 정보는 단어와 제목 수입니다..

페이지 구조

툴바의 다음 부분에는 페이지를 만드는 데 사용한 각 블록이 표시됩니다.

구텐베르크 블록 탐색

이를 사용하여 작업하려는 블록으로 즉시 스크롤하십시오. 긴 페이지와 게시물의 내용을 편집하는 데 도움이됩니다..

설정 저장

생성하는 모든 페이지 또는 게시물에이 처음 세 버튼을 사용합니다.

구텐베르크 저장 설정

“임시 저장”을 사용하여 페이지에서 작업하는 동안 변경 사항을 비공개로 저장하십시오..

“미리보기”를 사용하여 웹 사이트에서 페이지를 봅니다..

“게시”를 사용하여 페이지를 라이브 웹 사이트로 푸시하십시오. 페이지가 게시되면이 버튼이 “업데이트”로 변경됩니다. 이를 사용하여 새 버전의 페이지를 저장하고 사이트로 푸시하십시오..

설정

기어 (설정) 아이콘을 클릭하면 구텐베르크 사이드 바가 숨겨 지거나 표시됩니다. 이것이 비활성화되었을 때의 모습입니다 :

구텐베르크 툴바 설정 비활성화

이것이 활성화되었을 때의 모습입니다 :

구텐베르크 툴바 설정 사용

추가 옵션

툴바의 마지막 버튼에는 추가 옵션 및 도구가 표시됩니다. Gutenberg 작업 공간을 개인화하려는 경우이를 사용하십시오..

구텐베르크 툴바-추가 옵션

전망

“보기”와 관련된 첫 번째 옵션 세트 :

구텐베르크 툴바-뷰

“Top Toolbar”는 툴바를 블록 밖으로 옮기고 화면 상단에 붙입니다.

구텐베르크 톱 툴바

선택한 옵션에 따라 수정 옵션이 계속 변경됩니다. 유일한 차이점은 페이지 상단에만 위치한다는 것입니다.

“스포트라이트 모드”는 사용하지 않는 블록을 모두 희미하게합니다.

구텐베르크-스포트라이트 모드

한 번에 한 블록에 초점을 맞추는 데 도움이 필요한 경우이 기능을 사용하면 유용한 도구입니다.

“전체 화면 모드”는 구텐베르크의 산만없는 글쓰기 모드입니다.

구텐베르크 풀 스크린 모드

상단 및 왼쪽의 WordPress 메뉴와 오른쪽의 Gutenberg 사이드 바를 제거합니다..

에디터 모드

다음 옵션 세트는 편집기 모드입니다..

구텐베르크 옵션 편집자

기본적으로 Gutenberg는 사용자를 “Visual Editor”에 넣습니다..

HTML로 페이지를 작성하려면 “코드 편집기”로 전환하십시오.

구텐베르크 코드 편집자

그러나 HTML에서 블록을 수정하는보다 효과적이고 깔끔한 방법은 개별 페이지를 처리하는 것입니다 (전체 페이지의 코드를 편집 할 필요가 없기 때문에)..

“HTML로 편집”에서 코드 편집기에 액세스 할 수 있습니다.

구텐베르크-편집 -HTML

블록을 HTML로 변환합니다 :

구텐베르크 -HTML- 블록

적합하다고 생각되면 편집하십시오. 다시 시각적 모드로 변환하려면 블록 옵션을 열고 “시각적으로 편집”을 선택하십시오.

구텐베르크-편집-시각적으로

도구

구텐베르크는 또한 에디터에서 경험을 능률화 할 수있는 툴 세트를 제공합니다 :

구텐베르크 도구

첫 번째 도구는“블록 관리자”입니다.

구텐베르크 블록 매니저

앞에서 본 블록 탐색 도구와 달리이 도구를 사용하면 사용하지 않는 블록을 비활성화 할 수 있습니다. 이렇게하면 새로운 블록을 검색 할 때 사용하지 않을 블록을 거칠 필요가 없습니다..

“재사용 가능한 블록 관리”를 통해 재사용 가능한 블록 편집기로 이동합니다.

구텐베르크 재사용 가능한 블록

여기에 저장된 블록이 저장됩니다. 블록의 부모 사본을 편집하거나 완전히 새로 작성하려면 여기에서 수행하십시오..

Gutenberg는 확실히 WordPress에서 컨텐츠를보다 쉽게 ​​만들 수있게했지만 일부 작업은 지루할 수 있습니다. Gutenberg의“바로 가기”를 사용하면 마지막 편집을 취소하고 블록을 복제하며 강조 표시된 텍스트를 기울임 꼴로 표시하고 키보드만으로 변경 사항을 저장하는 등의 작업을 수행 할 수 있습니다.

구텐베르크 키보드 단축키

모든“내용 복사”옵션은 페이지의 모든 블록을 강조 표시하고 복사합니다. 이를 사용하여 컨텐츠 및 디자인이 유사한 새 페이지를 작성하십시오. 페이지> 새로 추가로 이동 한 다음 빈 페이지에 블록을 붙여 넣으십시오..

마지막 옵션은“옵션”입니다. 그러나 실제로하는 일은 사이드 바에서 문서 설정의 특정 부분을 비활성화하는 것입니다.

구텐베르크-사이드 바 옵션

다시 말하지만, 사용하지 않는 편집기의 특정 부분 (예 : 페이지 속성)이있는 경우 여기에서 사용 중지하여 필요한 요소를 방해하지 않도록하십시오..

마무리

WordPress는 1 일 이후 동일한 편집기를 사용했기 때문에 Gutenberg가 처음 소개되었을 때 약간의 반발이있었습니다..

그러나 WordPress (Wix, Shopify, Squarespace 등) 주변에서 끌어서 놓기 경쟁을 보면 변화의 시간이었습니다..

이 편집기의 발전으로 WordPress는 모든 수준의 사용자에게 서비스를 제공 할 수있었습니다. 이제 사용자는 블록 편집기를 사용하여 웹 사이트를 구축하면 다음과 같은 이점이 있습니다.

  • 생산성 향상을위한 개인화 된 편집기보기.
  • 보다 쉽게 ​​컨텐츠를 만들고 사용자 정의.
  • 이전에 필요한 기술적 노하우가없는 고급 컨텐츠 제작.
  • 재사용 가능한 블록은 설계 속도를 높이고 사이트 전체의 일관성을 보장합니다.
  • 클릭 유도 문안 버튼 및 양식과 같은 전환 요소를 쉽게 추가 및 구성.
  • 인기있는 플러그인과 테마는 구텐베르크 호환.
  • 더 빠른 시작 시간.

2022 년부터는 클래식 편집기를 더 이상 사용할 수 없습니다. 이제 구텐베르크가 어떻게 당신을 위해 일하게 될지를 알아볼 수있는 완벽한시기입니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map