워드프레스8

워드프레스 이미지 메타 데이터

시리즈고품격 고품질 워드프레스 무료 사진 저장소완결2

워드프레스 템플릿 구조에 맞춰 image.php 파일을 만들어 그 파일을 이미지 포스트를 출력하는 템플릿 파일로 앞 장에서 구성하였습니다. 지금부터는 하나의 이미지가 가진 ‘워드프레스 메타 데이터’를 이미지 포스트에 직접 출력하거나 활용하여 완전한 싱글 이미지 포스트 페이지를 구성합니다. 예제의 모든 과정에서 가장 핵심이자 ‘모든 것’이라고 말할 수 있습니다. 그러나, 이번 장에서는 ‘원본 이미지가 가진 메타 데이터’를 워드프레스가 어떻게 변환하여 저장하는지를 먼저 알아봅니다.

원본 이미지의 메타 데이터에 제목과 캡션이 없을 때

지금까지 과정을 그대로 따라 했다면 지금 예제 사이트에는 ‘no_title_caption.jpg’ 이미지 파일 하나만 존재합니다. 이 이미지는 필자가 원본 이미지 메타 데이터를 편집하여 제공한 것임을 앞에서 알렸는데, 제목과 캡션 데이터는 추가하지 않은 이미지입니다.

이 기준을 기억하고, 연습장 파일을 열어 기존에 추가한 코드가 있다면 모두 지운 후 다음 코드를 추가하고 저장하여 사이트에서 연습장 페이지를 확인합니다. 혹시 코드 추가 위치를 혼동하는 분을 위해 1번 줄과 27번 줄을 포함하였는데, 사이에 추가하면 됩니다.

// 여기서

echo '<style>table#_table td{vertical-align:top}</style>';
$arg = array(
    'post_type' => 'attachment',
    'posts_per_page' => -1,
    'post_parent' => 0,
    //'post_status' => 'inherit',
    //'post_mime_type' => 'image/jpeg'
);
$img_query = get_posts( $arg );

echo '<table id="_table"><tr>';
foreach( $img_query as $img ) {
    $attach_id = $img->ID;
    $meta = wp_get_attachment_metadata( $attach_id );
    echo '<td>';
    echo wp_get_attachment_image( $attach_id, 'thumbnail' ) . '<br>';
    echo '이미지 이름: ' . get_post_meta( $attach_id, '_wp_attached_file', true ) . '<br>';
    echo '포스트 제목: ' . get_the_title( $attach_id ) . '<br>';
    echo '캡션: ' . get_post_field( 'post_excerpt', $attach_id ) . '<br>';
    echo '<pre>' . print_r( $meta, true ) . '</pre>';
    echo '</td>';
}
echo '</tr></table>';

// 여기 사이에

앞의 코드는 attachment 포스트 타입만 가져와 그 포스트의 메타 데이터를 출력한 것입니다. 여러 파일 유형(MIME-Type)이 존재한다면 9번 줄을 활성화하고 원하는 유형을 설정하면 되지만, 예제에서 attachment 타입 유형은 ‘이미지’, 그중 ‘jpg’만 존재하므로 사용하지 않아도 됩니다.

이미지 파일 이름과 예제의 도메인 등 기본 요소는 필자와 같지만, 고유 ID는 다를 수 있으므로 워드프레스 쿼리 함수와 간단한 루프로 워드프레스에 저장된 이미지의 메타 데이터를 출력한 것이며, 지금 과정에서는 image.php 파일 또는 그 파일에 인클루드한 파일 어떤 곳에서도 해당 이미지의 메타 데이터를 출력할 수 있습니다. 그러나, 나중에 다시 나오므로 지금 앞의 코드는 염두에 두지 않습니다.

연습장 페이지를 보면 ‘이미지’, ‘이미지 이름’, ‘포스트 제목’, ‘캡션’, ‘워드프레스에 저장된 이미지 (포스트) 메타 데이터’를 볼 수 있습니다. 물론, 캡션 데이터는 없으므로 나오지 않습니다. 따로 결과를 안내하지 않으니 연습장 페이지의 결과를 직접 확인하세요.

여기서 확인할 사항은 포스트 제목 ‘no_title_caption’인데, 이미지 파일 이름과 같습니다. 그리고 연습장 페이지 결과에서 다음의 ‘image_meta’ 키 배열 데이터 중 12번 줄의 ‘title’ 데이터를 보면 값이 없음을 볼 수 있습니다. 데이터 중 일부만 가져온 것입니다.

