워드프레스 기본 커스텀 필드 메타박스에 등록하는 메타 데이터 조금 더 살펴보기

by Jinn

워드프레스 ‘기본 제공 커스텀 필드 메타박스’는 필드명(키)과 값을 쉽게 입력할 수 있어 포스트 메타 데이터 등록이 간단합니다. 물론, 메타 데이터를 사이트에 출력하기 위해서 추가 작업이 필요합니다.

그런데, 기본 필드 메타박스(이하, ‘필드박스’)는 워드프레스 사용자 전체에 걸쳐 사용률이 적습니다. 사이트에 출력하는 추가 작업이 필요한 이유도 있겠지만, 무엇보다 필드박스 그대로의 기준에서 규칙이나 조건에 따른 동적 기능 구현이 번거롭기 때문으로 생각할 수 있습니다.

저장소 플러그인을 포함한 다른 것은 생각하지 않고, 제공 필드박스 그대로 사용하여 메타 데이터를 등록한다는 기준에서 ‘데이터 등록 방법에 따른 필드박스 응용’에 관하여 포스트에서 가볍게 살펴봅니다.

커스텀 필드와 데이터 등록 및 출력 기본

다음 그림은 포스트 편집 화면 필드박스에 입력한 메타 데이터입니다. ‘누구’는 필드명(Name)입니다.

포스트 편집 화면 필드박스에 입력한 메타 데이터

다음 그림은 사이트에서 본 싱글 포스트 페이지로, 그림에서 이미지 아래 글자 ‘엄마, 아빠, 나, 동생’은 필드박스에서 등록한 메타 데이터입니다.

‘엄마, 아빠, 나, 동생’ 메타 데이터

싱글 형식의 메타 데이터

위의 그림처럼 편집 화면에서 입력한 메타 데이터를 사이트에 출력하는 가장 기본의 방법은 다음 코드로 정의할 수 있습니다. 테마 파일을 편집하지 않기 위해 functions.php 파일에 훅과 함께 정의해봅니다.

add_action( 'the_content', 'use_default_cf_metabox' );
function use_default_cf_metabox( $content ) {
    $custom_fields = get_post_meta( get_the_ID(), '누구', true );

    return $content . $custom_fields;
}

3번 줄의 코드에서 사용한 get_post_meta 함수가 대표적인 워드프레스 메타 데이터 출력 함수인데, true는 싱글 데이터(값) 형식으로 출력하는 것입니다. 여기서 핵심은 싱글 데이터가 아니라 ‘싱글 데이터 형식’입니다.

배열 형식의 메타 데이터

앞의 코드는 다음으로 대체해도 사이트에서 같은 결과를 출력합니다.

add_action( 'the_content', 'use_default_cf_metabox' );
function use_default_cf_metabox( $content ) {
    $custom_fields = get_post_meta( get_the_ID(), '누구' );
    echo '<pre>'.print_r( $custom_fields, true ).'</pre>';
    $values = implode( ', ', $custom_fields );
    return $content . $values;
}

3번 줄 get_post_meta 함수에 기본값 false(생략)로 설정하여 ‘배열 데이터 형식’으로 메타 데이터를 가져온 것입니다. 또, PHP implode 함수로 배열 데이터를 콤마로 구분하여 출력한 것인데, 현재는 배열에 하나의 데이터만 존재합니다. 4번 줄은 이해를 돕기 위해 추가한 것이며, 사이트에서 이미지를 제외하고 결과를 보면 다음과 같습니다.

Array
(
    [0] => 엄마, 아빠, 나, 동생
)
// 이미지
엄마, 아빠, 나, 동생

앞의 코드는 다음 코드로 대체해도 사이트에서 역시 같은 결과를 얻을 수 있습니다.

add_action( 'the_content', 'use_default_cf_metabox' );
function use_default_cf_metabox( $content ) {
    $custom_fields = get_post_custom(); // 싱글 포스트의 전체 메타 데이터
    // get_post_meta( $post_id:integer ); // 싱글 포스트의 전체 메타 데이터
    echo '<pre>'.print_r( $custom_fields, true ).'</pre>';
    $cf = $custom_fields['누구'];
    echo '<pre>'.print_r( $cf, true ).'</pre>';
    $values = implode( ', ', $cf );
    return $content . $values;
}

3번 줄 get_post_custom 함수는 싱글 포스트의 전체 메타 데이터를 배열 데이터로 구하는 것인데, 6번 줄에서 ‘누구’ 필드로 제한하였습니다. 4번 줄처럼 get_post_meta 함수에 포스트 아이디만 추가해도 싱글 포스트의 전체 메타 데이터를 얻을 수 있습니다.

