사용자 정의 WordPress 블록을 만드는 방법(쉬운 방법)

WordPress 웹 사이트에 대한 사용자 지정 Gutenberg 블록을 만들고 싶습니까?

WordPress에는 콘텐츠 생성을 위한 많은 기본 블록이 포함되어 있지만 웹사이트에 더 맞춤화된 것이 필요할 수 있습니다.

이 기사에서는 WordPress 사이트에 대한 사용자 지정 구텐베르크 블록을 만드는 쉬운 방법을 보여줍니다.

사용자 정의 WordPress 블록을 만드는 이유는 무엇입니까?

WordPress에는 콘텐츠와 레이아웃 요소를 블록으로 추가하여 게시물과 페이지를 쉽게 만들 수 있는 직관적인 블록 편집기가 제공됩니다.

기본적으로 WordPress는 일반적으로 사용되는 여러 블록과 함께 제공됩니다. WordPress 플러그인은 사용할 수 있는 자체 블록을 추가할 수도 있습니다.

그러나 때로는 특정 작업을 수행하기 위해 자신만의 사용자 정의 블록을 만들고 싶을 때 적합한 블록 플러그인을 찾을 수 없습니다.

이 자습서에서는 완전히 사용자 지정 블록을 만드는 방법을 보여줍니다.

참고 : 이 문서는 중급 사용자를 위한 것입니다. 사용자 지정 구텐베르크 블록을 만들려면 HTML 및 CSS에 익숙해야 합니다.

1단계: 첫 번째 사용자 지정 블록 시작하기

먼저 Genesis Custom Blocks 플러그인을 설치하고 활성화해야 합니다. 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 참조하세요.

인기 있는 Genesis Theme Framework 및 StudioPress 뒤에 있는 사람들이 만든 이 플러그인은 개발자에게 프로젝트에 대한 사용자 정의 블록을 빠르게 만들 수 있는 쉬운 도구를 제공합니다.

이 튜토리얼을 위해 우리는 '평가' 블록을 만들 것입니다.

먼저 관리자 패널의 왼쪽 사이드바에서 사용자 정의 블록 » 새 페이지 추가 로 이동합니다.

그러면 블록 편집기 페이지로 이동합니다.

여기에서 블록에 이름을 지정해야 합니다.

페이지 오른쪽에 블록 속성이 있습니다.

여기에서 블록의 아이콘을 선택하고 카테고리를 추가하고 키워드를 추가할 수 있습니다.

슬러그는 블록 이름에 따라 자동으로 채워지므로 변경할 필요가 없습니다. 그러나 블록을 쉽게 찾을 수 있도록 키워드 텍스트 필드에 최대 3개의 키워드를 작성할 수 있습니다.

이제 블록에 필드를 추가해 보겠습니다.

텍스트, 숫자, 이메일 주소, URL, 색상, 이미지, 체크박스, 라디오 버튼 등과 같은 다양한 유형의 필드를 추가할 수 있습니다.

사용자 평가 블록에 3개의 필드를 추가할 것입니다. 리뷰어 이미지를 위한 이미지 필드, 리뷰어 이름을 위한 텍스트 상자, 평가 텍스트를 위한 텍스트 영역 필드입니다.

[+] 필드 추가 버튼을 클릭하여 첫 번째 필드를 삽입합니다.

그러면 필드에 대한 몇 가지 옵션이 열립니다. 각각에 대해 살펴보겠습니다.

• 필드 레이블 : 필드 레이블에 원하는 이름을 사용할 수 있습니다. 첫 번째 필드의 이름을 '검토자 이미지'로 지정하겠습니다.
• 필드 이름 : 필드 레이블을 기반으로 필드 이름이 자동으로 생성됩니다. 다음 단계에서 이 필드 이름을 사용할 것이므로 모든 필드에 대해 고유한지 확인하십시오.
• 필드 유형 : 필드 유형을 선택할 수 있습니다. 첫 번째 필드가 이미지가 되기를 원하므로 드롭다운 메뉴에서 이미지 를 선택합니다.
• 필드 위치 : 필드를 에디터에 추가할지 인스펙터에 추가할지 결정할 수 있습니다.
• 도움말 텍스트 : 필드를 설명하는 텍스트를 추가할 수 있습니다. 개인적인 용도로 이 블록을 만드는 경우에는 필요하지 않지만 다중 작성자 블로그에는 유용할 수 있습니다.

