WordPress 편집기를 사용하는 방법

CMS로서의 WordPress에는 믿을 수 없을 정도로 강력한 기능 세트가 있습니다. 플러그인과 위젯은 사람들을 플랫폼으로 끌어들이지만, 일단 들어가면 진정한 힘은 WordPress 편집기 자체에서 나옵니다. 플랫폼에 대한 목표가 무엇이든 상관없이 게시물/페이지 편집기를 주로 사용하게 될 것입니다. 따라서 콘텐츠가 빛나고 사이트가 번성할 수 있도록 WordPress 편집기를 최대한 사용하는 방법을 보여 드리고자 합니다.

YouTube 채널 구독

워드프레스 에디터란?

기술적으로 선택할 수 있는 세 가지 WordPress 편집기가 있습니다. WordPress 5.0 릴리스와 함께 편집기는 당시 기본 TinyMCE에서 오늘날의 블록 편집기로 변경되었습니다. 그 변화 속에서 구텐베르크 편집기 플러그인은 워드프레스 코어로 만들기 전에 블록 편집기의 새로운 기능을 베타 테스트하기 위한 다리로 출시되었습니다.

블록 편집기는 5.0의 WP에서 기본이지만 원하는 세 가지 중 하나를 사용하도록 선택할 수 있습니다. 기존의 TinyMCE를 유지하기 위해 Classic Editor 플러그인을 설치하고, 편집기에서 최신 기능(잠재적으로 불안정하지만)을 유지하기 위해 Gutenberg 플러그인을 설치하거나, ​​기본 블록 편집기를 유지할 수 있습니다.

기본 편집기(및 Gutenberg 플러그인의 고유한 불안정성과 변화하는 특성)를 제외한 모든 것을 사용하는 것과 관련된 추가 단계를 감안할 때 이 게시물에서는 기본 블록 편집기에만 집중할 것입니다. 그러나 기본 사항은 Gutenberg와 동일하며 Classic Editor 플러그인에 포함된 TinyMCE는 주어진 서식 있는 텍스트 편집기 또는 워드 프로세싱 소프트웨어와 기본 기능 패리티가 있습니다. 우리가 논의하는 WP 관련 기능은 말할 것도 없습니다. 이상, 일반적으로 기능이 아닌 미학 만 다릅니다.

이상으로 WordPress 편집기를 사용하는 방법을 알아보겠습니다.

WordPress 편집기의 기본 사항

페이지나 게시물(또는 사용자 정의 게시물 유형)을 생성할 때마다 블록 편집기를 사용하게 됩니다. 그것을 열 때 튜토리얼 모달이 제공되며, 제공하는 4개의 슬라이드를 통해 기본 사항을 배울 수 있습니다. 닫으면 기본 편집기를 볼 수 있습니다.

기본 WordPress 블록 편집기는 5가지 요소로 구성됩니다. 다양한 플러그인을 통해 더 많은 것을 추가할 수 있지만 이들은 매일 작업하게 될 기본 기능을 제공합니다.

1. 제목 블록 – 여기에 입력하는 모든 항목은 게시물/페이지의 기본 H1 태그로 표시됩니다.
2. 블록/콘텐츠 영역 – 게시물 또는 페이지의 콘텐츠를 구성하는 다양한 블록을 추가할 영역입니다.
3. 블록 추가 버튼 – 원 안에 + 가 표시되면 클릭하여 새 블록을 추가할 수 있습니다. 삽입할 유형을 선택하는 드롭다운이 나타납니다. 모두 정확히 동일하게 작동하므로 블록 오른쪽, 블록 아래 또는 화면 모서리에서 하나를 클릭해도 동일한 옵션이 표시됩니다.
4. 문서 옵션 탭 – 이 탭에서 카테고리, 태그, 영구 링크, 댓글 켜기/끄기 토글 등의 모든 것을 찾을 수 있습니다. 플러그인은 여기에 옵션을 추가할 수 있지만 항상 전체 페이지 또는 게시물 자체에 적용됩니다.
5. 블록 옵션 탭 – 이 탭은 강조 표시한 블록에 대한 옵션을 처리합니다. 단락 블록을 클릭하면 해당 블록에 대한 옵션 만 편집할 수 있습니다. 다른 블록이나 문서 자체는 변경되지 않습니다.

