타입 attachment 템플릿과 image.php

타입 post 작성 시 첨부하는 방식으로 이미지를 등록하고, 그 이미지의 연결 링크를 첨부 페이지로 지정했을 때 이미지 첨부 페이지는 테마의 single.php 파일을 사용한다는 것을 앞에서 이미 확인했습니다. 이것은 기본이 아니라 이미지 콘텐츠(포스트)를 출력할 테마의 템플릿 파일이 없으므로 ‘워드프레스 템플릿 계층 구조’ 기준에 의해 그 파일을 사용하는 것입니다.

타입 attachment 템플릿 파일

워드프레스 템플릿 계층 구조 기준으로 single.php 템플릿 파일에 우선하는 것은 ‘attachment.php’ 파일입니다. 타입 attachment에 해당하는 모든 포스트를 포함하는 템플릿 파일입니다. 포스트 타입 attachment에 속할 수 있는 콘텐츠는 모든 파일(jpg, png, gif, zip, pdf, …)입니다. 단, 업로드를 허용한 모든 파일이라는 조건이 선행될 것입니다.

다시, 모든 파일 중에 이미지에 해당하는 타입 attachment 포스트만 출력하는 템플릿 파일은 ‘image.php’ 파일입니다. 워드프레스 템플릿 계층에 의한 기준으로 attachment.php 파일보다 우선합니다. 예제는 이미지가 핵심 콘텐츠이므로 image.php 파일을 사용합니다. 물론, 앞에서 특정 확장자의 이미지 외 파일 업로드를 허용하지 않았으므로 attachment.php 파일을 사용해도 문제가 없습니다.

간단하게 image.php 파일이 있을 때와 없을 때 워드프레스가 이미지 첨부 페이지에 어떤 파일을 사용하는지 확인합니다. 먼저, 다음 링크가 있는 제목의 파일을 받아 적당한 곳에 압축을 푸세요.

사진과 이미지 템플릿 파일

이 파일에는 다음 구조로 이미지와 테마 파일이 있습니다.

10장
├── 사진
│   ├── no_title_caption.jpg
│   ├── vertical_with_title_caption.jpg
│   └── with_title_caption.jpg
└── 테마
    ├── template-parts
    │   └── pic
    │       ├── pic-archive.php
    │       ├── pic-related.php
    │       ├── pic-single-side.php
    │       └── pic-single.php
    └── image.php

사진 폴더에 있는 3개의 이미지는 사진의 IPTC 또는 EXIF 기준의 필드에 임의의 데이터를 필자가 입력하여 편집한 것입니다. 카메라 모델, ISO, 셔터 스피드, 키워드 등의 정보와 제목(title) 및 캡션(caption) 필드에 값이 있는 것과 없는 것이 있습니다. 이 정도의 내용만 인지하고, 다음 순서로 진행합니다.

관리페이지 미디어 메뉴 하위의 파일 올리기 메뉴를 클릭하고, 사진 폴더에 있는 ‘no_title_caption.jpg’ 파일을 업로드합니다.
브라우저 새 탭 하나를 만들어 주소 필드에 localhost/no_title_caption을 입력하여 이미지 첨부 페이지를 확인합니다.

지금 예제는 로컬 PC 서버 환경에서 구성하며, XAMPP 패키지 기본 설정 그대로 사용하므로 예제 사이트의 도메인과 타입 post의 포스트를 제외한 포스트의 고유주소는 필자와 같기 때문에 앞의 주소를 사용하였습니다.

사이트에서 방금 올린 이미지의 첨부 페이지에는 포스트 제목 ‘no_title_caption’과 이미지가 나올 것입니다. 이 첨부 페이지는 지금 single.php 파일을 사용하고 있습니다. 현재 브라우저 페이지를 그대로 유지합니다.

image.php

이제, image.php 파일을 사용하기 위해 다음 순서로 진행합니다.

조금 전에 받은 파일 ‘테마’ 폴더¹의 image.php 파일과 template-parts 폴더를 테마 루트에 붙여넣습니다.
폴더 중복 메시지가 나오면 덮어씁니다.
브라우저에서 사이트의 이미지 첨부 페이지를 새로 고쳐 결과를 확인합니다.

첨부 페이지 결과를 확인했을 때 제목 ‘no_title_caption’은 나오지만, 이미지가 나오지 않는다면 현재 과정에서 올바른 결과이며, 테마의 image.php 파일에 의한 결과임을 알 수 있습니다.

다만, single.php 파일을 사용할 때와는 다르게 ‘이미지’가 나오지 않는 것은 특정 타입에 ‘첨부된’ 이미지, ‘독립적인 포스트’로의 이미지라는 개념과 관계없이 ‘포스트 타입 attachment의 템플릿 파일이 존재한다’는 것이 이유입니다. 따라서 별도의 코드를 추가해야 합니다. 우선 테마 루트에 올린 파일을 간단하게 살펴봅니다.

