이미지 메타 데이터를 포스트 메타 데이터에 추가

원본 이미지의 EXIF 또는 IPTC 데이터 중 워드프레스가 기본으로 저장하는 데이터에 관하여 앞 장에서 살펴봤습니다. 또, 원본 이미지에 있지만 워드프레스가 기본으로 저장하지 않는 데이터를 특정 훅을 통해 워드프레스에 저장하였습니다. 이번에는 워드프레스가 저장한 원본 이미지의 데이터 중 특정 데이터를 이미지 포스트의 새로운 메타 데이터로 추가해봅니다.

변환하여 저장한 GPS 데이터를 커스텀 필드에 추가

현재 연습장 페이지에 나타나는 배열 데이터는 테이터베이스 ‘_postmeta’ 테이블의 ‘_wp_attachment_metadata’ 필드의 데이터입니다. 이 필드는 원본 이미지를 등록할 때 워드프레스가 생성하는 이미지의 메타 데이터 필드입니다. 이 데이터 중 GPS 관련 데이터만 커스텀 필드를 추가하여 따로 저장합니다. 워드프레스 기본이 아닌 지금처럼 사용자가 추가하는 필드를 ‘커스텀 필드’라고 쉽게 생각하면 됩니다.

이때, GPS 데이터 중 십진수의 위도와 경도 데이터와 함께 섬네일^thumbnail 이미지 사이즈의 이미지 파일 경로와 해당 이미지 포스트의 URL도 커스텀 필드에 저장하는데, 이유는 나중에 진행할 ‘발자국’ 페이지의 구글 지도에 표시할 마커(위도, 경도)와 섬네일, 해당 이미지 포스트의 링크 정보를 하나의 필드에 모두 저장하여 활용하기 위해서입니다.

물론, 이런 방법을 사용하지 않아도 워드프레스 데이터베이스에는 발자국 페이지의 지도를 위한 데이터가 모두 저장되어 있으므로 코드로 원하는 데이터를 얻을 수 있습니다. 그래서 꼭 필요한 과정은 아니지만, 나중에 발자국 페이지를 실제로 구성할 때 나오는, 지금 안내하지 않는 몇 가지 추가 과정을 경험하여 지금의 데이터 추가 저장 과정의 필요성을 각자가 판단하기 바랍니다. 다음 그림은 완성 예제의 발자국 페이지로 섬네일 노출을 기본으로 설정한 결과입니다.

앞 장에서 wp_read_image_metadata 훅의 단계에서는 원본 이미지의 메타 데이터가 워드프레스 데이터로 저장되지 않아 포스트 ID를 얻을 수 없다고 했습니다. 워드프레스의 포스트, 코멘트(댓글), 회원 등의 ‘메타 데이터’는 방금 나열한 요소에 종속하는 데이터입니다. 따라서, 지금 이미지 포스트의 커스텀 필드에 데이터를 저장하려면 이미지 포스트 ID를 얻을 수 있는 워드프레스 훅을 사용해야 합니다. 다음 코드는 이번 장부터 추가할 코드의 일부입니다. 1번 줄 wp_generate_attachment_metadata 필터 훅에서 포스트 ID를 얻을 수 있습니다.

add_filter( 'wp_generate_attachment_metadata', 'add_custom_image_metadata_fields', 10, 2 );
function add_custom_image_metadata_fields( $metadata, $attachment_id ) {
    // 
}

워드프레스에 원본 이미지를 올릴 때 wp_read_image_metadata 훅에 의해 원본 이미지의 메타 데이터를 읽고, wp_generate_attachment_metadata 필터 훅에 의해 포스트 ID를 생성하여 읽은 원본 이미지의 메타 데이터와 워드프레스에서 설정한 이미지 사이즈별 이미지 생성 정보를 워드프레스 형식에 맞는 데이터 구조로 변환하여, wp_update_attachment_metadata 필터 훅으로 포스트 ID에 해당하는 메타 데이터를 최종 저장합니다. 원본 이미지를 올렸을 때 이런 과정이 있기에 연습장 페이지의 결과를 볼 수 있습니다.

이 예제에서 핵심은 훅보다 그 훅의 단계에서 워드프레스의 기본 처리 데이터와 관계가 없는 새로운 데이터를 저장한다는 것입니다. 이것은 지금의 예제뿐 아니라 기본의 워드프레스를 사용자가 원하는 방향으로 추가, 변경하여 구성하는 거의 모든 웹사이트에 공통적인 ‘워드프레스 방식 또는 방법’입니다.

