이 튜토리얼을 읽고 있다면 이미 WordPress 용 새로운 Gutenberg 편집기를 사용해 보셨을 것입니다.

아직 시도하지 않았다면 시도해 보는 것이 좋습니다. 현재 플러그인으로 사용할 수 있지만 언젠가는 WordPress와 병합 될 예정이므로 언젠가 알아야합니다.

try gutenberg.png

모든 새로운 UI와 마찬가지로 팬과 비방자가 있습니다. 새 인터페이스에 익숙해지는 데는 항상 시간이 걸리며 새 버전을 무시하고 싶을 것입니다.

많은 사람들처럼 저도 처음에는 구텐베르크에 대해 회의적이었습니다. 저는 몇 년 동안 이전 인터페이스로 작업 해 왔으며 익숙합니다.

그러나 Gutenberg는 많은 최적화를 제공합니다. 그리고 그는 정말로 두 번 생각하게 만든 한 가지 특징을 가지고 있습니다. 이 기능은 무엇입니까? 이들은 중복 및 공유 블록입니다.

별것 아닌 것처럼 들리겠지만, 내가 만드는 방식을 만들 수 있는 잠재력이 있습니다. 내용 보다 효율적이고 이를 실현하기 위해 내용 가져오는 데 더 효과적입니다. 방문자 읽은 후 행동합니다.

이 튜토리얼에서는 구텐베르크에서 복제 및 공유 블록을 만드는 방법을 보여주고 그들이 여는 몇 가지 가능성을 공유 할 것입니다.

하지만 먼저 블록에 대한 간단한 입문서입니다.

블록은 무엇입니까?

블록은 켜는 것입니다. 구텐베르크. 당신의 모든 내용 블록을 통해 추가됩니다. 아래 스크린샷에서는 편집기에 여러 블록이 있는 기사를 볼 수 있습니다.

Gutenberg.png에 대한 기사 쓰기

게시물에 추가하는 데 익숙한 콘텐츠 유형을 반영하는 다양한 블록이 있지만이를 수행하는 다른 방법을 제공합니다. 블록에는 다음이 포함됩니다.

  • 텍스트 블록-단락, 목록, 머리글, 코드, 따옴표, 표
  • 미디어 블록-이미지, 갤러리, 오디오, 비디오
  • 레이아웃 요소-버튼, 스페이서, 디바이더, 페이지 나누기
  • 위젯 블록-카테고리, 최신 게시물, 단축 코드
  • 블록 통합 – YouTube, Soundcloud, Spotify, 트위터

블록의 범위는 방대하고 추가 블록을 추가하기 위해 Gutenberg API를 사용하는 여러 타사 플러그인이 출시되면서 증가하고 있습니다.

게시물이나 페이지에 콘텐츠를 추가해야 할 때마다 블록을 추가합니다. 그리고 각 콘텐츠는 개별 문단까지도 자체 블록에 저장됩니다.

즉, 콘텐츠를 편집하고 재 배열하기 위해 블록을 이동할 수 있습니다. 또한 중복 또는 공유 블록을 생성하여 콘텐츠 블록을 재사용 할 수 있음을 의미합니다.

중복 블록

중복 블록은 매우 간단합니다. 생성 한 기존 블록을 가져 와서 복사본을 만듭니다.

이렇게하려면 블록 오른쪽에있는 타원 (세로로 정렬 된 세 점) 위에 마우스를 놓고 옵션을 클릭합니다. 복제 .

block.png 복제하기

이 블록의 복제본은 동일한 기사에서 원래 블록 바로 뒤에 생성됩니다.

콘텐츠 (예 : 인용문, 게시 중단, 클릭 유도 문안 또는 이미지)를 복제하고 기사의 다른 위치에 다른 사본을 추가하려는 경우 사용할 수 있습니다. 새 블록을 원하는 위치로 드래그하기 만하면됩니다. 중복 블록을 서로 너무 가깝게 배치하거나 실수로 중복 블록을 너무 많이 생성하지 않도록주의하십시오!

다른 용도는 첫 번째 블록과 비슷하지만 동일하지는 않은 두 번째 블록을 생성하려는 경우입니다. 이 경우 중복 블록을 생성 한 후 수정해야합니다. 이는 첫 번째 블록의 서식을 지정 (예 : 이미지 크기 조정)하고 서식을 복제하되 내용을 변경하려는 경우에 유용합니다. 그 반대의 경우도 마찬가지입니다.

중복 블록을 편집 할 때 변경 한 내용은 원래 블록에 영향을 미치지 않으며 연결되지 않은 두 블록입니다.

따라서 중복 블록은 게시의 다른 내용과 같거나 약간 다른 내용을 만들 때 시간을 절약하는 데 유용합니다.

그러나 그들은 한 가지 결함이 있습니다-그들은 개별 기사에서만 작동합니다. 기사간에 콘텐츠를 복제하려면 무엇을 사용합니까? 이것은 공유 블록이 들어오는 곳입니다.

공유 블록

공유 블록은 중복 블록과 다르게 작동합니다. 공유 블록을 생성하면 생성 한 다른 모든 블록의 템플릿과 같습니다. 그리고 이러한 블록을 변경하면 변경 사항이 모든 공유 블록에 반영됩니다. 곧 보여 드리 겠지만 재정의 할 수 있습니다.

공유 블록 만들기

공유 블록을 생성하려면 일반적인 방법으로 일반 블록 유형을 생성하십시오. 그런 다음 다시 타원 위에 마우스를 올려 놓고 이번에는 옵션을 선택합니다. 공유 블록으로 변환 .

블록 아래에 텍스트 필드가 표시되며 여기서 블록 이름을 지정해야합니다.

재사용 가능한 블록을 만듭니다 .png