아래에서 이러한 영역의 세부 사항과 이를 사용하여 가능한 최고의 콘텐츠를 만드는 방법을 안내합니다.

블록이란 무엇입니까?

이 게시물에서 이미 블록에 대해 언급한 것을 보았지만 블록이 무엇입니까? 블록 은 페이지 또는 게시물의 사용자 지정 가능한 단일 요소입니다. 단일 단락, 목록, 이미지 또는 갤러리가 될 수 있습니다. 이 블록은 원하는 대로 이동하고 조정할 수 있으며 개별적으로 사용자 지정할 수 있으며 WYSIWYG 편집기에서는 불가능한 방식으로 콘텐츠를 세부적으로 제어할 수 있습니다. (Divi 사용자라면 모듈이 동일한 방식으로 작동하기 때문에 이미 이 개념에 익숙할 것입니다.)

위에서 볼 수 있듯이 페이지의 각 요소는 자체 블록에 포함되어 있습니다. WordPress 지원 문서에서 WordPress 블록의 전체 목록을 볼 수 있습니다.

블록 그룹을 만드는 방법

블록 그룹은 단일 블록으로 작동하도록 설정한 블록 모음입니다. 그것들을 하나의 단위처럼 이동하고 스타일을 지정하지만 그룹은 여러 요소로 구성됩니다.

그룹을 만드는 것은 쉽습니다. 블록을 클릭한 다음 Shift 또는 CTRL을 누른 상태에서 다른 블록을 클릭하기만 하면 됩니다. 게시물의 모든 블록을 그룹화하려면 CTRL/CMD – A를 눌러 모두 선택할 수 있습니다. 그런 다음 왼쪽 상단의 아이콘이 작은 블록으로 구성된 사각형으로 변경되는 것을 보면 아이콘을 클릭하고 그룹으로 변환 을 선택할 수 있습니다.

그룹을 해제해야 하는 경우 점 3개로 된 드롭다운 버튼을 클릭하고 그룹 해제를 선택하면 됩니다.

블록은 이제 다시 한 번 개인으로 작동합니다.

재사용 가능한 블록이란 무엇입니까?

설정 메뉴에서 일회용 블록의 모든 블록을 재사용 가능한 블록으로 전환할 수 있습니다. 재사용 가능한 블록 은 템플릿이 아니라 사이트의 전역 블록입니다. 블록 또는 블록 그룹을 작성한 다음 재사용 가능한 블록에 추가 를 클릭합니다.

해당 재사용 가능한 블록에 대한 변경 사항이나 편집 사항은 전체 사이트에 반영되어 편집한 블록만이 아니라 블록의 모든 인스턴스가 변경됩니다. 주제에 대한 자세한 정보를 확인할 수 있는 재사용 가능한 블록에 대한 완전한 가이드가 있습니다.

제목 블록

위에 표시된 제목 블록은 게시물 또는 페이지의 기본 H1 태그입니다. 또한 게시물에 대한 영구 링크 슬러그를 생성하지만 게시물을 한 번 이상 저장하면 편집할 수 있습니다. 이것은 또한 .post-title 및 .entry-title 과 같은 CSS 선택기가 가져오는 것이기도 합니다. (그러나 SEO 플러그인을 사용하면 검색 엔진에 표시할 내용을 설정할 수 있습니다.)

이것은 제거하거나 재배치할 수 없는 WordPress 편집기 내의 한 블록입니다. 더 조정하려면 CSS 또는 외부 페이지 빌더 설정을 사용해야 합니다.