내부적인 원본 이미지 처리 과정을 이해할 필요는 없지만, 지금 예제 구성 과정에서는 포스트 ID 기준의 데이터를 가공 또는 저장해야 하므로 관련 내용을 간략하게 안내하였습니다. 조금 더 상세한 내용을 알고 싶다면 코덱스에서 검색한 후 관련 워드프레스 코어 파일을 열어 확인해야 합니다. 그러나 권장하지 않습니다. 간략 안내 정도와 예제를 통한 간접 경험으로 충분합니다.

실 예제 과정을 진행하여 이해를 더하기 바라며, 이어서 서술로 안내하는 내용 등 모든 과정을 따라 해야 완성 예제의 결과를 얻을 수 있음을 다시 한번 알립니다.

편집기로 테마 루트 inc/image-functions.php 파일을 열어, 기존 코드에 이어 다음 코드를 추가합니다.

/**
 * 위도, 경도, 섬네일 이미지 경로, 이미지 포스트 URL 데이터를 배열로 저장
 * 원본 이미지의 가로, 세로 및 긴 축 데이터를 각 커스텀 필드를 생성하여 저장
 */

add_filter( 'wp_generate_attachment_metadata', 'add_custom_image_metadata_fields', 10, 2 );
function add_custom_image_metadata_fields( $metadata, $attachment_id ) {
    
    // 위도, 경도 데이터 및 조건에 따라 음의 기호를 추가
    
    // 가로, 세로 값 및 긴 축
    
}

7번 줄의 함수를 6번 줄의 wp_generate_attachment_metadata 훅으로 실행하는데, 함수에 적은 9번 줄과 11번 줄의 결과를 위해 하나씩 채워갑니다.

먼저 9번 줄 설명처럼 위도, 경도 데이터를 조건에 따라 음의 기호를 추가하여 저장해봅니다. 10번 줄에 다음 코드를 추가하여 워드프레스로 가져온 이미지의 메타 데이터에 ‘latitude’ 키가 존재할 때 위도와 경도 데이터를 저장하도록 조건을 둡니다.

if ( array_key_exists( 'latitude', $metadata['image_meta'] ) ) {
    
}

예제에서 다루는 이미지는 ‘그래픽 이미지’와 같은 보통 ‘사진’으로 부르는 이미지와 다른 이미지도 제공한다는 가정이며, 실제 ‘사진’에서도 위도와 경도 정보가 없는 경우가 있습니다. 또, 위도 정보가 있다면 경도 정보도 있다는 가정으로 하나의 조건만 정의합니다.

조건 사이에 다음 코드 2번 줄에서 7번 줄을 추가합니다. 이미지 메타 데이터의 위도와 경도 관련 데이터를 변수에 추가한 것으로 $metadata 변수의 각 배열 키는 연습장 페이지의 위도와 경도 데이터를 보면 금방 이해할 수 있습니다. 또, 6, 7번 줄처럼 간단한 조건으로 특정 값일 때 음의 기호를 추가한 값을 변수에 추가합니다.

if ( array_key_exists( 'latitude', $metadata['image_meta'] ) ) {
    $latitude = $metadata['image_meta']['latitude']; // 위도
    $latitude_ref = $metadata['image_meta']['latitude_ref']; // 위도의 북위 또는 남위
    $longitude = $metadata['image_meta']['longitude']; // 경도
    $longitude_ref = $metadata['image_meta']['longitude_ref']; // 경도의 동경 또는 서경
    ( $latitude_ref == 'S') ? $lat = -$latitude : $lat = $latitude; // 남위일 때 음의 기호 추가
    ( $longitude_ref == 'W') ? $lng = -$longitude : $lng = $longitude; // 서경일 때 음의 기호 추가
}

이제는 앞에서 잠깐 말한 섬네일 정보와 해당 이미지 싱글 포스트 퍼머링크(고유주소)를 얻기 위해 다음 9번에서 12번 줄의 코드를 추가합니다. 워드프레스 함수로 특정 포스트의 퍼머링크와 섬네일 URL을 쉽게 얻을 수 있습니다.

