워드프레스 포스트 타입 attachment

이미지, 압축 파일 등은 포스트 작성 시 해당 포스트에 첨부하는 방식으로 등록하는 것이 일반적입니다. ‘attachment’ 이름에 걸맞은 등록 방식이지만, 예제에서는 특정 포스트 타입에 첨부하는 방식이 아니라 미디어 등록 페이지에서 바로 등록하여 ‘첨부되지 않은’ 타입 attachment 콘텐츠를 구성합니다. 그중에서도 ‘이미지’만 다룹니다. 물론, 첨부 방식 자체를 제한하는 것은 아닙니다.

먼저, 워드프레스에서 포스트를 작성하고 해당 포스트에 이미지를 첨부 등록할 때 저장되는 데이터, 첨부 이미지 페이지와 고유주소 등을 알아봅니다. 또, 첨부하지 않고 바로 등록한 이미지 포스트의 경우에 관하여 살펴보고, 템플릿 계층에 의한 템플릿 파일을 추가하여 예제에서 사용할 싱글 이미지 포스트 템플릿 파일을 생성합니다. 워드프레스 사용 경험이 있다면 익숙한 내용이므로 어렵지 않으며, 확인하는 내용으로 생각하면 됩니다.

다음 링크가 있는 제목을 클릭하여 예제를 위한 연습파일을 로컬 PC의 적당한 위치에 받고 압축을 풉니다.

예제 연습 이미지와 파일

타입 post에 이미지 첨부

원한다면 따라 해보세요. 먼저, 관리페이지에서 타입 post 글을 작성합니다. ‘새 글 쓰기’ 메뉴로 편집 화면으로 이동하여 제목에 다음 내용을 입력하고, ‘미디어 추가’ 버튼을 클릭합니다.

제목: ‘타입 post의 포스트’

미디어 삽입 창이 나오면 다음 내용을 따라 하세요.

‘타입-post에-첨부한-이미지.jpg’ 파일 업로드
타이틀: ‘타입 post에 첨부한 이미지’
캡션: ‘캡션 – 타입 post에 첨부한 이미지’
대체 텍스트: ‘대체 텍스트 – 타입 post에 첨부한 이미지’
설명: ‘설명 – 타입 post에 첨부한 이미지’
연결: ‘첨부 페이지’ 선택
‘글에 삽입하기’ 버튼 클릭
글 저장 (공개하기 버튼 클릭)
‘글 보기’ 또는 고유주소의 링크를 클릭하여 사이트에서 포스트 확인

다음 그림을 참고할 수 있습니다.

사이트에서 해당 글을 보면 캡션^Caption이 추가된 이미지가 있는 포스트가 나오는데, 이 페이지는 ‘타입 post 싱글 페이지’이며, 테마의 ‘single.php’ 파일을 사용합니다. 이미지와 캡션이 나오는 이유는 미디어 삽입 후 포스트에 삽입했기 때문입니다. 또, 브라우저 주소 필드를 보면 localhost/숫자 형태의 주소를 볼 수 있는데, 고유주소 설정에서 입력한 구조로 나오는 것을 확인할 수 있습니다. 앞에서 말했지만, 기본 상태에서 고유주소 설정은 타입 post에만 적용됩니다.

미디어 삽입 화면의 이미지 설정에서 연결 링크를 선택하였으므로 이미지는 링크가 적용되어 있습니다. 해당 이미지를 클릭하세요.

앞의 그림을 확인할 수 있는데, 이 페이지가 ‘첨부 페이지^{Attachment page}’입니다. 이 페이지는 현재 과정에서는 ‘single.php’ 파일을 사용합니다. 브라우저 주소 필드를 보면 localhost/숫자/타입-post에-첨부한-이미지 형태의 주소를 볼 수 있습니다. 이 주소는 ‘타입 post의 포스트’ 제목을 가진 포스트에 첨부되었음을 말합니다.

