WordPress 블록: 심층 가이드

WordPress 블록 은 WordPress의 드래그 앤 드롭 방식의 웹 사이트용 Gutenberg 편집 시스템의 주요 구성 요소입니다.

블록 사용법을 배우는 가장 쉬운 방법은 실습을 통한 것이지만 블록이 무엇이며 블록이 무엇을 할 수 있는지 이해하면 페이지 작성을 보다 효율적이고 재미있게 만들 수 있습니다.

WordPress 사이트를 처음 만들거나 고급 기술을 개발하려는 경우 이 가이드는 블록이 무엇인지, 사람들이 사용하는 일반적인 블록, 사용 방법 및 사이트를 개선할 수 있는 기타 정보에 대해 자세히 알려줍니다.

자세히 알아보기: WordPress 웹사이트 디자인: 처음부터 WordPress 웹사이트를 만드는 방법

WordPress 블록이란 무엇입니까?

WordPress 블록은 WordPress의 구텐베르그 편집 시스템을 사용하여 블로그 게시물이나 웹사이트 페이지에 추가할 수 있는 텍스트, 미디어 또는 사용자 정의 코드의 신중한 요소입니다.

대부분의 사람들은 블로그에 사용하는 데 중점을 두지만 많은 웹사이트의 다른 페이지에서도 잘 작동합니다.

WordPress 블록은 각 요소를 수동으로 코딩할 필요를 제거하여 독자에게 보기 좋은 게시물과 페이지를 간단하게 생성하기 위해 존재합니다. 대신 각 블록을 끌어서 재정렬하여 페이지 모양을 사용자 지정할 수 있습니다.

각 블록은 기능적으로 페이지에서 독립적인 요소이므로 한 블록을 변경해도 다른 블록은 수정되지 않습니다.

이것은 시장에 나와 있는 유일한 블록 유형 편집 시스템이 아닙니다. Ghost와 같은 일부 경쟁 서비스에는 웹 사이트를 만드는 데 사용할 수 있는 강력한 편집기도 있습니다.

그러나 Ghost는 주로 블로깅 플랫폼이며 편집기는 이에 중점을 두고 있으며 WordPress의 편집기는 웹사이트에 블로그가 아닌 페이지를 만드는 데도 유용합니다.

이러한 블록은 다른 콘텐츠 관리 시스템인 Drupal과도 다릅니다.

Drupal은 웹사이트의 여러 부분에 나타날 수 있는 블록에 중점을 두는 반면 WordPress는 한 페이지의 개별 부분에 중점을 둡니다.

콘텐츠를 충분히 쉽게 복제할 수 있지만 블록 자체는 연결되지 않으며 편집할 때 모두 변경되지 않습니다.

자세히 알아보기: 랜딩 페이지 디자인: 10가지 영감을 주고 전환율이 높은 랜딩 페이지

구텐베르크의 역사

Gutenberg는 WordPress의 현재 편집자입니다.

2018년에 처음 출시된 이후 웹 페이지 및 블로그 게시물에 대한 빠르고 강력한 편집을 제공할 수 있는 보다 성숙한 시스템으로 성장했습니다.

개발자가 전체 사이트 편집에 사용하기를 원하기 때문에 아직 완료되지 않았지만 출시 당시보다 훨씬 더 많은 기능이 있습니다.

Gutenberg는 많은 WordPress 사용자가 모든 것을 보기 좋게 만들기 위해 코드를 편집하지 않고 더 깨끗하고 간단한 블로그 방법을 원했기 때문에 존재합니다.

여기에서 WordPress는 코딩 지식이 거의 없는 많은 일반 사용자를 끌어들이고 있다는 점을 이해하는 것이 중요합니다.

이것은 당시에 상대적으로 고도의 코딩 지식이 없었다면 웹사이트조차 가질 수 없었던 인터넷 초창기와는 확연한 차이입니다. 즉, WordPress는 클릭 앤 드래그 프로세스가 더 합리적인 캐주얼 시장을 지원하기를 원합니다.

