WordPress 블록 편집기를 사용하는 방법

이 게시물에서는 2018년 이후 WordPress 업데이트에 포함되었으며 계속 유지되는 WordPress 블록 편집기를 사용하는 방법을 알려드립니다. Gutenberg 편집자라는 말도 듣게 될 것입니다.

WordPress 5.0 릴리스 이후로 WordPress 텍스트 편집기에는 아래와 같이 세 개의 수직 점을 클릭하여 찾을 수 있는 'CONVERT TO BLOCKS' 옵션이 있습니다.

블록으로 변환해야합니까?

타사 WordPress 텍스트 편집기를 사용한 경우 문제가 발생할 수 있습니다. 나는 이 포스트에서 그것들을 다루지 않는다. 전환에 대해 전문가에게 자세히 알아보고 신중하게 밟으십시오.

다른 사람의 경우 – 저는 책임을 지지 않습니다 – 페이지를 블록으로 변환하기 전에 항상 웹사이트/블로그 를 백업 하십시오.

이미 변환? 이 섹션을 건너뜁니다.

클래식 편집기를 사용하고 있고 단순한 페이지 레이아웃을 가지고 계신 분들께 – 워드프레스 블록을 추천할 수 있습니다.

WordPress 블록 편집기에 익숙해지면 직관적입니다.

블록으로 변환을 누르면 전체 웹사이트/블로그가 블록으로 변환되지 않습니다. 작업 중인 페이지나 게시물만 가능합니다.

블록으로 변환하면 어떻게 됩니까?

페이지를 변환하면 각 제목, 단락, 코드 조각 및 이미지가 자체 개별 블록으로 커밋됩니다.

변환만 하면 곧 익숙해질 것입니다.

블록을 사용하면 단락, 열, 표, 이미지, 위젯, 최신 게시물 및 카테고리를 쉽게 추가할 수 있습니다.

최신 게시물, 캘린더, 게시물 아카이브, 카테고리, 소셜 아이콘 및 RSS 피드와 같은 위젯뿐만 아니라.

WordPress 블록을 사용하면 웹 사이트 소유자가 원하는 거의 모든 것을 쉽게 추가할 수 있습니다. 정말 편리합니다.

하나의 블록은 하나의 항목을 나타내므로 페이지 순서를 변경하는 것도 훨씬 쉽습니다. 나중에 다루겠습니다.

새 탭에서 WordPress 웹사이트 보기

편집할 때 가장 먼저 하는 일은 새 브라우저 탭에서 웹사이트의 공개 부분을 여는 것입니다. 그런 다음 한 탭에는 관리 영역(백 엔드)이 표시되고 다른 탭에는 공개 영역(프런트 엔드)이 표시됩니다. 그렇게 하면 둘 사이를 전환할 수 있습니다.

새 탭에서 WordPress 웹사이트의 프런트 엔드를 여는 가장 쉬운 방법은 다음과 같습니다.

• 관리 영역에서 – 화면 왼쪽 상단의 집 아이콘 위로 마우스를 가져갑니다.
• 드롭다운 메뉴에서 '사이트 방문'을 마우스 오른쪽 버튼으로 클릭 합니다.
• "새 탭에서 링크 열기"를 클릭합니다.

주의 사용하는 브라우저에 따라 단어가 다를 수 있습니다.

이제 두 개의 브라우저 탭이 열려 있어 둘 사이를 전환할 수 있습니다.

관리 영역을 사용하여 한 탭에서 WordPress 페이지를 계속 편집하십시오.

다른 하나에서는 웹 사이트의 프론트 엔드를 볼 수 있습니다. 각 변경 사항을 확인하는 방법입니다.

편집하고 저장할 때 사이트의 프런트 엔드로 이동할 수 있습니다. F5 키를 눌러 페이지를 새로 고칩니다. 그러면 브라우저에 업데이트된 버전을 표시하라는 메시지가 표시됩니다.

WordPress h1 제목 및 영구 링크

먼저 제목과 퍼머링크를 살펴보겠습니다.

h1 제목은 페이지 상단의 첫 번째 블록입니다. 이것은 움직일 수 없는 유일한 블록이며 정당한 이유가 있습니다.

모든 페이지와 게시물에는 검색 엔진과 사람이 페이지에 포함된 내용을 이해할 수 있도록 맨 처음에 h1 제목이 있어야 합니다. SEO 요소입니다.

마우스를 사용하여 제목 블록 내부를 클릭합니다. 제목을 변경하려면 제목 텍스트를 강조 표시하고 입력을 시작합니다. 단순한.