if ( array_key_exists( 'latitude', $metadata['image_meta'] ) ) {
    $latitude = $metadata['image_meta']['latitude']; // 위도
    $latitude_ref = $metadata['image_meta']['latitude_ref']; // 위도의 북위 또는 남위
    $longitude = $metadata['image_meta']['longitude']; // 경도
    $longitude_ref = $metadata['image_meta']['longitude_ref']; // 경도의 동경 또는 서경
    ( $latitude_ref == 'S') ? $lat = -$latitude : $lat = $latitude; // 남위일 때 음의 기호 추가
    ( $longitude_ref == 'W') ? $lng = -$longitude : $lng = $longitude; // 서경일 때 음의 기호 추가

    $post_url = get_permalink( $attachment_id ); // 싱글 이미지 포스트 페이지 퍼머링크
    $file_name = $metadata['sizes']['thumbnail']['file']; // 'thumbnail' 이미지 사이즈 파일 이름
    $upload_dir = wp_upload_dir(); // 워드프레스 업로드 경로
    $img_url = $upload_dir['baseurl'] . '/' . $file_name; // 섬네일 이미지 URL
}

앞의 코드에서 얻을 수 있는 데이터는 다음과 같습니다.

$lat // 위도, 지도 마커 표시
$lng // 경도, 지도 마커 표시
$post_url // 이미지 포스트 퍼머링크, 인포 윈도우 섬네일 클릭 시 이동 링크
$img_url // 이미지 URL, 지도 인포 윈도우에 섬네일 이미지 표시

워드프레스에 이미지를 올릴 때 앞의 4가지 데이터를 그 이미지 포스트의 새로운 커스텀 필드 하나에 배열로 저장하기 위해 다음 코드 14번 줄에서 20번 줄을 추가합니다.

if ( array_key_exists( 'latitude', $metadata['image_meta'] ) ) {
    $latitude = $metadata['image_meta']['latitude']; // 위도
    $latitude_ref = $metadata['image_meta']['latitude_ref']; // 위도의 북위 또는 남위
    $longitude = $metadata['image_meta']['longitude']; // 경도
    $longitude_ref = $metadata['image_meta']['longitude_ref']; // 경도의 동경 또는 서경
    ( $latitude_ref == 'S') ? $lat = -$latitude : $lat = $latitude; // 남위일 때 음의 기호 추가
    ( $longitude_ref == 'W') ? $lng = -$longitude : $lng = $longitude; // 서경일 때 음의 기호 추가

    $post_url = get_permalink( $attachment_id ); // 싱글 이미지 포스트 페이지 퍼머링크
    $file_name = $metadata['sizes']['thumbnail']['file']; // 'thumbnail' 이미지 사이즈 파일 이름
    $upload_dir = wp_upload_dir(); // 워드프레스 업로드 경로
    $img_url = $upload_dir['baseurl'] . '/' . $file_name; // 섬네일 이미지 URL

    $location = array(
        'lat' => $lat,
        'lng' => $lng,
        'post_url' => $post_url,
        'img_url' => $img_url
    );
    add_post_meta( $attachment_id, '_location', $location ); // 이미지는 한 번의 업로드 과정만 존재하므로 add_post_meta 함수로 충분
}

변수 $location의 배열 데이터를 ‘_location’ 필드에 추가하는 코드가 20번 줄입니다. 해당 줄에 남긴 설명처럼 이미지는 한 번 업로드하는 과정만 존재하므로 다른 조건은 필요가 없습니다. 따라서 커스텀 필드를 데이터와 추가하는 add_post_meta 함수면 충분합니다.

지금까지의 코드에 의한 결과는 잠깐 미루고, 계속해서 특정 메타 데이터를 커스텀 필드에 추가합니다.

검색을 위해 이미지 메타 데이터를 커스텀 필드에 추가

워드프레스 기본의 검색 기능은 워드프레스의 방대한 사용자 정의 시스템 제공에 비하면 조금 초라한 것은 사실입니다. 포스트의 내용이 중심인 워드프레스 웹사이트에서는 문제가 없지만, 커스텀 필드와 커스텀 분류 등의 메타 데이터 중심의 본격적인 ‘콘텐츠 관리 시스템’의 워드프레스에서는 기본 검색 기준으로는 부족합니다.

