WordPress 용 Gutenberg Builder에 대한 단계별 안내서

WordPress 용 Gutenberg Builder에 대한 단계별 안내서

내가 말할 때 당신이 동의 할 것입니다 : 구텐베르크 사업 전체가 혼란 스럽습니다..


첫째, 새로운 블록 편집기는 사용하기 어렵습니까? 좋아하는 도구가 어디로 갔는지 모르는 것입니다. 글을 작성하는 데 시간이 더 걸렸습니다.?

어쩌면 링크 (제휴 또는 기타)를 추가하면 곡선이 생겨 실망했을 것입니다. 텍스트 옆에 이미지를 추가하는 데 문제가있을 수 있습니다..

여러 열을 추가하려고 시도했을 때 예상대로 작동하지 않습니다. 그렇지 않은 경우 PDF 파일을 쉽게 추가 할 수 없거나 “업데이트 실패”메시지가 여러 번 표시 될 수 있습니다..

더 이상 걱정하지 마십시오. 나는 오래전에 당신의 정확한 입장에 있었지만, 이제 구텐베르크는 스릴을 느낄 수 있습니다. 예, 학습 곡선이 있지만 오늘 게시물이 끝날 무렵에는 구텐베르크에 대해 다르게 생각할 것입니다.

구텐베르크 에디터 란??

워드 프레스 구텐베르크 편집기

기본 WordPress 블록 편집기 인 Gutenberg를보고 있습니다.

WordPress 5.0 이상을 사용하는 경우 유명한 Gutenberg로 알려진 새롭고 반짝이는 WordPress 편집기를 사용해야합니다..

다른 많은 사용자와 마찬가지로 혁신적인 편집기를 사용하고 싶지만 구텐베르크 때문에 주저합니다 복잡한.

또는 구텐베르크를 처음 만났을 때 여러 가지 일들이 효과가 없었습니다. 결국, 개발자는 여전히 테마와 플러그인을 블록 편집기와 호환 가능하게 만들고 있습니다..

그래서 당신은 빨리 클래식 에디터, BTW는 우리에게 괜찮습니다. 워드 프레스는 2022 년 이후 클래식 에디터를 지원하지 않습니다. 또한 구텐베르크가 제공하는 모든 추가 혜택을 놓치게됩니다..

기능면에서 Classic Editor와 Gutenberg는 동일한 기능을 수행합니다. 아시다시피, 두 도구 모두 코딩없이 컨텐츠를 작성하는 데 도움이됩니다.

그러나 우리는 이전 WYSIWYG 편집기에 익숙해 져 완전히 혼란스럽지 않으면 새로운 Gutenberg UI에 약간의 외계인을 적용하는 것을 발견했습니다. 적어도 그게 내 생각이야.

그러나 구텐베르크는 정확히 무엇입니까?

Gutenberg는 새로운 기본 WordPress 편집기입니다. 전통적인 비주얼 / 텍스트 편집기와는 다릅니다. 구텐베르크는 많은 최신 페이지 빌더와 매우 유사한 컨텐츠 블록을 사용합니다..

클래식 편집기보다 직관적 인 기능이 제공되므로 즉석에서 리치 미디어 컨텐츠를 작성할 수 있습니다. 이제 WordPress 게시물 또는 페이지 작업에 관계없이 특별한 레이아웃을 빠르게 채울 수 있습니다..

그리고 추가 기능으로 Gutenberg는 Brizy, Elementor 및 Divi와 같은 기존 WordPress 페이지 빌더와 유리하게 경쟁 할 수 있습니다..

유일한 단점은 페이지 빌더가 주로 페이지 빌더이기 때문에 더 많은 기능을 제공한다는 것입니다! 동시에, ut 텐 베르크 (Gutenberg)는 여전히 젊으 며, 블록 편집자가 도약과 경계에서 성장할 것으로 기대할 수 있습니다.

오늘 게시물에서 Gutenberg 편집기로 WordPress 게시물을 작성하는 즐거운 시간을 보내십시오. 구텐베르크를 사용하여 전문가와 같은 콘텐츠를 만들 수 있도록 모든 세부 사항과 기능을 다루려고합니다..

준비 되었나요? 그렇다면 WordPress 게시물을 만들어 보겠습니다..

Gutenberg로 WordPress 게시물을 작성하는 방법

WordPress 웹 사이트를 실행하는 경우 페이지보다 많은 게시물을 작성할 수 있습니다. 다음 섹션에서는 구텐베르크에서 처음부터 WordPress 게시물을 작성합니다. 구텐베르크 (Gutenberg)를 테스트 할 때했던 것만 큼 재미 있기를 바랍니다..

