6. 제품 소개 페이지 제작, ACF (Advanced Custom Fields)를 이용한 맞춤형 제품 필드 추가

워드프레스는 그 자체로도 강력한 CMS이지만, 추가 플러그인을 통해 기능을 확장할 수 있습니다. 그 중에서도 ACF(Advanced Custom Fields)는 사용자 정의 필드를 쉽게 추가할 수 있는 플러그인으로, 특히 제품 소개 페이지를 만들 때 매우 유용합니다. 본 글에서는 ACF를 사용하여 맞춤형 제품 필드를 추가하고, 이를 통해 세련된 제품 소개 페이지를 제작하는 방법을 상세히 설명하겠습니다.

ACF 플러그인 설치하기

ACF 플러그인을 설치하려면 다음 단계를 따르면 됩니다:

  1. 워드프레스 대시보드에 로그인합니다.
  2. 메뉴에서 플러그인 > 새로 추가하기를 클릭합니다.
  3. 검색창에 “Advanced Custom Fields”를 입력하고, 플러그인이 나타나면 지금 설치 버튼을 클릭합니다.
  4. 설치가 완료되면 활성화 버튼을 클릭합니다.

새로운 필드 그룹 만들기

ACF를 활성화한 후, 새로운 필드 그룹을 만들기 위해 다음 단계를 따릅니다:

  1. 대시보드에서 Custom Fields를 클릭합니다.
  2. 새로 만들기를 클릭하여 새로운 필드 그룹을 생성합니다.
  3. 필드 그룹의 제목을 입력하고, 제품에 맞는 필드를 추가합니다.

필드 예시

예를 들어, 다음과 같은 필드를 만들어 보겠습니다:

  • 제품 가격 (Field Type: Number)
  • 제품 설명 (Field Type: Wysiwyg Editor)
  • 제품 이미지 (Field Type: Image)
  • 제품 특징 (Field Type: Text Area)

필드 추가하기


1. 필드 그룹의 제목을 "제품 정보"라고 입력합니다.
2. 필드 추가 버튼을 클릭합니다.
3. 각각의 필드에 대해 다음과 같은 설정을 합니다:
    - 필드 레이블: 제품 가격
        - 필드 이름: 제품 가격
        - 필드 타입: Number
    - 필드 레이블: 제품 설명
        - 필드 이름: 제품 설명
        - 필드 타입: Wysiwyg Editor
    - 필드 레이블: 제품 이미지
        - 필드 이름: 제품 이미지
        - 필드 타입: Image
    - 필드 레이블: 제품 특징
        - 필드 이름: 제품 특징
        - 필드 타입: Text Area

필드 그룹 설정하기

필드 그룹을 만들고 필드를 추가했다면, 이제 이 필드 그룹을 어떤 글 유형에 보여줄지 설정해야 합니다. 위치 규칙 섹션에서 ‘포스트 타입’이 ‘제품’일 때 이 필드 그룹이 나타나도록 설정할 수 있습니다. 이렇게 하면 제품 글 작성 시에만 해당 필드가 나타납니다.

제품 소개 페이지 만들기

이제 필드 그룹이 설정되었으므로, 제품 소개 페이지를 만들 차례입니다. ‘제품’이라는 커스텀 포스트 타입을 만들고, 이를 통해 제품을 등록할 수 있습니다. 이는 아래 코드를 통해 구현할 수 있습니다:


// functions.php 파일에 추가
function create_post_type() {
    register_post_type('product',
        array(
            'labels' => array(
                'name' => __('제품'),
                'singular_name' => __('제품')
            ),
            'public' => true,
            'has_archive' => true,
            'supports' => array('title', 'editor', 'thumbnail'),
        )
    );
}
add_action('init', 'create_post_type');

ACF 필드를 제품 소개 페이지에 표시하기

제품 소개 페이지를 구현하기 위해서는, 만들어놓은 커스텀 포스트 타입의 단일 템플릿(paged > single-product.php 또는 page > product.php)이 필요합니다. 이를 통해 ACF 필드에 입력된 값을 표시할 수 있습니다.

single-product.php 예시


<?php 
get_header(); 
if (have_posts()) : while (have_posts()) : the_post(); 
?>

    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
    
    <div class="product-price"><strong>가격: <?php the_field('제품 가격'); ?> 원</strong></div>
    <div class="product-description"><?php the_field('제품 설명'); ?></div>
    <div class="product-image"><?php echo wp_get_attachment_image(get_field('제품 이미지'), 'full'); ?></div>
    <div class="product-features"><?php the_field('제품 특징'); ?></div>

<?php endwhile; endif; 
get_footer(); 
?>

스타일링 및 사용자 정의

위 코드를 통해 기본적인 제품 소개 페이지를 만들 수 있습니다. 그러나 유저 경험을 향상시키기 위해 CSS를 추가하여 디자인을 개선할 수 있습니다. 다음은 예시 스타일입니다:


.product-price {
    font-size: 24px;
    color: #e67e22;
}
.product-description {
    margin: 20px 0;
}
.product-image img {
    max-width: 100%;
    height: auto;
}
.product-features {
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

결론

ACF를 사용하여 제품 소개 페이지를 제작하는 방법에 대해 알아보았습니다. 사용자 정의 필드를 추가함으로써 제품 정보를 더욱 풍부하게 제공할 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있습니다. ACF는 강력하고 유연한 도구로, 다양한 유형의 콘텐츠에 맞춤형 필드를 추가하는 데 매우 유용합니다. 다양한 기능을 탐색하고 자신만의 맞춤형 워드프레스를 구축해 보시기 바랍니다.

추가적인 질문이나 개선 사항은 언제든지 댓글로 남겨 주시기 바랍니다.