새 워드프레스 블록 편집기 사용 방법 (Gutenberg 자습서)

워드프레스 5.0에서는 고전적인 컨텐츠 편집기가 구텐베그 (Gutenberg)라는 새로운 블록 편집기로 대체되었습니다. 그 이후로 WordPress에서 Gutenberg 블록 편집기를 사용하는 방법에 대한 포괄적 인 자습서를 작성하라고 독자 중 몇 사람에게 요청했습니다.

워드프레스 블록 편집기는 WordPress에서 콘텐츠를 만드는 완전히 새로운 방식입니다. 이 튜토리얼에서는 새로운 워드프레스 블록 편집기를 사용하는 방법과 시각적으로 멋진 블로그 게시물 및 페이지를 만드는 방법에 대해 설명합니다.

새로운 워드프레스 블록 편집기 일명 구텐베르크 사용하기

블록 편집기 (구텐베르크)와 클래식 편집기의 차이점은 무엇입니까?

새 편집자를 시작하기 전에 먼저 구텐베르크 블록 편집기와 클래식 편집기의 차이점을 비교하고 이해해 보겠습니다.

다음은 WordPress의 클래식 편집기 모습입니다.

오래된 워드프레스 편집기

워드프레스 5.0으로 업그레이드하면 다음과 같이 새로운 블록 편집기가 표시됩니다.

구텐베르트 (Gutenberg)라고도하는 새로운 워드프레스 블록 편집기

보시다시피 WordPress에서 콘텐츠를 만드는 두 가지 완전히 다른 편집기입니다.

오래된 고전 편집기는 Microsoft Word와 매우 유사한 서식 지정 단추가있는 텍스트 편집기였습니다.

새 편집기는 '블록'(따라서 블록 편집기라는 이름)이라는 완전히 다른 접근 방식을 사용합니다.

블록은 컨텐츠 레이아웃을 작성하기 위해 편집 화면에 추가하는 컨텐츠 요소입니다. 게시물이나 페이지에 추가하는 각 항목은 하나의 블록입니다.

각 단락, 이미지, 비디오, 갤러리, 오디오, 목록 등에 대한 블록을 추가 할 수 있습니다. 모든 일반적인 콘텐츠 요소에 대한 블록이 있으며 워드프레스 플러그인으로 더 많은 것을 추가 할 수 있습니다.

새로운 워드프레스 블록 편집기는 고전적인 편집기보다 어떤면에서 좋습니까?

새로운 워드프레스 블록 편집기는 게시물과 페이지에 다양한 유형의 콘텐츠를 추가하는 간단한 방법을 제공합니다.

예를 들어 이전에 콘텐츠에 표를 추가하려면 이전에 별도의 표 플러그인이 필요했습니다.

새 편집기를 사용하면 테이블 블록을 추가하고 열과 행을 선택하고 내용을 추가하기 만하면됩니다.

테이블 블록

콘텐츠 요소를 위아래로 이동하고 개별 블록으로 편집하고 미디어가 풍부한 콘텐츠를 쉽게 만들 수 있습니다.

가장 중요한 것은 새로운 워드프레스 블록 편집기가 사용하고 배우기 쉽다는 것입니다.

이것은 단지 자신의 첫 번째 블로그를 시작하거나 DIY 비즈니스 웹 사이트를 구축하고있는 모든 워드프레스 초보자에게 엄청난 이점을 제공합니다.

즉, 새로운 워드프레스 블록 편집기를 사용하여 멋진 콘텐츠를 만드는 방법을 살펴 보겠습니다.

Gutenberg 튜토리얼에서 다루는 내용은 다음과 같습니다.

  1. 구텐베르크 사용 – 새로운 워드프레스 블록 편집기
  2. 새 블로그 게시물 또는 페이지 만들기
  3. 구텐베르크에 블록을 추가하는 방법
  4. 새 편집기에서 블록 작업하기
  5. Gutenberg에서 블록 저장 및 재사용
  6. Gutenberg의 게시 및 설정 게시
  7. 새 편집기에서 플러그인 설정
  8. 구텐베르크에 몇 가지 공통 블록 추가하기
  9. 구텐베르크의 새로운 콘텐츠 블록 탐색
  10. Gutenberg를 프로처럼 사용하는 것에 대한 보너스 팁
  11. 구텐베르크 블록 편집기에 더 많은 블록 추가하기
  12. 구텐베르크에 대한 FAQ

