개발자를 위한 WordPress Gutenberg 튜토리얼 – 전체 웹사이트 디자인

여기에서는 개발자를 위한 WordPress Gutenberg 자습서에 대한 내용을 소개합니다. 가장 혁신적인 업데이트를 도입한 후 대부분의 WordPress 개발자는 이 업데이트로 어려움을 겪고 있습니다. 우리는 웹사이트 빌더가 고객을 위한 멋진 웹사이트를 디자인하는 데 많은 도움을 주고 있다는 것을 알고 있습니다.

그러나 때때로 빌더는 웹 사이트 로딩을 느리게 만들고 Google의 최근 업데이트에서는 로딩 속도가 느린 웹 사이트의 순위를 크게 낮추었습니다. 반면에 Gutenberg의 단순함을 통해 이제 훨씬 더 빠르게 로드되는 웹사이트를 구축할 수 있습니다.

Johannes Gensfleisch zur Laden zum Gutenberg는 독일의 금세공인, 발명가, 인쇄업자였습니다! 우리는 인간 구텐베르그에 대해 말하는 것이 아닙니다. 우리는 WordPress 플랫폼의 멋진 블록 편집기인 Gutenberg에 대해 이야기하고 있습니다.

이것은 웹사이트 구축 경험을 폭풍으로 몰아넣은 WordPress 플랫폼의 최신 블록 편집기입니다. Gutenberg를 사용하면 웹 사이트를 그 어느 때보다 쉽게 ​​편집하고 사용자 지정할 수 있습니다.

Gutenberg를 사용하면 처음부터 웹사이트를 만들 수도 있습니다. 그리고 구텐베르크에서 일하기 위해 코딩을 알 필요가 없습니다. Gutenberg에는 초보자라도 웹사이트를 개발하는 데 도움이 되는 매우 쉬운 기능이 있습니다.

그러나 Gutenberg WordPress 블록 편집기로 웹 사이트를 구축하는 방법에 대한 자세한 프로세스를 알고 있다면 전체 경험이 더 쉬워질 것입니다. 그런 생각으로 우리는 개발자를 위한 자세한 WordPress Gutenberg 튜토리얼을 작성할 것입니다.

구텐베르크를 사용하여 웹사이트를 만드는 방법에 대해 자세히 알아보기 전에 구텐베르크의 이점에 대해 더 논의하고 싶습니다. 그것은 Gutenberg의 중요성과 그것이 개발자들에게 얼마나 유용할 수 있는지에 대해 밝힐 것입니다.

구텐베르크를 사용하여 웹사이트를 만드는 이유는 무엇입니까?

다음에서는 구텐베르그를 사용하여 웹사이트를 만드는 것이 왜 중요한지 논의할 것입니다. 개발자가 Gutenberg를 사용하여 얻을 수 있는 이점을 알려드리겠습니다.

쉬운 사용자 정의

Gutenberg를 사용하면 웹 사이트를 매우 쉽게 사용자 지정할 수 있습니다. Gutenberg에는 웹 사이트를 쉽게 사용자 정의하는 데 도움이 되는 탐색하기 쉬운 여러 기능이 있습니다. 단 한 줄의 코드도 작성할 필요가 없는데도 여전히 뛰어난 웹사이트를 갖게 된다고 상상해 보십시오. 이것은 Gutenberg의 도움으로 가능합니다.

강력한 플러그인

Gutenberg에는 많은 강력한 플러그인이 있습니다. 이러한 플러그인을 사용하면 전체 구텐베르크 경험을 더 쉽게 탐색할 수 있습니다. 이러한 플러그인에는 처음부터 웹사이트를 디자인할 때 매우 필수적인 다양한 기능이 있습니다. 적절한 플러그인을 통합하면 멋진 웹사이트를 쉽게 만들 수 있습니다. 예를 들어, 이 기사에서는 Toolset Blocks와 같은 도구를 Gutenberg와 결합하여 활용하고 고품질 웹 사이트를 만드는 방법을 보여줍니다.

간단한 워크플로

Gutenberg를 사용하면 전체 워크플로가 매우 원활해집니다. 편집기는 모든 사람이 작업을 더 쉽게 수행할 수 있도록 설계되었습니다. 플러그인의 다양한 기능과 추가 옵션을 사용하면 매우 간단하고 구조화된 작업 흐름을 갖게 됩니다.

비개발자 친화적

구텐베르크를 사용하면 비개발자도 혜택을 받을 수 있습니다. 에디터의 전반적인 과정을 통해 개발자가 아닌 사람도 웹 디자인에 입문할 수 있습니다. 많은 기능과 블록으로 코딩 방법을 모르더라도 여전히 좋은 품질의 웹 사이트를 만들 수 있습니다.