그 길에서, 게시물> 새로 추가 아래 스크린 샷에서 강조 표시된대로.

구텐베르크에서 새 게시물 만들기

그렇게하면 아래와 같이 구텐베르크 편집기로 바로 연결됩니다..

워드 프레스 구텐베르크 편집기

꽤 깔끔하지? 이제 소매를 감아 비즈니스에 착수합시다.

제목 추가

구텐베르크에서 새로운 타이틀 추가

탄탄한 제목이없는 게시물은 쓸 수 없습니다. 좋은 점은 구텐베르크가 제목을 추가하기가 매우 쉽다는 것입니다.

첫 번째 블록은 표제 위 이미지에서 자세히 설명하는 것처럼 문서 상단에 게시물 제목을 작성하려면 블록 안에 입력하십시오. A, B, C처럼 단순.

퍼머 링크를 편집해야합니까? 당신은 쉽게 그것을 할 수 있습니다 표제 클릭하여 차단 편집하다 아래와 같이 버튼.

구텐베르크에서 게시물 영구 수정

제목을 추가 한 후 시작하다 키를 눌러 새 줄을 시작하십시오. 예, Gutenberg는 클래식 WordPress 편집기에서 좋아하는 기본 탐색 기능을 유지합니다..

새로운 단락 추가

구텐베르크의 새로운 단락 블록

때리는 시작하다 열쇠는 새로운 것을 만듭니다 절 위와 같이 차단하십시오. 텍스트를 입력하기 전에 블록에 몇 가지 옵션이 표시됩니다. 자세한 내용은 아래의 번호가 매겨진 이미지를 참조하십시오.

새로운 단락 블록 옵션 구텐베르크

노트. 당신은 할 수 있습니다 :

  1. 새 단락 블록을 다른 블록 (예 : 이미지, 제목, 표지, 갤러리, WooCommerce, 양식 등)으로 변환.
  2. 단락을 사용하여 단락 블록을 이미지 블록으로 변경
  3. 단락 블록을 표제 블록으로 변경하십시오 (예 : H2, H3 및 H4).
  4. 단락 블록을 표지 이미지 블록으로 변환

설명을 위해 게시물 소개를 위해 첫 번째 단락을 예약합니다. 텍스트를 추가하면 아래와 같이 서식 도구 모음이 나타납니다..

구텐베르크 단락 서식 도구 모음

서식 도구 모음 덕분에 다음을 수행 할 수 있습니다.

  • 구절, 인용문, 제목, 목록, 코드 및 미리 형식이 지정된 텍스트로 단락을 보호하십시오.
  • 굵게, 이탤릭체, 취소 선, 과 밑줄 함유량
  • 텍스트를 왼쪽, 오른쪽, 가운데 정렬하고 정렬
  • 새 탭에서도 열 수있는 링크 추가
  • 인라인 이미지 삽입 (예, 존재합니다!)
  • 블록 설정 숨기기
  • 블록 복제
  • 현재 블록 앞뒤에 블록을 삽입하십시오 (이 경우 첫 번째 단락이므로 이전에 아무것도 추가하지 않았습니다.) 첫 번째 단락 앞에 표지 이미지 블록을 추가 할 수 있습니다. 좋은
  • 블록을 HTML로 편집
  • 재사용 가능한 블록에 현재 블록을 추가하여 다른 게시물에서 사용할 수 있습니다.
  • 블록을 완전히 제거하십시오

에서 사용 가능한 옵션을 사용하여 단락 블록을 추가로 사용자 정의 할 수 있습니다. 블록 사이드 바 메뉴에있는 탭.

단락 블록에 대한 gutenberg 사이드 바 옵션

위 이미지에 대한 몇 가지 참고 사항 :

  1. 선택 블록 모든 블록 옵션 및 설정을 보려면 여기를 탭하십시오
  2. 글꼴 크기를 선택하고 드롭 캡을 활성화하십시오.
  3. 단락에 배경색을 추가하십시오. 설명을 위해 파란색으로 설정했습니다. 텍스트 색상을 사용자 정의 할 수도 있습니다. 두 경우 모두 무제한 사용자 정의 색상을 추가 할 수 있습니다
  4. 여기에 사용자 정의 CSS 클래스를 추가 할 수 있습니다. 즉, 블록에 CSS 스타일을 추가 할 수 있습니다
  5. 파란색 배경과 드롭 캡이 이미 구텐베르크 편집기에 적용되었습니다.

사이드 바의 문서 탭

사이드 바 메뉴에 다른 탭이 있습니다. 그만큼 문서 아래와 같이 탭.