[image_meta] => Array
    (
        [aperture] => 3.2
        [credit] => 
        [camera] => Canon PowerShot S5 IS
        [caption] => 
        [created_timestamp] => 1348654342
        [copyright] => 
        [focal_length] => 6
        [iso] => 80
        [shutter_speed] => 0.000625
        [title] => 
        [orientation] => 1

‘image_meta’ 키의 배열 데이터는 원본 이미지의 메타 데이터, 즉 EXIF 또는 IPTC 필드 데이터 중 워드프레스가 가져와 저장한 데이터입니다.

간단하게 정리하면, 원본 이미지의 메타 데이터 중에 ‘title’ 데이터가 없으면 워드프레스는 파일 이름을 이미지(또는 모든 첨부 파일) 포스트의 제목(post_title)으로 저장합니다. 마찬가지로 원본 이미지의 데이터 중 ‘caption’ 데이터가 있을 때만 워드프레스는 그 캡션 데이터를 이미지 포스트의 캡션(post_excerpt)으로 저장합니다. 또, 워드프레스가 이러한 기준으로 제목과 캡션 데이터를 정한다 해도 미디어 편집 화면에서 언제든지 수정 가능한데, 사용자의 의도로 최종 데이터를 정할 수 있다는 뜻입니다.

관리페이지에서 현재 이미지의 편집 화면에 접근하면 제목에는 파일 이름이, 캡션 필드에는 데이터가 없는 것을 확인할 수 있지만, 연습장 페이지에서 쿼리로 더 자세하게 이미 확인하였으므로 꼭 봐야겠다는 분만 직접 확인하면 됩니다.

제목과 캡션 메타 데이터가 있는 원본 이미지

이번에는 제공한 사진파일 중 ‘with_title_caption.jpg’, ‘vertical_with_title_caption.jpg’ 2개의 파일을 관리페이지 미디어 업로드(파일 올리기) 메뉴를 통해 직접 올려봅니다. 아주 간단한 작업이므로 따로 안내하지 않고, 올린 후 연습장 페이지에서 결과를 확인합니다.

지금 올린 2개의 파일은 원본 이미지 메타 데이터에 ‘title’과 ‘caption’ 데이터를 모두 추가하여 제공한 것으로, 워드프레스가 이 데이터를 2개의 파일 각각의 이미지 포스트의 제목(post_title)과 포스트의 캡션(post_excerpt) 데이터로 저장하며, ‘image_meta’ 배열 데이터에도 저장합니다. 연습장 페이지에도 결과로 나타날 것입니다. 앞의 과정처럼 이미지 메타 데이터 출력 결과를 둘러보면 금방 이해할 수 있습니다.

워드프레스가 저장하는 원본 이미지의 메타 데이터

앞에서 ‘워드프레스에 저장된 이미지의 메타 데이터’라는 것은 예제에서, 연습 파일에 추가한 wp_get_attachment_image 함수에 의해 출력한 데이터베이스 ‘_postmeta’ 테이블 ‘_wp_attachment_metadata’ 필드의 배열 데이터를 말합니다. 연습장 페이지에서 배열로 출력한 모든 데이터입니다.

다시, ‘워드프레스가 저장하는 원본 이미지의 메타 데이터’는 연습장 페이지에 배열로 출력한 모든 데이터 중 ‘image_meta’ 키에 속한 모든 데이터를 말합니다. ‘image_meta’ 배열 데이터는 보통 디지털카메라로 촬영한, 메타 데이터가 있는 이미지를 워드프레스에 등록할 때 워드프레스가 정한 기준의 이미지 메타 데이터만 가져와 저장합니다. 쉽게, 원본 이미지의 특정 메타 데이터만 가져와 저장한다는 뜻입니다.

이미지 포스트의 메타 데이터

다음 데이터는 연습장 페이지에 출력된 파일 이름이 ‘with_title_caption.jpg’, 제목이 ‘달나라 여행’인 이미지 포스트1의 메타 데이터입니다.

Array
(
    [width] => 4288
    [height] => 2848
    [file] => with_title_caption.jpg
    [sizes] => Array
        (
            [thumbnail] => Array
                (
                    [file] => with_title_caption-150x150.jpg
                    [width] => 150
                    [height] => 150
                    [mime-type] => image/jpeg
                )

            [medium] => Array
                (
                    [file] => with_title_caption-602x400.jpg
                    [width] => 602
                    [height] => 400
                    [mime-type] => image/jpeg
                )

            [medium_large] => Array
                (
                    [file] => with_title_caption-965x641.jpg
                    [width] => 965
                    [height] => 641
                    [mime-type] => image/jpeg
                )

            [large] => Array
                (
                    [file] => with_title_caption-1280x850.jpg
                    [width] => 1280
                    [height] => 850
                    [mime-type] => image/jpeg
                )

            [large_second] => Array
                (
                    [file] => with_title_caption-1920x1275.jpg
                    [width] => 1920
                    [height] => 1275
                    [mime-type] => image/jpeg
                )

        )

    [image_meta] => Array
        (
            [aperture] => 9
            [credit] => 
            [camera] => NIKON D90
            [caption] => 이것은 캡션입니다
            [created_timestamp] => 1323715645
            [copyright] => 
            [focal_length] => 18
            [iso] => 1600
            [shutter_speed] => 30
            [title] => 달나라 여행
            [orientation] => 1
            [keywords] => Array
                (
                    [0] => 검은
                    [1] => 노란
                    [2] => 밤
                    [3] => 별
                    [4] => 어두운
                    [5] => 텐트
                    [6] => 하늘
                )

        )

)

3번 줄에서 5번 줄은 원본 이미지의 가로, 세로, 파일 이름 정보입니다. 6번 줄 ‘sizes’ 키 하위에 있는 데이터는 앞에서 살펴본 이미지 사이즈 명칭별 ‘생성 파일 이름’, ‘가로’, ‘세로’ 정보입니다. 금방 이해할 것으로 생각합니다.

50번 줄 ‘image_meta’ 하위 데이터의 다음 필드(배열 키)가 앞에서 말한 ‘워드프레스가 원본 이미지에서 가져오는 특정 메타 데이터’입니다.

aperture, credit, camera, caption, created_timestamp, copyright, focal_length, iso, shutter_speed, title, orientation, keywords

디지털카메라에 따라 다르지만, ‘title’, ‘caption’, ‘keywords’ 정보는 원본 이미지에 저장되지 않는 경우가 보통일 것으로 생각합니다. 나중에 제공하는 예제의 391개 이미지는 모두 이 3가지 정보를 추가하여 제공하는데, 특히 ‘keyword’ 데이터는 워드프레스 이미지 포스트의 ‘분류(Custom Taxonomy)’의 하나로 사용합니다.

또 다른 원본 이미지의 메타 데이터

간략하게 살펴본 ‘워드프레스가 가져오는 원본 이미지의 메타 데이터’는 워드프레스 기준에 따라 원본 이미지의 특정 메타 데이터만 가져온다고 했는데, 그것은 원본 이미지에 워드프레스가 가져오지 않는 다른 메타 데이터가 있다는 뜻과 말할 필요도 없이 같습니다.

그렇다면, 원본 이미지의 또 다른 메타 데이터를 워드프레스 이미지로 등록할 때 가져와 ‘워드프레스 이미지 포스트의 메타 데이터’로 저장하여 활용할 수 있는 가능성도 있을 것입니다. 이 또 다른 메타 데이터 중 ‘사진 촬영 위치’ 메타 데이터를 워드프레스의 이미지 포스트 메타 데이터로 등록하는 방법을 다음 장에서 알아봅니다.

목차

0. 개요

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

3. 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

7. 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

9. 워드프레스 이미지 파일 제어

10. 타입 attachment 템플릿과 image.php

» 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

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

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

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

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

18. 워드프레스 싱글 이미지 포스트 페이지

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

24. 구글 지도에 표시하는 사진 촬영 위치

25. 워드프레스 attachment 포스트 타입의 아카이브

26. 워드프레스 함수로 자바스크립트 변수 데이터 생성

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘pic_album’

30. 커스텀 포스트 타입의 싱글 페이지

31. 워드프레스 WP_Query

32. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 옵션 페이지, 옵션 필드

38. 사이트 프런트 페이지

39. 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 워드프레스 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

43. 간단한 워드프레스 코멘트 폼 수정

44. 워드프레스 대시보드 위젯 추가

45. 워드프레스 REST API 간략 이해

46. 워드프레스 REST API 응답에 커스텀 필드 추가

47. 워드프레스 REST API 커스텀 라우트 및 엔드포인트

48. 워드프레스 REST API 커스텀 엔드포인트로 구글 클러스터 지도 마커와 인포 윈도 표시

49. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 포스트 Ajax Load More

50. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 코멘트 Ajax Load More

51. 워드프레스 REST API 인증과 제한 및 제어

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.