선택한 필드 유형에 따라 몇 가지 추가 옵션을 얻을 수도 있습니다. 예를 들어 텍스트 필드를 선택하면 자리 표시자 텍스트 및 문자 제한과 같은 추가 옵션이 표시됩니다.

위의 프로세스에 따라 [+] 필드 추가 버튼을 클릭하여 평가 블록에 대해 2개의 다른 필드를 추가해 보겠습니다.

필드를 재정렬하려는 경우 각 필드 레이블의 왼쪽에 있는 핸들을 사용하여 필드를 드래그하면 됩니다.

특정 필드를 편집하거나 삭제하려면 필드 레이블을 클릭하고 오른쪽 열에서 옵션을 편집해야 합니다.

완료되면 페이지 오른쪽에 있는 게시 버튼을 클릭하여 사용자 지정 구텐베르크 블록을 저장합니다.

2단계: 사용자 정의 블록 템플릿 생성

마지막 단계에서 사용자 정의 WordPress 블록을 생성했지만 블록 템플릿을 생성할 때까지 작동하지 않습니다.

블록 템플릿은 블록에 입력된 정보가 웹사이트에 표시되는 방식을 정확히 결정합니다. 함수를 실행하거나 데이터로 다른 고급 작업을 수행해야 하는 경우 HTML 및 CSS 또는 PHP 코드를 사용하여 모양을 결정할 수 있습니다.

블록 템플릿을 만드는 방법에는 두 가지가 있습니다. 블록 출력이 HTML/CSS인 경우 내장 템플릿 편집기를 사용할 수 있습니다.

반면에 블록 출력에서 ​​백그라운드에서 실행하기 위해 일부 PHP가 필요한 경우 블록 템플릿 파일을 수동으로 생성하고 테마 폴더에 업로드해야 합니다.

방법 1. 내장 템플릿 편집기 사용

사용자 정의 블록 편집 화면에서 템플릿 편집기 탭으로 전환하고 마크업 탭 아래에 HTML을 입력하기만 하면 됩니다.

HTML을 작성하고 이중 중괄호를 사용하여 블록 필드 값을 삽입할 수 있습니다.

예를 들어 위에서 만든 샘플 블록에 다음 HTML을 사용했습니다.

<div class="testimonial-item">
<img src="reviewer-image" class="reviewer-image">
<h4 class="reviewer-name">reviewer-name</h4>
<div class="testimonial-text">testimonial-text</div>
</div>

그런 다음 CSS 탭으로 전환하여 블록 출력 마크업의 스타일을 지정합니다.

다음은 사용자 정의 블록에 사용한 샘플 CSS입니다.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

방법 2. 사용자 정의 블록 템플릿 수동 업로드

이 방법은 PHP를 사용하여 사용자 정의 블록 필드와 상호 작용해야 하는 경우 권장됩니다.

기본적으로 편집기 템플릿을 테마에 직접 업로드해야 합니다.

먼저 컴퓨터에 사용자 정의 블록 이름 슬러그로 이름을 지정하는 폴더를 만들어야 합니다. 예를 들어, 우리의 데모 블록은 Testimonials라고 하므로 testimonials 폴더를 생성하겠습니다.

다음으로 일반 텍스트 편집기를 사용하여 block.php 라는 파일을 생성해야 합니다. 여기에 블록 템플릿의 HTML/PHP 부분을 넣을 것입니다.

다음은 예제에 사용한 샘플 템플릿입니다.

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

