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

예제의 ‘앨범’은, ‘특정 포스트에 첨부되지 않은’ 이미지를 운영자가 특정 주제(제목)로 묶어 하나의 포스트로 제공하는 가상의 콘텐츠라는 것을 앞에서 말했습니다. ‘특정 포스트에 첨부되지 않은’의 뜻은 데이터베이스 _posts 테이블의 post_parent 필드의 값이 ‘0’이라는 것으로, 예제의 핵심 콘텐츠인 attachment 이미지 포스트의 기준이며, 여러 번 안내하였습니다.

워드프레스 갤러리

앨범을 등록할 때 ‘워드프레스 갤러리’ 등록 방식으로 이미지를 추가한다고 했습니다. 포스트를 등록할 때, 특정 포스트에 첨부되지 않은 기존의 이미지를 ‘단일 선택’으로 추가하면 해당 이미지는 등록하는 포스트에 첨부된 것으로 업데이트됩니다. 따라서 갤러리 방식으로 포스트에 삽입해야 기존의 이미지 첨부 형태(첨부되지 않음)를 유지할 수 있습니다. 이 부분이 핵심입니다. 위의 그림은 일부 열을 제외하고 출력한 것으로, 그림처럼 현재 과정까지 예제의 모든 이미지 포스트는 ‘첨부되지 않음’ 상태입니다.

워드프레스의 갤러리는 포스트 편집 화면에 이미지의 포스트 아이디가 추가된 Shortcode 형태로 삽입됩니다. 데이터베이스에도 Shortcode 형태의 문자 그대로 저장됩니다. 사이트에서 섬네일 형태의 이미지 갤러리를 볼 수 있는 것은 Shortcode 포스트 아이디를 기준으로 필터하여 출력하기 때문입니다. 물론, 포스트 등록 페이지 에디터의 ‘비주얼’ 모드에서도 필터하여 쉽게 알아볼 수 있도록 출력됩니다. ‘텍스트’ 모드에서 보면 다음의 예처럼 Shortcode를 볼 수 있습니다.

// 데이터베이스 post_content 필드에 그대로 저장
[gallery ids="414,413,412,411,410,409,408,407,406,405"]

싱글 앨범 포스트 등록

먼저, 앨범 포스트 3개를 직접 등록한 후에 앨범 싱글 포스트 페이지를 구성해봅니다. 번거로운 과정을 생략하기 위해 포스트 내용만 제외한 3개의 포스트를 코드로 간단하게 추가합니다. 다음 순서로 진행합니다.

먼저, 브라우저에서 사이트 연습장 페이지에 접근하여 한 번 새로 고칩니다.
다음으로 편집기의 연습장 파일에 기존 추가 코드를 지우고 아래 코드를 추가하고 저장합니다.
다시 브라우저의 사이트 연습장 페이지를 ‘한 번만’ 새로 고칩니다.
편집기에 추가한 코드를 모두 삭제하고 저장합니다.
관리페이지의 앨범 포스트 목록에서 3개의 포스트가 등록되었는지 확인합니다.

아래 코드를 연습장 파일에 추가 후 저장하고, 사이트 연습장 페이지를 한 번만 새로 고친 후 삭제하면 됩니다.

$album_post1 = array(
    'post_title'    => '추억이 있는',
    'post_content'  => '',
    'post_status'   => 'publish',
    'post_type'   => 'pic_album',
    'post_name' => 'sample01'
);
$album_post2 = array(
    'post_title'    => '신비한 사진 모음',
    'post_content'  => '',
    'post_status'   => 'publish',
    'post_type'   => 'pic_album',
    'post_name' => 'sample02'
);
$album_post3 = array(
    'post_title'    => '배경으로 사용하기 좋은',
    'post_content'  => '',
    'post_status'   => 'publish',
    'post_type'   => 'pic_album',
    'post_name' => 'sample03'
);
wp_insert_post( $album_post1 );
wp_insert_post( $album_post2 );
wp_insert_post( $album_post3 );

