이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

커스텀 분류를 정의하여 워드프레스 attachment 포스트 타입에 사용하는 방법을 앞 장에서 살펴봤습니다. 이미지를 업로드하고 미디어 편집 화면에서 이미지 성질에 맞는 분류를 선택 또는 추가한 다음 선택 후 이미지 포스트를 저장하면 됩니다. 이때 많은 이미지를 한꺼번에 올린다면 각 이미지 포스트의 분류를 일일이 선택하고 저장하는 것은 아주 번거로운 일임은 생각만 해도 가늠할 수 있습니다. 분류만이 아니라 이미지 포스트의 ‘캡션’, ‘대체 텍스트’, ‘설명’ 필드의 데이터도 마찬가지입니다. 물론 ‘캡션’은 원본 이미지에 해당 데이터가 있다면 워드프레스가 자동으로 가져오므로 제외할 수 있습니다.

이처럼 한꺼번에 많은 이미지를 올릴 때는 워드프레스의 각 데이터 필드와 분류에 지정한 데이터가 자동으로 저장되도록 처리하여 편리를 도모해야 할 필요가 있습니다. 실제 예가 바로 지금 구성하는 예제인데, 나중에 메타 데이터를 추가한 391장의 원본 이미지를 한꺼번에 업로드합니다. 또, 자동으로 특정 필드에 데이터를 저장한다 해도 일부는 편집이 가능하게, 일부는 편집 내용이 업데이트되지 않도록 제어할 필요가 있습니다. 이와 같은 작업을 이번 장에서 진행합니다.

이번 장에서 초점을 둘 사항은 워드프레스의 함수나 훅 등의 프로그램적 내용보다 사이트를 구성하는 방향을 이해하는 것인데, 결론은 구성하는 사람의 판단입니다. 주어진 데이터를 어떻게 사용할 것이며, 워드프레스의 데이터로 저장하기 전 원본 데이터(이미지)를 어떻게 가공하여 효율을 도모할 것인가를 먼저 생각한 후 최종적으로 워드프레스 시스템에 적용하는 사전 계획이 중요합니다. 따라서 이번 장은 필자의 설명으로 안내하고, 과정의 완성 파일을 제공하는 것으로 정리합니다.

이미지의 메타 데이터를 워드프레스 분류로 등록하고 이미지 포스트에 그 분류를 연결

사이트에서 연습장 페이지를 보면 5개 이미지 포스트 모두 다음과 같은 데이터를 가진 것을 확인할 수 있습니다. 원본 이미지의 EXIF ‘caption’ 필드에 있는 데이터가 워드프레스의 이미지 메타 데이터로 저장된 것입니다. 물론 원본 이미지의 EXIF 데이터는 필자가 모두 편집하여 제공한다는 것을 이미 알렸습니다.

[caption] => 사진,취미
[caption] => 사진,음악
[caption] => 그래픽,건축
[caption] => 일러스트,배경
[caption] => 사진,식물

필자가 원본 이미지의 EXIF ‘caption’ 데이터를 위와 같이 편집한 이유는 다음과 같습니다.

• 원본 이미지를 워드프레스에 업로드할 때, 원본 이미지의 EXIF caption 필드의 데이터에서 쉼표(comma)로 구분한 텍스트 데이터 중 첫 번째는 ‘medaicat’ 분류의 term으로 등록하고, 해당 이미지 포스트의 term으로도 설정
• 두 번째 텍스트 테이터는 ‘photocat’ 분류의 term으로 등록하고, 해당 이미지 포스트의 term으로도 설정

위의 내용은 다음의 코드로 정리할 수 있습니다.

$caption = $metadata['image_meta']['caption'];
if ( $caption ) {
    $_caption_arr = explode( ',', $caption );
    $key_first = $_caption_arr[0]; // mediacat term
    $key_second = $_caption_arr[1]; // photocat term
    wp_set_object_terms( $attachment_id, $key_first, 'mediacat' );
    wp_set_object_terms( $attachment_id, $key_second, 'photocat' );
}

2번 줄의 조건, 워드프레스에 가져온 원본 이미지의 ‘caption’ 데이터가 존재할 때를 기준으로 3번 줄에서 쉼표로 구분한 데이터를 배열 데이터로 나눈 후 4, 5번 줄에서 순서대로 구분합니다. 물론, 따로 구분한 변수를 사용하지 않아도 됩니다.

6, 7번 줄의 wp_set_object_terms 함수를 사용하여, 6번 줄에서는 해당 ID의 이미지 포스트를 ‘mediacat’ 분류의 $key_first term에 연결하고, 7번 줄에서는 해당 ID의 이미지 포스트를 ‘photocat’ 분류의 $key_second term에 연결합니다.