단락 블록 사이드 바 문서 탭

위의 이미지에 대한 참고 사항은 다음과 같습니다.

  1. 여기를 클릭하여 문서
  2. 여기에서 게시물을 예약하고 공개 상태를 은밀한 또는 공공의, 에 게시물을 설정 검토를 보류하다 상태에서 게시물 형식을 선택하고 스티커 게시물을 만듭니다.
  3. 이 섹션에서는 영구 링크를 편집 할 수 있습니다
  4. 여기에서 새 카테고리를 선택하거나 만들 수 있습니다
  5. 게시물에 태그 추가
  6. 추천 이미지 설정
  7. 수동 발췌 만들기
  8. 댓글, 핑백 및 트랙백 허용

보시다시피 원하는 방식으로 단락 블록 (및 전체 게시물)을 디자인 할 수있는 옵션이 많이 있습니다. 그건 그렇고, 우리는 잠시 후에 배울 블록마다 다른 설정이 있습니다.

첫 번째 단락 후 시작하다 키를 다시 눌러 새 줄 (또는 단락 블록)을 만듭니다. 이제 첫 단락 아래에 이미지를 추가하겠습니다.

구텐베르크에서 이미지 추가하기

구텐베르크에서 새 이미지 추가

그들은 그림이 천 단어를 말하고 이미지가없는 블로그 게시물은 칙칙하다고 말합니다. Gutenberg를 사용하여 WordPress 게시물에 이미지를 추가하려면 몇 가지 옵션이 있습니다.

당신이 때 시작하다 몇 분 전에 키를 누르면 새 단락 블록이 트리거됩니다. Gutenberg가 직관적이므로 아래 이미지에서 강조 표시된대로 더하기 (+), 이미지 또는 표지 아이콘을 클릭하여 이미지를 추가 할 수 있습니다..

구텐베르크 편집기에서 새 이미지 추가

몇 가지 메모 :

  1. 더하기 (+) 아이콘을 통해 이미지를 추가 할 수 있습니다
  2. 여기에서 이미지를 쉽게 추가 할 수 있습니다
  3. 이 옵션을 사용하면 덮개 이미지 (보통 다른 사진보다 큽니다. 또한 표지 이미지, BTW에 텍스트를 추가 할 수 있습니다)

계속해서 더하기 (+) 아이콘을 클릭하십시오. 그런 다음 영상 아래와 같이 탭.

구텐베르크에서 이미지 추가

클릭 영상 탭은 영상 아래 스크린 샷에 표시된 블록.

구텐베르크 이미지 블록

그만큼 영상 블록을 사용하면 이미지를 업로드하거나 URL 또는 미디어 라이브러리에서 이미지를 추가 할 수 있습니다. 이 과정에서 미디어 화면 설정을 통해 대체 텍스트 (SEO에 중요), 캡션 및 설명을 추가하거나 블록 다음 이미지에 표시된 사이드 바.

일반적인 미디어 설정…

워드 프레스 미디어 설정

…그리고 영상 블록 설정.

구텐베르크 이미지 블록 설정

오늘 여기서 뭔가를 배우고 있습니까? 나는 희망한다. 계속 갑시다.

이미지를 추가 한 후 Gutenberg는 바로 아래에 새 단락 블록을 추가합니다. 원하는 것을 추가 할 수 있지만 설명을 위해 일부 텍스트를 추가 한 다음 그 아래에 버튼을 추가했습니다..