5, 7번 줄은 이해를 돕기 위한 것이며, 사이트에서 결과를 보면 다음과 같습니다.

Array
(
    [_edit_lock] => Array
        (
            [0] => 1528643357:1
        )

    [_edit_last] => Array
        (
            [0] => 1
        )

    [누구] => Array
        (
            [0] => 엄마, 아빠, 나, 동생
        )

)
Array
(
    [0] => 엄마, 아빠, 나, 동생
)
// 이미지
엄마, 아빠, 나, 동생

다시, 앞의 코드는 다음 코드로 대체해도 역시 같은 결과입니다.

add_action( 'the_content', 'use_default_cf_metabox' );
function use_default_cf_metabox( $content ) {
    $custom_fields = get_post_custom_values( '누구' );
    echo '<pre>'.print_r( $custom_fields, true ).'</pre>';
    $values = implode( ', ', $custom_fields );
    return $content . $values;
}

몇 가지 예를 살폈지만, 현재의 메타 데이터 출력 방식만 사용한다면 처음의 싱글 데이터 출력 방식이면 충분합니다. 추가 마크업으로 약간의 출력 스타일만 조정하면 포스트의 메타 데이터 표현으로 손색이 없습니다.

다차원 메타 데이터 등록과 출력

조금 전의 메타 데이터 등록과 출력은 필드박스에서 하나의 고유 필드명과 값이 존재하는 예로, 보통 워드프레스 커스텀 필드를 추가할 때 고유 필드명을 하나의 포스트에 한 번 사용하는 때가 많습니다.

필드명을 반복하여 메타 데이터를 등록할 때

만약, 필드박스에 다음 그림처럼 같은 필드명을 반복하여 메타 데이터를 등록했다고 가정해봅니다.

필드명을 반복하여 메타 데이터를 등록

그림처럼 메타 데이터를 등록했을 때 사이트에서 이전과 같은 결과를 출력하려면 어떻게 해야 할까요? 이미 앞의 과정에 답이 나와 있는데, 앞에서 추가한 4개의 코드 예 중에서 ‘싱글 데이터 유형’의 메타 데이터 출력 코드만 제외하고 어떤 것을 사용해도 같은 결과를 얻을 수 있습니다.

이것으로 워드프레스의 메타 데이터 반환 함수가 배열 데이터 형식을 기본으로 지정하고 있음을 알 수 있습니다. 이후 포스트에서 계속 사용하는 get_post_meta 함수를 사용한 다음 코드를 다시 추가하여 사이트에서 결과를 보면 다음과 같습니다. 물론, 앞의 다른 함수와 코드를 사용해도 전혀 문제가 없으며 같은 결과입니다.

Array
(
    [0] => 엄마
    [1] => 아빠
    [2] => 나
    [3] => 동생
)
// 이미지
엄마, 아빠, 나, 동생

그런데, ‘엄마, 아빠, 나, 동생’과 같은 결과를 출력하는 데에 배열 형태의 데이터 반환 방법을 사용할 이유가 없습니다. 워드프레스 기본 필드박스와 메타 데이터에 관한 이해를 돕기 위한 것입니다.

반복 필드와 메타 데이터 응용

다음 그림처럼 각 필드에 가족 구성원과 개별 블로그 URL 메타 데이터를 콤마로 구분하여 등록한다고 가정해봅니다. (콤마가 아닌 세미콜론 등 허용하며 원하는 것으로 구분해도 됩니다.)

필드에 가족 구성원과 개별 블로그 URL 메타 데이터를 콤마로 구분하여 등록

이때 사이트에서는 가족 구성원 글자에 블로그 링크(URL)가 있는 메타 데이터를 출력하여 기본 필드박스 사용으로도 메타 데이터 응용의 범위를 확장할 수 있습니다. 다음 코드로 정의하면 그 결과를 얻을 수 있습니다.

add_action( 'the_content', 'use_default_cf_metabox' );
function use_default_cf_metabox( $content ) {
    $custom_fields = get_post_meta( get_the_ID(), '누구' );
    echo '<pre>'.print_r( $custom_fields, true ).'</pre>';
    foreach ( $custom_fields as $key=>$value ) {
        $sep = array_map( 'trim', explode( ',', $value ) );
        echo '<pre>'.print_r( $sep, true ).'</pre>';
        $link[] = '<a href="' . esc_url( $sep[1] ) . '" target="_blank" rel="noopener">' . esc_html( $sep[0] ) . '</a>';            
    }
    $values = implode( ', ', $link );
    return $content . $values;
}