이때 $key_first, $key_second term이 존재하지 않는다면 ‘추가하고 연결’, 존재한다면 ‘추가하지 않고 연결’하는데, 그 기능을 wp_set_object_terms 함수가 처리합니다.

코드를 추가하여 직접 확인하는 것으로 정리합니다. 편집기로 테마 루트 inc/image-functions.php 파일을 열어, 110번 줄 위에 앞의 8줄 코드를 추가하고 저장합니다.

관리페이지 미디어 라이브러리에 있는 모든 이미지를 삭제하고, 다시 앞에서 제공한 5개의 이미지를 업로드합니다. 다시, 관리페이지 미디어 라이브러리 목록을 확인하여 다음 그림처럼 ‘미디어분류’, ‘2차분류’ 열에 term이 나오는지 확인합니다.

이번에는 관리페이지 미디어 하위 메뉴 ‘미디어분류’ 메뉴를 클릭하여 다음 그림처럼 나오는지 확인합니다. 특히 ‘카운트’ 열의 개수를 확인하세요.

다시, 관리페이지 미디어 하위 메뉴 ‘2차분류’ 메뉴를 클릭하고 다음 그림과 결과가 같은지 확인합니다.

마지막으로 업로드 이미지 중 하나만 선택하는데, ‘멕시코에서’ 제목의 이미지 포스트 편집 화면에 접근하여 다음 그림처럼 분류 메타박스에 선택된 term을 확인합니다.

올바른 위치에 코드를 추가했고, 지금까지의 예제 과정을 모두 따라 했다면 같은 결과가 나왔을 것입니다.

이번에는 나머지 2개 ‘phototag’, ‘cameracat’ 분류에 관하여 앞의 과정을 반복합니다. 다음 코드를 직전에 추가한 코드 다음, 혹시 헷갈린다면 테마 루트 inc/image-functions.php 파일에 있는 다음 코드 13번 줄 위에 1번에서 11번 줄의 코드를 추가하고 저장합니다.

// cameracat
$camera = $metadata['image_meta']['camera'];
if ( $camera ) {
    wp_set_object_terms( $attachment_id, $camera, 'cameracat' );
}

// phototag
$phototags = $metadata['image_meta']['keywords'];
if ( $phototags ) {
    wp_set_object_terms( $attachment_id, $phototags, 'phototag' );
}

return $metadata; // 이 줄 위의 코드만 추가

다음으로 관리페이지 미디어 라이브러리 목록의 모든 이미지를 삭제합니다. 그리고 미디어 하위 ‘미디어분류’ 메뉴를 클릭하여 다음 그림처럼 term은 그대로지만, 카운트 열의 개수가 ‘0’으로 나오는 것을 확인합니다.

연결된 포스트를 삭제해도 추가된 term은 삭제되지 않는다는 것, 지난 과정에서 정의한 term 카운트 업데이트가 올바르게 처리되는지 확인한 것입니다. ‘2차분류’도 마찬가지인데, 원한다면 확인해도 됩니다.

다시 관리페이지 미디어 하위 ‘파일 올리기’ 메뉴를 클릭하여, 제공한 이미지 5개를 모두 업로드합니다. 그리고 미디어 라이브러리 목록을 확인하여 다음 그림처럼 나오는지 확인합니다.

카메라 열에 데이터(term)가 없는 경우는 원본 이미지에 카메라 데이터가 없어서 워드프레스 이미지 메타 데이터로 저장하지 않았기에 term으로 등록 및 연결되지 않은 것입니다. 필자가 추가하지 않은 것인데, 미디어 분류에서 ‘그래픽’, ‘일러스트’ term은 촬영 카메라 정보가 없다는 보통의 기준을 정한 것입니다. 간단하게, 데이터가 있으면 추가, 없으면 추가하지 않는다고 생각하면 됩니다.

‘미디어태그(phototag)’ 열을 보면 쉼표로 구분하여 여러 term이 생성되고 연결된 것을 볼 수 있습니다. 연습장 페이지의 데이터에서 보는 것처럼 ‘keywords’ 데이터는 배열 데이터로 존재합니다. 앞의 추가 코드에서 ‘photocat’ 부분을 보면 코드에서 다른 처리 과정없이 10번 줄의 함수만 사용했는데도 워드프레스에서 개별 term으로 저장하고 연결한 결과를 통해 해당 함수의 배열 데이터 처리 속성을 확인할 수 있습니다.

다음으로 관리페이지 미디어 하위 ‘미디어분류’, ‘2차분류’, ‘미디어태그’, ‘카메라’ 메뉴를 클릭하여 결과를 확인하세요. 그림은 없지만 하나만 덧붙이면, ‘미디어분류’에서 카운트 열의 개수만 변경되고, term은 그대로 존재할 것입니다. 이것으로 wp_set_object_terms 함수가 term이 존재하면 연결만, 존재하지 않는다면 생성하고 연결한다는 것을 확인할 수 있습니다.