준비된? 들어가자.

구텐버그 사용 – 새로운 워드프레스 블록 편집기

블록 편집기는 직관적이고 유연하게 설계되었습니다. 이전 워드프레스 편집기와 다르게 보였지만 고전 편집기에서 수행 할 수 있었던 모든 작업을 수행합니다.

먼저 기본 편집기에서 수행 한 기본 작업과 블록 편집기에서 수행 된 작업을 다루겠습니다.

블록 편집기를 사용하여 새 블로그 게시물 또는 페이지 만들기

평상시처럼 새 블로그 게시물이나 페이지를 만들 것입니다. 간단히 클릭하십시오. 게시물»새로 추가 당신의 워드 프레스 관리자의 메뉴. 페이지를 만들면 다음으로 이동하십시오. 페이지»새로 추가 메뉴.

새 글 추가

그러면 새 블록 편집기가 시작됩니다.

구텐베르크에 블록을 추가하는 방법

모든 게시물이나 페이지의 첫 번째 블록은 제목입니다.

그런 다음 마우스를 사용하여 제목 아래로 이동하거나 키보드의 탭 키를 눌러 아래로 이동하고 글쓰기를 시작할 수 있습니다.

구텐베르크에 지위 추가

기본적으로 다음 블록은 단락 블록입니다. 이렇게하면 사용자가 바로 쓰기 시작할 수 있습니다.

그러나 다른 것을 추가하고 싶다면 편집기의 왼쪽 위 모서리 나 기존 블록 아래 또는 블록의 왼쪽에있는 새 블록 추가 버튼을 클릭 할 수 있습니다.

새 차단 버튼 추가

버튼을 클릭하면 상단에 검색 막대가 있고 아래에 일반적으로 사용되는 블록이있는 블록 추가 메뉴가 표시됩니다.

탭을 클릭하여 블록 카테고리를 검색하거나 키워드를 입력하여 블록을 빨리 검색 할 수 있습니다.

구텐베르크에서 블록 찾기 및 추가

마우스를 사용하여 버튼을 클릭하지 않으려면 /를 입력하여 키보드 단축키를 사용하여 블록을 검색하고 추가 할 수 있습니다.

새 편집기에서 블록 작업

각 블록에는 블록 상단에 나타나는 자체 도구 모음이 있습니다. 편집중인 블록에 따라 도구 모음의 단추가 변경됩니다.

예를 들어이 스크린 샷에서는 텍스트 정렬, 굵게, 기울임 꼴, 삽입 링크 및 취소 선 버튼과 같은 기본 서식 버튼을 보여주는 단락 블록에서 작업하고 있습니다.

각 블록에는 자체 도구 모음이 함께 제공됩니다.

툴바를 제외하고 각 블록은 편집 화면의 오른쪽 열에 나타나는 고유 한 블록 설정을 가질 수 있습니다.

블록 설정

간단한 끌어서 놓기 또는 각 블록 옆에있는 위 / 아래 버튼을 클릭하여 블록을 위아래로 이동할 수 있습니다.

블록을 위아래로 이동

구텐베르크에서 블록 저장 및 재사용

블록에 관한 가장 좋은 점 중 하나는 개별적으로 저장하고 재사용 할 수 있다는 것입니다. 특히 기사에 특정 콘텐츠 스 니펫을 자주 추가해야하는 블로거에게 특히 유용합니다.

각 블록 툴바의 오른쪽 구석에있는 메뉴 버튼을 클릭하기 만하면됩니다. 메뉴에서 '재사용 가능한 블록에 추가'옵션을 선택하십시오.

나중에 다시 사용하기 위해 블록 저장하기

이 재사용 가능한 블록의 이름을 입력하라는 메시지가 나타납니다. 블록의 이름을 입력 한 다음 저장 버튼을 클릭하십시오.

재사용 가능한 블록에 이름 지정하기