영구 링크 필드는 오른쪽의 문서 설정에서 찾을 수 있습니다. 아래 이미지를 참조하십시오. 페이지 이름에 대한 WordPress' 레이블은 'URL Slug'입니다.

퍼머링크 편집 시 주의하세요 – 이 게시물 하단에 경고를 포함시켰습니다.

WordPress 블록 추가

시작하려면 왼쪽 상단의 플러스 + 아이콘을 누르십시오.

블록 라이브러리 살펴보기 – 여기에서 사용할 수 있는 옵션이 너무 많습니다.

WordPress 페이지에 블록을 추가하는 방법에는 두 가지가 더 있습니다.

크리에이티브 플로우에 있는 경우 리턴을 눌러 블록을 추가하십시오.

세 번째 방법은 블록 위로 마우스를 가져가는 것입니다. 플러스 + 아이콘이 나타납니다.

글을 쓰는 시점에서 이것은 성가신 일입니다. 아이콘이 나타날 블록의 정확한 중앙 하단 위로 마우스를 가져갑니다.

아이콘을 누르고 블록 스타일을 선택하십시오. 새 블록이 더하기 아이콘 아래에 표시됩니다.

블록을 사용하는 WordPress 단락

단락 블록은 종종 WordPress 페이지 또는 게시물의 가장 일반적인 요소입니다. 단락 블록을 추가하고 입력을 시작하세요.

새 단락 블록을 만들고 계속 입력하려면 Return 키를 누르십시오.

작업 흐름을 빠르게 하기 위해 단락 블록을 다른 스타일로 변형할 수 있습니다.

새 단락 블록에 커서를 두고 /(슬래시)를 입력합니다. 가능한 블록 유형 목록에 대한 바로 가기입니다.

또는 도구 모음을 사용하여 블록을 변환합니다. 선택한 블록에 도구 모음이 왼쪽 상단에 나타납니다.

단락의 도구 모음에는 '블록 유형 또는 스타일'을 변경하거나 텍스트 서식을 지정하는 옵션이 있습니다.

WordPress 단락 블록 변환

단락 블록을 변형하려면 '블록 유형 또는 스타일 변경' 버튼을 사용하십시오. 변환은 유사한 ilk의 블록으로 제한됩니다. 즉, 단락은 표로 변경할 수 없지만 제목으로 변경할 수 있습니다.

예를 들어 단락을 헤더로 변경해 보겠습니다.

아래 이미지의 화살표는 PARAGRAPH을 나타내는 아이콘을 가리킵니다. 이렇게 하면 블록이 단락임을 알 수 있습니다.

아이콘을 클릭하여 단락을 변환합니다.

HEADING을 누르십시오.

단락 아이콘이 H로 바뀌고 그 옆에 H2 가 표시됩니다.

H1은 선택할 수 없습니다. H1은 페이지 제목에만 사용해야 합니다.

이제 블록이 표제 블록입니다.

메뉴에서 H2 버튼을 선택하여 H3 또는 H4를 선택합니다.

페이지 및 게시물 내에서 제목을 계층 구조로 사용하십시오. H2를 사용하여 페이지를 읽기 쉬운 섹션으로 나눕니다. H3를 사용하여 하위 분할합니다.

단락 및 제목 서식 지정

텍스트 서식 지정은 텍스트에 특정 스타일을 추가하는 것을 의미합니다.

제목이나 단락 블록에서 서식을 지정할 텍스트를 강조 표시합니다.

도구 모음이 블록의 왼쪽 상단에 마술처럼 나타납니다. 여기에서 텍스트를 굵게 , 기울임꼴 로 만들거나 텍스트 하이퍼링크를 추가하는 옵션을 찾을 수 있습니다.

여전히 키보드 단축키를 사용할 수 있습니다. 텍스트를 강조 표시하고 다음을 사용합니다.

• 굵게는 Ctrl-b
• 기울임꼴의 경우 Control-i 입니다.
• Control-u 는 텍스트에 밑줄을 긋습니다.

Mac 사용자 – Control 키 대신 Command 키를 사용하십시오.

유용한 목록을 보려면 WordPress 키보드 단축키를 방문하십시오.

도구 모음에 아래쪽 화살표 가 있습니다. '더 많은 서식 있는 텍스트 컨트롤'에 대한 드롭다운 메뉴. 취소선 및 텍스트 색상의 두 가지 다른 스타일이 여기에 있습니다.