block_field() 함수를 사용하여 블록 필드에서 데이터를 가져오는 방법에 주목하십시오.

블록을 표시하는 데 사용할 HTML로 블록 필드를 래핑했습니다. 또한 블록의 스타일을 적절하게 지정할 수 있도록 CSS 클래스를 추가했습니다.

이전에 생성한 폴더 안에 파일을 저장하는 것을 잊지 마십시오.

다음으로 컴퓨터에서 일반 텍스트 편집기를 사용하여 다른 파일을 만들고 생성한 폴더 안에 block.css 로 저장해야 합니다.

이 파일을 사용하여 블록 표시 스타일을 지정하는 데 필요한 CSS를 추가합니다. 다음은 이 예제에 사용한 샘플 CSS입니다.

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

변경 사항을 저장하는 것을 잊지 마십시오.

이제 블록 템플릿 폴더에 두 개의 템플릿 파일이 있습니다.

그런 다음 FTP 클라이언트 또는 WordPress 호스팅 계정의 제어판에 있는 파일 관리자 앱을 사용하여 차단 폴더를 웹사이트에 업로드해야 합니다.

연결되면 /wp-content/themes/your-current-theme/ 폴더로 이동합니다.

테마 폴더에 폴더 이름 블록이 없으면 새 디렉토리를 만들고 이름을 blocks 으로 지정합니다.

이제 블록 폴더에 들어가 컴퓨터에서 생성한 폴더를 블록 폴더에 업로드합니다.

그게 다야! 사용자 정의 블록에 대한 수동 템플릿 파일을 성공적으로 생성했습니다.

3단계. 사용자 정의 블록 미리보기

이제 HTML/CSS를 미리 보기 전에 샘플 출력을 표시하는 데 사용할 수 있는 몇 가지 테스트 데이터를 제공해야 합니다.

WordPress 관리 영역 내에서 블록을 편집하고 Editor Preview 탭으로 전환합니다. 여기에 더미 데이터를 입력해야 합니다.

미리보기 전에 업데이트 버튼을 클릭하여 변경 사항을 저장하는 것을 잊지 마십시오.

이제 프론트엔드 미리보기 탭으로 전환하여 프론트엔드(WordPress 웹사이트의 공개 영역)에서 블록이 어떻게 보이는지 확인할 수 있습니다.

모든 것이 좋아 보이면 블록을 업데이트하여 저장하지 않은 변경 사항을 저장할 수 있습니다.

4단계. WordPress에서 사용자 정의 블록 사용하기

이제 다른 블록을 사용하는 것처럼 WordPress에서 사용자 정의 블록을 사용할 수 있습니다.

이 블록을 사용하려는 게시물이나 페이지를 편집하기만 하면 됩니다.

새 블록 추가 버튼을 클릭하고 이름이나 키워드를 입력하여 블록을 검색합니다.

콘텐츠 영역에 블록을 삽입하면 이 사용자 정의 블록에 대해 생성한 블록 필드가 표시됩니다.

필요에 따라 블록 필드를 채울 수 있습니다.

블록에서 다른 블록으로 이동하면 편집기가 자동으로 블록의 실시간 미리보기를 표시합니다.

이제 게시물과 페이지를 저장하고 웹사이트에서 사용자 정의 블록이 작동하는 것을 미리 볼 수 있습니다.

테스트 사이트에서 회원 평가 블록이 어떻게 보이는지 보여줍니다.

이 기사가 WordPress 웹사이트용 맞춤형 구텐베르크 블록을 쉽게 만드는 방법을 배우는 데 도움이 되었기를 바랍니다.

사용자 정의 WordPress 테마를 처음부터 만드는 방법에 대한 가이드를 보거나 웹 사이트에 반드시 있어야 하는 WordPress 플러그인에 대한 전문가 선택을 볼 수도 있습니다.

이 기사가 마음에 들면 WordPress 비디오 자습서용 YouTube 채널을 구독하십시오. Twitter와 Facebook에서도 찾을 수 있습니다.