그림에서 ‘타입 post에 첨부한 이미지’ 제목은 미디어 삽입 화면에서 이미지 제목 필드에 입력한 내용입니다. 이미지 등의 파일 등록 시 제목을 따로 지정하지 않으면 확장자를 제외한 파일 이름이 규칙에 의해 제목으로 나오는 것은 이미 알고 있을 것으로 생각합니다. ‘설명 – 타입 post에 첨부한 이미지’ 데이터도 이미지를 등록할 때 입력한 내용입니다. 제목과 설명 등의 이미지(첨부) 콘텐츠의 데이터 저장 위치에 관해서는 조금 뒤에 알아봅니다. 이 페이지의 이미지도 링크가 적용되어 있는데, 클릭하면 이미지 파일이 나옵니다. ‘미디어 파일’이라는 번역 이름으로 미디어 삽입 화면의 연결 선택 목록에 나옵니다.

타입 page에 이미지 첨부

이번에는 타입 page 포스트에 이미지를 첨부합니다. 앞의 과정과 같으므로 바로 안내합니다.

관리페이지 페이지 메뉴의 ‘새 페이지 추가’ 클릭
제목: ‘타입 page의 포스트’
‘미디어 추가’ 버튼 클릭
‘타입-page에-첨부한-이미지.jpg’ 파일 업로드
타이틀: ‘타입 page에 첨부한 이미지’
캡션: ‘캡션 – 타입 page에 첨부한 이미지’
대체 텍스트: ‘대체 텍스트 – 타입 page에 첨부한 이미지’
설명: ‘설명 – 타입 page에 첨부한 이미지’
연결: ‘첨부 페이지’ 선택
‘글에 삽입하기’ 버튼 클릭
글 저장 (공개하기 버튼 클릭)
‘글 보기’ 또는 고유주소의 링크를 클릭하여 사이트에서 포스트 확인

결과는 타입 post에 이미지를 첨부할 때와 같다고 생각하면 됩니다. 다른 것은 타입 page 포스트와 이 포스트에 첨부한 이미지의 첨부 페이지는 테마의 ‘page.php’ 파일에 의한 결과라는 것입니다.

첨부하지 않고 이미지 등록

이제는 직접 이미지를 등록합니다. 다음의 안내를 참고하세요.

관리페이지 미디어 메뉴 클릭
‘파일 올리기’ 버튼 클릭
‘특정-포스트-타입에-첨부하지-않은-이미지.jpg’ 파일 업로드
‘편집’ 링크 클릭
제목: ‘특정 포스트 타입에 첨부하지 않은 이미지’
캡션: ‘캡션 – 특정 포스트 타입에 첨부하지 않은 이미지’
대체 텍스트: ‘대체 텍스트 – 특정 포스트 타입에 첨부하지 않은 이미지’
설명: ‘설명 – 특정 포스트 타입에 첨부하지 않은 이미지’
‘업데이트’ 버튼 클릭
어드민바 ‘첨부 페이지 보기’ 또는 고유주소의 링크를 클릭하여 사이트에서 확인

사이트에서 첨부 페이지의 주소를 보면 특정 포스트에 첨부할 때와 다르게 Parent 포스트 정보가 없는 것을 볼 수 있습니다. 이 첨부 페이지도 현재는 테마의 ‘single.php’ 파일에 의존합니다.

첨부한 이미지와 첨부하지 않은 이미지

다음 그림은 관리페이지 미디어 메뉴를 클릭하고, 리스트 형식으로 미디어 목록을 볼 때의 화면입니다.

첨부할 때와 아닐 때의 차이를 목록에서 볼 수 있습니다. 관리페이지에서 볼 수 있는 차이를 하나 더 찾는다면, 각 이미지 편집 화면에서 첨부한 이미지는 고유주소 수정이 가능하지만, 첨부하지 않은 이미지는 고유주소를 수정할 수 없다는 차이도 있습니다.

타입 attachment 포스트 데이터

이미지는 첨부 또는 첨부하지 않은 상태에 관계없이 워드프레스에서는 하나의 포스트입니다. 따라서 데이터베이스 ‘_posts’ 테이블에 저장됩니다. 어떻게 저장되는지 바로 확인합니다.

우선, 테마 루트 page-templates/_note.php 파일을 엽니다. 그리고 다음 코드를 전부 복사하여 열린 파일 14번 줄에 붙여넣고 저장합니다.