다운로드 가능한 파일을 추가하는 방법 (예 : PDF, 이미지, 비디오 등

Gutenberg를 사용하면 WordPress 게시물 또는 페이지에 다운로드 가능한 파일을 매우 쉽게 추가 할 수 있습니다.

새로운  차단하려면 더하기 (+) 아이콘을 클릭하고 공통 블록 그리고 파일 아래 강조 표시된대로 탭.

구텐베르크에서 다운로드 가능한 파일 추가

그렇게하면 다음 블록이 시작됩니다.

구텐베르크 파일 블록

로부터 파일 차단하면 새 파일을 업로드하거나 미디어 라이브러리에서 파일을 추가 할 수 있습니다. 파일을 추가 한 후 구텐베르크는 귀여운 다운로드 아래 이미지와 같이 자동으로 버튼.

구텐베르크에서 파일 추가

옵션을 가지고 놀 수 있습니다. 예를 들어 ‘무료 구텐베르크 PDF 점검표”제목과 다운로드 단추. CSS 클래스를 블록에 추가하고 원하는 방식으로 스타일을 지정할 수 있습니다..

구텐베르크에서 견적 추가

다음으로 매력적이고 매력적이며 견적을 집으로 가져 오는 데 도움이되므로 견적을 추가해 보겠습니다. 새 줄에서 더하기 (+) 기호를 클릭하고 공통 블록 그리고 인용문 아래와 같이 탭.

구텐베르크에서 따옴표 추가

그렇게하면 인용문 아래 스크린 샷에서 강조 표시 한대로 게시물을 차단.

구텐베르크 인용 블록 설정

위의 오른쪽 사이드 바에서 따옴표 블록 설정을 확인하십시오.?

견적을 추가하려면 블록 안에 입력하십시오. 여기 내 결과가있다.

구텐베르크 인용구

대단해 보인다?

구텐베르크에서 미디어 임베드 추가

구텐베르크에는 YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare 등과 같은 30 개 이상의 사이트에서 비디오 및 기타 미디어를 임베드하기위한 여러 블록이 있습니다..

내용을 포함 시키려면 더하기 (+) 아이콘을 클릭하고 임베드, 사이트를 선택하십시오. 예를 들어 아래 그림과 같이 YouTube를 원했습니다..

구텐베르크 유튜브 내장

그런 다음 YouTube 동영상 URL을 복사하여 붙여넣고 끼워 넣다 아래 이미지와 같이 버튼.

구텐베르크 유튜브 내장 블록

당신이 명중하자마자 끼워 넣다 버튼을 클릭하면 구텐베르크가 아래에서 강조 표시 한대로 비디오에 대한 링크를 자동으로 보호합니다..

구텐베르크에 포함 된 YouTube 비디오

매끄러운 항해. 이제 클릭 유도 문안 (CTA)을 만드는 데 완벽한 독립형 버튼을 추가하겠습니다..

구텐베르크에서 버튼을 추가하는 방법

이 시점에서 블록을 추가하는 데 어려움을 겪지 않아야합니다. 더하기 (+)를 클릭하고 블록을 선택하십시오. 그보다 더 쉬울 수는 없습니다.

버튼을 어떻게 추가합니까??

새 줄 (또는 블록)에서 더하기 (+) 아이콘을 클릭하고 레이아웃 요소 클릭 단추 아래와 같이 탭.

구텐베르크 편집기에서 버튼 추가

그렇게하면 단추 아래에 자세히 설명 된대로 차단.

구텐베르크 편집기에서 버튼 추가

위 이미지에서 볼 수 있듯이 버튼 텍스트를 편집하고 링크를 추가 할 수 있습니다. 또한 화면 오른쪽의 사이드 바 메뉴를 통해 버튼을 사용자 정의 할 수 있습니다.

몇 번의 클릭 후 여기에 내가 얻은 것이 있습니다..

구텐베르크 버튼 예

그건 그렇고, 버튼에 읽기 어려운 색상 조합을 사용하면, 구텐베르크가 즉시 알려드립니다. 얼마나 좋은?

구텐베르크에서 열을 추가하는 방법

아름다운 버튼이 있으면 몇 개의 열을 추가하겠습니다. 두 개의 열을 추가하므로 신중하게 따르십시오..

해야 할 일이 있습니다. 더하기 (+) 아이콘을 클릭하고 레이아웃 요소 클릭 아래 이미지와 같이 탭.

열 탭 구텐베르크 편집기

Gutenberg는 기본적으로 두 개의 열을 추가합니다. 아래 이미지를 참조하십시오. 이미 열에 내용을 추가했습니다..

워드 프레스 편집기의 구텐베르크 열

어느 것이 나를 얻습니까?

구텐베르크 열 프론트 엔드

몇 초 동안 일해도 나쁘지 않습니다. 그러나 열을 만들고 싶지 않을 수도 있습니다. 텍스트 옆에 이미지를 표시하고 싶을 수도 있습니다..

그에 대한 블록이 있습니까? 예, 있습니다!

구텐베르크에서 텍스트 옆에 이미지를 추가하는 방법

텍스트 옆에 이미지를 추가하려고하십니까? 그렇다면 다음 섹션을 좋아합니다..

평소와 같이 더하기 (+) 아이콘을 클릭하고 레이아웃 요소 클릭 미디어 및 텍스트 아래 그림과 같이.

미디어 및 텍스트 구텐베르크 블록

당신은 볼 수 미디어 및 텍스트 아래와 같이 블록.

구텐베르크의 미디어 및 텍스트 블록

다음으로 이미지 / 비디오 / 미디어를 업로드하거나 미디어 라이브러리에서 이미지 / 비디오 / 미디어를 추가하십시오. 그런 다음 아래 이미지와 같이 미디어 옆에 텍스트를 추가하십시오..

나는 함께 놀았다 미디어 및 텍스트 차단하고 다음을 생각해 냈습니다. 당신을 염두에 두십시오. 나는 거기에 버튼을 꽉 쥐었다.

전체 동작의 미디어 및 텍스트 블록

오, 그게 백엔드 야! 프론트 엔드를 보여 드리겠습니다. 여기:

구텐베르크의 미디어 텍스트 블록

매우 전문적인 것 같습니다. Gutenberg 편집기로 얼마나 많은 것을 달성 할 수 있는지 상상할 수 있습니다.

타사 구텐베르크 블록

WordPress 개발자는 Gutenberg 편집기와 호환되는 테마 및 플러그인을 만들고자합니다. WooCommerce, Jetpack 및 Yoast SEO 등이 몇 가지 예입니다..

예를 들어 WooCommerce 블록을 WordPress 게시물에 추가 할 수 있습니다. 먼저 WooCommerce를 설치하고 활성화해야합니다.

그런 다음 새 줄에서 더하기 (+) 아이콘을 클릭하고 WooCommerce 아래 그림과 같이 원하는 블록을 선택하십시오.

woocommerce 구텐베르크 블록

이것이 무엇을 의미하는지 아십니까? 즉, 몇 분 만에 리치 미디어 및 멋진 게시물과 페이지를 만들 수 있습니다..

다른 주목할만한 블록

우리는 이미 2,000 개가 넘는 단어를 사용하고 있으며이를 유지하면 전체 eBook을 작성하게됩니다. 내기도는 이제 딸꾹질없이 구텐베르크를 사용할 수 있다는 것입니다..

그 밖의 다른 가능한 블록 목록이 있습니다..

  • 위젯 – 위젯의 컨텐츠를 블로그 게시물에 추가 할 수 있습니다.
  • 단축 – 여전히 기본 워드 프레스 단축 코드를 사용할 수 있습니다
  • 권위 있는 – 기존 컨텐츠를 보유한 훌륭한 블록
  • – 블록은 이전에 더 읽어보기 꼬리표
  • 페이지 나누기, 분리기, 스페이서
  • 사용자 정의 HTML, 인용 부호, 표
  • 갤러리 과 HTML5 오디오 / 비디오
  • 그리고 사용하는 테마와 플러그인에 따라 훨씬 더

곁에: 워드 프레스 페이지를 만드는 것은 몇 분의 차이로 게시물 저장을 만드는 것과 비슷합니다..

빠른 구텐베르크 해킹 및 키보드 단축키

구텐베르크에는 더 쉽게 해킹 할 수있는 몇 가지 핵과 키보드 단축키가 있습니다. 예를 들어 단락 블록 안에 “/”를 입력하면 블록 목록이 나타납니다..

백 슬래시 (/) 뒤에 블록 제목을 입력하여 특정 블록을 선택할 수도 있습니다 (예 : “/ image”를 입력하면 다른 이미지 관련 블록 중에서 이미지 블록이 나타납니다). 자세한 내용은 아래 이미지를 참조하십시오.

구텐베르크 백래시 단축키

키보드 단축키: 사용 가능한 모든 바로 가기를 보려면 SHIFT + ALT + H Windows에서 OPT + CTRL + H 맥에서.

문서 상단에서 아래와 같이 (i) 아이콘을 클릭하여 문서 구조를 볼 수 있습니다..

구텐베르크 문서 구조

좋은. 매우 부드러운.

아, 그런데 “업데이트 실패”오류는 일반적으로 인터넷 연결이 불안정하여 발생합니다.


당신과 저 사이에서 구텐베르크는 환상적인 콘텐츠 편집기입니다. 로프를 기꺼이 배우겠다고 약속했다면; 미래의 WordPress 편집기에서 많은 것을 얻을 수 있습니다.

구텐베르크는 여전히 젊으 며 사용 성과 기능면에서 성장할 것으로 기대할 수 있습니다. 다가오는 날에 생각하는 것은 심각한 힘이 될 것입니다. 페이지 빌더가 더 잘 감시하거나 비즈니스가 소진 될 것입니다.

구텐베르크 (Gutenberg) 편집자에 대한 단계별 가이드를 통해 사물을 원근법으로 활용할 수 있기를 바랍니다. 우리는 이제 블록 편집기를 사용하여 전문가처럼 콘텐츠를 만들 수 있다고 생각합니다..

아래의 의견 섹션에서 우려 사항, 생각 및 질문을 공유하십시오.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me