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

워드프레스 attachment 타입 유형의 하나인 ‘image’ 포스트를 출력하기 위해 지난 과정에서 템플릿 시스템 기준에 따라 ‘image.php’ 템플릿 파일을 만들었습니다. 또, 구분하여 처리하기 위해 그 파일에 3개의 인클루드 파일을 추가한 것도 이미 확인하였습니다. 테마 루트 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' );

1번 줄의 인클루드 파일은 아주 간단한 코드로 이미지와 이미지에 연결된 분류 phototag의 term을 출력하는 파일입니다. 2번 줄의 파일도 간단한 코드로 해당 싱글 포스트에 연결된 photocat 분류의 term과 같은 term의 이미지 포스트를 출력하는 파일입니다.

3번 줄의 파일은 이미지 포스트의 이미지 메타 데이터를 단순하게 출력하는 것, 특정 메타 데이터를 이용해 구글 지도에 싱글 마커 출력, 존재하는 이미지 사이즈 정보 제공 및 선택 이미지 사이즈의 이미지 다운로드, 이미지 등록자(author)와 관련된 일부 요약 정보 등을 출력하는 파일입니다.

처음에 안내한 완성 예제 사이트에 접근하여 싱글 이미지 포스트 페이지를 확인하면 어떤 데이터를 출력할 것인가에 관하여 이해할 수 있습니다. 다시 확인하고 싶다면 직접 접근하여 이해를 더하세요.

이번 장은 1번 줄의 파일로 이미지와 이미지에 연결된 term을 출력하는 과정입니다. 편집기로 테마 루트의 template-parts/pic/pic-single.php 파일을 열면 다음 코드를 볼 수 있습니다.

<?php
/* image.php 본문 인클루드 파일 */


?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="entry-content">
        <div class="single_container">
            <div class="single_image">
            <?php
                // medium_large size 이미지 출력
                echo wp_get_attachment_image( get_the_ID(), 'medium_large' );

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

    <?php
        // 포토태그 리스트
    ?>
</article><!-- #post-<?php the_ID(); ?> -->

위의 코드는 보통의 워드프레스 테마 루프 파일 형식에서 9, 10번 줄을 추가하고, 13번 줄의 함수로 이미지가 출력되도록 정의한 것입니다.

‘보통의 워드프레스 테마’라는 것은 워드프레스 기본 테마에서 주로 사용하는 방식을 말하는 것인데 공식 용어는 아닙니다. 그러나, html 태그, ID, CSS 클래스 추가 등의 기본 마크업 패턴은 공개 워드프레스 웹사이트를 구성한다면 ‘기준’으로 삼아도 좋은 예입니다.

싱글 이미지 포스트에서 이미지 출력

13번 줄에 이미지 출력 코드를 미리 정의하였으므로 이미지 출력은 사실 완성된 것입니다.

// 13번 줄
wp_get_attachment_image( get_the_ID(), 'medium_large' );

이 wp_get_attachment_image 함수는 attachment 타입 포스트 중 ‘이미지’ 콘텐츠에 해당하는 ‘특정 이미지(ID)’의 ‘특정 이미지 사이즈의 이미지’를 출력하는 것입니다. 혼동하지 말아야 하는 것은 ‘특정 포스트에 첨부된 이미지를 출력하는 함수가 아니다’는 것입니다.

워드프레스에서 이미지는 특정 포스트에 ‘첨부’하여 사용하는 때가 일반적인데, 포스트 타입의 하나인 attachment, 그중 ‘image’를 독립적인 포스트로 사용할 때 ‘포스트 ID’를 혼동할 수가 있으므로 주의해야 합니다. 예제에서 attachment 타입의 콘텐츠를 구성할 때 ‘포스트 ID’는 다음과 같습니다.

포스트 ID = 첨부 포스트 ID = 타입 attachment 포스트 ID = 이미지 ID

이와 같은 개념적 정의는 정해진 기준이 없으며, 워드프레스의 ‘포스트 타입’ 또는 ‘콘텐츠 타입’에 관한 이해의 문제로 사이트 구성 기준과 과정에 의해 결정된다고 말할 수 있습니다. 이런 내용은 기초 이해의 범주입니다.

출력은 함수로 간단하게 정의하였으므로, 사이트에서 확인하기 위해 브라우저를 실행하여 주소 입력란에 localhost/달나라-여행을 입력하고 해당 싱글 포스트 페이지를 확인해봅니다. 꼭 해당 이미지 포스트가 아니어도 됩니다. 아직 이미지 포스트 아카이브를 구성하지 않았으므로 관리페이지 미디어 라이브러리 목록의 이미지 중 원하는 이미지의 싱글 페이지를 확인하면 됩니다.

이미지의 싱글 페이지를 확인했다면, 이제 그 이미지의 html 소스를 확인해봅니다. 예제는 크롬 브라우저를 기준으로 정하였으므로 크롬 브라우저에서 제공하는 ‘(요소)검사’ 기능을 사용하세요. 이미지의 html 소스를 보면 다음과 같습니다. 구분을 위해 줄 바꿈 하였습니다.