echo '<style>table#_table thead td{color:#454545;font-weight:700}table#_table td{padding: 10px;border:1px solid #c4c4c4}table#_table .exc{background-color:#f3f3f3}table#_table .meta{background-color:#e5f2fe}</style>';
$_attachments = get_posts( array( 'post_type' => 'attachment' ) );
echo '<table id="_table"><thead>';
echo '<tr>';
echo '<td>I</td><td>post_title</td><td>post_type</td><td>post_content</td><td>post_excerpt</td><td class="meta">대체 텍스트(alt)</td><td>post_parent</td><td class="exc">첨부 포스트 제목</td><td class="exc">Parent 포스트 타입</td><td>post_status</td><td>post_mime_type</td>';
echo '</tr></thead>';
echo '<tbody>';
foreach ( $_attachments as $post ) {
    echo '<tr>';
    echo '<td><img src="' . $post->guid . '" width="100px"></td>';
    echo '<td>' . $post->post_title . '</td>';
    echo '<td>' . $post->post_type . '</td>';
    echo '<td>' . $post->post_content . '</td>';
    echo '<td>' . $post->post_excerpt . '</td>';
    echo '<td class="meta">' . get_post_meta( $post->ID, '_wp_attachment_image_alt', true) . '</td>';
    echo '<td>' . $post->post_parent . '</td>';
    echo '<td class="exc">' . get_post_field('post_title', $post->post_parent) . '</td>';
    echo '<td class="exc">' . get_post_field('post_type', $post->post_parent) . '</td>';
    echo '<td>' . $post->post_status . '</td>';
    echo '<td>' . $post->post_mime_type . '</td>';
    echo '</tr>';
}
echo '</tbody></table>';

‘연습장’ 페이지 템플릿은 예제의 과정에서 이해를 돕기 위해 추가한 것인데, 지금의 방법처럼 지속해서 사용합니다. ‘연습장 파일’은 테마 루트의 ‘page-templates/_note.php’, ‘연습장 페이지’는 사이트에서 ‘연습장’ 메뉴를 클릭했을 때 나오는 페이지를 말하며, 안내하는 코드를 추가할 때는 // 여기서, // 여기 사이에로 표시한 영역 안에 추가하세요. 새로운 코드를 추가할 때는 기존 코드를 지우고 사용하세요. 이후부터는 지금 정의한 단어를 사용하며, 반복 안내는 하지 않습니다.

사이트에서 연습장 페이지를 보면 다음 그림과 같은 테이블을 확인할 수 있습니다.

테이블의 내용은 앞에서 등록한 이미지와 관련하여 데이터베이스 ‘_posts’ 테이블에 저장된 데이터(흰 배경), 데이터베이스 ‘_postmeta’ 테이블 ‘_wp_attachment_image_alt’ 필드에 저장된 데이터(파란 배경)를 나타낸 것입니다. 또, 각 이미지의 Parent 포스트 제목과 포스트 타입 정보(회색 배경)도 나열했습니다. ‘post_parent’ 데이터의 숫자(ID)는 필자와 다를 수 있습니다.

이 데이터를 보면 앞에서 포스트를 등록하고 이미지를 첨부할 때와 이미지를 단독으로 등록할 때 포스트와 이미지(첨부 포스트)가 ‘post_parent’ 필드의 데이터에 의해 연결(관계)된다는 것을 확인할 수 있습니다. 또, 이미지 등록 시 입력한 제목과 캡션, 대체 텍스트 등의 데이터가 어떤 필드에 저장되는지도 쉽게 알 수 있습니다. 대체 텍스트(alt)는 포스트(이미지)의 메타 데이터로 저장됩니다.

‘post_status’ 값은 첨부 여부와 상관이 없이 ‘inherit’ 값을 가지며, 이미지 파일(jpg 확장자)을 등록하면 ‘post_mime_type’ 값은 ‘image/jpeg’ 값을 저장하는데, 기억해둘 필요가 있습니다. 그리고 연습장 파일에 추가한 코드는 지금은 염두에 둘 필요가 없습니다.

Featured Images & Post Thumbnails

이미지는 포스트 콘텐츠 필드에 추가할 때도 있지만, ‘특성 이미지’로 번역된 ‘Featured Images’에도 사용합니다. Featured Image는 포스트 섬네일^{Post Thumbnail}로 부르기도 하는데, 프로그래밍 상태일 때와 아닐 때 정도의 상황에서만 구분하면 되며, 대상은 같습니다. 즉, (꼭 그런 것은 아니지만) 포스트 편집 화면에서 한글 버전 ‘특성 이미지 메타박스’에 등록한 이미지를 말합니다.