관리페이지의 앨범 포스트 목록은 다음 그림처럼 나올 것입니다.

위의 코드는 앨범 포스트 타입(pic_album)에 각각 다른 제목의, 지정한 퍼머링크(post_name)로, wp_insert_post 함수를 사용하여 포스트를 추가하는 것입니다. 코드는 예제 구성에 꼭 필요한 내용이 아니므로 염두에 두지 않아도 됩니다. 코드를 삭제하지 않으면 연습장 페이지에 접근할 때마다 3개의 포스트가 퍼머링크의 숫자 증분 형태로 계속 추가되므로 꼭 지워야 합니다.

앨범 포스트 등록은 예제 구성에 필요하지만, 관리페이지에서 직접 등록하는 독자의 번거로움과 필자의 등록 과정 설명 생략하고, 퍼머링크를 필자와 같게 만들어 편리를 도모하는 것이 목적입니다. 그러나, 갤러리 방식의 이미지는 직접 3개의 포스트에 등록해야 합니다.

갤러리 추가

‘추억이 있는’ 제목의 앨범 포스트에 갤러리 방식으로 이미지를 추가하는 간단한 과정을 다음처럼 안내합니다. 나머지 ‘신비한 사진 모음’, ‘배경으로 사용하기 좋은’ 앨범 포스트도 반복해서 등록 과정을 진행하세요.

‘추억이 있는’ 포스트 편집 화면에 접근
‘미디어 추가’ 버튼을 클릭
반드시 ‘미디어 추가’ 팝업의 왼쪽 ‘갤러리 생성하기’ 클릭
‘미디어 라이브러리’ 탭에서 존재하는 이미지 9개 정도만 선택
최대한 같은 화면 유지를 위해 처음부터 순서대로 9개 선택 (선택 사항)
나머지 포스트 등록 시 이어서 나오는 이미지 9개 선택 (선택 사항)
팝업의 오른쪽 아래 ‘새 갤러리 생성하기’ 버튼 클릭
이어서 나오는 오른쪽 아래 ‘갤러리 삽입’ 버튼 클릭
포스트 편집 화면의 ‘업데이트’ 버튼 클릭
나머지 2개의 앨범 포스트도 위의 과정으로 갤러리 등록

만약, 갤러리 형식으로 등록하지 못했다면, 관리페이지 미디어 목록 페이지에서 ‘제외’ 링크를 클릭한 후 다시 편집 화면에서 갤러리 형식으로 등록하면 됩니다.

3개의 포스트 모두 갤러리를 등록한 후 하나의 포스트만 선택하여, 편집 화면 에디터 ‘텍스트’ 모드에 Shortcode가 어떤 형태로 추가되는지 둘러보세요.

싱글 앨범 포스트 페이지

사이트에서 ‘추억이 있는’ 앨범 싱글 페이지를 보면 다음 그림처럼 나올 것입니다.

예제에서는 다음 그림처럼 Fleximage 형태로 출력할 것입니다.

위의 그림처럼 출력하기 위해 템플릿 파일을 추가하거나 변경합니다.

현재, 싱글 앨범 포스트는 테마의 single.php 파일에 의해 출력되는데, 워드프레스 템플릿 계층에 의하여 앨범 포스트 타입의 싱글 페이지를 위한 single-pic_album.php 파일을 만들어 처리할 수 있습니다. 그러나, 예제에서는 single.php 파일을 그대로 사용합니다. 편집기로 single.php 파일을 열면 다음 코드가 있습니다.

// 테마 single.php
get_template_part( 'template-parts/post/content', get_post_type() );

the_post_navigation();

이 코드를 다음처럼 변경하여, 앨범 포스트 타입일 때 특정 파일을 불러올 수 있도록 정의합니다.