다음 그림은 제목 ‘멕시코에서’ 이미지 포스트의 편집 화면으로, 4개의 분류 메타박스에 term이 추가된 것을 볼 수 있습니다. 나중의 과정에서 ‘카메라(cameracat)’ 분류의 term은 관리자를 제외한 사용자는 추가, 삭제, 편집을 제한할 것입니다. 또, ‘미디어분류’와 ‘2차분류’는 ‘선택 변경’은 가능하지만, ‘term 추가’는 제한합니다. 물론 관리자는 제외합니다.

결과를 확인한 것으로 분류와 관련한 작업은 정리하는데, 위의 그림을 보고 다음의 내용을 이번 장이 끝날 때까지 기억하기 바랍니다.

• ‘캡션’에 추가된 데이터는 분류 term으로 활용하기 위해 원본 이미지를 편집하여 제공한 데이터가 워드프레스 이미지 메타 데이터로 저장되고, 다시 이미지 포스트의 데이터(post_excerpt)로 저장된 것으로 현재는 ‘미디어분류’와 ‘2차분류’의 각 term과 같음
• ‘대체 텍스트’, ‘설명’ 필드에는 현재 데이터가 없음

다음 과정을 진행하기 전에 이번 장에서 추가한 코드를 포함하여 이번 장에서 완성할 모든 코드를 추가하여 변경한 파일을 제공합니다. 먼저, 편집기에 열린 image-functions.php 파일을 닫고 다음 파일을 받아 압축을 푼 후 테마 루트에 덮어쓰세요. 이 파일을 받아 테마 루트에 반드시 덮어써야 합니다.

파일을 받고 덮어쓴 후 다시 테마 루트 inc/image-functins.php 파일을 엽니다. 앞에서 추가한 코드는 현재 열려 있는 파일 108번 줄 위에 추가하라고 안내하였지만, 116번 줄에서 147번 줄 사이에 앞에서 진행한 코드가 있는 것을 볼 수 있습니다. 설명하지 않은 추가 코드도 있습니다.

정리하면 앞에서는 다음 코드의 3번 줄에 필요한 코드를 추가하여 결과를 확인하였고, 새로 제공한 파일에는 8번 줄에 앞에서 추가한 코드가 있다는 뜻입니다.

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

add_filter( 'wp_update_attachment_metadata', 'image_meta_update', 10, 2 );
function image_meta_update( $metadata, $attachment_id ) {
    //
}

워드프레스에 이미지를 등록할 때 1번 줄의 wp_generate_attachment_metadata 훅 단계에서 워드프레스 데이터로 변환하여 6번 줄의 wp_update_attachment_metadata 훅 단계에서 저장된다는 것을 이미 안내한 바 있습니다.

위의 3번 줄에 추가하여 1번 줄 훅 단계에서 원하는 결과를 얻을 수 있음을 조금 전에 확인하였습니다. 또, 8번 줄에 추가하여 6번 줄의 훅 단계에서도 원하는 결과를 얻을 수 있습니다. 2개의 훅은 워드프레스에서 함께 사용되는 연결 훅으로 ‘메타 데이터’와 ‘포스트 ID’를 인자를 사용하므로 꼭 실제 테스트를 거치지 않아도 원하는 결과를 얻을 수 있음을 짐작할 수 있습니다. 제공한 파일에서 분리한 이유는 단순하게 필터 훅 하나를 더 추가하여 ‘구분’하여 안내하는 데 목적을 둔 것입니다.

이미지 등록 과정에서 이미지 포스트 필드 데이터 업데이트

편집기에 열린 파일 118번 줄에서 144번 줄의 코드를 안내에 필요한 부분만 뽑으면 다음과 같습니다.

$title = $metadata['image_meta']['title'];
$caption = $metadata['image_meta']['caption'];
if ( $caption ) {
    wp_update_post( array( 'ID' => $attachment_id, 'post_excerpt' => $title ) );
}

// phototag
$phototags = $metadata['image_meta']['keywords'];
if ( $phototags ) {
    $image_alt = implode( ', ', $phototags );
    update_post_meta( $attachment_id, '_wp_attachment_image_alt', $image_alt );
    wp_update_post( array( 'ID' => $attachment_id, 'post_content' => $image_alt ) );
}

캡션 데이터 업데이트