구텐베르크의 두 번째 고려 사항은 사람들이 블로그를 하는 방법과 장소입니다.

일부 웹 사이트 소유자는 수동으로 작성하는 대신 텍스트 음성 변환 시스템을 사용하는 반면 끌어서 놓기 편집 시스템을 사용하면 스마트폰, 태블릿 및 기타 장치에서 웹 사이트를 훨씬 쉽게 만들 수 있습니다.

그러나 일부 사람들은 여전히 ​​이전 편집 시스템을 선호합니다. 코드를 관리할 수 있는 사용자에게 훨씬 더 많은 제어와 지원을 제공하기 때문에 이는 놀라운 일이 아닙니다.

Gutenberg는 강력한 편집기 이지만 필요에 따라 사용자가 할 수 있는 몇 가지 작업을 제한합니다. 순수한 코딩만큼 유연한 것은 없지만 대부분의 요구 사항에 대해 구텐베르그가 더 빠르고 쉽습니다.

자세히 알아보기: 전환율 최적화: 전체 가이드

클래식과 블록 편집기 간 전환

WordPress는 일반적으로 모든 사람이 하나의 시스템을 사용하도록 하는 것보다 유연성이 더 낫다는 것을 알고 있습니다. 그렇기 때문에 클래식 편집 시스템과 블록 편집 시스템 간에 전환할 수 있습니다.

대부분의 경우 편집 보기 간에 전환하려면 사이트 관리자여야 합니다.

그러나 올바른 계정으로 로그인하면 수정 시 화면 상단의 버튼을 클릭하여 각 페이지의 편집기를 변경할 수 있습니다.

이것은 대부분의 사용자가 알아야 하는 모든 것이지만 추가로 사용자 정의할 수 있습니다.

많은 WordPress 플러그인을 사용하면 Gutenberg와 같은 끌어서 놓기 인터페이스로 페이지를 만들 수 있지만 선호할 수도 있습니다. 그들은 일반적으로 Gutenberg가 제공하지 않는 편집 옵션도 제공합니다.

Divi 빌더, SeedProd 및 인기 있고 사용하기 쉬운 Elementor와 같은 플러그인은 Gutenberg가 제공하는 블록 이상의 편집 시스템을 제공합니다.

이러한 플러그인에는 일반적으로 페이지 생성 프로세스를 더욱 줄여주는 크기 조정 도구, 여러 부분으로 구성된 구성 요소 및 향상된 템플릿이 포함되어 있습니다.

외부 플러그인은 구텐베르크가 종종 약간 떨어지는 비블로그 페이지에 유용합니다. 많은 페이지를 수행 할 수 있지만 다른 시스템과 같은 유연성은 아직 없습니다.

자세히 알아보기: 고객 여정 지도: 모범 사례 + 준비된 템플릿

구텐베르크를 비활성화하는 방법

특정 사용자에 대해 Gutenberg를 비활성화할 수 있습니까? 완전히 비활성화 할 수 있습니까?

둘 다에 대한 대답은 예입니다. 귀하의 사이트에서 구텐베르크를 사용하지 않으려는 경우 구텐베르크를 비활성화하는 방법에는 여러 가지가 있습니다.

플러그인을 설치하여 Gutenberg 비활성화

첫 번째 방법은 대부분의 사용자에게 가장 좋은 방법은 Classic Editor 플러그인을 사용하는 것입니다. 이것은 말 그대로 수백만 개의 사이트에 활성 설치가 있는 WordPress 팀의 공식 플러그인입니다.

클래식 편집기를 사용하면 각 사용자에 대한 기본 편집기를 설정할 수 있고, 사용자가 편집기를 선택할 수 있으며, 작업을 더 쉽게 하기 위한 몇 가지 추가 기능이 제공됩니다.

이것은 기술적으로 Gutenberg를 숨기는 것만큼 비활성화하지 않지만 실제 결과는 동일합니다. 또는 다른 의미에서 Classic Editor를 설치하면 원하는 편집기를 사용할 수 있기 때문에 현명하고 항상 하나의 편집기에 집착하는 것보다 낫습니다.