차단/콘텐츠 영역

기본적으로 콘텐츠 영역을 입력하는 위치로 간주할 수 있습니다. 원하는 경우 입력을 시작하고 블록을 전혀 고려하지 않고 전체 게시물을 작성할 수 있습니다. 모든 주요 면에서 이것은 TinyMCE의 단순한 WYSIWYG 영역을 대체하며 WordPress 편집기의 가장 큰 변화입니다.

그러나 블록 편집기를 사용하면 그 이상의 작업을 수행할 수 있습니다. "enter" 또는 "return"을 누를 때마다 새 단락 블록이 추가됩니다. 다른 종류의 블록(모든 종류)을 추가하려면 원 안의 + 를 클릭하면 사용 가능한 모든 블록의 드롭다운이 표시됩니다. 카테고리도 다르기 때문에 스크롤을 꼭 해주세요. 원하는 종류를 안다면 특정 블록을 검색할 수도 있습니다.

YouTube 비디오 블록, 이미지, 갤러리, 오디오 플레이어, 목록, 인용문 등을 추가할 수 있습니다. 각각에는 고유한 설정과 스타일 옵션이 있습니다. 또한, 블록을 더 많이 사용할수록 WordPress 편집기는 일반적으로 사용되는 블록으로 인식하고 가장 많이 사용 하는 항목 아래에 나열하므로 더 이상 스크롤하거나 검색할 필요가 없습니다. 재사용 가능한 블록 및 블록 그룹도 가장 많이 사용됨 아래에 나타날 수 있습니다.

이 섹션의 이미지를 보면 (1) 블록이 선택될 때 각 블록에 대해 표시되는 재정렬 버튼을 가리킵니다(선택하려면 클릭하기만 하면 됨). (2) 는 블록을 삭제하고 내용을 HTML로 편집하거나 복제하거나 블록 주위에 새 블록을 추가할 수 있는 드롭다운을 가리킵니다.

그러나 이러한 옵션 및 설정은 위에서 언급하고 아래의 다음 섹션에서 설명하는 화면의 오른쪽 상단 모서리에 있는 차단 옵션 탭 과 다릅니다.

문서 개요, 단어 수 및 기타 정보

페이지의 상단 도구 모음에서 원 안에 i 가 있습니다. 그것을 클릭하면 문서가 무엇으로 구성되어 있는지에 대한 전체 개요가 표시됩니다.

머리글 블록을 사용하는 한 단어 수, 단락 번호 및 블록 수 외에 문서 개요가 표시됩니다. 제목 블록이 없으면 해당 섹션이 없습니다. 문서 개요의 요소를 클릭하면 해당 블록으로 직접 이동할 수 있습니다. 이 기능은 긴 문서에서 매우 중요합니다.

그 옆에 있는 중첩 목록 아이콘을 클릭하면 개요의 머리글뿐만 아니라 게시물의 모든 블록에 대한 정렬된 목록도 볼 수 있습니다.

다시 말하지만 목록에서 아무거나 클릭하여 해당 블록으로 직접 이동하고 선택할 수 있습니다.

블록 옵션 탭

WordPress 편집기의 오른쪽 상단 모서리에 Block 이라는 탭이 표시됩니다. 선택한 블록이 있는 한 해당 블록 유형에 대한 상황별 옵션 세트가 제공됩니다. 그러나 변경 사항은 선택한 단일 블록에만 영향을 미칩니다.

예를 들어 이 탭에서 이미지의 축소판 크기를 변경하거나 단락에 색상 배경을 추가하여 경고를 생성하거나 제목의 글꼴 크기를 조정할 수 있습니다. 블록 탭이 열려 있으면 옵션이 선택한 특정 블록으로 변경됩니다. 단락 블록이 강조 표시된 경우 이를 볼 수 있습니다.

이미지 블록을 선택하면 블록 탭이 이것으로 변경됩니다.