텍스트 색상에 주의하십시오. 테마는 웹사이트의 모양을 결정합니다. 기업 구성표에서 더 적은 수의 색상은 웹사이트를 전문적으로 보이게 합니다. 텍스트 색상을 아껴서 사용하십시오.

'인라인 코드'와 '인라인 이미지'도 이 메뉴에서 찾을 수 있습니다.

모든 '인라인'은 입력 중인 텍스트 줄 내에 배치됩니다. 코드 조각과 아이콘에 유용하지만 더 큰 이미지는 제 생각에는 이상하게 보일 것입니다.

단락 설정

WordPress 화면의 오른쪽에 있는 옵션을 보려면 단락 블록을 선택하십시오.

여기에서 텍스트 크기를 변경합니다.

눈에 띄고 싶은 스트랩 라인이 있다면 정말 좋습니다.

전체 단락의 색상을 변경하는 기능도 있습니다. 이러한 옵션에 너무 집착하지 말라고 경고합니다.

단락에 대한 추가 변형 옵션

단락 블록의 다른 변형 옵션은 다음과 같습니다.

• 목록,
• 미리 포맷된 블록,
• 견적,
• 구절
• 또는 그룹.

기울기

목록은 글머리 기호에 대한 WordPress의 레이블입니다. 웹 페이지에서 항목을 눈에 띄게 만드는 데 정말 유용합니다. 두 가지 유형의 목록을 사용할 수 있습니다.

• 정렬된 목록(OL) – 선택적으로 로마 숫자, 소수 또는 문자로 정렬됩니다.
• 무순 목록(UL) – 스타일이 지정된 글머리 기호.

단락과 마찬가지로 목록의 형식을 지정할 수 있습니다. 목록을 들여쓰기하는 옵션도 있으므로 목록 내에서 하위 목록을 만들 수 있습니다.

우리는 워드프레스에서 '미리 포맷된' 또는 '구절' 블록을 본 적이 없으므로 이러한 블록 유형에 대해 조금 설명하겠습니다.

WordPress의 사전 형식화된 블록

미리 형식이 지정된 블록을 사용하면 WordPress 사용자가 줄 바꿈과 들여쓰기를 유지하면서 원하는 대로 정확하게 텍스트를 입력할 수 있습니다.

나는 이것이 현재 무엇에 사용되는지 완전히 명확하지 않습니다. 누군가 나를 깨우쳐 줘.

빈 단락 블록에 /preformatted 를 입력한 다음 Enter 키를 눌러 미리 포맷된 블록을 만듭니다.

또는 위에서 설명한 대로 도구 모음을 사용합니다.

절

WordPress는 구절 블록이 귀하의 사이트에 시를 추가하는 데 이상적이라고 말합니다.

고급 사용자는 구절 블록에 CSS를 추가할 수 있으므로 구절 블록 스타일을 쉽게 지정할 수 있습니다.

 장미는 빨간색 , 
제비꽃은 파란색입니다.

WordPress 블록 편집기의 버튼

WordPress 블록 편집기를 사용하면 편집기에서 맞춤형 버튼을 만들 수 있습니다.

그것들은 특별히 독창적이지 않은 제한된 스타일의 단순한 버튼입니다. 제 생각에 WordPress는 올바른 결정을 내렸습니다. 깨끗한 상태를 유지하는 것이 더 나은 선택입니다.

버튼을 추가하려면 '블록 추가' 아이콘을 사용하고 '버튼'을 선택합니다.

바로 버튼 텍스트를 입력하기 시작합니다.

이제 '버튼 블록'에는 두 부분이 있어 혼동될 수 있습니다.

버튼은 외부 블록 내에 포함됩니다. 버튼을 클릭한 다음 버튼 바로 바깥쪽의 공백을 클릭하면 무슨 뜻인지 알 수 있습니다.

포함하는 블록을 사용하여 버튼을 이동하거나 끕니다. 버튼은 그 안에 정렬될 수 있습니다.

버튼을 클릭하면 색상, 텍스트, 테두리 등의 스타일을 지정할 수 있습니다. 여기에서 버튼을 연결할 수도 있습니다.

말이 됩니까?

버튼을 선택하십시오. WordPress의 오른쪽에서 더 많은 스타일 옵션을 사용할 수 있습니다.

단락처럼 버튼 텍스트에 스타일을 추가할 수 있습니다. 텍스트 연결에 주의하세요.