<img width="4288" height="2848" src="http://localhost/wp-content/uploads/tent-548022.jpg" 
class="attachment-full size-full" alt="검은, 노란, 밤, 별, 어두운, 텐트, 하늘"
srcset="http://localhost/wp-content/uploads/tent-548022.jpg 4288w, 
http://localhost/wp-content/uploads/tent-548022-602x400.jpg 602w, 
http://localhost/wp-content/uploads/tent-548022-965x641.jpg 965w, 
http://localhost/wp-content/uploads/tent-548022-1280x850.jpg 1280w" sizes="(max-width: 4288px) 100vw, 4288px">

소스를 보고 판단할 수 있는 것은, wp_get_attachment_image 함수가 이미지 속성을 포함한 html 소스로 변환한다는 것입니다. ‘srcset’ 속성 추가로 워드프레스 제공 기능도 포함하며, 기본으로 ‘alt’ 속성도 추가한다는 것을 알 수 있습니다. 물론, 다른 속성도 추가할 수 있지만, 안내하지 않으므로 필요하다면 코덱스에서 추가 정보를 얻으세요.

이미지 포스트의 term 출력

다음 그림은 완성 예제의 싱글 이미지 포스트 페이지의 특정 영역으로, 이미지 위에 마우스를 올렸을 때의 화면입니다.

상황에 따라 다를 수 있지만, 포스트에 연결된 term 리스트를 출력하는 방법 중 워드프레스 제공 함수가 가장 쉽고 간편합니다. 그 함수를 사용한 다음 2번 줄 코드를 편집기에 열린 pic-single.php 파일 15번 줄 다음에 추가하고 저장한 후 사이트를 확인해봅니다.

// 포토태그 리스트
the_terms( get_the_ID(), 'phototag', '', ' ',' ' ); // 현재 포스트에 연결된 phototag 분류의 term

사이트에서 해당 페이지를 새로 고쳐 확인하면 term이 출력되는 것을 확인할 수 있습니다. 이 term 리스트는 페이지에서 한 번 더 사용하며, 필자가 미리 완성하여 제공한 스타일을 적용하기 위해 다음에 제공하는 이번 과정의 전체 코드로 변경하고 저장합니다.

<?php
/* image.php 본문 인클루드 파일 */

$cpid = get_the_ID();// 현재 포스트 ID (이미지 ID)
$taglist = get_the_term_list( $cpid, 'phototag', '', ' ',' ' ); // 현재 포스트에 연결된 phototag 분류의 term
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="entry-content">
        <div class="single_container">
            <div class="single_image">
            <?php
                // medium_large size 이미지 출력
                echo wp_get_attachment_image( get_the_ID(), 'medium_large' );

                // 포토태그 리스트
                if ( $taglist ) {
                    echo '<div class="phototag">' . $taglist . '</div>';
                }
            ?>
            </div>
        </div>
    </div><!-- .entry-content -->

    <?php        
        // 포토태그 리스트
        if ( $taglist ) {
            echo '<footer class="entry-footer">';
                echo '<div class="taglist">' . $taglist . '</div>';
            echo '</footer><!-- .entry-footer -->';
        }
    ?>
</article><!-- #post-<?php the_ID(); ?> -->

4, 5번 줄에서 미리 정의하여 term 리스트 출력에 반복하여 사용한 것이며, 간단한 내용이므로 설명이 필요하지 않을 것입니다. 다만, 5번 줄의 get_the_term_list 함수만 코덱스에서 직접 추가 정보를 얻으세요. 간단하고 편리한 함수로 필요한 때가 많습니다.

다시, 사이트에서 페이지를 새로 고쳐 결과를 확인하면 완성 예제와 같은 결과가 나올 것입니다. 이미지에 마우스를 올려 term 리스트가 나오는지도 확인하세요.

페이지에서 term을 두 번 출력한 것은 별 뜻이 없으며, 이미지 위에 나타나는 term은 범위를 벗어나면 출력되지 않도록 설정한 것이며, 이미지 아래에 나오는 term은 생략되지 않습니다. 반복해서 알리면, 예제 구성 과정에서 사이트에 출력되는 모든 스타일은 처음 제공한 테마에 포함된 스타일 파일에 의한 것입니다. CSS 자체에 관한 별도의 설명은 하지 않습니다.

워드프레스에서 term 데이터를 출력하는 방법은 여러 가지가 있으며, 추가한 코드와 코딩 방식은 각자의 취향입니다. 포스트의 관련 데이터를 출력할 때 테마 템플릿 파일이 아닌 다른 파일에 직접 함수를 만들고 정의하여 템플릿에 사용할 수도 있습니다. 예제 과정에서는 최대한 단순한 방향으로 풀어서 작업하므로 혹시 마음에 들지 않을 수 있습니다. 나중에 더 훌륭하고 멋진 방법으로 자신의 코드로 변경하세요.

다른 이미지 포스트의 싱글 페이지도 필요하다면 확인하고, 간단한 과정이었지만 다음에 제공하는 링크에서 이번 장의 완성 파일을 다운로드하여 테마 루트에 덮어쓰세요.

사이트의 결과에서 term 하나를 클릭하여 나타나는 페이지는 ‘term 아카이브’ 페이지인데, 관련 포스트가 없다고 나올 것입니다. 타입 attachment 포스트는 기본으로 워드프레스 아카이브에 포함되지 않기에 나온 결과이며, 나중에 해당 과정에서 처리합니다.