이제 블록 편집기는 블록을 재사용 가능한 블록으로 저장합니다.

이제 블록을 저장 했으므로 사이트의 다른 워드프레스 게시물 및 페이지에 재사용 가능한 블록을 추가하는 방법을 살펴 보겠습니다.

재사용 가능한 블록을 추가하려는 게시물이나 페이지를 편집하기 만하면됩니다. 게시물 편집 화면에서 블록 추가 버튼을 클릭하십시오.

'재사용 가능'탭에서 저장된 블록을 찾을 수 있습니다. 검색 창에 이름을 입력하여 찾을 수도 있습니다.

재사용 가능한 블록 삽입

마우스를 가져 가면 블록 미리보기를 빠르게 볼 수 있습니다. 블록을 클릭하여 게시물이나 페이지에 삽입하기 만하면됩니다.

모든 재사용 가능한 블록은 워드프레스 데이터베이스에 저장되며 '모든 재사용 블록 관리'링크를 클릭하여 관리 할 수 ​​있습니다.

재사용 가능한 블록 관리

그러면 블록 관리자 페이지로 이동합니다. 여기에서 재사용 가능한 블록을 편집하거나 삭제할 수 있습니다. 재사용 가능한 블록을 내보내고 다른 워드프레스 웹 사이트에서도 사용할 수 있습니다.

WordPress에서 가져 오기 재사용 가능한 블록 가져 오기

Gutenberg Block Editor의 옵션 게시 및 관리

각 워드프레스 게시물에는 많은 메타 데이터가 포함되어 있습니다. 여기에는 게시 날짜, 카테고리 및 태그, 추천 이미지 등과 같은 정보가 포함됩니다.

이 모든 옵션은 편집기 화면의 오른쪽 열에 깔끔하게 배치됩니다.

WordPress의 새로운 편집기 인 Gutenberg의 문서 설정

구텐베르크의 플러그인 옵션

워드프레스 플러그인은 블록 편집 프로그램의 API를 활용하여 편집 화면 내에서 자신의 설정을 통합 할 수 있습니다.

일부 인기있는 플러그인은 이미 블록으로 사용할 수 있습니다. 예를 들어, 최고의 워드프레스 양식 빌더 플러그인 인 WPForms를 사용하면 위젯 블록을 사용하여 양식에 양식을 추가 할 수 있습니다.

새로운 구텐베르크 편집자의 WPForms 블록

Yoast SEO를 사용하여 새 편집기에서 SEO 설정을 편집하는 방법은 다음과 같습니다.

새로운 구텐베르크 편집자의 Yoast SEO 설정

WooCommerce는 또한 워드프레스 게시물 및 페이지에 쉽게 추가 할 수있는 위젯 블록을 제공합니다.

WooCommerce 제품 블록

새 편집기에서 일부 공용 블록 추가

기본적으로 새로운 에디터는 클래식 에디터가 한 모든 것을 할 수 있습니다. 그러나, 이전보다 훨씬 빠르고 우아하게 일하게 될 것입니다.

1. 새로운 워드프레스 편집기에 이미지 추가하기

새 워드프레스 편집기에서 이미지 블록을 사용할 준비가되었습니다. 블록을 추가 한 다음 이미지 파일을 업로드하거나 미디어 라이브러리에서 선택하기 만하면됩니다.

새로운 워드프레스 편집기의 이미지 블록

컴퓨터에서 이미지를 드래그 앤 드롭 할 수 있으며, 편집기는 자동으로 이미지 블록을 생성합니다.

이미지를 추가하면 대체 텍스트, 크기와 같은 이미지 메타 데이터를 추가하고 이미지에 링크를 추가 할 수있는 블록 설정을 볼 수 있습니다.

이미지 블록 설정

2. 새 블록 편집기에 링크 추가

블록 편집기에는 텍스트를 추가 할 수있는 여러 블록이 있습니다. 가장 일반적으로 사용되는 것은 도구 모음에 링크 삽입 버튼과 함께 제공되는 단락 블록입니다.

다른 모든 일반적으로 사용되는 텍스트 블록에는 도구 모음에 링크 단추가 포함됩니다.

목록 블록의 링크 버튼

