더 나은 경험을 위한 구텐베르크 블록 템플릿 만들기

게시 됨: 2019-05-02
WordPress 구텐베르크 블록 템플릿
@Cloudways 팔로우

WordPress 5.x는 세계에서 가장 인기 있는 CMS의 최신 버전입니다. 새 버전의 흥미로운 기능은 워드프레스 사용자가 플랫폼에서 콘텐츠를 만드는 방식을 혁신할 태세인 구텐베르크 편집기입니다. 적어도 그것은 공식 버전입니다!

Gutenberg 편집기에 대해 어떻게 생각하든 이 편집기가 향후 WordPress 릴리스에서 사라지지 않는다는 점을 인식하는 것이 중요합니다. 이유는 간단합니다. "클래식" WordPress 편집기가 그 시대를 보여주기 시작했습니다. 또한 다른 유사한 플랫폼에서 사용할 수 있는 편집기에 익숙한 신세대 사용자는 기존 편집기보다 구텐베르크 스타일 편집기가 더 편합니다.

구텐베르크 블록 사용자 정의

구텐베르크 편집기는 콘텐츠에 원하는 기능을 추가하기 위해 마음대로 사용할 수 있는 개별 구성요소인 '블록'이라는 아이디어를 기반으로 합니다. 이러한 구텐베르크 블록을 통해 사용자는 독자에게 가치를 더하는 조정 가능하고 독립적으로 관리 가능한 섹션을 추가할 수 있습니다.

사용자 정의가 WordPress의 핵심이기 때문에 Gutenberg 편집기는 사용자가 CMS에 사용자 정의 블록을 추가하는 데 도움이 되는 사용자 정의 블록 템플릿을 지원합니다.

맞춤형 구텐베르크 블록 템플릿을 만드는 방법에는 두 가지가 있습니다. 두 방법 모두 WordPress 개발 지식이 필요합니다.

구텐베르크 블록 등록

첫 번째 방법은 미리 채워진 블록을 만드는 데 사용할 수 있는 사용자 지정 블록 템플릿을 만드는 것입니다. 이를 위해 functions.php 파일에 다음 코드를 추가하십시오.

 add_action( '초기화', function() {
    $args = 배열(
        '공개' => 참,
        '레이블' => '뉴스',
        'show_in_rest' => 참,
        'template_lock' => '모두',
        '템플릿' => 배열(
            array( '핵심/단락', array(
                '자리 표시자' => '속보',
            ) ),
            배열( '코어/이미지', 배열(
                '정렬' => '오른쪽',
            ) ),
        ),
    );

    register_post_type( '뉴스', $args );
} );

다음은 Gutenberg 블록용 사용자 정의 템플릿이 작동하는 방식입니다.

구텐베르크 블록 템플릿

위의 코드 조각에서 배열 매개변수 'core/paragraph'는 블록의 내용을 담당합니다. 마찬가지로 배열 매개변수 'core/image'를 사용하면 직접 업로드, 미디어 라이브러리에서 선택 및 URL을 사용한 포함의 세 가지 방법으로 이미지를 업로드할 수 있습니다.

'show_in_rest' 매개변수는 이 사용자 정의 블록을 WordPress REST API를 통해 가져올 수 있어야 함을 WordPress 코어에 나타냅니다.

'template_lock' 인수를 'all'로 설정하면 사용자 정의 블록이 템플릿에 추가(또는 제거)되지 않습니다.

이 템플릿에 사용자 정의 블록을 추가할 때 '템플릿' 하위 배열을 사용하십시오. 예를 들어 다음 스니펫을 고려하십시오.

 '템플릿' => 배열(
            array( '핵심/제목', array( '레벨' => '4', '내용' => '제목' ) ),
            배열( '핵심/단락'),
        )

구텐베르크 플러그인 만들기

사용자 지정 템플릿 및 Gutenberg 템플릿으로 작업할 때 가장 좋은 방법은 사용자 지정 Gutenberg Editor 플러그인용 사용자 지정 플러그인을 만드는 것입니다.

모든 플러그인과 마찬가지로 이 플러그인은 웹사이트에 설치된 모든 플러그인에 대한 별도의 폴더가 포함된 wp-content/plugins 디렉토리에 있습니다.

플러그인을 생성하려면 wp-content/plugins 디렉토리로 이동하여 새 폴더를 생성합니다. 폴더 이름은 사용자 지정 Gutenberg 템플릿 플러그인의 이름이어야 합니다. 이 튜토리얼의 목적을 위해 내 플러그인의 이름을 'Gutenberg Blocks'로 지정했습니다. 따라서 폴더 이름은 ' Gutenberg-Blocks '가 됩니다.

이 폴더에 Gutenberg-blocks.php라는 파일과 다음 코드를 만듭니다.

 /**
 * 플러그인 이름: Gutenberg Blocks
 * 저자: 무하마드 오와이스 알람
 * 설명: 이 플러그인을 사용하면 사용자가 구텐베르크 편집기용 WordPress 구텐베르크 사용자 정의 템플릿을 추가할 수 있습니다.
 * 버전: 1.0.0
 */

add_action( '초기화', function() {
    $args = 배열(
        '공개' => 참,
        '레이블' => '뉴스',
        'show_in_rest' => 참,
        'template_lock' => '모두',
        '템플릿' => 배열(
            array( '핵심/단락', array(
                '자리 표시자' => '속보',
            ) ),
            배열( '코어/이미지', 배열(
                '정렬' => '오른쪽',
            ) ),
        ),


    );

    register_post_type( '뉴스', $args );
} );

이 코드는 참고용일 뿐이며 요구 사항에 맞게 세부 정보를 변경할 수 있습니다. 이 플러그인을 설치하면 사용 가능한 플러그인 목록에 나타납니다.

플러그인을 사용한 구텐베르크 블록 템플릿

Gutenberg WordPress 테마 예제 – Gutenberry

새로운 산만함이 없는 편집기인 Gutenberg는 거의 1년 동안 WordPress 핵심의 일부였습니다. 그러나 구텐베리가 나오기 전까지 웹에서 완성도 높은 구텐베르크 테마를 찾는 것은 꽤 어려웠습니다.

Gutenberry는 현재 최고의 100% Gutenberg 지원 테마 중 하나입니다. 이 깨끗하고 최소한의 테마는 Gutenberg에서 만들어졌으며 전례 없는 편집 용이성과 모범적인 속도를 제공합니다. 예를 들어 Google Speed는 Gutenberry A 97을 평가합니다.

이 최고의 테마에는 5개의 홈페이지 디자인이 포함되어 있으며, 모두 리치 미디어 통합이 포함된 최신 블로그용으로 제작되었습니다. 또한 Gutenberry는 수많은 블로그 및 게시물 레이아웃, 10개 이상의 위젯, 작업 양식 및 강력한 소셜 미디어 통합을 제공합니다.

구텐베르크 테마의 주목할만한 기능은 다음과 같습니다.

  • 샘플 데이터 설치 프로그램
  • 평생 연중무휴 지원
  • 최적화된 소스 코드
  • MailChimp 지원
  • 완전 반응형
  • 대체 모듈 레이아웃
  • 3 동적 블로그 레이아웃

마무리!

Gutenberg 템플릿 사용자 지정은 사용자 지정 요구 사항을 처리하기 위해 Gutenberg 편집기를 사용자 지정하는 좋은 방법입니다. 모든 WordPress와 마찬가지로 사용자 정의 Gutenberg 템플릿을 만드는 프로세스는 인라인 코드를 추가하거나 사용자 정의 플러그인을 설정하는 간단한 문제입니다.