워드프레스 호환성

구텐베르그와 워드프레스의 호환성은 매우 두드러집니다. 도구의 전체 워크플로도 WordPress와 매우 유사합니다. WordPress와 워크플로의 유사성으로 인해 Gutenberg는 즉시 인기를 얻었습니다. 많은 테마 개발자들이 구텐베르크와만 호환되는 테마를 만들기 시작했습니다. WordPress의 전반적인 젤링을 위해 Gutenberg는 WordPress를 사용하는 개인을 위한 편집자 중 한 명이 되었습니다.

이것이 구텐베르크가 워드프레스 커뮤니티에서 강력한 편집자로 인기를 얻고 있는 이유입니다. 다음에서는 구텐베르크의 다양한 요소와 범위를 살펴보고 구텐베르크 편집기를 사용하여 웹사이트를 만드는 방법을 안내합니다.

블록을 사용하여 사용자 정의 웹 사이트를 구축하는 방법에 대한 WordPress Gutenberg 자습서

Gutenberg로 사용자 정의 웹 사이트를 구축하는 방법을 실제로 보여주기 위해 이해하기 쉽도록 데모 웹 사이트를 개발할 것입니다. 전체 학습 경험은 다음 주제를 다룹니다.

• 구텐베르크를 사용하여 WordPress에서 블록을 추가, 편집, 이동 및 삭제하는 방법은 무엇입니까?
• Gutenberg를 사용하여 콘텐츠를 나란히 표시하는 방법은 무엇입니까?
• 다른 블록 탐색에 대한 Gutenberg WordPress 자습서.
• Gutenberg WordPress를 사용하여 블록 편집기에 필드를 표시합니다.
• 이미지 갤러리를 표시하는 방법에 대한 개발자를 위한 Gutenberg 튜토리얼.
• Gutenberg WordPress로 블록 스타일 지정을 위한 Gutenberg WordPress 자습서.
• Gutenberg WordPress를 사용하여 타이포그래피를 제어하는 ​​방법은 무엇입니까?
• 템플릿 생성에 대한 개발자를 위한 WordPress Gutenberg 자습서.
• 사용자 정의 검색 추가에 대한 구텐베르그 워드프레스 튜토리얼.

이러한 세부 요소를 배우면 구텐베르크 워드프레스로 웹사이트를 구축하는 방법을 더 쉽게 이해할 수 있습니다.

구텐베르크를 사용하여 WordPress에서 블록을 추가, 편집, 이동 및 삭제하는 방법은 무엇입니까?

먼저 블록을 만들고 제거하는 방법에 대한 기본 사항을 살펴보겠습니다. 블록은 웹사이트를 구축하는 완전히 새로운 방법이지만 익숙해지는 데 몇 분 밖에 걸리지 않습니다.

1. 페이지 또는 게시물에서 + 버튼을 클릭합니다.
2. 사용하려는 블록을 검색하고 클릭하여 삽입합니다.

구텐베르크의 빌딩 블록은 말 그대로 블록입니다! 따라서 첫 번째 학습은 구텐베르크를 사용하여 WordPress에서 블록을 추가, 편집, 이동 및 삭제하는 방법에 대한 것입니다. 그렇게 하려면 다음을 수행해야 합니다.

• 페이지 또는 게시물에서 "+" 버튼을 클릭합니다.
• 삽입하려는 블록을 찾아 클릭하여 시작하십시오.

• 원하는 블록을 추가했으면 블록에 내용을 입력할 수 있습니다. 예를 들어 블로그에 제목을 추가할 수 있으며 이 블록의 제목을 제공합니다.
• 블록의 왼쪽을 보면 블로그의 위치를 ​​제어하는 ​​핸들 세트를 볼 수 있습니다. 이러한 컨트롤 세트를 사용하여 요구 사항에 따라 블록 주위를 이동할 수 있습니다.

• 오른쪽 사이드바에서 요구 사항에 따라 블록을 수정할 수 있습니다. 이 편집기에서 선택한 블록의 색상, 이미지 크기 및 텍스트 정렬을 수정할 수 있습니다.
• 점 3개 옵션을 클릭하면 블록에 대한 추가 옵션을 얻을 수 있습니다.

Gutenberg를 사용하여 콘텐츠를 나란히 표시하는 방법은 무엇입니까?

웹 사이트를 디자인하는 경우 콘텐츠를 나란히 표시할 수 있습니다. Gutenberg 블록 편집기를 사용하면 쉽게 할 수 있습니다. 웹 페이지에 콘텐츠를 나란히 표시하려면 구텐베르크에서 열 블록을 사용하는 것이 좋습니다. 그렇게 하려면 다음을 수행해야 합니다.