커뮤니티 기반 대안은 클래식 편집기만큼 인기가 없지만 공식 지원에 의존하지 않는 Disable Gutenberg 플러그인을 사용합니다.

이것은 Gutenberg를 완전히 비활성화하거나 사이트의 특정 페이지, 게시물 유형, 역할 또는 테마에 대해 비활성화하는 간단하고 실용적인 방법입니다.

플러그인을 설치하는 단계는 간단합니다.

1. WordPress 인터페이스에 로그인
2. 왼쪽에서 '플러그인'을 선택합니다.
3. 확장된 플러그인 화면에서 '새로 만들기' 선택
4. 상단의 검색 필드에 원하는 플러그인의 이름을 입력하십시오
5. 결과에서 원하는 플러그인을 선택하고 '지금 설치' 버튼을 클릭합니다.
6. 완료되면 '플러그인 활성화'를 클릭 합니다.

functions.php를 편집하여 구텐베르그 비활성화

마지막으로 사이트에서 functions.php 파일을 수정하여 직접 비활성화할 수 있습니다.

그러나 잘못하면 사이트가 깨질 수 있으므로 일반 사용자에게는 권장하지 않습니다. 위에 나열된 플러그인 중 하나를 설치하는 것은 더 간단하고 쉽게 되돌릴 수 있습니다.

플러그인 없이 Gutenberg를 비활성화하고 WordPress 코드의 초보자인 경우 다음 단계를 수행할 수 있습니다. 이 방법은 모든 사용자에 대해 비활성화합니다.

1. WordPress 인터페이스에 로그인 합니다(관리자여야 함).
2. 왼쪽 사이드바에서 '외모' 를 찾아 그 위로 마우스를 가져갑니다.
3. '테마 편집기' 선택
4. 오른쪽 파일 목록에서 'functions.php' 선택
5. 백업으로 전에 functions.php 파일의 복사본을 만들어 문제가 발생할 경우 복원할 수 있습니다.
6. 편집기가 나타나면 다음을 정확히 복사하여 파일에 붙여넣습니다. add_filter( 'use_block_editor_for_post', '__return_false' );
7. 아래 파일 업데이트 버튼을 클릭하십시오.

자세히 알아보기: 히트맵 설명 + 웹사이트 히트맵을 만드는 방법

WordPress 블록의 일반적인 유형

다음은 기본 WordPress 편집기에서 사용할 수 있는 가장 일반적인 유형의 블록입니다.

구텐베르그 이전에는 대부분의 사람들이 이러한 블록을 직접 코딩하거나 서식 있는 텍스트 편집기의 텍스트 및 이미지 서식 도구를 사용하여 코딩하고 페이지의 레이아웃을 조정하기 위해 필요에 따라 코드를 재배열했습니다.

절

이것은 대부분의 사람들이 다른 것보다 더 많이 사용하는 블록입니다. 이름에서 알 수 있듯이 서면 콘텐츠에 중점을 둡니다.

텍스트 편집기는 각 단락을 블록으로 변환하여 작성한 후 이동하고 재정렬할 수 있습니다.

영상

이미지 포함 블록은 페이지에서 이동할 수 있는 단일 그래픽을 포함합니다.

여기에는 이미지 크기 조정 또는 테마의 일반적인 한계를 넘어 전체 너비로 이동하는 것을 포함하여 다양한 정렬 옵션이 제공됩니다.

단락과 이미지 블록을 함께 사용하면 기본 웹 페이지를 만들 수 있으므로 기본 시각적 계층 구조 원칙에 따라 다른 모든 요소는 궁극적으로 이러한 요소를 반복하고 개선하기 위한 것입니다.

제목

제목 블록은 페이지를 섹션으로 분할하고 사용자가 콘텐츠를 더 쉽게 찾을 수 있도록 큰 텍스트를 포함합니다. 편집기를 사용하면 필요에 따라 제목 크기, 서식, 하이퍼링크 및 기타 요소를 조정할 수 있습니다.

