8. 제품 소개 페이지 제작, 제품 상세 페이지에 동적 데이터 표시하기

오늘은 워드프레스에서 제품 소개 페이지와 동적 데이터 표시를 위한 제품 상세 페이지를 만드는 방법에 대해 설명하겠습니다. 이 강좌에서는 필요한 기능을 구현하기 위한 코드 예제와 함께 각 단계에 대한 자세한 설명을 제공합니다. 최종 목표는 사용자가 원하는 제품 정보를 효율적으로 표시할 수 있는 페이지를 만드는 것입니다.

1. 워드프레스 제품 소개 페이지 개요

제품 소개 페이지는 사용자가 제품의 정보를 쉽게 접근할 수 있도록 도와주는 중요한 역할을 합니다. 이를 통해 방문자는 제품의 특징, 가격 및 구매 옵션 등을 한눈에 확인할 수 있습니다. 또한, 동적 데이터 표시 기능을 통해 관리자가 제품 정보를 쉽게 업데이트할 수 있습니다.

2. 커스텀 포스트 타입(CPT) 생성하기

워드프레스는 기본적으로 포스트와 페이지를 지원하지만, 제품과 같은 특정 콘텐츠 유형을 위해서는 커스텀 포스트 타입(CPT)을 생성해야 합니다. 아래 코드를 functions.php 파일에 추가하여 ‘제품’이라는 커스텀 포스트 타입을 생성할 수 있습니다.


function create_product_post_type() {
    register_post_type('product',
        array(
            'labels' => array(
                'name' => __('Products'),
                'singular_name' => __('Product')
            ),
            'public' => true,
            'has_archive' => true,
            'supports' => array('title', 'editor', 'thumbnail', 'custom-fields'),
            'menu_position' => 5,
            'menu_icon' => 'dashicons-cart',
            'rewrite' => array('slug' => 'products'),
        )
    );
}
add_action('init', 'create_product_post_type');

위 코드에서 사용할 수 있는 다양한 매개변수를 조정함으로써, 우리가 원하는 방식으로 커스텀 포스트 타입을 구성할 수 있습니다. 이제 관리 대시보드에서 ‘제품’ 메뉴를 통해 제품을 추가할 수 있습니다.

3. 제품 메타데이터 추가하기

제품 정보에는 가격, 재고 상태, 제품 설명 등의 메타데이터가 포함될 수 있습니다. 이를 위해 ‘Advanced Custom Fields’와 같은 플러그인을 사용할 수 있으며, 아래와 같이 간단한 커스텀 필드를 추가할 수 있습니다.


// ACF를 통해 제품 가격과 설명 필드 추가 예시
function add_product_fields() {
    add_meta_box('product_price', '제품 가격', 'product_price_callback', 'product', 'side', 'default');
    add_meta_box('product_description', '제품 설명', 'product_description_callback', 'product', 'normal', 'high');
}

function product_price_callback($post) {
    $price = get_post_meta($post->ID, 'product_price', true);
    echo '<input type="text" name="product_price" value="' . esc_attr($price) . '" />';
}

function product_description_callback($post) {
    $description = get_post_meta($post->ID, 'product_description', true);
    echo '<textarea name="product_description">' . esc_textarea($description) . '</textarea>';
}

add_action('add_meta_boxes', 'add_product_fields');

이제 사용자는 제품을 추가할 때 가격과 설명을 입력할 수 있습니다. 추가한 필드는 save_post 액션을 통해 저장할 수 있습니다.


function save_product_fields($post_id) {
    if (array_key_exists('product_price', $_POST)) {
        update_post_meta($post_id, 'product_price', $_POST['product_price']);
    }
    if (array_key_exists('product_description', $_POST)) {
        update_post_meta($post_id, 'product_description', $_POST['product_description']);
    }
}

add_action('save_post', 'save_product_fields');

4. 제품 소개 페이지 템플릿 만들기

이제 제품을 소개할 템플릿 파일을 만들어야 합니다. 테마 폴더 내에 single-product.php 파일을 생성하고 아래 코드를 추가합시다.


<?php get_header(); ?>

<div class="product-details">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <h1><?php the_title(); ?></h1>
        <div class="product-price">
            <?php echo get_post_meta(get_the_ID(), 'product_price', true); ?> 원
        </div>
        <div class="product-description">
            <?php echo get_post_meta(get_the_ID(), 'product_description', true); ?>
        </div>
        <?php the_post_thumbnail('full'); ?>
    <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>

위 코드에서는 제품의 제목, 가격, 설명 및 썸네일 이미지를 표시합니다. 이 페이지는 현재 포스트의 데이터를 불러오는 방식으로 동작합니다.

5. 동적 데이터 표시하기

동적 데이터란 사용자가 제품을 추가할 때마다 자동으로 업데이트되는 정보를 의미합니다. 워드프레스의 메타데이터 기능을 통해 제품에 필요한 정보를 저장하고 표시할 수 있습니다.

위에서 생성한 템플릿 코드를 사용하여 각 제품의 정보를 화면에 표시할 수 있습니다. 추가적으로, 사용자의 상호작용에 따라 업데이트되는 데이터 표시를 원한다면 AJAX를 사용할 수 있습니다. AJAX를 활용하면 페이지를 새로 고치지 않고도 데이터를 업데이트하고 표시할 수 있습니다.


// JavaScript AJAX 요청 예시
jQuery(function($) {
    $('.order-button').on('click', function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '',
            data: {
                action: 'order_product',
                product_id: $(this).data('product_id')
            },
            success: function(response) {
                alert('제품이 성공적으로 주문되었습니다!');
            }
        });
    });
});

6. 스타일 및 프론트엔드 개선하기

우리가 만든 제품 페이지를 더욱 매력적으로 보이게 하기 위해 CSS를 추가해야 합니다. 아래는 기본적인 스타일 예시입니다.


.product-details {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.product-price {
    font-size: 24px;
    color: #4CAF50;
}

.product-description {
    margin-top: 15px;
    font-size: 16px;
}

위의 클래스에 스타일을 추가하여 제품 정보가 더욱 돋보이도록 만들 수 있습니다. 또한, CSS 프레임워크인 Bootstrap이나 Tailwind CSS를 사용하여 디자인을 더욱 발전시킬 수도 있습니다.

7. 결론

이제 우리는 워드프레스에서 동적 데이터 표시와 제품 소개 페이지 제작에 대해 배웠습니다. 커스텀 포스트 타입을 생성하고, 메타데이터를 추가하며, 이를 통해 동적으로 제품 정보를 표시하는 방법을 익혔습니다. 마지막으로, 스타일을 추가하여 사용자 경험을 개선할 수 있었습니다.

워드프레스의 강력한 기능을 활용하여 자신만의 제품 소개 페이지를 만들고, 직관적인 사용자 인터페이스를 제공하는 웹사이트를 구축해보시기 바랍니다. 여기에 소개된 내용은 단지 시작일 뿐이며, 더욱 발전된 기능을 이어가면서 필요한 것들을 보강해 나가세요!