편집기에서 image.php 파일을 열어보면 다음의 3가지 인클루드 코드가 있습니다.

get_template_part( 'template-parts/pic/pic', 'single' );
get_template_part( 'template-parts/pic/pic', 'related' );
get_template_part( 'template-parts/pic/pic', 'single-side' );

위 코드에서 인클루드한 각 파일은 다음의 2번 줄 파일은 제외하고, 앞에서 테마 루트에 추가한 파일입니다. 지금은 간단한 텍스트만 출력하는, 내용이 없는 파일입니다.

template-parts/pic/
├── pic-archive.php
├── pic-related.php
├── pic-single-side.php
└── pic-single.php

예제에서 사용하는 image.php 파일은 3개의 파일을 인클루드하여 구성합니다. 그러나, 이런 방법은 예제 구성의 안내 편의를 위한 목적²과, 나중의 참고 편의를 위한 것이므로 특정 기능을 구현하기 위한 방법론은 아닙니다. 실제 운용 사이트를 구성할 때는 각자의 취향과 방법으로 구성하면 되므로 염두에 둘 사항은 아님을 미리 알립니다.

또, 추가한 image.php 파일은 워드프레스 루프 패턴의 일반적 구조의 파일이며, 예제의 과정에서 더는 편집하지 않는 완성 파일이며, 그 파일에 인클루드한 3개의 파일에서 필요한 작업을 처리합니다.

위의 2번 줄 ‘pic-archive.php’ 파일은 나중에 이미지 아카이브에 사용할 루프 파일입니다. 지금 과정에서는 확인하지 않고, 미리 올려 둔 것입니다.

이미지 포스트에 이미지 출력

이제 앞에서 출력되지 않았던 이미지를 출력해봅니다. 테마 루트 template-parts/pic/pic-single.php 파일을 열면, 다음과 같은 코드를 볼 수 있습니다.

<div class="entry-content">
    <div class="single_container">
        <div class="single_image">
        <?php
            the_title();

            // 태그 리스트
        ?>
        </div>
    </div>
</div><!-- .entry-content -->

2, 3번 줄의 CSS 클래스를 추가한 소스는 필자가 미리 추가한 것인데, 앞에서 말한 것처럼 예제의 모든 CSS 스타일 작업은 완성하여 제공하였으므로, 이후에 특정 파일에 특정 클래스가 포함된 소스가 나오거나 사이트에서 특정 스타일의 출력 결과가 나오는 이유를 미리 인지하고 있기를 바랍니다.

5번 줄의 함수에 의해 앞에서 결과를 확인한 싱글 이미지 페이지에 이미지의 제목, 즉 이미지 포스트의 제목이 나온 것입니다. 하지만, 예제에서는 직접 포스트 제목을 출력하지 않으므로 지울 것입니다.

이제는 이미지를 출력할 코드를 추가하는데 여기서 잠깐 돌아보면, 보통은 특정 포스트 타입의 포스트를 작성하면서 이미지를 첨부하는 방법으로 이미지를 등록하였고, 포스트에 이미지를 삽입(버튼)하면 워드프레스가 해당 이미지 출력 소스를 자동으로 본문에 추가하고, 그 모든 데이터가 데이터베이스에 저장되어 사이트에서 해당 포스트를 보면 이미지가 나왔습니다.

지금은 이미지를 하나의 독립적인 콘텐츠, 즉 포스트로 사용하므로 ‘이미지가 있는 포스트’가 아니라 ‘이미지 포스트’ 또는 한글 버전에 맞춰 ‘이미지 글’입니다. 이때 이미지를 사이트에 출력하려면 데이터베이스 ‘_posts’ 테이블 ‘post_content’ 필드의 데이터를 사용해서는 가능하지 않습니다. 앞에서 살펴봤지만, 이미지도 첨부 방식이든 아니든, 별도 템플릿 파일을 사용하든 아니든 하나의 ‘포스트’입니다. 그리고 ‘post_content’ 필드에는 워드프레스 한글 버전 기준으로 이미지 편집 화면의 ‘설명’ 영역(필드)에 있는 데이터가 저장됩니다. 이 역시 앞에서 확인한 내용입니다. 그러나, 이미지 출력 소스를 ‘post_content’ 필드에 저장하는 방법은 직접 소스를 입력하는 방법이나 별도의 코드로 자동 저장되도록 처리하는 방법밖에 없습니다.