포스트 등록 과정은 이후부터 자세히 안내하지 않아도 어려움이 없을 것으로 생각합니다. 따라서 다음의 정보를 참고하여 특성 이미지를 등록하는 포스트를 작성하세요.

새 타입 post 포스트를 생성하는데, 제목에 ‘특성 이미지 등록한 타입 post 포스트’로 입력합니다.
특성 이미지 메타박스에서 이미 받은 ‘featured.jpg’ 파일을 업로드하고, 그 파일을 선택 후 ‘특성 이미지 설정’ 버튼을 클릭합니다. 이미지 세부 데이터 입력은 생략합니다.
포스트를 공개합니다.
연습장 페이지를 확인합니다.

연습장 페이지를 보면 방금 추가한 이미지 포스트에 관한 데이터가 추가로 나올 것입니다. 데이터를 보고 판단할 수 있는 것은 워드프레스에서 포스트 편집 화면에서 포스트를 작성할 때 ‘미디어 삽입 화면을 통해 등록(업로드)’한 이미지(또는 파일)는 ‘첨부 포스트’로 등록된다는 것입니다. ‘post_parent’ 필드에 특정 포스트의 ID가 존재한다는 뜻도 됩니다.

이때 방금 추가한 이미지 포스트 ‘post_parent’ 열의 숫자(ID)를 기억합니다. 그리고 다음 코드를 연습장 파일에 추가하는데, 현재 추가된 코드에 이어서 추가하고 저장합니다. 숫자 ‘40’은 필자의 예제에서 나온 값이므로 다를 수 있습니다. 40을 각자의 값으로 변경하세요.

echo get_the_title( 40 ) . '의 특성 이미지 포스트 제목은 "' . get_the_title( get_post_meta( 40, '_thumbnail_id', true ) ) . '"이며, 이미지 ID는 "' . get_post_meta( 40, '_thumbnail_id', true ) . '"입니다.';

// 여기 사이에

연습장 페이지에서 위 코드 결과를 확인하면 다음처럼 나올 것입니다. 숫자는 다를 수 있습니다.

대표 이미지 등록한 타입 post 포스트의 특성 이미지 포스트 제목은 “featured”이며, 이미지 ID는 “41”입니다.

포스트의 특성 이미지 데이터(ID)는 데이터베이스 ‘_postmeta’ 테이블에 포스트를 저장할 때 ‘_thumbnail_id’ 필드와 함께 생성, 저장됩니다. 따라서 위의 코드로 특성 이미지 정보를 출력해본 것입니다.

포스트 편집 화면에서 특성 이미지 메타박스가 나오는 것은 테마의 functions.php 파일에 다음 코드를 추가했기 때문이지만, 다음 코드가 없다고 프로그래밍적으로 특성 이미지 등록을 제한할 수는 없습니다.

// 대표(특성) 이미지 등록 메타박스 사용
add_theme_support( 'post-thumbnails' );

다음 코드를 연습장 파일에 위 코드에 이어 추가하면 특정 특성 이미지를 사용하는 포스트 정보를 얻을 수 있습니다. 숫자는 앞의 코드 결과에 의한 각자의 값을 입력하세요.

echo '<br>' . get_the_title( 41 ) . ' 이미지를 특성 이미지로 사용하는 포스트는 제목이 "' . get_the_title( wp_get_post_parent_id( 41 ) ) . '"입니다.';

// 여기 사이에

위 코드의 결과는 다음과 같습니다.

featured 이미지를 특성 이미지로 사용하는 포스트는 제목이 “대표 이미지 등록한 타입 post 포스트”입니다.

포스트와 첨부 포스트 관계에 관하여 간단하게 알아본 것으로 사용한 함수는 뒤에 다시 나오므로 지금 과정에서는 염두에 두지 않아도 됩니다. 또, 포스트 섬네일과 특정 정보를 얻을 수 있는 함수는 앞에서 사용한 코드에 한정되지 않으며, 포스트 섬네일과 관련한 설정도 다양하게 존재한다는 정도만 기억하면 됩니다.