if ( get_post_type() == 'post' ) {

    get_template_part( 'template-parts/post/content', get_post_format() );
    
    the_post_navigation();

} elseif ( get_post_type() == 'pic_album' ) {

    get_template_part( 'template-parts/album/album', 'single' );

}

위의 코드 9번 줄에 따라 앨범 포스트는 album/album-single.php 파일을 인클루드할 것이며, 디렉터리와 파일은 현재 없으므로 만들어야 합니다. 완성 파일을 올린 후 이어갑니다. 다음 링크의 파일을 받은 후 압축을 풀어 테마 루트에 덮어씁니다.

30장 변경 및 추가 파일

싱글 앨범 포스트 템플릿

파일은 다음의 디렉터리와 템플릿 파일을 포함하고 있습니다.

30장
├── page-templates
│   └── album-page.php
├── template-parts
│   └── album
│       ├── album-archive.php
│       └── album-single.php
└── single.php

파일 중 single.php 파일은 앞에서 안내한 코드를 적용한 것이며, album/album-single.php 파일은 완성 코드를 추가하여 제공하였습니다. 나머지 파일은 앨범 아카이브에 페이지에 사용하므로 그때 다시 안내하기로 합니다. 먼저, 편집기로 다음의 파일을 엽니다.

assets/js/pics.js
single.php
template-parts/album/album-single.php

간략하게 몇 가지 내용만 알아봅니다. 먼저, 편집기에서 single.php 파일을 보면 다음의 코드가 있습니다.

} elseif ( get_post_type() == 'pic_album' ) {

    get_template_part( 'template-parts/album/album', 'single' );

}

앨범 포스트 타입일 때 album-single.php 파일을 인클루드한 것입니다.

편집기의 album-single.php 파일은 다음 패턴으로 정의되어 있습니다.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        // 싱글 앨범 포스트 제목
    </header><!-- .entry-header -->
    <div class="entry-content">
        <?php
            // 싱글 앨범 포스트에 갤러리 방식으로 추가한
            // 이미지 포스트(attachment 타입)의 아이디 기준 포스트 및 메타 데이터를
            // PHP 루프로 출력
        ?>
    </div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->

인클루드한 album-single.php 파일은 앨범 포스트 타입(pic_album)의 콘텐츠 출력을 위한 것이지만, 예제에서는 그 콘텐츠에 앨범 포스트에 갤러리 형식으로 추가한 attachment 포스트 타입의 이미지 콘텐츠를 출력한다는 것에 초점을 두어야 합니다. 이 기준을 염두에 둘 때 쉽게 이해할 수 있는데, 포스트 아이디(ID)를 어떤 포스트 기준으로 설정하는가가 핵심입니다.

사이트에서 앨범 포스트에 출력되는 이미지를 확인한 후에 이어갑니다. 브라우저에서 다음 링크에 각각 접근하여 싱글 앨범 포스트를 둘러보세요.

localhost/albums/sample01
localhost/albums/sample02
localhost/albums/sample03

사이트의 싱글 앨범 포스트에 Fleximage 형태 및 Lazy Load 효과로 이미지가 출력되는 것은 편집기에 열린 pics.js 파일의 다음 코드에 의한 결과임을 알리며, 이미 지난 과정에서 안내하여 추가한 것입니다. 일부는 생략하였습니다.

if ( currentCondition === 'single' ) {
    $('.flex-images').flexImages({ rowHeight: 400 }); // 앨범 싱글 페이지
}
$('img.lazy').lazyload({
    effect: "fadeIn"
});

다시, 위의 자바스크립트 변수 데이터는 역시 지난 과정에서 이미 정의한 다음 코드가 있기에 가능한 것입니다.

// 테마 루트 inc/enqueue-script.php 28번 줄에서 32번 줄
elseif ( is_singular( array( 'attachment', 'pic_album' ) ) ) {
    wp_localize_script('pics-js', 'currentPage', array(
        'current_condition' => 'single',
    ));
}