• + 버튼을 클릭하고 열 블록을 검색합니다.
• 블록을 찾으면 블록을 클릭하면 페이지에 열이 나타납니다.

• 블록을 삽입하면 내용과 함께 편집 가능한 블록을 나란히 볼 수 있습니다.
• 열 수를 늘리려면 열 블록을 선택하고 오른쪽 사이드바에서 숫자를 조정하여 쉽게 할 수 있습니다.
  

다른 블록 탐색에 대한 WordPress Gutenberg 자습서

특정 블록에서 작업 중이고 사용자 정의를 위해 다른 블록으로 이동하려는 경우 편집기 맨 위에 있는 블록 탐색 버튼을 사용하여 쉽게 할 수 있습니다. 세부 템플릿으로 작업하고 다른 블록 사이를 탐색할 때 탐색 메뉴를 사용하여 다른 블록을 탐색할 수 있습니다.

Gutenberg WordPress를 사용하여 블록 편집기에서 필드 표시

다른 블록에서 작업하는 동안 블록의 다른 필드에 추가 정보를 추가할 수 있습니다. 예를 들어, 제목, 본문 등과 같은 게시물 필드의 정보를 추가할 수 있습니다. 이미 생성한 다른 블록의 필드를 포함할 수도 있습니다.

일반적으로 필드를 표시하는 세 가지 주요 방법이 있습니다. 이에 대해서는 다음에서 자세히 설명하겠습니다.

블록의 필드 값에서 콘텐츠 가져오기

Toolset Blocks 라이브러리에 속한 모든 블록은 필드의 내용을 자유롭게 설정할 수 있습니다. 게시물 필드에서 가져올 제목 텍스트를 제공하거나 도구 집합 사용자 정의 필드를 사용할 수 있습니다. 그렇게 하려면 아래 단계를 따라야 합니다.

• 새 콘텐츠 템플릿을 만듭니다.
• 표시할 사용자 정의 게시물 유형을 선택합니다.
• "+" 버튼 선택
• 도구 집합 제목 블록 추가

• 동적 제목 텍스트 상자 켜기

• 표시할 게시물 필드를 선택합니다. 주어진 예에서 우리는 게시물 제목을 선택했습니다.

이제부터 특정 사용자 정의 게시물 카테고리와 관련된 모든 게시물의 제목을 보고 수정할 수 있습니다.

필드를 개별 블록으로 표시

다음 단계를 통해 필드를 개별 블록으로 표시할 수도 있습니다. 그렇게 하려면 아래에 언급된 간단한 단계를 수행해야 합니다.

• 단일 필드 블록 선택
• 필드 유형 아래에 있는 오른쪽 막대에서 표준 필드 옵션을 선택합니다.
• 게시물 필드 옵션 아래에서 게시물 콘텐츠(본문) 옵션을 선택합니다.

이제 관련 설명이 각 필드 아래에 표시됩니다.

한 블록에 텍스트가 있는 필드 간 혼합 만들기

웹 페이지에 필드와 텍스트를 혼합하여 만들고 싶다면 구텐베르크 워드프레스에서도 그렇게 할 수 있습니다. 아래에 언급된 단계를 수행하십시오.

• "+"버튼을 클릭하십시오
• 필드 및 텍스트 블록 선택

• 포함하려는 레이블을 작성하십시오.
• 추가하려는 콘텐츠 유형과 관련된 아이콘을 선택할 수도 있습니다. 예를 들어 필드, 양식 또는 조건부 출력을 추가할 수 있습니다. 주어진 예에서 필드를 추가했습니다.
• 그런 다음 추가하려는 콘텐츠를 선택한 다음 Shortcode 삽입을 클릭합니다.

이미지 갤러리를 표시하는 방법에 대한 개발자를 위한 WordPress Gutenberg 자습서

WordPress Gutenberg를 사용하여 이미지 갤러리를 만들고 싶다면 쉽게 할 수 있습니다. 그렇게 하려면 다음 단계를 따르세요.

• 블록 옵션에서 반복 필드/갤러리 블록을 선택합니다.
• 블록을 선택한 후 표시할 사용자 정의 필드 그룹을 수정할 수 있습니다.
• 그런 다음 표시할 사용자 정의 필드를 선택할 수 있습니다.

그렇게 하면 웹 페이지에 이미지 갤러리를 쉽게 추가할 수 있습니다.

Gutenberg WordPress로 블록 스타일링을 위한 Gutenberg WordPress 자습서