각 블록에는 해당 유형의 블록에만 적용되는(그리고 해당 특정 블록에서만 렌더링되는) 조정할 수 있는 특정 옵션이 있습니다. 그러나 모든 블록의 탭에는 해당 블록에 CSS 클래스를 적용할 수 있는 고급 섹션이 있습니다. 그런 다음 외부 스타일시트와 코드를 사용하여 원하는 대로 스타일을 지정할 수 있습니다.

문서 옵션 탭

차단 옵션 탭의 왼쪽에는 문서 옵션 탭이 있습니다. 과거에 WordPress를 사용해 본 적이 있다면 익숙할 것입니다. 여기에서 게시물의 카테고리, 태그를 조정하고, 추천 이미지를 추가하고, 영구 링크 슬러그를 조정하고, 테마/SEO 사용을 위한 발췌문을 추가하고, 댓글을 활성화 또는 비활성화할 수 있습니다.

각 섹션은 TinyMCE WYSIWYG 편집기의 위치와 내용과 거의 동일합니다. 단일 블록이나 전체 사이트가 아니라 전체 게시물이나 페이지에 적용됩니다. 또한 위의 이미지에서 볼 수 있듯이 WP 로켓 옵션 상자가 있습니다. 일부 플러그인은 이 영역에 상자를 적용하지만 콘텐츠나 블록이 아니라 항상 문서 자체와 직접 관련됩니다.

추가 포스트 메타박스

게시물의 메타박스는 플러그인이 콘텐츠 자체에 대한 새로운 옵션과 기능을 추가하는 곳입니다. 블록 아래의 콘텐츠 영역 맨 끝에 나타납니다.

이 섹션에 표시되는 내용(있는 경우)은 설치한 플러그인(또는 해당 영역을 사용할 수 있는 테마 기능)에 따라 다릅니다. SEO 플러그인은 이 영역과 문서 세부 정보가 아닌 페이지 콘텐츠와 어떤 식으로든 상호 작용할 수 있는 다른 모든 것을 많이 활용합니다.

WordPress 편집기 옵션 드롭다운

화면 오른쪽 상단의 점 3개 드롭다운 아이콘을 클릭하면 큰 세로 드롭다운이 나타납니다. 여기에서 여러 설정을 조정할 수 있으며, 모두 문서, 블록 또는 콘텐츠가 아닌 편집기 자체에 적용됩니다.

대부분의 경우 재사용 가능한 블록을 관리하거나 키보드 단축키 목록을 제공하거나 처음에 언급한 환영 가이드를 다시 여는 것과 같은 매우 간단한 옵션입니다.

그러나 가장 자주 사용되는 옵션 중 일부는 맨 위에 있습니다. 특히 Top Toolbar , Fullscreen Mode 및 Visual/Code Editor 모드에 대한 토글입니다.

상단 도구 모음 토글은 위에서 언급한 것처럼 선택한 블록에 대한 옵션이 블록의 왼쪽 상단 근처에 상황에 맞는 메뉴로 표시되는 대신 화면 상단의 고정된 영역에 표시됨을 의미합니다.

전체 화면 모드 는 WordPress 관리 대시보드를 켜거나 끕니다. 전체 화면 모드를 비활성화하면 게시물, 페이지, 모양, 설정, 도구 등과 같은 일반적인 대시보드 옵션이 포함된 왼쪽 사이드바가 표시됩니다.

그리고 Visual/Code Editor 토글은 TinyMCE 편집기에서와 똑같이 작동합니다. 지금까지 이 게시물의 예제는 Visual Editor를 사용한 것입니다. 즉, 게시물을 작성할 때 게시물의 시각적 표현을 볼 수 있습니다. 누를 수 있는 버튼, 상황에 맞는 메뉴, 변경 시 실시간 설정 렌더링이 제공됩니다. 그러나 코드 편집기는 바로 코드입니다. 일반 텍스트와 HTML로 작성할 간단한 텍스트 상자가 있습니다.