이미지를 독립 포스트만으로 구성할 때 이미지 포스트에 이미지를 삽입할 수 있는 기능은 기본으로 존재하지 않지만, 결국 이미지도 하나의 포스트이므로 포스트에 해당하는 메타 데이터로 이미지 정보를 가져와 출력하는 함수를 사용하는 것이 가장 편리합니다.

다음 코드를 앞의 코드 5번 줄 포스트 제목 출력 함수와 대체하고 저장한 후 사이트에서 ‘no_title_caption’ 이미지 포스트를 새로 고쳐 결과를 확인합니다. 직접 해보세요.

// 아래 코드만 위 코드 5번 줄 the_title() 함수와 대체
echo wp_get_attachment_image( get_the_ID(), 'medium_large' );

다음 그림처럼 이미지가 출력되고, ‘사이드 정보’, ‘관련 이미지’와 같은 임의의 텍스트가 출력될 것입니다.

wp_get_attachment_image()
이 함수는 특정 ID를 가진 이미지를 지정한 이미지 사이즈와 속성의 html 소스로 변환하는 것인데, ‘attachment’라는 단어가 포함되어 있다고 하여 특정 포스트에 ‘첨부’된 이미지를 뜻하는 것으로 생각하지 않아야 합니다. ‘attachment’ 단어는 ‘포스트 타입’의 뜻으로 해석하세요.

워드프레스의 반응형 이미지 콘텐츠

출력된 이미지의 소스를 보면 다음과 같습니다. 보기 편의를 위해 한 줄 소스를 줄 바꿈 하였습니다.

<img width="965" height="643" src="http://localhost/wp-content/uploads/no_title_caption-965x643.jpg" class="attachment-medium_large size-medium_large" alt=""
srcset="http://localhost/wp-content/uploads/no_title_caption-965x643.jpg 965w,
http://localhost/wp-content/uploads/no_title_caption-600x400.jpg 600w,
http://localhost/wp-content/uploads/no_title_caption-1280x853.jpg 1280w"
sizes="(max-width: 965px) 100vw, 965px">

소스에서 srcset 속성을 확인할 수 있는데, 워드프레스 4.4 버전에서 추가된 것으로 속성에 관하여 다음처럼 정리합니다.

이미지 업로드 시 생성되는 이미지 중 사용 가능한 사이즈의 이미지만 해당 속성에 포함하고, 속성에 포함된 이미지 사이즈 중 사용자 브라우저의 크기에 가장 적합한 이미지 사이즈를 워드프레스가 자동으로 선택하여 제공하며, 속성에 존재하지만 사용하지 않는 이미지 사이즈는 다운로드하지 않으므로 트래픽 등의 효율을 도모할 수 있는 기능.

대부분의 워드프레스 기능과 마찬가지로, 이 역시 기본으로 보통의 ‘이미지 출력 워드프레스 함수’ 또는 ‘포스트 작성 시 이미지를 삽입하여 출력하는 방식’으로 이미지를 출력하면 자동으로 해당 속성이 추가됩니다. 관련한 주요 함수는 다음과 같습니다.

wp_calculate_image_sizes()
wp_calculate_image_srcset()
wp_make_content_images_responsive()
wp_get_attachment_image_srcset()
wp_get_attachment_image_sizes()
wp_make_content_images_responsive()
wp_image_add_srcset_and_sizes()

예제에서는 이와 관련한 내용을 따로 안내하지 않습니다. 만약, 예제에서 출력되는 이미지 중에 해당 소스가 있으면, 그 이미지 출력을 위해 사용한 워드프레스 함수 또는 코드가 srcset 기능을 제공하거나 의도하여 구성한 것으로 이해하고, 아니라면 염두에 두지 않기 바랍니다. 이미지를 핵심 콘텐츠로 다루는 웹사이트에서 트래픽 절약에 관한 효율을 도모하는 것은 중요하지만, 이 예제에서는 다루지 않으므로 나중에 직접 검색하고 학습하면 좋겠습니다.

이미지를 보통의 워드프레스 사용 방식 기준으로, 특정 포스트에 첨부된 콘텐츠로만 해석하지 않고, 첨부 여부를 떠나 하나의 독립 포스트로 존재한다는 것과 독립 포스트 기준으로 예제를 구성한다는 기준을 가지고 있으면 혹시 생길 수 있는 혼동을 최소화할 수 있습니다. 덧붙여, 보통의 포스트 타입과 ‘약간’ 다른 방법으로 이미지 포스트의 데이터를 출력한다는 정도만 기억하면 됩니다.

다음 장에서 워드프레스 첨부 파일에 관한 메타 데이터, 그중 이미지를 등록했을 때 워드프레스가 데이터베이스에 저장하는 메타 데이터를 알아봅니다.