키보드 단축키 (Mac의 경우 Command + K, Windows 컴퓨터의 경우 Ctrl + K)를 사용하여 링크를 삽입 할 수도 있습니다.

3. 구텐베르크에 이미지 갤러리 추가하기

갤러리 블록은 이미지 블록과 같이 작동합니다. 추가 한 다음 이미지 파일을 업로드하거나 선택합니다.

새 워드프레스 편집기에서 이미지 갤러리 추가하기

4. Gutenberg를 사용하여 워드프레스 게시물에 단축 코드 추가하기

모든 단축 코드는 클래식 편집기에서와 똑같이 작동합니다. 단순히 단락 블록에 추가하거나 단문 블록을 사용할 수 있습니다.

단문 블록 추가하기

구텐베르크의 새로운 콘텐츠 블록 탐색

Gutenberg 편집자는 WordPress의 일부 오랜 사용 가능성 문제를 해결하기 위해 새로운 블록을 도입 할 것을 약속합니다.

다음은 사용자가 대단히 도움이 될 것으로 믿는 일부 즐겨 찾기입니다.

1. WordPress의 텍스트 옆에 이미지 추가하기

이전 편집기를 사용하여 많은 사용자가 텍스트 옆에 이미지를 배치 할 수 없었습니다. 이 작업은 이제 미디어 및 텍스트 블록.

미디어 및 텍스트 블록

이 간단한 블록에는 두 개의 블록이 나란히 배치되어 이미지를 쉽게 추가하고 그 옆에 텍스트를 추가 할 수 있습니다.

2. 워드프레스 게시물 및 페이지에 버튼 추가하기

블로그 게시물이나 페이지에 버튼을 추가하는 것은 클래식 편집기에서 또 다른 성가심이었습니다. 단추의 단축 코드를 만든 플러그인을 사용해야하거나 HTML 모드로 전환하고 코드를 작성해야했습니다.

구텐베르그 (Gutenberg)에는 단추 나 블록에 단추를 빠르게 추가 할 수있는 단추 블록이 있습니다.

구텐베르크에 버튼 블록 추가하기

단추 링크를 추가하고 색상을 변경하고 세 가지 단추 스타일 중에서 선택할 수 있습니다.

3. 블로그 게시물과 방문 페이지에 아름다운 표지 이미지 추가하기

시도해 볼 수있는 또 다른 멋진 기능은 '표지'블록입니다.이 블록을 사용하여 게시물 및 페이지에 표지 이미지를 추가 할 수 있습니다.

표지 이미지는 페이지의 새로운 섹션이나 기사의 시작 부분에 표지로 자주 사용되는 더 넓은 이미지입니다. 멋지게 보이며 매력적인 콘텐츠 레이아웃을 만들 수 있습니다.

표지 블록을 추가하고 사용하려는 이미지를 업로드하기 만하면됩니다. 표지에 대한 오버레이 색상을 선택하거나 고정 된 배경 이미지로 설정하여 사용자가 페이지를 아래로 스크롤 할 때 시차 효과를 만들 수 있습니다.

구텐베르크 편집장의 표지 이미지 블록

4. 기사 안에 표 만들기

고전 편집기에는 워드프레스 게시물에 표를 추가하는 버튼이 없습니다. 플러그인을 사용하거나 사용자 정의 CSS 및 HTML을 작성하는 테이블을 작성해야했습니다.

새로운 구텐베르크 편집자는 기본 테이블 블록을 제공하므로 게시물과 페이지에 테이블을 쉽게 추가 할 수 있습니다. 블록을 추가 한 다음 삽입 할 열과 행 수를 선택하기 만하면됩니다.

테이블 블록

이제 테이블 행에 데이터를 추가 할 수 있습니다. 필요한 경우 행과 열을 추가 할 수 있습니다. 또한 두 가지 기본 스타일 옵션을 사용할 수 있습니다.

5. 다중 열 콘텐츠 만들기

고전적인 편집자가 전혀 처리하지 못했던 또 다른 문제는 다중 열 콘텐츠를 만드는 것입니다. 블록 편집기를 사용하면 기본적으로 두 개의 단락 블록 열을 추가하는 Columns 블록을 추가 할 수 있습니다.

