생성하시겠습니까? 워드 프레스 플러그인 단순 구텐베르크 블록?
우리 모두 WordPress를 사랑하지 않습니까? 플랫폼은 처음부터 개발자가 새로운 기능을 지속적으로 추가하면서 엄청난 성공을 거두었습니다. 최근 눈에 띄는 기능 중 하나는 WordPress 블록 편집기, 코드 이름 구텐베르크.
Gutenberg는 WordPress 사용자에게 콘텐츠를 게시하고 웹사이트를 사용자 정의할 수 있는 흥미롭고 새로운 방법을 제공합니다. 사용이 매우 간편하여 초보자와 개발자 모두에게 희소식입니다. 최신 버전의 워드프레스를 사용 중이라면 이미 블록 편집기와 블록 개념에 익숙할 것입니다.
기본적으로 WordPress 블록 편집기에는 텍스트, 이미지, 인용문, 오디오, 비디오, 포함 등을 포함할 수 있는 몇 가지 블록이 있습니다. 그 외에도 중단 없이 편집기를 확장할 수 있는 수많은 Gutenberg 애드온이 있습니다. 땀.
그러나 고유한 사용자 정의 블록을 작성하라는 메시지가 표시되는 특정 요구 사항이 있을 수 있습니다. 이 기사에서는 특정 요구 사항을 충족하기 위해 사용자 지정 구텐베르크 블록을 만드는 방법을 몇 단락으로 보여줍니다.
배울 것이 많기 때문에 더 이상 고민하지 않고 시작하겠습니다.
그러나 이전에 WordPress discover를 설치 한 적이 없다면 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면
그런 다음 왜 우리가 여기 있는지 다시 돌아옵니다.
블록이란 무엇입니까?
블록은 단락, 머리글, 미디어 및 포함을 구성 요소로 취급하여 함께 연결될 때 WordPress 데이터베이스에 저장된 콘텐츠를 구성하여 기존의 텍스트 개념을 미디어 및 포함으로 대체합니다.
과거에는 WordPress 사용자가 콘텐츠를 추가하기 위해 텍스트와 단축 코드에 의존했습니다. 구텐베르크 사용 진영. 새로운 편집기를 사용하면 블록 단위를 사용하여 관리하기 쉬운 풍부하고 유연한 레이아웃을 생성할 수 있습니다. 현재 게시물과 페이지에 블록 편집기를 사용할 수 있지만 향후 전체 사이트 편집 지원.
블록으로 작업하면 WordPress의 콘텐츠 생성이 매우 상쾌해집니다. 또한 기존의 많은 플러그인이 새 편집기를 지원하고 해당 플러그인에서 콘텐츠를 쉽게 추가할 수 있는 즉시 사용 가능한 블록과 함께 제공됩니다. 편집기를 사용하면 블록을 페이지로 끌어다 놓을 수 있으므로 게시 버튼을 더 빨리 누를 수 있습니다.
WordPress에 직접 통합된 페이지 빌더와 같습니다.
에 대해 잘 알고 계시다면 Elementor와 같은 페이지 빌더, 끌어서 놓기 페이지 작성의 개념에 익숙할 것입니다. Gutenberg는 끌어서 놓기 웹 사이트 구축을 WordPress 코어에 완전히 통합하려는 시도입니다.
그래서 오늘 기사의 가장 중요한 부분으로 가자. 간단한 블록을 만드는 방법을 알아봅시다. 수동으로 또는 다음과 같은 플러그인을 사용하여 수행할 수 있습니다. 제네시스 커스텀 블록 (구 BlockLab), 게으른 블록 ou ACF. 사용자 정의 블록을 만드는 것은 약간 기술적인 일이므로 오늘 기사의 목적을 위해 플러그인을 사용할 것입니다.
사용자 정의 블록을 만드는 방법(제네시스 사용자 정의 블록 사용)
사용자 정의 구텐베르그 블록을 처음부터 생성하려면 HTML, CSS, PHP, 그리고 가장 중요한 자바스크립트에 대한 이해가 필요하기 때문에 플러그인 경로로 이동하는 것이 더 쉽습니다. 또한 React를 이해해야 합니다.
다음 섹션에서는 Genesis Custom Blocks를 사용할 것입니다. 무료 버전은 공식 WordPress 저장소에서 사용할 수 있습니다. 즉, WordPress 관리자 대시보드에 설치할 수 있습니다.
Genesis 사용자 정의 블록 설치
WordPress 관리자 대시보드에 로그인하고 다음으로 이동합니다. 확장> 추가, 아래 그림과 같이.
그런 다음 "을 입력하십시오. 제네시스 커스텀 블록 키워드 검색창에 클릭 Sur Le Bouton 지금 설치
이후, 활성화 시작하는 플러그인
다음으로 새로운 사용자 정의 블록을 생성해 보겠습니다. 설명을 위해 게시하는 모든 기사의 끝에 추가할 사용자 지정 클릭 유도문안(CTA)을 만들어 보겠습니다. 가장 좋은 점은 블록을 재사용하여 동일한 블록을 반복해서 생성하지 않도록 할 수 있다는 것입니다.
WordPress 관리 메뉴에서 다음으로 이동합니다. 사용자 정의 블록 > 새로 추가, 아래에 강조 표시한 대로.
그러면 사용자 정의 블록(이 경우 CTA)을 생성하는 모든 옵션을 찾을 수 있는 다음 페이지로 이동합니다.
다음은 위의 스크린샷에서 볼 수 있는 내용을 설명하는 몇 가지 단어입니다. 위에서부터 시작합니다.
주요 편집 영역:
- 건축업자 – 여기에서 사용자 정의 블록을 디자인하는 데 많은 시간을 할애할 것입니다. 그만큼 빌더 제목, 필드, 슬러그, 키워드, 카테고리를 추가하고 사용자 정의 블록을 미리 볼 수 있습니다. 필드를 추가하는 방법을 배웁니다.
- 템플릿 편집기 – 사용자 정의 블록을 디자인한 후(예: 다양한 필드 추가) 다음에서 블록 템플릿을 생성(읽기, 일부 코드 추가)해야 합니다. 모델 편집기. 우리는 CTA를 디자인할 때 더 많은 것을 배우게 될 것입니다.
- 에디터 미리보기 – WordPress 블록 편집기에서 사용자 정의 블록을 미리 볼 수 있습니다.
- 프런트 엔드 미리보기 – 여기에서 사용자 정의 블록이 웹사이트에서 어떻게 보일지 미리 볼 수 있습니다.
- 에디터필드 – 게시물 또는 페이지의 기본 편집 영역에 필드를 표시합니다(WordPress 편집기에서 일반 게시물을 보는 것처럼).
- 인스펙터필드 – 블록 검사기 아래 오른쪽 사이드바에 필드를 표시합니다.
사이드바 옵션
- 강타 – 사용자 정의 블록에 부여한 제목에 따라 자동으로 채워집니다. 이것은 블록 모델을 생성할 때 중요합니다.
- 아이콘 – 이 옵션을 사용하면 사용자 정의 블록에 아이콘을 추가할 수 있습니다.
- 범주 – 사용자 정의 블록에 범주를 할당할 수 있습니다. 기본 제공 범주 중 하나를 사용하여 사용자 정의 블록을 범주화하거나 완전히 새로운 범주를 생성할 수 있습니다.
- – 사람들이 블록 선택기에서 쉽게 찾을 수 있도록 사용자 정의 블록에 최대 XNUMX개의 관련 키워드를 추가합니다.
- 제자리에서 렌더링하는 대신 모달에서 블록 필드 열기 – 모달에서 필드를 열려면 활성화합니다. 이것은 많은 필드가 있는 사용자 정의 블록이 있는 경우에 유용합니다.
- 포스트 유형 – 각 게시물 유형에 사용자 정의 블록이 표시되도록 하려면 확인란을 선택합니다. 예를 들어 게시물을 선택 취소하면 게시물에 차단이 표시되지 않습니다.
사용자 정의 블록 만들기
이제 사용자 인터페이스와 각 부분이 하는 일을 더 잘 이해했으므로 작업을 시작하겠습니다.
에서 빌더 - 빌더 -, 사용자 정의 블록에 적절한 제목을 지정하십시오. 아래와 같이 CTA를 선택하겠습니다.
새 필드를 추가하기 전에 아이콘, 키워드를 추가하고 아래와 같이 사용자 정의 블록에 대한 카테고리를 선택합시다.
이를 위해 사용자 정의 블록에 일부 필드를 추가해 보겠습니다. 예제 CTA 블록의 경우 이미지, 일부 텍스트 및 eBook을 다운로드할 수 있는 파일 필드의 순서로 XNUMX개의 필드만 추가합니다.
읽기 : 대량으로 제품을 편집하는 5 WooCommerce 플러그인
블록 필드 추가
섹션에서 편집기 필드에 클릭 더하기(+) 아이콘 다음과 같이 첫 번째 필드를 추가합니다.
다음으로 이미지 필드를 추가해 보겠습니다. 사이드바에서 설정 필드 유형 켜기 영상 다른 옵션을 설정합니다. 또한 블록 모델을 만들 때 사용할 슬러그를 고려하십시오.
그런 다음 같은 방법으로 텍스트 및 파일 필드를 추가합니다.
로 전환 템플릿 편집기 > 마크업.
여기에서 사용자 정의 블록이 웹사이트에서 어떻게 보일지 디자인할 것입니다. 모델 편집기 HTML, CSS 및 필드 슬러그(2개의 대괄호 사이에 넣어야 함)를 허용합니다. PHP 언어를 사용해야 하는 경우 다음을 사용하여 템플릿을 만들 수 있습니다. PHP 모델링 방법
걱정하지 마세요. 쉽습니다.
에 모델 편집기, 아래에 마크업 탭, 다음 코드를 추가합니다.
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>코드를 작성하다 보면 모델 편집기 자동 완성 필드 슬러그(예: {{image-field}} ).
그런 다음 섹션으로 이동하십시오. CSS 다음 코드로 간단한 스타일을 추가하려면:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
원하는 대로 이러한 스타일을 사용자 정의할 수 있습니다.
클릭 게시 :
작동 중인 새 사용자 정의 블록을 보려면 WordPress 관리 대시보드로 돌아가 평소처럼 게시물을 작성하고 플러스 (+) 아래에 강조 표시된 대로 새 블록을 추가하고 새 사용자 지정 블록을 선택합니다.
그런 다음 원하는 대로 사용자 정의 블록을 채우고 메시지를 게시합니다.
이제 프론트 엔드에서 새로운 사용자 정의 CTA 블록을 확인하면 이것이 보입니다.
맞춤형 CTA가 바로 여기에 있습니다! 우리의 설계 능력에 대해 걱정하지 마십시오. 물론 실제 시나리오에서는 블록을 사용자 정의하는 데 더 많은 시간을 할애하게 됩니다. 그러나 여기에서 무언가를 배웠기를 바랍니다.
다른 추천 자료
우리는 또한 당신을 상담 초대합니다 능숙 귀하의 웹사이트와 블로그를 더 많이 소유하고 통제하려면 아래를 클릭하세요.
- 10 WordPress 플러그인과 제휴하여 프로그램 생성
- WordPress에 여러 열을 추가하는 방법
- WordPress에 여러 열을 추가하는 방법
- 서로 다른 배경을 사용하여 워드 프레스
- Elementor: 호버에서 애니메이션을 만드는 방법
결론
사용자 정의 블록을 만드는 것은 쉬운 일이 아닙니다. 하지만 함께 워드 프레스 플러그인 Genesis Custom Blocks 및 Lazy Blocks와 같은 초보자이든 아니든 생성에 성공할 것입니다. 필요에 따라 가장 기본적인 것부터 복잡한 것까지.
WordPress 웹 사이트에 사용자 정의 글꼴을 추가하는 방법을 보여주는 이 기사의 내용은 여기까지입니다. 우리는 당신을 시도하도록 초대합니다. 우려 사항이나 제안 사항이 있으면 commentaires.
그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
욕실 교환, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