워드프레스 갤러리 출력

편집기의 album-single.php 파일 13, 14, 15번 줄은 다음과 같습니다.

// 13, 14, 15번 줄
$cuid = get_the_ID(); // 현재 앨범 포스트 ID
$gallery = get_post_gallery( $cuid, false ); // 현재 앨범 포스트의 갤러리
//echo '<pre>' . print_r( $gallery, true ) . '</pre>';

갤러리 출력 형태

3번 줄의 get_post_gallery 함수는 워드프레스의 포스트에 Shortcode 형태로 추가한 갤러리를 출력하는 함수로, true 설정일 때 워드프레스 갤러리 형태로 사이트에 출력할 수 있습니다. 다음 코드를 참고하세요.

$gallery = get_post_gallery( $cuid, true );
echo $gallery;

예제에서는 워드프레스 갤러리 형태를 사용하지 않으므로 false로 설정하여 데이터를 얻어 원하는 출력 방향을 정의하였습니다.

gallery = get_post_gallery( $cuid, false );
echo '<pre>' . print_r( $gallery, true ) . '</pre>'; // 15번 줄 활성화

위의 코드처럼 편집기 파일 15번 줄을 활성화한 후 사이트의 앨범 포스트 중 하나를 새로 고치면 다음의 배열 데이터를 볼 수 있습니다.

Array
(
    [ids] => 396,395,394,393,392,391,390,389,388
    [src] => Array
        (
            [0] => http://localhost/wp-content/uploads/sweet-2634742-150x150.jpg
            [1] => http://localhost/wp-content/uploads/swan-2428664-150x150.jpg
            [2] => http://localhost/wp-content/uploads/sun-1756322-150x150.jpg
            [3] => http://localhost/wp-content/uploads/street-photography-2563725-150x150.jpg
            [4] => http://localhost/wp-content/uploads/stone-age-computer-2414017-150x150.jpg
            [5] => http://localhost/wp-content/uploads/st-marks-basilica-2512621-150x150.jpg
            [6] => http://localhost/wp-content/uploads/woman-2542171-150x150.jpg
            [7] => http://localhost/wp-content/uploads/stinging-nettle-503939-150x150.jpg
            [8] => http://localhost/wp-content/uploads/winter-landscape-2571788-150x150.jpg
        )

)

갤러리 이미지의 이미지 사이즈

워드프레스에 갤러리를 추가할 때 섬네일(thumbnail) 이미지 사이즈가 기본으로 선택되어 있고, 지난 과정에서 갤러리 추가 시 변경하지 않았기에 위의 배열 데이터 이미지 주소가 섬네일 이미지 주소로 나오는 것입니다.

예제에서는 medium 이미지 사이즈를 사용하므로 갤러리 등록 시 medium 이미지 사이즈를 선택하고, 그에 따른 위의 갤러리 이미지 주소 데이터를 이용하여 album-single.php 파일에 프로그래밍하는 것도 하나의 방법입니다.

워드프레스 루프가 아닐 때 포스트 데이터

편집기의 album-single.php 파일 19, 20번 줄은 다음과 같습니다.

// 19, 20번 줄
$post_ids = explode( ',', $gallery[ 'ids' ] );
//echo '<pre>' . print_r( $post_ids, true ) . '</pre>';

2번 줄은 get_post_gallery 함수에 의한 포스트 아이디 데이터를 배열 데이터로 구분한 것입니다. 3번 줄을 활성화하면 사이트 앨범 포스트에서 다음과 같은 데이터를 볼 수 있습니다. 때로 변수의 데이터가 어떤 구조인지 확인하는 것이 필요하다는 참고의 뜻이므로 염두에 두지 않아도 됩니다.

Array
(
    [0] => 414
    [1] => 413
    [2] => 412
    [3] => 411
    [4] => 410
    [5] => 409
    [6] => 408
    [7] => 407
    [8] => 406
)

