ACF로 커스텀 블럭 만들기

워드프레스 5.0이 배포되기 시작한지도 벌써 보름이 다 되어가네요. 세월 참 빠르죠?

알다사피 워드프레스 5.0에 새로 추가된 블럭 기반 편집기(코드명 ‘구텐베르크’로 불리던)에는 워드프레스 설치와 동시에 기본으로 사용할 수 있는 다양한 블럭들이 제공됩니다만, 그 외에도 사용자가 임의로 자신만의 블럭을 추가할 수도 있습니다.

이 가이드에서도 일전에 한번 커스텀 구텐베르크 블럭 만드는 법을 소개한 적이 있는데요.

Gutenberg 커스텀 블럭 만들기

사실 커스텀 블럭을 직접 만들어 쓴다는 게 여간 성가신 일이 아니죠. 일반 사용자들 뿐 아니라 워드프레스에 익숙한 개발자들에게도 제법 진입 장벽이 있는 게 사실입니다.

하지만 최근, 인기있는 워드프레스 필수 플러그인 중 하나인 Advanced Custom Fields(이하 ‘ACF’)에서 좀 더 쉽게 커스텀 블럭을 만들 수 있는 방법을 내어 놓았기에 여기에 간단하게 소개합니다.

ACF 블럭

ACF에서 새로 선보인 방법은 ‘ACF 블럭(Blocks)’라는 개념입니다. 한마디로 ACF 블럭은 기존의 ACF 필드 그룹을 워드프레스의 블럭과 맵핑시켜 사용할 수 있도록 해 주는 기능입니다.

예를 들어, 내 포스트에 사용할 프로필(Profile) 블럭을 하나 만든다고 해 보죠. 처음부터 직접 만드는 방법도 가능하지만, ACF 블럭을 사용하면 훨씬 간단해 집니다.

한번 볼까요?

우선 내 테마의 functions.php 파일에서 다음과 같이 ACF 블럭을 하나 등록합니다.

function my_acf_init() {
    // check function exists
    if( function_exists('acf_register_block') ) {
        
        // register a testimonial block
        acf_register_block(array(
            'name'              => 'profile',
            'title'             => __('Profile'),
            'description'       => __('A custom testimonial block.'),
            'render_callback'   => 'my_acf_block_render_callback',
            'category'          => 'formatting',
            'icon'              => 'admin-users',
            'keywords'          => array( 'profile', 'user' ),
        ));
    }
}
add_action('acf/init', 'my_acf_init');

그리고 글 편집기에서 확인해 보면 다음과 같이 “프로필”이라는 블록이 하나 추가된 것이 보입니다.


물론 아직은 블럭 등록만 했을 뿐 실제 블럭 내용은 만들지 않았기에 블럭을 글에 삽입해도 아무런 일도 일어나지 않습니다.

필드 그룹 추가하기

블록 등록을 마쳤으면, 다시 ACF 메뉴로 가서 이번엔 필드 그룹(Field Group)을 하나 만들겠습니다. 사용자 프로필 표시에 필요한 이름(name), 사진(photo), 설명(description) 정도만 갖춘 간단한 (일반적인) 필드 그룹입니다.


필드 그룹을 만들었다면 이제 이 필드 그룹을 앞서 등록한 워드프레스 블럭(“프로필” 블럭)과 맵핑 시킵니다. 맵핑은 ACF 메뉴 “Location” 부분에서 지정합니다. 여기서는 “Block is equal to 프로필”로 지정했습니다.


설정을 마쳤으면 이제 다시 글 편집기로 돌아 옵니다.

블럭을 추가해 보면 다음과 같이 프로필 블럭이 표시되는 것을 알 수 있습니다. ACF가 필드 그룹을 워드프레스 블럭과 연결시켜 표시한 것입니다.


그럼 어디 한번 써 볼까요?

필드에 적당한 값들을 입력해 봅니다. 그런 다음 “미리보기(Preview)”를 해서 화면에서는 어떻게 보이는지도 한번 보세요!

어이쿠! 화면에 아무 것도 표시되지 않는다구요? 그렇다면 정상적으로 작동하는 것입니다. 아직 화면에 어떻게 표시될지 하는 부분은 따로 만들지 않았으니까요!

ACF 블럭 템플릿 만들기

마지막 남은 일은 ACF 블럭이 화면에 어떻게 보일지 하는 부분을 정하는 일입니다. 앞서 acf_register_block 함수를 만들 때 render_callback 옵션을 추가한 게 생각나나요? 이제 이 부분을 채워 넣을 차례입니다.

복잡한 코드는 생략하고 다음과 같이 간단하게 코드를 한번 추가해 보겠습니다. (여기서는 functions.php 내에 직접 HTML 코드를 추가하는 방법을 택했지만, 실제로는 별도 템플릿 파일로 만들어 로드시키는 것이 좋습니다!)

function my_acf_block_render_callback() {
    // get fields
    $name = get_field('name');
    $photo = get_field('photo');
    $description = get_field('description');
?>
    <div class="profile">
        <img class="profile__photo" src="<?php echo $photo['url']; ?>">
        <div class="profile__name"><?php echo $name; ?></div>
        <p class="profile_description"><?php echo $description; ?></p>
    </div>    
<?php    
}

이제 다시 글 편집기에서 확인해 보겠습니다.

프로필 블록이 잘 표시됩니다. 물론 미리보기(Preview)를 해봐도 잘 보이구요. 발행(Publish)을 해도 됩니다.


스타일이 좀 맘에 안든다구요? 여기서 블럭 스타일을 조정하는 부분은 따로 설명하지 않았습니다만, 통상적인 스타일링 방법에 따라 CSS를 적용해 주면 될 것입니다.

설명할 내용은 여기까지입니다!

간단하죠? 보면 알겠지만 커스텀 블럭을 만들 때 리액트(React) 코드는 물론 자바스크립트조차 한 줄도 사용하지 않았습니다. 이게 가능한 까닭은 물론 ACF 블럭이 워드프레스 블럭 처리의 상당히 많은 부분을 커버해 주기 때문이겠죠.

ACF가 워드프레스 개발자들에게 사랑받는 이유가 이번에도 또 한번 드러나는군요. 🙂

※ 참고로 이 ACF 블럭 기능은 아직 베타(beta) 버전이며, ACF 5.8+ 에서 지원될 예정입니다.

참고자료

0 thoughts on “ACF로 커스텀 블럭 만들기”