검색에 관한 실제 과정이 나중에 나오므로 그때 예제를 통해 경험하여 이해하는 것으로 정리합니다. 다만, 그때 검색 기능을 구성할 때 필요한 ‘검색 필드 및 조건’을 위해 지금 이미지를 올릴 때 이미지의 특정 정보가 커스텀 필드에 저장되도록 정의합니다. 특정 정보는 앞에서 말한 것처럼 이미지의 ‘가로와 세로 사이즈(픽셀)’, ‘긴 축’ 정보입니다.

‘긴 축’ 정보라는 것은, 가로와 세로 사이즈 값을 비교하여 가로 값이 크거나 가로와 세로의 값이 같을 때 ‘가로’, 세로가 크면 ‘세로’라는 텍스트 데이터를 커스텀 필드에 추가한다는 뜻입니다. 이해에 어려움이 있다면, 완성 예제의 검색 기능을 잠깐 둘러보거나 이어지는 과정과 결과로 이해를 더하세요.

다음 코드는 이미지 메타 데이터에서 원본 이미지 사이즈(이미지 사이즈 명칭 ‘full’)의 가로와 세로의 값 및 긴 축 정보를 3개의 커스텀 필드를 생성하여 저장하는 코드입니다. 간단하므로 설명은 생략합니다.

$pic_width = $metadata['width'];
$pic_height = $metadata['height'];
$pic_axis = ( $pic_width >= $pic_height ) ? '가로' : '세로';

add_post_meta( $attachment_id, 'pic_width', $pic_width );
add_post_meta( $attachment_id, 'pic_height', $pic_height );
add_post_meta( $attachment_id, 'pic_axis', $pic_axis );

이 코드의 결과는 이어지는 안내로 확인하지만, 목적은 나중에 구성할 워드프레스 ‘검색 조건’을 위한 것임을 다시 알립니다.

다음 코드는 이번 장에서 진행한 전체 코드입니다.

/**
 * 위도, 경도, 섬네일 이미지 경로, 이미지 포스트 URL 데이터를 배열로 저장
 * 원본 이미지의 가로, 세로 및 긴 축 데이터를 각 커스텀 필드를 생성하여 저장
 */

add_filter( 'wp_generate_attachment_metadata', 'add_custom_image_metadata_fields', 10, 2 );
function add_custom_image_metadata_fields( $metadata, $attachment_id ) {

    // 위도, 경도 데이터를 조건에 따라 음의 기호를 추가
    if ( array_key_exists( 'latitude', $metadata['image_meta'] ) ) {
        $latitude = $metadata['image_meta']['latitude']; // 위도
        $latitude_ref = $metadata['image_meta']['latitude_ref']; // 위도의 북위 또는 남위
        $longitude = $metadata['image_meta']['longitude']; // 경도
        $longitude_ref = $metadata['image_meta']['longitude_ref']; // 경도의 동경 또는 서경
        ( $latitude_ref == 'S') ? $lat = -$latitude : $lat = $latitude; // 남위일 때 음의 기호 추가
        ( $longitude_ref == 'W') ? $lng = -$longitude : $lng = $longitude; // 서경일 때 음의 기호 추가

        $post_url = get_permalink( $attachment_id ); // 싱글 이미지 포스트 페이지 퍼머링크
        $file_name = $metadata['sizes']['thumbnail']['file']; // 'thumbnail' 이미지 사이즈 파일 이름
        $upload_dir = wp_upload_dir(); // 워드프레스 업로드 경로
        $img_url = $upload_dir['baseurl'] . '/' . $file_name; // 섬네일 이미지 URL

        $location = array(
            'lat' => $lat,
            'lng' => $lng,
            'post_url' => $post_url,
            'img_url' => $img_url
        );
        add_post_meta( $attachment_id, '_location', $location ); // 이미지는 한 번의 업로드 과정만 존재하므로 add_post_meta 함수로 충분
    }

    // 가로, 세로 값 및 긴 축
    $pic_width = $metadata['width'];
    $pic_height = $metadata['height'];
    $pic_axis = ( $pic_width >= $pic_height ) ? '가로' : '세로';

    add_post_meta( $attachment_id, 'pic_width', $pic_width );
    add_post_meta( $attachment_id, 'pic_height', $pic_height );
    add_post_meta( $attachment_id, 'pic_axis', $pic_axis );

    return $metadata; // 반드시 추가
}