편집기 21번 줄에서 아래로 다음의 코드가 있으며, 나머지는 생략하였습니다.

foreach( $post_ids as $post_id ) {
    $attach_id = $post_id; // 갤러리에 추가된 이미지 포스트 ID
    $pic_title = get_post_field( 'post_title', $attach_id ); // 갤러리에 추가된 이미지 포스트 제목
    $author_id = get_post_field( 'post_author', $attach_id ); // 갤러리에 추가된 이미지 포스트 등록자 ID
    $author_name = get_the_author_meta( 'display_name', $author_id ); // 갤러리에 추가된 이미지 포스트 등록자 출력 이름
    // 이하 생략
}

앨범 포스트에 원하는 방식의 이미지 출력을 위해 앨범 포스트에 추가한 갤러리 이미지 데이터로 얻을 수 있는 것은 현재 이미지의 포스트 아이디(ID)입니다.

이때, 워드프레스 루프(The Loop)에서 포스트 아이디를 사용한다면 다음처럼 포스트 등록자의 아이디(post_author)와 메타 데이터를 얻을 수 있습니다.

// 워드프레스 루프 (The Loop)
while ( have_posts() ) : the_post();
    $author_id = get_the_author_meta('ID');
    $author_name = get_the_author_meta( 'display_name', $author_id );
endwhile; // End of the loop.

그러나, 워드프레스 루프가 아닐 때, 일반적인 PHP 루프일 때는 다음에 사용한 함수로 데이터를 얻을 수 있습니다.

// 워드프레스 루프가 아닐 때
foreach( $post_ids as $post_id ) {
    $author_id = get_post_field( 'post_author', $attach_id );
}

사용한 get_post_field 함수는 포스트 아이디 기준으로 데이터베이스 _posts 테이블의 필드 데이터를 얻을 수 있는데, 포스트의 필드 데이터를 얻는 가장 쉬운 방법이라는 것을 제외하면 성능 이점은 없습니다.

워드프레스에서 워드프레스 루프와 그 루프에서 사용할 수 있는 함수를 모두 기억할 필요는 없지만, 워드프레스 루프를 기준으로 코드를 정의하면 포스트 및 관련 데이터를 연결하는 데 조금 더 편리한 때가 있어 유리합니다. 참고 내용 정도로 생각하세요.

한편, 갤러리 이미지 포스트의 제목을 위한 다음 1번 줄 코드는 2번 줄처럼 사용해도 문제가 없습니다.

$pic_title = get_post_field( 'post_title', $attach_id );
$pic_title = get_the_title( $attach_id );

인클루드 파일과 코드

싱글 앨범 포스트 album-single.php 인클루드 파일의 코드는 예제의 이미지 포스트 아카이브를 출력하는 pic-archive.php 파일의 코드에서 일부 변수와 출력 데이터를 제외하면 같습니다. 이미지 포스트와 이미지 포스트의 메타 데이터로 원하는 데이터를 출력하는 것입니다.

몇 가지 조건으로 특정 포스트 타입일 때 등의 구분으로 하나의 파일로 사이트 전체에 사용할 수 있으며, 파일이 아니라 워드프레스 템플릿 태그(함수) 또는 특정 PHP 프로그래밍 방식으로 조금 더 간단하게 구성할 수 있습니다. 또, 지금까지 추가하여 구성한 여러 테마 템플릿 파일도 프로그래밍으로 줄일 수 있습니다.

예제에서 같은 패턴의 코드를 반복 사용하는 것과 워드프레스 템플릿 계층 및 인클루드 함수를 사용하여 파일을 추가하는 것은 학습을 위한 목적이 우선이며, 목적은 프로그래밍이 아니라 과정의 경험임을 한 번 더 기억하기 바랍니다. 실제 자신의 워드프레스 웹사이트를 구성할 때 철저한 설계로 유연하게 처리하세요.