6번 줄에서 콤마로 구분하여 저장한 하나의 배열 데이터를 개별 키와 값의 배열로 다시 구분하고, 8번 줄에서 ‘링크(URL)가 있는 글자’ 데이터로 만들어 $link 변수에 하나의 배열로 다시 저장한 후 10번 줄에서 다시 배열 데이터를 콤마로 구분하여 단일 데이터로 전환한 것입니다.

사이트에 나오는 다음의 배열 데이터와 링크가 있는 글자 결과를 보면 쉽게 이해할 수 있습니다.

Array
(
    [0] => 엄마, https://wordpress.org
    [1] => 아빠, https://wordpress.com
    [2] => 나, https://jetpack.com
    [3] => 동생, https://gravatar.com
)
Array
(
    [0] => 엄마
    [1] => https://wordpress.org
)
Array
(
    [0] => 아빠
    [1] => https://wordpress.com
)
Array
(
    [0] => 나
    [1] => https://jetpack.com
)
Array
(
    [0] => 동생
    [1] => https://gravatar.com
)
// 이미지
엄마, 아빠, 나, 동생

URL 데이터를 포함한 필드박스 사용은 다음 유형의 데이터 표현에 유용합니다.

  • 포스트에서 참고한 링크가 있는 외부 포스트 제목 출력
  • 도서 소개 포스트에서 작가의 블로그 링크가 있는 복수의 작가 이름 출력
  • 도서 소개 포스트의 판매 링크가 있는 복수의 판매서점 이름 출력

URL 데이터가 아니라 글자색을 위한 색상 코드, CSS 클래스 등 다양한 활용이 가능합니다.

조금 더 동적으로, Shortcode

앞의 예는 ‘누구’ 필드 하나를 코드에 지정한 것으로, 다른 새로운 필드를 만들면 코드를 변경하거나 추가해야 합니다. 물론, 이후 진행하는 방법도 새로운 코드 추가를 요구할 때도 있지만, 앞의 예처럼 필드명을 변경하는 일은 최소화 또는 없다고 말할 수 있습니다.

워드프레스 기본 필드박스를 사용하며 활용할 때 테마 템플릿 파일을 편집하여 메타 데이터를 출력하지 않는다면 간단한 플러그인 형식으로 구성하는 것이 편리합니다. 또, 기본 필드박스는 포스트에서 반복하여 사용하는 때가 있지만, 사용하지 않아도 되는 포스트(콘텐츠)가 함께 존재하는, 특정 서비스를 위한 사이트가 아닌 개인의 블로그나 일반 사이트에서 사용하면 조금 더 유연합니다.

특정 서비스 중심의 워드프레스 사이트라면 메타 데이터 등록을 위한 저장소 플러그인(Advanced Custom Fields 같은)을 사용하거나 직접 메타박스를 구성하여 규칙적인 콘텐츠 축적이 가능하도록 구성하는 것이 더 효율적입니다.

메타 데이터 등록과 Shortcode 추가

다음 그림처럼 기본 필드박스에 3가지 필드명으로 각각 필드 데이터를 입력했다고 가정합니다.

기본 필드박스에 3가지 필드명으로 각각 필드 데이터를 입력

위의 메타 데이터는 다음 3가지 필드에 각각 다음 형태로 입력한 것입니다.

  • 서점 : 서점, URL
  • 작가 : 작가이름, URL
  • 장르 : 장르명, 장르명 색상

사이트 출력 목표는, 서점의 경우 링크가 있는 서점 이름 출력, 작가의 경우에도 링크가 있는 작가의 이름, 장르는 장르 이름마다 메타 데이터에 입력한 색상으로 출력.

따라서, 2가지 형태의 Shortcode를 정의하면 됩니다.

그리고, 다음 그림처럼 사이트에 메타 데이터를 출력하기 위해 포스트 편집 화면에 특정 형식의 Shortcode 3가지를 미리 추가했다고 가정하고 Shortcode를 정의합니다.

Shortcode

메타 데이터 출력 Shortcode

입력한 색으로 데이터를 출력하는 Shortcode는 다음처럼 정의할 수 있습니다.

/**
 * 글자에 색상 지정
 */