워드프레스에서 이미지를 올릴 때 실행하는 훅 등의 기본 과정에 의해 원본 이미지의 메타 데이터를 워드프레스의 메타 데이터로 변환하여 저장한다고 이미 말했습니다. 예제에서는 이 훅의 단계를 이용하여 훅에서 전달하고 저장하는 특정 메타 데이터를 새로운 커스텀 필드에 특정 유형으로 저장하였습니다.

이때 사용자가 추가하는 메타 데이터 저장 과정이 훅에서 처리하는 기본의 데이터 처리 과정을 중단해서는 안 됩니다. 코드 전체에서 $metadata 변수가 이미지의 모든 메타 데이터를 가지고 있으므로 앞의 코드 41번 줄이 반드시 있어야 합니다. 이 줄의 코드가 없으면 _wp_attachment_metadata 필드에 데이터가 저장되지 않습니다. 앞 장의 원본 이미지 GPS 데이터를 워드프레스 데이터로 저장하는 과정의 코드도 마찬가지입니다. 한편, 41번 줄이 없어도 추가한 4개의 커스텀 필드와 데이터는 추가 및 저장됩니다.

생활의 용어로 조금 더 설명하면, 지금 예제의 과정에 의한 커스텀 필드와 메타 데이터 추가는 어떤 흐름에 ‘편승’하여 약간의 편리를 취하는 것으로 생각하면 됩니다. 또는 서울에서 부산으로 가는 손님이 있는 택시에 중간에 ‘합승’하여 대전에서 내리는 것과 같습니다. 그래도 택시는 부산에 갈 것입니다.

워드프레스 훅의 사용에 관한 내용은 여러 예시나 예제의 반복 경험으로 이해하는 것이 효율적이다는 것으로 정리하며, 코드의 결과를 확인해봅니다.

연습장 파일을 열어 기존에 추가된 코드에서 다음의 1번 줄 코드 다음에 2번 줄에서 5번 줄의 코드를 추가하고 저장합니다.

echo '<pre>' . print_r( $meta, true ) . '</pre>'; // 이 줄 다음에 추가하세요
echo '<pre>' . print_r( get_post_meta($attach_id, '_location', true), true) . '</pre>';
echo '가로: ' . get_post_meta($attach_id, 'pic_width', true) . '<br>';
echo '세로: ' . get_post_meta($attach_id, 'pic_height', true) . '<br>';
echo '긴 축: ' . get_post_meta($attach_id, 'pic_axis', true) . '<br>';

다음으로 관리페이지 미디어 라이브러리 목록에서 기존의 이미지를 모두 지우고, 제공한 이미지 3개를 모두 업로드합니다. 그리고 사이트에서 연습장 페이지를 새로 고쳐 페이지 아래의 결과 데이터를 확인합니다.

포스트 제목이 ‘달나라 여행’인 이미지 포스트의 결과만 나열하면 다음과 같습니다.

Array
(
    [lat] => 66.231457480008
    [lng] => -156.26953125
    [post_url] => http://localhost/%eb%8b%ac%eb%82%98%eb%9d%bc-%ec%97%ac%ed%96%89
    [img_url] => http://localhost/wp-content/uploads/with_title_caption-150x150.jpg
)

가로: 4288
세로: 2848
긴 축: 가로

배열 데이터에서 ‘lng’ 키 데이터의 음수 기호, 섬네일 이미지 URL, 가로와 세로의 값 비교에 의한 ‘긴 축’ 데이터를 확인할 수 있습니다. 포스트 제목이 ‘세로가 긴 이미지’ 이미지 포스트의 결과를 확인하여 ‘긴 축’ 필드 데이터가 ‘세로’로 나오는지 확인하세요.

결과 확인으로 이번 과정을 마치고, 다음의 링크가 있는 제목을 클릭하여 현재 과정에서 변경된 파일을 받아 테마 루트에 덮어쓰세요. 사용하는 PC 애플리케이션 편집기마다 열린 파일의 변경에 관한 처리 방식이 다를 수 있으므로 새로운 파일로 변경하기 전에 편집기에 열린 파일은 저장 후 모두 닫는 것이 좋습니다. 덧붙여, 연습장 파일에 추가하는 코드는 지우는 안내가 없다면 직전의 코드를 계속 유지해야 합니다.

다음 장에서는 attachment 타입에 사용할 커스텀 분류(Custom Taxonomies)를 등록합니다. 예제에서는 4개의 분류를 추가합니다.