나는 WordPress가 버튼의 TEXT를 링크(단락과 마찬가지로 버튼 툴바를 통해)하거나 오른쪽의 옵션을 통해 전체 버튼을 링크하는 기능을 제공한다는 것을 발견했습니다. 약간 혼란스럽습니다.

여기에서 가장 좋은 방법은 전체 버튼을 연결하는 것입니다.

버튼을 클릭하여 선택하려면 오른쪽에 있는 차단 옵션을 참조하십시오. 맨 아래로 스크롤하여 링크를 링크 상대 필드에 넣습니다.

검색 엔진은 사용자가 새 탭을 열기로 결정하는 것을 선호하므로 '새 탭 열기' 옵션을 활성화하지 않는 것이 좋습니다.

위의 예제 버튼에서 Font Awesome에서 HTML 코드를 복사하여 Font Awesome 아이콘을 추가했습니다.

 <i class="fas fa-arrow-right"></i>

버튼에 포함하려면 버튼을 선택하고 도구 모음 끝에 있는 3개의 수직 점을 누른 다음 'HTML로 편집'을 선택합니다. 닫는 </a> 태그 앞에 HTML 코드를 붙여넣습니다.

이 아이콘은 Font Awesome이 설치된 경우에만 사용할 수 있습니다.

블록 그룹

그룹 블록을 사용하면 편집기가 내부에 둘 이상의 블록을 추가할 수 있으므로 그룹을 전체적으로 이동, 복제 또는 재사용할 수 있습니다.

레이아웃에 유용합니다. 또는 페이지가 뒤죽박죽되지 않도록 머리글과 단락을 함께 유지합니다.

그러나 GROUPS는 사라지는 것처럼 보이기 때문에 약간 실망스럽습니다! 나는 이것이 WordPress의 버그라고 생각합니다.

WordPress 블록 복제

또는 블록 안에 있을 때 단축키 CONTROL-SHIFT-D(Mac의 경우 COMMAND-SHIFT-D)를 사용합니다.

WordPress 블록 재사용

WordPress 블록의 또 다른 훌륭한 기능은 REUSABLE BLOCK 옵션입니다.

블록에 대해 생성한 스타일을 저장하고 다시 사용할 수 있습니다. 이렇게 하면 사이트 전체에서 각 항목을 다시 만들 필요가 줄어듭니다.

도구 모음을 표시할 블록을 클릭한 다음 오른쪽에 있는 3개의 수직 점을 클릭합니다. 여기에 ' 재사용 가능한 블록에 추가 '라는 레이블이 붙은 메뉴 항목이 있습니다.

저장된 재사용 가능 블록은 '재사용 가능' 탭 아래의 블록 라이브러리에서 찾을 수 있습니다. 다른 블록처럼 찾아서 추가하기만 하면 됩니다. 능숙한.

재사용 가능한 블록을 관리할 수 있으므로 컬렉션에 잉여 블록이 너무 많지 않습니다.

작업을 저장하십시오. 그런 다음 모든 게시물이나 페이지에서 화면 상단을 보면 PREVIEW 및 UPDATE 버튼과 톱니바퀴 아이콘이 표시됩니다.

해당 막대의 끝에 3개의 수직 점을 찾을 수 있습니다. 이 점을 클릭하면 목록이 표시됩니다. 하단에는 '재사용 가능한 모든 블록 관리' 옵션이 있습니다.

게시물과 유사한 방식으로 재사용 가능한 블록을 관리하십시오. 이름을 클릭하여 편집하십시오.

재사용 가능한 블록을 편집해도 사이트에 이미 있는 블록의 스타일은 변경되지 않습니다.

WordPress 블록을 드래그하는 방법

WordPress 5.5로의 업데이트 이후 드래그 옵션이 명확하지 않습니다.

블록을 선택한 다음 위-아래 화살표를 길게 클릭해야 합니다.

블록을 드래그하면 마우스를 놓으면 블록이 드롭될 위치를 나타내는 영역이 파란색으로 강조 표시됩니다.

이것이 WordPress 블록 편집기를 사용하여 WordPress 편집을 시작하는 데 도움이 되기를 바랍니다. 다룰 내용이 더 많으니 다음에서 제 다른 게시물을 참조하세요.

• WordPress에 이미지를 추가하는 방법.
• 워드프레스에서 이미지를 링크합니다.
• WordPress의 제목 및 단락.
• 워드프레스의 하이퍼링크.
• 워드프레스에서 포맷하기.
• WordPress에 PDF를 추가하는 방법(및 링크).

계속 할 수 있습니다! 어떻게 지내는지 알려주세요.