워드프레스에서 이미지를 올릴 때 원본 이미지 EXIF 또는 IPTC 메타 데이터 필드 ‘title’에 데이터가 있으면, 워드프레스는 그 데이터를 이미지 포스트 제목(post_title)과 이미지 메타 데이터(_wp_attachment_metadata)의 배열 데이터에도 추가한다고 이미 여러 번 안내하였습니다. 1번 줄에서 그 이미지 메타 데이터(title)를 얻어, 이미지 메타 데이터에 ‘caption’ 데이터가 있으면 4번 줄에서 그 메타 데이터(title)를 ‘post_excerpt’ 필드, 즉 ‘캡션’ 데이터로 저장하는 코드입니다.

편집기에 열린 파일에 간단한 설명을 덧붙였는데, 이미지 포스트의 특정 분류 term으로 활용한 다음에는 캡션에 해당 데이터를 그대로 둘 필요가 없으므로 다른 데이터로 업데이트한 것입니다. 혹시 혼동할 분을 위해 덧붙이면, 이미지 포스트의 캡션 데이터는 데이터베이스 ‘_posts’ 테이블의 ‘post_excerpt’ 필드에 저장되는 데이터이므로 wp_update_post 함수를 사용했으며, 이미지 포스트의 이미지 메타 데이터가 저장되는 ‘_postmeta’ 테이블의 ‘_wp_attachment_metadata’ 필드 데이터는 변경되지 않습니다.

대체 텍스트 및 설명 데이터 업데이트

앞의 코드 8번 줄의 변수에는 배열 형태의 ‘keywords’ 이미지 메타 데이터가 있습니다. 10번 줄에서 그 배열 데이터를 쉼표로 구분한 단일 텍스트로 변경합니다. 텍스트로 변경한 데이터를 11번 줄에서 이미지 포스트의 ‘대체 텍스트(alt)’에 저장합니다. 이미지 포스트의 대체 텍스트는 데이터베이스 ‘_postmeta’ 테이블의 ‘_wp_attachment_image_alt’ 필드에 저장되므로 update_post_meta 함수를 사용하였습니다.

또, 텍스트로 변경한 데이터를 ‘설명’ 필드에도 저장하는데, 이것은 데이터베이스 ‘_posts’ 테이블의 ‘post_content’ 필드에 저장되므로 wp_update_post 함수를 사용했습니다.

이미지를 다시 업로드하여 변경 사항을 확인하여 이해를 더합니다. 앞에서 제목 ‘멕시코에서’ 이미지 포스트 편집 화면의 ‘캡션’, ‘대체 텍스트’, ‘설명’ 필드의 데이터에 주목할 것을 안내하였습니다. 지금 다시 어떤 데이터가 있는지 확인합니다.

다음으로 미디어 라이브러리 목록에서 5개의 이미지를 모두 삭제한 후, 다시 5개의 이미지를 업로드합니다. 그리고 제목 ‘멕시코에서’ 이미지 포스트 편집 화면에 접근하여 다음 그림처럼 나오는지 확인하세요.

캡션은 이미지 메타 데이터 ‘title’ 데이터와 같은 ‘멕시코에서’ 데이터로 변경되었고, 대체 텍스트와 설명 필드에는 미디어태그(phototag) 분류의 term이 쉼표로 구분한 텍스트로 저장된 것을 볼 수 있습니다. 이 term 데이터는 ‘term name’이며, 오른쪽 미디어태그 메타박스에 있는 출력 데이터와 같습니다. 다른 이미지의 편집 화면에도 접근하여 결과를 확인해보세요.

여기서 대체 텍스트에 데이터를 추가한 것은 이미지의 ‘alt’ 속성을 따로 추가하는 번거로움을 제거하여, 사이트에 이미지와 속성을 출력할 코드를 작성할 때 효율을 도모하기 위해 처리한 것입니다.

설명 필드에 term 데이터를 추가한 것은 나중의 과정에서 진행할 검색을 위한 것으로, 워드프레스의 기본 검색 필드인 ‘post_content’에 데이터를 추가하여 해당 이미지 포스트 검색이 가능하도록 한 것입니다. 쉼표로 구분했지만, 텍스트 term 데이터를 ‘post_content’ 필드에 저장함으로써 ‘like’ 검색이 가능하다는 것과 이미지 중심의 콘텐츠 검색어는 단일 키워드일 가능성이 크다는 기준으로 제한이 없는 미디어태그(phototag) 분류의 term 데이터를 저장한 것입니다.

이것으로 사이트 싱글 이미지 페이지 구성을 위한 준비 과정은 끝입니다. 그러나 실제로는 예제 사이트의 콘텐츠 등록에 관한 모든 과정의 끝이라고 말할 수 있습니다. 이미지 콘텐츠 중심의 사이트에서 다룰 데이터를 원본 이미지 업로드 과정에서 가공하여 데이터베이스에 모두 저장했기 때문입니다. 다음 장부터 이어서 안내하는 내용은 저장된 데이터를 출력, 제어, 관리하는 부분이 전부입니다.