WordPress는 페이지 제목에 대해 h1을 포함하여 최대 6개의 제목 수준을 지원하지만 대부분의 사람들은 h4를 넘어서는 경우가 거의 없습니다.

갤러리

갤러리 블록은 기본 이미지 블록의 고급 버전이며 미리 결정된 레이아웃에 여러 사진을 추가할 수 있습니다.

현재 편집기는 이미지에 대해 최대 8개의 열과 페이지에 대한 크기 조정, 연결 및 기타 서식 옵션을 지원합니다.

목록

번호 매기기 또는 글머리 기호 목록으로 만든 목록 블록.

이것은 본질적으로 단락 블록의 응용 프로그램이지만 목록을 자체 구성 요소로 분리하면 실수로 서식을 수정하는 것을 방지하기가 더 쉽습니다.

인용문

인용 블록은 특히 중요한 것을 호출하는 데 도움이 되는 특별히 형식이 지정된 단락 블록입니다.

대부분의 사람들은 특정 사람의 인용문을 위해 이것을 사용하지만 논평을 제공하거나 중요한 정보를 강조하는 데 사용할 수도 있습니다.

오디오

오디오 블록은 웹사이트에서 상대적으로 드물지만 WordPress는 여전히 이를 지원합니다.

이를 통해 오디오 자동 재생 또는 반복과 같은 기능을 포함하여 가지고 있는 모든 오디오 파일을 추가할 수 있습니다.

대부분의 사용자는 원하지 않는 한 자동으로 재생되는 오디오를 싫어하므로 예기치 않은 소음으로 방문자를 놀라게 하지 않도록 하십시오.

씌우다

표지 블록은 고급 서식 요소입니다. 이 블록을 사용하면 페이지에 오버레이할 수 있는 이미지나 비디오, 때로는 텍스트를 선택할 수 있습니다.

이 미디어는 백그라운드에서 떠다니거나 반복될 수 있으며 그렇지 않으면 즉각적인 주의를 끄는 역할을 합니다.

WordPress는 오버레이에 투명도가 없는 것 또는 완전한 투명도를 지원하지만 텍스트를 읽기 쉽게 하기 위해 적당한 양을 권장합니다.

파일

파일 차단을 사용하면 방문자가 파일을 다운로드할 수 있도록 웹사이트에 있는 파일에 대한 직접 링크를 제공할 수 있습니다.

거의 모든 종류의 파일을 사이트에 업로드할 수 있지만 너무 큰 파일을 업로드하려고 하거나 계획에 비해 너무 많은 다운로드를 받는 경우 호스팅 제공업체에 질문이 있을 수 있습니다.

이것은 웹 개발의 상호 연결성을 보여주는 좋은 예입니다.

사람들이 기본 텍스트 파일만 다운로드할 수 있도록 허용하고 다른 파일을 추가하기 전에 웹사이트의 호스트와 대화할 수 있도록 허용한다면 아마도 제한을 초과하지 않을 것입니다. 그들은 귀하의 계획에서 허용되는 사항을 말하거나 필요에 따라 대안을 제안할 수 있습니다.

동영상

비디오 블록을 사용하면 멀티미디어 컨텐츠를 직접 업로드하거나 다른 사이트의 컨텐츠를 링크하여 사이트에 추가할 수 있습니다.

비디오 파일은 매우 큰 경향이 있으므로 사이트에 파일을 보관하려면 일반적으로 좋은 호스팅 계획이 필요합니다.

YouTube를 통한 외부 호스팅 및 YouTube 내장 사용, 훨씬 쉽습니다. Gutenberg는 일부 비디오 링크를 자동으로 적절하게 다른 유형의 블록으로 변환합니다.

WordPress 블록을 사용하는 방법

구텐베르크 편집기에서 블록을 추가하는 방법에는 여러 가지가 있습니다. 상단 아이콘 표시줄에서 직접 추가하거나 삽입 버튼을 클릭하여 추가할 수 있습니다.

이 버튼은 더하기가 있는 원처럼 보이며 추가할 블록 유형을 클릭할 수 있습니다.