다중 열 콘텐츠

이 열 블록은 매우 유연합니다. 한 행에 최대 6 개의 열을 추가하고 각 열 내부에 다른 블록을 사용할 수도 있습니다.

Gutenberg를 프로처럼 사용하는 보너스 팁

새로운 블록 편집기를 살펴보면 실제 콘텐츠를 만드는 것보다 블록을 추가하고 조정하는 데 더 많은 시간을 할애 할 것인지 궁금해 할 것입니다.

글쎄, 새로운 편집기는 믿을 수 없을 정도로 빠르며 심지어 몇 분 동안은 매우 기본적인 사용법으로도 생각조차하지 않고 즉시 블록을 추가 할 수 있습니다.

곧이 새로운 접근 방식으로 워크 플로우가 얼마나 빨라지는지 알게 될 것입니다.

고급 사용자의 경우 새로운 워드프레스 편집기로 더욱 빠르게 작업 할 수있는 보너스 팁이 있습니다.

1. 블록 도구 모음을 위로 이동하십시오.

스크린 샷에서 모든 블록 위에 표시되는 툴바가 있음을 눈치 챘을 것입니다. 이 툴바를 편집기 상단으로 옮길 수 있습니다.

화면 오른쪽 상단에있는 점 3 개 버튼을 클릭하고 상단 툴바 옵션을 선택하기 만하면됩니다.

블록 도구 모음을 편집기의 맨 위로 이동하십시오

2. 키보드 단축키 사용

구텐베르크에는 작업 흐름을 훨씬 좋게하는 몇 가지 편리한 바로 가기가 함께 제공됩니다. 바로 사용하기 시작해야 할 첫 번째 것은 /입니다.

/를 입력하고 입력을 시작하면 즉시 추가 할 수있는 일치하는 블록이 표시됩니다.

더 많은 바로 가기를 보려면 화면의 오른쪽 상단에있는 점 3 개 메뉴를 클릭 한 다음 '키보드 바로 가기'를 선택하십시오.

키보드 단축키 실행

이렇게하면 사용할 수있는 모든 키보드 바로 가기 목록이있는 팝업이 나타납니다. 이 목록에는 Windows 및 Mac 사용자를위한 다양한 바로 가기가 있습니다.

3. 미디어를 끌어다 놓아 미디어 블록을 자동으로 만듭니다.

구텐베르크 (Gutenberg)를 사용하면 화면 어디에서나 파일을 드래그 앤 드롭 할 수 있으며 자동으로 블록을 생성합니다.

하나의 이미지 또는 비디오 파일을 삭제할 수 있으며 블록이 생성됩니다. 여러 개의 이미지 파일을 드롭하여 갤러리 블록을 만들 수도 있습니다.

새 워드프레스 편집기에서 갤러리 블록 끌어 놓기

4. YouTube, Twitter, Facebook, Vimeo 및 기타 삽입물 추가하기

Gutenberg는 블록 편집기에 새로운 임베드 블록을 도입했습니다. YouTube, Twitter, Facebook 등 지원되는 모든 포함 유형에 대한 블록이 있습니다.

블록 삽입

그러나 언제든지 삽입 URL을 복사하여 붙여 넣기 만하면 자동으로 블록이 만들어집니다.

예를 들어 YouTube 동영상 URL을 추가하면 자동으로 YouTube 삽입 블록이 만들어지고 동영상이 표시됩니다.

YouTube 퍼가기

WordPress의 구텐베르크 블록 편집기에 더 많은 블록 추가

WordPress의 새로운 블록 편집기는 개발자가 자신의 블록을 만들 수있게합니다. 새로운 편집기를위한 블록 번들을 제공하는 몇 가지 멋진 워드프레스 플러그인이 있습니다.

다음은 그 중 몇 가지입니다.

1. 고급 구텐베르크

고급 구텐베르그

Advanced Gutenberg는 WooCommerce 제품 슬라이더, 회원 평가,지도, 카운터, 탭, 아코디언 등과 같은 인기있는 콘텐츠 요소에 대한 몇 가지 블록을 제공합니다.