add_shortcode( 'colorfields', 'use_default_cf_metabox' );
function use_default_cf_metabox( $atts ) {
    // Shortcode Attributes
    extract( $atts = shortcode_atts(
        array(
            'title' => '',
            'field' => '',
            'id'    => ''
        ),
        $atts
    ) ); // extract PHP 함수로 Shortcode 파라미터($atts 배열 키)를 변수로 변환. $title, $field, $id
    // echo '<pre>'.print_r( $atts, true ).'</pre>';
    if ( $field && $title ) {
        ob_start();
        $ID = ( ! $id ) ? get_the_ID() : $id;
        $custom_fields = get_post_meta( $ID, $field );
        // echo '<pre>'.print_r( $custom_fields, true ).'</pre>';
        foreach ( $custom_fields as $key=>$value ) {
            $sep = array_map( 'trim', explode( ',', $value ) );
            // echo '<pre>'.print_r( $sep, true ).'</pre>';
            $color[] = '<span style="color:' . esc_attr( $sep[1] ) . '">' . esc_html( $sep[0] ) . '</span>';
        }
        printf( '<div><strong>%s</strong> - <em>%s</em></div>', wp_filter_nohtml_kses( $title ), implode( ', ', $color ) );

        return ob_get_clean();
    }

}

링크가 있는 글자 출력 Shortcode는 다음처럼 정의할 수 있습니다.

/**
 * 글자에 링크 지정
 */
add_shortcode( 'linkfields', 'use_default_cf_books' );
function use_default_cf_books( $atts ) {
    // Shortcode Attributes
    extract( $atts = shortcode_atts(
        array(
            'title' => '',
            'field' => '',
            'id'    => ''
        ),
        $atts
    ) );

    if ( $field && $title ) {
        ob_start();
        $ID = ( ! $id ) ? get_the_ID() : $id;
        $custom_fields = get_post_meta( $ID, $field );
        // echo '<pre>'.print_r( $custom_fields, true ).'</pre>';
        foreach ( $custom_fields as $key=>$value ) {
            $sep = array_map( 'trim', explode( ',', $value ) );
            // echo '<pre>'.print_r( $sep, true ).'</pre>';
            $link[] = '<a href="' . esc_url( $sep[1] ) . '" target="_blank" rel="noopener">' . esc_html( $sep[0] ) . '</a>';
        }
        printf( '<div><strong>%s</strong> - %s</div>', wp_filter_nohtml_kses( $title ), implode( ', ', $link ) );

        return ob_get_clean();
    }
}

사이트 출력 결과는 다음 그림과 같습니다.

다차원 배열의 필드 데이터 출력

Shortcode 요약

포스트 편집 화면에 추가한 Shortcode에서 포스트 아이디는 생략하였는데, 다음과 같습니다.

[colorfields title="분야" field="장르" id=""]

[linkfields title="저자" field="작가" id=""]

[linkfields title="판매" field="서점" id=""]

포스트 아이디를 입력하지 않으면, 현재 포스트 아이디의 메타 데이터를 구합니다. 그리고, 각 Shortcode의 title 속성은 필드명(키)을 가져오도록 정의할 수 있지만, 따로 입력할 수 있도록 설정한 것입니다.

만약, 예에서 없는 새로운 필드로 필드 데이터를 출력하려면 단순하게 필드박스에 입력하고, Shortcode title 속성은 원하는 것으로, field 속성은 해당 필드명을 입력하면 되므로 필드명 추가에 관하여 염려할 필요가 없습니다.

위의 코드를 설치 플러그인으로 사용하려면 다음 링크로 이동하여 받은 후 업로드 방법의 플러그인 설치로 진행하면 됩니다.

KKK Shortcode

나머지 Shortcode에 관한 모든 내용은 직접 코드를 추가하고, 메타 데이터를 등록하여 이해를 더하기 바랍니다.

정리

앞의 모든 예는 함수보다 기본 필드박스를 사용하여 다차원의 메타 데이터를 입력하고 출력할 때 ‘데이터 입력 방법’을 어떻게 설계하는가에 초점을 두어야 합니다. 출력에 관한 코드는 배경 지식이 조금 필요할 수 있지만, 핵심은 아니며 다양한 방법이 있으며, 이 포스트에서는 간략하게 표현하였습니다.

데이터 입력의 방향에 더하여, 필드 입력 방법도 응용의 대상입니다. 이 포스트를 예를 들어, 작가_0, 작가_1 형태로 필드명을 추가하여 데이터를 입력한다면, 작가 필드의 배열 키에 대응하는 필드 데이터를 구성할 수 있어 유료 플러그인 또는 특정 저장소 플러그인에서 제공하는 유동적 데이터 표현이 가능합니다.