블록이 페이지에 있으면 블록 왼쪽에 있는 화살표를 클릭하여 블록을 위아래로 이동할 수 있습니다. 또는 6개의 점 격자를 클릭하고 마우스 버튼을 누른 상태에서 블록을 원하는 위치로 드래그할 수 있습니다.

블록을 편집하려면 해당 공간을 클릭하기만 하면 됩니다. 이렇게 하면 블록 정보가 자동으로 열리고 필요에 따라 구성 요소를 조정할 수 있습니다.

동일한 기능을 사용하여 블록 유형을 변경할 수 있습니다. 제어판의 화살표를 사용하여 편집기 섹션을 확장하거나 닫을 수 있으며 X 버튼을 사용하여 블록 편집기를 닫고 다른 작업에 집중할 수 있습니다.

WordPress 블록과 위젯의 차이점 - 2020 - 다른 사람

블록은 주로 이미지 및 오디오와 같은 미디어 및 텍스트를 포함한 웹 페이지 콘텐츠입니다. 그렇다면 WordPress 위젯이란 무엇이며 블록과 어떻게 다릅니까?

이와 대조적으로 WordPress 위젯은 사이드바 및 바닥글과 같은 특수 영역에 넣을 수 있는 콘텐츠입니다. Gutenberg 편집기는 대부분 이러한 영역을 피하지만 코드 블록을 추가하여 기본 콘텐츠에 위젯과 같은 것을 포함할 수 있습니다.

블록 인터페이스는 일반적으로 페이지 편집기가 열려 있을 때 화면 오른쪽에 있습니다. 위젯 편집기는 모양 > 사용자 정의 영역 및 관리 메뉴를 통해 사용할 수 있습니다.

위젯은 일반적으로 웹사이트의 모든 페이지에 나타나므로 블록을 편집할 수 있는 동일한 위치에서 편집할 수 없습니다.

재사용 가능한 WordPress 블록 템플릿 만들기

WordPress를 사용하면 재사용 가능한 블록 템플릿을 만들 수 있습니다.

이것은 매번 정확한 레이아웃을 다시 만들지 않고도 사이트에서 일관된 브랜딩 및 디자인을 유지하는 데 유용합니다. 이것은 Vectornator 또는 Adobe Illustrator와 같은 소프트웨어를 사용하여 고급 벡터 그래픽 및 레이아웃을 만드는 경우에 특히 유용합니다.

템플릿 자체를 만드는 것은 간단합니다. 블록을 선택하고 표시되는 도구 모음에서 세 개의 점을 클릭한 다음 재사용 가능한 블록에 추가를 클릭하기만 하면 됩니다.

거기에서 기억하기 쉬운 이름으로 이름을 바꾸고 페이지 작업으로 돌아갈 수 있습니다.

블록 템플릿은 로고, 그래픽 디자인 소프트웨어로 만든 사용자 정의 버튼, 디자인 요소 및 웹사이트 브랜딩에 사용되는 모든 것을 단순화합니다.

템플릿을 사용하면 사용할 때마다 특정 브랜딩 요소나 레이아웃을 다시 만들 필요 없이 원하는 위치에 요소를 쉽게 추가할 수 있습니다.

WordPress 블록에 대한 최종 생각

WordPress 블록이 모든 사람에게 이상적인 것은 아니지만 직관적이고 사용자 친화적인 방식으로 페이지를 만들고 콘텐츠를 정렬하기 위한 강력한 출발점입니다.

그러나 블록에 대해 읽는 것만으로는 블록 사용을 마스터하기에 충분하지 않습니다.

대신 지금 WordPress 사이트로 이동하여 한 페이지에서 놀아보세요. 몇 가지 실습을 통해 사용법을 숙달하고 사이트에서 고급 레이아웃 만들기를 시작할 수 있습니다.

자전거를 타는 것과 마찬가지로 WordPress 블록은 배우면 잊기 어렵고 거의 모든 표준 페이지 디자인을 만드는 데 도움이 됩니다.