이 블록이 아닌 다른 게시물에 추가 할 때 이해할 수있는 고유 한 이름을 블록에 지정하십시오. 기억에 남을 것이므로 몇 주 또는 몇 달 안에 다시 사용할 때 블록이 무엇인지 정확히 알 수 있습니다. 제목 뒤에 괄호 안에 블록 유형을 추가하는 것이 유용하다는 것을 알았습니다. 블록 이름을 입력했으면 버튼을 누릅니다. 레지스터 .

블록 gutenberg.png

블록에 부여한 제목은 사용할 때마다 편집기에서 그 아래에 표시되지만 사이트의 프런트 엔드에는 표시되지 않습니다.

공유 블록 재사용

공유 블록의 힘은 블록을 한 번 만든 다음 사이트 어디에서나 원하는만큼 여러 번 재사용 할 수 있다는 것입니다.

일반 텍스트 블록을 생성하는 대신 기사에 공유 블록을 추가하려면 버튼을 클릭하십시오. + 편집 화면의 왼쪽 상단에 있습니다. 선택할 수있는 다양한 블록 유형이있는 컨텍스트 메뉴가 나타납니다. 옵션이 표시 될 때까지 아래로 스크롤합니다. 공유 그것을 클릭하십시오.

이제 사이트에서 생성 한 모든 공유 블록을 볼 수 있습니다. 내 것이 약간 지저분 해 보입니다.이 로컬 사이트에서 공유 블록을 실험 해 보았지만 최고의 이름을주지 않았습니다.

reutilisable blocks.png를 사용하십시오.

이제 사용하려는 공유 블록을 클릭하면 기사에 추가됩니다.

공유 블록 편집

공유 블록을 편집하는 데는 몇 가지 문제가 있습니다. 첫 번째는 게시물에 추가 한 공유 블록을 편집하면 해당 블록을 추가 한 각 게시물에서도 내용이 변경된다는 것입니다.

블록을 수정하려면 버튼을 클릭하십시오. 편집 제목을 고려합니다. 그런 다음 블록의 내용과 제목을 편집 할 수 있습니다. 이러한 변경 사항은 블록의 모든 인스턴스에 적용됩니다.

업데이트해야하는 콘텐츠가있는 경우 사이트를 변경할 수있는 좋은 방법입니다. 예를 들어 전화 번호 또는 이메일 주소로 클릭 유도 문안에 공유 차단을 사용하고 연락처 세부 정보가 변경된 경우 차단을 한 번만 수정하면됩니다.

그러나 이는 공유 블록의 인스턴스를 편집하고 기사에서 내용을 약간 다르게 만들고자하는 경우 문제입니다. 이렇게하려면 일반 블록으로 변환 한 다음 편집해야합니다. 블록 오른쪽에있는 타원 위로 마우스를 이동하고 옵션을 클릭합니다. 재사용 가능한 블록 제거.

재사용 블록을 제거하십시오 .png

그러면 사이트의 다른 일반 차단처럼 작동합니다.

기존 블록과 유사한 다른 공유 블록을 생성하려는 경우 (예 : 게시물의 내용을 기반으로 사용할 두 가지 다른 버전의 클릭 유도 문안 텍스트를 원하는 경우) 그렇게 할 수 있습니다. 이 단계를 따르세요:

  1. 위에서 설명한대로 첫 번째 공유 블록을 만듭니다.
  2. 새 기사에 공유 블록 추가
  3. 그것을 일반 블록으로 변환하고 수정하십시오.
  4. 처음했던 것처럼 공유 블록으로 변환하십시오.
  5. 두 블록 사이의 차이점을 쉽게 식별 할 수 있도록 원래 이름과 다른 이름을 지정하십시오. 저장해.

이제 사이트 어디에서나 사용할 수있는 두 개의 공유 블록이 있습니다.

공유 블록 저장

사이트에서 사용할 여러 공유 블록을 만들려는 경우 쉽게 액세스하고 편집 할 수있는 위치에있는 경우 각 블록의 사본을 보관하는 것이 좋습니다.

내가 만든 각 공유 블록의 고유 한 사본을 포함하는 게시하지 않을 기사를 내 사이트에 만들었습니다.

이 문서를 사용하여 모든 공유 블록에 액세스 할 수있을뿐만 아니라 원하는 경우 각 블록 위에 텍스트를 추가하여 각 블록이 무엇인지, 내 블록이 어디로 이동하도록 설계되었는지에 대한 메모를 제공 할 수도 있습니다. 게시물 유형, 게시물의 위치 등과 같은 사이트 이것은 나 (또는 ​​사이트를 편집하는 다른 사람)가 공유 블록을 일관되게 사용하고 있는지 확인하는 데 사용할 수있는 편리한 벤치 마크 역할을합니다. 또한 편집해야 할 경우 공유 블록을 쉽게 찾을 수 있습니다.

중복 및 공유 블록으로 컨텐츠 관리 효율성 향상

이와 같은 중복 콘텐츠를 중복 또는 공유 블록 형태로 만들 수 있으면 콘텐츠를 사이트에 추가하는 프로세스가 더 효율적입니다.

제 생각에 가장 큰 이득은 클릭 유도 문안과 같이 사이트의 여러 게시물에 추가하려는 콘텐츠에 대해 공유 블록을 사용하는 것입니다. 과거에 이것은 플러그인을 작성하고 각 게시물의 액션 후크에 콘텐츠를 연결하여 수행 한 작업입니다. 그러나 테마가 올바른 위치에있는 경우에만 가능합니다. 코드에 익숙하다면. Gutenberg는 사이트에서 중복 콘텐츠를 더 쉽고 빠르게 생성, 추가 및 관리 할 수 ​​있도록합니다.

중복 및 공유 블록을 어떻게 사용했는지 알려주십시오!