또한 사용자가 사용자 역할을 기반으로 블록에 액세스 할 수있는 고급 제어 기능을 제공합니다. 사용자 프로파일을 작성하고 추가 할 수있는 블록을 선택할 수 있습니다.

2. 스택 가능 – 구텐베르크 블록

쌓아 올릴 수있는 - Gutenberg 구획

Stackable – Gutenberg Blocks은 웹 사이트에서 사용할 수있는 아름답게 디자인 된 구텐베르크 블록 모음입니다. 여기에는 컨테이너, 게시물, 피쳐 그리드, 아코디언, 이미지 상자, 아이콘 목록, 클릭 유도 문안 등에 대한 블록이 포함됩니다.

3. 편집기 블록

구텐베르크 편집자 블록

Editor Blocks는 사용할 수있는 구텐베르크 블록의 또 다른 깔끔한 컬렉션입니다. 저자 프로필, 영웅 이미지, 가격 테이블, 브랜드, 기능 등과 같은 유용한 블록이 제공됩니다.

구텐베르크에 관한 FAQ – WordPress의 새로운 블록 편집기

구텐베르크가 새로운 워드 프레스 편집자가 된 이래로 우리는 많은 질문을 받고 있습니다. 다음은 구텐베르크에 관해 가장 자주 묻는 질문에 대한 답변입니다.

1. 이전 게시물과 페이지는 어떻게됩니까? 여전히 편집 할 수 있습니까?

구텐베르크의 오래된 게시물과 페이지는 완전히 안전하고 영향을받지 않습니다. 여전히 편집 할 수 있으며 Gutenberg는 클래식 편집기가 포함 된 블록에서 자동으로 열립니다.

새 워드프레스 편집기에서 이전 기사 편집

이전 편집기에서 편집하거나 이전 기사를 블록으로 변환하고 새 블록 편집기를 사용할 수 있습니다.

2. 이전 편집기를 계속 사용할 수 있습니까?

예, 이전 편집기를 계속 사용할 수 있습니다. 간단히 Classic Editor 플러그인을 설치하고 활성화하십시오.

활성화가되면 차단 편집기가 비활성화되며 기존 편집기를 계속 사용할 수 있습니다.

Classic Editor는 2022 년까지 지원됩니다.

3. 새 에디터가 내가 사용하고있는 플러그인이나 테마로 작동하지 않으면 어떻게해야합니까?

Project Gutenberg는 오래 동안 개발 중이었습니다. 이로 인해 플러그인 및 테마 작성자는 호환성을 위해 코드를 테스트 할 충분한 시간을 갖게되었습니다.

그러나 일부 플러그인과 테마가 새 편집기에서 제대로 작동하지 않을 수도 있습니다. 이 경우 클래식 편집기 플러그인을 설치하거나 개발자에게 구텐베버 지원을 요청하거나 단순히 대체 플러그인이나 테마를 찾을 수 있습니다.

4. 구텐베르크의 더 많은 정보를 얻는 방법?

WPBeginner는 WordPress의 새로운 블록 편집기에 대해 배울 수있는 최고의 장소입니다. 우리는 인터넷에서 가장 큰 워드프레스 리소스 사이트입니다.

새로운 블록 편집기를 익히는 데 도움이되는 새로운 자료를 게시하고 이전 자원을 업데이트 할 것입니다.

한편 질문이 있으시면 언제든지 저희 웹 사이트에있는 문의 양식을 사용하여 의견을 남기거나 문의하십시오.

이 구텐베드 자습서가 새로운 워드프레스 블록 편집기 사용 방법을 배우는 데 도움이되기를 바랍니다. 웹 사이트 속도 향상을위한 워드프레스 성능 가이드 전체를보고 싶을 수도 있습니다.

이 기사가 마음에 들면 YouTube 채널 용 워드프레스 비디오 자습서에 가입하십시오. 우리를 찾을 수도 있습니다. 지저귀다 그리고 페이스 북.

게시물 새로운 워드프레스 블록 편집기 사용법 (Gutenberg Tutorial)이 WPBeginner에서 처음 등장했습니다.

당신이 좋아할만한 글 작성자의 다른글