이는 일반적으로 편집기 문제를 해결하거나 단일 영역 또는 블록을 미세 조정하기 위해 수행됩니다. 또는 여러 블록에서 올바르게 형식이 지정되지 않는 외부 편집기에서 작성된 콘텐츠를 붙여넣을 수 있습니다.

블록 편집기는 특정 HTML 태그를 사용하여 WordPress에 렌더링할 블록의 종류를 알려주므로 <!– wp:paragraph –> 처럼 보이는 코드를 그대로 유지해야 합니다. 그렇지 않으면 일이 꽤 복잡해질 수 있습니다.

글로벌 WordPress 블록 편집기 단축키

블록 편집기에는 자체 단축키 세트도 함께 제공됩니다. 그것들은 TinyMCE와 동일하지는 않지만 똑같이 유용하고 배우는 데 중요합니다. 가장 유용한 것을 기억하는 것은 경험에 비추어 볼 때 많은 시간과 수고를 덜어줄 것입니다. Shift+Alt+H 를 눌러 WordPress 편집기 자체에 다음 단축키 목록을 표시할 수 있습니다.

문서 바로 가기

• 비주얼 편집기와 코드 편집기 간 전환 – Ctrl+Shift+Alt+M
• 블록 탐색 메뉴 열기 – Shift+Alt+O
• 설정 사이드바 표시 또는 숨기기 – Ctrl+Shift+,
• 편집기의 다음 부분으로 이동 - Ctrl+` 또는 Shift+Alt+N
• 편집기의 이전 부분으로 이동 - Ctrl+Shift+` 또는 Shift+Alt+P
• 가장 가까운 도구 모음으로 이동 – Alt+F10
• 변경 사항 저장 – Ctrl+S
• 마지막 변경 사항 실행 취소 – Ctrl+Z
• 마지막 실행 취소 다시 실행 – Ctrl+Shift+Z

선택 바로 가기

• 입력할 때 모든 텍스트를 선택합니다. 다시 눌러 모든 블록 선택 – Ctrl+A
• 선택 취소 – ESC

블록 바로 가기

• 선택한 블록 복제 – Ctrl+Shift+D
• 선택한 블록 제거 – Shift+Alt+Z
• 선택한 블록 앞에 새 블록 삽입 – Ctrl+Alt+T
• 선택한 블록 뒤에 새 블록 삽입 – Ctrl+Alt+Y
• 선택한 여러 블록 제거 – del 또는 백스페이스
• 새 단락 추가 후 블록 유형 변경 – /

텍스트 바로 가기

• 선택한 텍스트를 굵게 만들기 – Ctrl+B
• 선택한 텍스트를 기울임꼴로 만들기 – Ctrl+I
• 선택한 텍스트를 링크로 변환 – Ctrl+K
• 링크 제거 – Ctrl+Shift+K
• 선택한 텍스트에 밑줄 긋기 – Ctrl+U

마무리

WordPress 편집기는 지난 10년 동안 먼 길을 왔으며 현재의 블록 편집기는 확실히 다음 단계로 넘어갈 만큼 충분히 강력합니다. 페이지의 모든 요소를 ​​세부적으로 제어하는 ​​기능을 통해 이전보다 훨씬 빠르고 쉽고 효율적으로 콘텐츠를 만들 수 있습니다. 그러나 현재 블록 편집기가 적합하지 않은 경우 클래식 편집기 플러그인이 존재하고 최첨단을 사용하려는 경우 Gutenberg 플러그인은 WordPress 코어의 기본 편집기보다 몇 가지 릴리스 앞서 있습니다. 따라서 어떤 방식으로 생성하든 상관없이 WordPress가 다룹니다.

WordPress 편집기에 대해 공유하고 싶은 팁과 요령이 있습니까? 댓글로 알려주세요!