블록 스타일 지정 및 사용자 지정은 웹 디자인의 필수적인 부분입니다. Gutenberg WordPress를 사용하면 Gutenberg로 매우 쉽게 블록의 스타일을 지정할 수 있습니다. 우리가 자세히 설명하는 가이드에 따라 블로그의 글꼴, 색상, 배경 및 여백을 변경할 수 있습니다.

인터페이스를 사용하여 블록 스타일 지정

• 사용자 정의하려는 블록을 선택하십시오.
• 사이드바에서 스타일 설정 옵션을 확장합니다.
• 배경색, 테두리, 패딩 및 훨씬 더 많은 웹 사이트와 같은 다양한 옵션을 사용자 정의할 수 있습니다.

컨테이너 블록 사용

도구 집합 블록을 사용하는 경우 컨테이너 블록에 액세스할 수 있습니다. 이 옵션을 사용하여 특정 블록을 함께 분류하고 모든 블록에 대한 특정 스타일을 함께 선택할 수 있습니다. 오른쪽 사이드바에서 사용 가능한 스타일 옵션으로 블록 스타일을 지정할 수 있습니다. 이 옵션은 여러 블록을 함께 스타일링하는 경우에 적합합니다.

Gutenberg WordPress를 사용하여 타이포그래피를 제어하는 ​​방법?

도구 집합 블록을 사용하는 동안 타이포그래피 섹션으로 이동하여 웹사이트에 표시될 글꼴의 스타일을 지정하고 서식을 지정하기만 하면 됩니다. 타이포그래피 섹션에서 글꼴의 다음 요소를 사용자 지정할 수 있습니다.

• 글꼴의 유형, 크기 및 스타일
• 대문자, 대문자 및 소문자 옵션을 사용하여 텍스트 변환
• 텍스트의 색상 변경
• 텍스트에 그림자 추가

템플릿 생성에 대한 개발자를 위한 WordPress Gutenberg 자습서.

템플릿은 모든 웹사이트의 필수 요소입니다. 따라서 웹 사이트의 템플릿을 사용자 정의할 수 있는 위치를 아는 것이 매우 필요합니다. 템플릿을 생성한다는 것은 페이지의 모든 게시물과 사용자 정의 게시물이 템플릿의 디자인 및 레이아웃 디자인을 따를 것임을 의미합니다. 특정 템플릿을 만들려면 다음을 수행합니다.

• 도구 집합 > 대시보드 옵션으로 이동합니다.
• 디자인하려는 게시물 유형에 대한 콘텐츠 템플릿 만들기를 클릭합니다.
• 이전 시간과 마찬가지로 템플릿에 필드를 추가하여 시작할 수 있습니다. 예제에서 헤더, 이미지, 단일 필드 블록 필드 등을 포함하는 몇 가지 다른 블록을 추가한 방법을 볼 수 있습니다.

• 템플릿을 저장하고 게시하면 관련된 모든 게시물의 디자인과 레이아웃이 동일하게 됩니다. 이 도구는 많은 블록과 요소를 함께 사용자화하는 템플릿을 만드는 데 도움이 됩니다.

사용자 지정 검색 추가에 대한 WordPress Gutenberg 자습서

웹사이트에 검색 옵션을 추가하면 방문자가 콘텐츠를 쉽게 찾을 수 있습니다. 이 검색 옵션을 사용하여 찾고 있는 콘텐츠와 요소를 찾을 수 있습니다. 맞춤 검색을 추가하려면 다음 단계를 수행해야 합니다.

• 페이지에 보기 블록을 삽입합니다.
• 보기 생성 마법사에서 검색 옵션을 활성화합니다.

• 블록에서 편집 영역에서 검색 필드 및 검색 버튼을 추가할 수 있습니다. 필요한 경우 사용자 지정할 수도 있습니다.

• 오른쪽 사이드바에서 이 옵션에 더 많은 필드 설정, 레이블 및 스타일을 추가할 수 있습니다. 필요한 사용자 정의가 완료되면 시각적으로 매력적인 검색 섹션이 표시됩니다.

다음은 Gutenberg를 사용하여 웹사이트를 처음부터 완전히 디자인하기 위해 취할 수 있는 다양한 단계입니다. 튜토리얼에서 이것이 웹 사이트에 사용하기 쉬운 페이지 빌더 중 하나임을 알 수 있습니다. 개발자를 위한 WordPress Gutenberg Tutorial을 연습하면 이전과 같은 모든 웹사이트를 쉽게 구축할 수 있다고 믿습니다.

이 기사가 가치 있고 유용했기를 바랍니다. 우리 블로그를 확인하는 것을 잊지 마십시오.