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

이번 장에서는 WP_Query 클래스를 사용한 커스텀 쿼리로, 페이지 템플릿을 사용하는 포스트 아카이브 페이지를 구성합니다. 괄호는 사이트에 출력된 메뉴 이름입니다.

• 앨범 아카이브 페이지 (앨범)
• 타입 post 아카이브 페이지 (블로그)
• 회원의 다운로드 및 추천 이미지 포스트 페이지 (활동)

앨범 아카이브 페이지

예제는 특정 포스트에 첨부되지 않은 attachment 포스트 타입의 이미지 콘텐츠만 아카이브 페이지 및 검색 결과 페이지에 출력한다는 것을 여러 번 알렸습니다. 앨범 커스텀 포스트 타입도 아카이브 페이지를 가질 수 있지만, 커스텀 포스트 타입을 등록할 때 다음 설정으로 해제하였습니다.

// 사이트 루트 wp-content/mu-plugins/pics-tax-cpt.php 78번 줄
'has_archive' => false,

아카이브 true 설정으로 변경해도 다음 코드가 있어 앨범 아카이브 페이지는 올바르게 출력되지 않습니다.

// 테마 루트 inc/main-query.php 15번 줄에서 19번 줄
if ( $query->is_archive() || $query->is_home() || $query->is_search() ) {
    $query->set( 'post_type', 'attachment' );
    $query->set( 'post_status', 'inherit' );
    $query->set( 'post_parent', 0 );
}

따라서, 앨범 포스트 타입의 아카이브 페이지는 페이지 템플릿에 WP_Query 클래스로 필요한 인수와 값을 설정하여 구성합니다.

지난 과정에서 페이지 템플릿 파일과 그 파일에 인클루드할 템플릿 파일을 제공하였으므로 테마 루트에 이미 있습니다. 인클루드 파일은 완성하여 제공하였고, 페이지 템플릿 파일은 지금 구성할 것입니다.

편집기로 다음 2개의 파일을 엽니다.

• page-templates/album-page.php
• template-parts/album/album-archive.php

대표 이미지(Featured Image)가 없는 포스트

지난 과정에서 싱글 앨범 포스트는 워드프레스 갤러리 형식으로 이미지를 선택 등록하였습니다. 그때 3개의 앨범 포스트를 등록했지만, 모두 대표 이미지는 등록하지 않았습니다. 물론, 등록해도 문제는 없습니다.

예제에서는, 앨범 아카이브 페이지 섬네일로 싱글 앨범 포스트에 대표 이미지가 있다면 그 이미지를, 없다면 갤러리로 추가한 이미지 중 첫 번째 이미지를 출력하도록 정의합니다. 현실에서 앨범 커버는 촬영한 사진이 아닌 이미지를 편집하여 만드는 때가 많다는 점을 가상의 기준으로 정한 것입니다.

편집기의 album-archive.php 파일 8번 줄에서 18번 줄은 다음과 같습니다.

$cuid = get_the_ID(); // 개별 앨범 포스트 ID
$featured_id = get_post_thumbnail_id( $cuid ); // 개별 앨범 포스트의 대표이미지(Featured Image) ID

// 대표이미지(Featured Image)가 없으면 앨범 포스트에 갤러리로 추가한 첫 번째 이미지 ID를 대표이미지로 사용
if ( !$featured_id ) {
    $gallery = get_post_gallery( $cuid, false ); // 앨범 포스트에 갤러리로 추가된 이미지
    $post_ids = explode( ',', $gallery[ 'ids' ] );
    $attach_id = current( $post_ids ); // 갤러리에 추가된 첫 번째 이미지 ID
} else {
    $attach_id = $featured_id; // 대표 이미지가 있을 때 대표 이미지 ID
}

위의 2번 줄에서 싱글 앨범 포스트의 대표 이미지를 구합니다. 대표 이미지가 없다면 6, 7, 8번 줄에 의해 싱글 앨범 포스트의 갤러리 이미지 중 첫 번째 이미지 아이디를 앨범 아카이브 페이지에 출력할 섬네일 아이디($attach_id)로 설정합니다. 대표 이미지가 있다면 10번 줄에 의해 대표 이미지 아이디가 앨범 아카이브 페이지의 섬네일 아이디가 됩니다.

편집기의 나머지 코드는 앨범 아카이브 페이지에 출력할 섬네일 하나의 루프로 여러 번 사용한 것이므로 설명하지 않습니다. 일부 출력 항목이 다른 것을 제외하면 같습니다.

대표 이미지 등록 전과 후의 결과는 앨범 아카이브 페이지 구성이 끝난 후에 확인할 것이며, 사이트에서 앨범 페이지에 접근하여 섬네일이 없는 화면을 먼저 확인하세요.

앨범 포스트 타입의 커스텀 쿼리

편집기에 열린 album-page.php 파일에 커스텀 쿼리를 정의하여 앨범 아카이브 페이지를 구성합니다. 먼저, 편집기 파일의 23번 줄에 앨범 아카이브 페이지를 위한 루프 파일을 미리 인클루드하였다는 것을 알립니다.

// 앨범 아카이브 페이지의 루프 파일
get_template_part( 'template-parts/album/album', 'archive' );

커스텀 쿼리를 구성할 때 다음처럼 조건(시나리오)을 먼저 생각하면 쉽습니다.

• 포스트 타입 : pic_album
• 공개 상태 : publish
• 한 페이지 출력 수 : 20
• 페이지 쿼리 변수 : 변수

위의 조건으로 WP_Query 인스턴스를 생성하면 다음과 같습니다.

$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$arg = array(
    'post_type' => 'pic_album', // 포스트 타입
    'post_status' => 'publish', // 공개 상태
    'posts_per_page' => 20, // 한 페이지 출력 수
    'paged' => $paged, // 페이지(paging)
);
$album_query = new WP_Query( $arg );

먼저, 편집기 파일에서 커스텀 쿼리 변수를 추가하여 워드프레스 루프를 변경합니다. 12, 21번 줄을 다음으로 변경합니다.

if ( $album_query->have_posts() ) : ?> // 12번 줄
while ( $album_query->have_posts() ) : $album_query->the_post(); // 21번 줄

그리고, 편집기 파일 11번 줄 다음에 위의 커스텀 쿼리 코드를 다음처럼 추가하고 저장합니다.

<?php // 11번 줄. 이 줄 다음에 추가
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$arg = array(
    'post_type' => 'pic_album', // 포스트 타입
    'post_status' => 'publish', // 공개 상태
    'posts_per_page' => 20, // 한 페이지 출력 수
    'paged' => $paged, // 페이지(paging)
);
$album_query = new WP_Query( $arg );

if ( $album_query->have_posts() ) : ?> // 이 줄 위에 추가

사이트에서 앨범 아카이브 페이지를 새로 고쳐 결과를 확인합니다. 다음 그림처럼 나오면 되는데, 출력 이미지가 달라도 됩니다.

커스텀 쿼리에 의한 포스트 개수, found_posts

이번에는 WP_Query 클래스로 생성한 커스텀 쿼리의 포스트 개수를 출력합니다. 편집기 파일에서 다음 1번 줄의 코드를 찾아 2번 줄로 변경합니다.

<?php the_title( '<div class="page-title">', '</div>' ); ?>
<?php the_title( '<div class="page-title">', '<sapn class="q_count">' . number_format_i18n( $album_query->found_posts ) . '</span></div>' ); ?>

변경하여 추가한 다음 코드는 WP_Query 클래스의 found_posts 프로퍼티(멤버 변수)로 쿼리에 의한 결과의 개수를 천 단위마다 콤마를 붙이는 지역(locale) 기준의 number_format_i18n 워드프레스 함수를 사용한 것입니다.

// 쿼리에 의한 포스트 개수
number_format_i18n( $album_query->found_posts )

사이트에서 앨범 페이지를 새로 고쳐 개수 ‘3’이 나오는지 확인하세요.

숫자 페이지 내비게이션 출력 및 메인 쿼리 데이터 복원

커스텀 쿼리에 의한 앨범 포스트의 아카이브 페이지를 구성할 때 페이지 번호를 출력하기 위해서 다음처럼 paged 쿼리 변수를 추가했습니다.

$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
'paged' => $paged

그러나, 페이지 번호를 출력하고 해당 페이지에 속한 포스트를 출력하기 위해서는 다음의 5번 줄에서 16번 줄 코드를 추가해야 합니다.

또, 18번 줄의 wp_reset_postdata 함수를 추가하여 커스텀 쿼리에 의한 $post 변수 데이터를 복원합니다. 추가하고 저장하세요.

endwhile;

echo '</div>'; // 이 줄 아래 추가

$big = 999999999; // need an unlikely integer
echo '<div class="number_pagelink">';
echo paginate_links( array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total' => $album_query->max_num_pages,
    'type'=> 'plain',
    'prev_text' => __('«'),
    'next_text' => __('»'),
) );
echo '</div>';

wp_reset_postdata();

18번 줄과 일부 마크업을 제외한 위의 코드는 코덱스 paginate_links 함수 페이지의 예시를 가져온 것으로 11번 줄만 변경한 것입니다. 나중에 코덱스의 해당 함수 페이지를 참고하여 학습하기 바라며, 필요할 때 일부 수정하여 사용해도 문제가 없습니다.

앨범 아카이브 페이지는 앨범 포스트만 출력하므로 wp_reset_postdata 함수를 사용하지 않아도 되지만, 학습의 뜻으로 추가하였습니다.

숫자 페이지 내비게이션 결과를 확인하려면 커스텀 쿼리 posts_per_page 인수를 ‘1’ 또는 ‘2’로 설정한 후 사이트의 앨범 페이지를 새로 고치면 됩니다. 직접 확인한 후 다시 ‘20’으로 설정하세요.

워드프레스 갤러리 이미지 출력 순서 및 아카이브 페이지 섬네일

앞에서 설정한 후 확인하지 않았던 대표 이미지 출력과 갤러리 이미지 출력 순서를 변경해봅니다. 먼저 사이트 앨범 아카이브 페이지 제목 ‘추억이 있는’ 앨범 포스트 이미지가 어떤 것인지(현재 식물) 기억합니다. 그다음 제목 ‘추억이 있는’ 앨범 포스트 편집 화면에 접근합니다.

다음 그림을 참고하여 편집 화면의 갤러리 영역을 클릭하고, 연필 아이콘을 클릭합니다.

다음 그림처럼 ‘점점 더 거친’ 이미지를 맨 앞으로 드래그합니다. 그리고 갤러리 업데이트 버튼을 클릭합니다.

제목 ‘추억이 있는’ 앨범 포스트 편집 화면에서 업데이트 버튼을 클릭합니다. 그리고 사이트에서 앨범 아카이브 페이지를 새로 고쳐 다음 그림과 같은 화면이 나오는지 확인하세요.

이 과정은 기초 정보인 워드프레스 갤러리 이미지 출력 순서 조정을 확인하고, album-archive.php 파일에 대표 이미지가 없을 때 갤러리 이미지 중 첫 번째 이미지를 앨범 아카이브 페이지 섬네일로 출력하도록 정의한 결과를 확인한 것입니다.

이번에는 대표 이미지를 등록하여 대표 이미지가 앨범 아카이브 페이지의 섬네일로 출력되는지 확인합니다. 간략하게 안내하므로 직접 변경하세요.

제목 ‘신비한 사진 모음’ 앨범 포스트의 편집 화면에서 ‘특성 이미지’ 메타 박스의 ‘특성 이미지 설정’ 링크를 클릭한 후 14번 째 이미지 ‘퇴근길에’ 이미지를 선택하고 특성 이미지 설정 및 앨범 포스트를 업데이트합니다. 그다음 사이트의 앨범 포스트 아카이브 페이지를 새로 고쳐 변경한 이미지가 섬네일로 출력되는지 확인합니다.

이때, 이미 업로드한 ‘퇴근길에’ 이미지는 앨범 포스트의 대표 이미지로 지정해도 그 앨범 포스트에 첨부된 이미지로 설정되지 않습니다. 만약, 대표 이미지로 지정할 이미지를 새로 업로드하여 추가한다면 그 이미지가 대표 이미지로 되며, 그 이미지는 그 앨범 포스트에 ‘첨부된 이미지’로 설정됩니다.

따라서, 예제의 기준에 따라 그 이미지는 예제의 모든 attachment 타입의 아카이브 페이지에는 나오지 않습니다. 확인하지는 않지만, 정말 궁금하다면 예제 기준에 맞는 사이즈의 이미지를 올려 확인하고 다시 지우세요.

타입 post 아카이브 페이지

‘블로그’ 페이지 구성은 이번 장의 완성 파일을 올린 후 핵심 내용만 간단하게 전달합니다. 또, 완성 파일에는 블로그 페이지 구성 내용에 이어서 나오는 ‘활동’ 페이지에 관련한 몇 가지 변경 및 완성 파일이 포함되어 있습니다.

다음 순서에 따라 처리하세요.

• 편집기에 열린 모든 파일을 닫습니다.
• 사이트에서 연습장 페이지에 접근합니다.
• 위 링크의 파일을 받고 압축을 풀어 테마 루트에 덮어씁니다.
• 연습장 페이지를 ‘한 번만’ 새로 고칩니다.
• 관리페이지의 글 목록에 3개의 포스트가 추가된 것을 확인합니다.
• 편집기로 테마 루트 page-templates/_note.php 연습장 파일을 엽니다.
• 편집기의 연습장 파일에서 다음 2번 줄과 6번 줄 사이에 있는 모든 코드를 지우고 저장합니다.

<?php
// 여기서

// #위와 아래 사이의 여기 모든 코드를 지우고 저장

// 여기 사이에
?>

완성 파일을 테마 루트에 덮어썼고, 연습장 페이지를 새로 고쳤다면 사이트 아래 ‘블로그’ 메뉴를 클릭했을 때 하나의 포스트와 숫자 페이지 내비게이션이 출력될 것입니다.

편집기로 테마 루트 page-templates/posts-page.php 파일을 열어 12번 줄에서 19번 줄을 보면 다음 코드가 있습니다.

$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$arg = array(
    'post_type' => 'post', // 포스트 타입
    'post_status' => 'publish', // 공개 상태
    'posts_per_page' => 1, // 한 페이지 출력 수
    'paged' => $paged, // 페이지(paging)
);
$posts_query = new WP_Query( $arg );

위의 코드는 WP_Query 클래스로 타입 ‘post’의 공개 포스트를 한 페이지에 1개 출력하는 커스텀 쿼리 인스턴스입니다. 앨범 아카이브 페이지와 같습니다.

편집기 파일의 나머지 코드도 커스텀 쿼리 워드프레스 루프, 숫자 페이지 내비게이션, $post 복원 등의 내용의 기본 흐름입니다.

다운로드 및 추천 이미지 포스트 아카이브

완성 파일을 올린 후에 사이트에서 ‘활동’ 메뉴를 클릭하면 다음 그림의 화면이 출력됩니다.

이미지는 그림과 다를 수 있는데, 이미지가 나오지 않는다면 다음 목록에 따라 진행하세요.

• ‘둘러보기’ 메뉴를 클릭합니다.
• 사이트 전체의 이미지 중 몇 개만 선택하여 각 이미지의 싱글 이미지 포스트 페이지에 접근합니다.
• 오른쪽 사이드 영역의 ‘추천하기’ 버튼을 클릭합니다.
• 또, 이미지 사이즈를 하나만 선택하여 ‘이미지 무료 다운로드’ 버튼을 클릭합니다.
• 실제 이미지를 받지 않고 취소하면 됩니다.
• ‘활동’ 메뉴를 클릭하고 이미지가 출력되는지 확인합니다.

‘활동’ 페이지의 이미지 포스트는 ‘특정 포스트에 첨부되지 않은’ 이미지의 싱글 페이지에서 회원이 추천 및 다운로드한 때가 있는 이미지 포스트 아카이브 페이지입니다.

다음 목록의 파일을 편집기로 엽니다. 연습장 파일은 이미 열려 있을 것이며, 아니라면 연습장 파일도 엽니다.

• assets/js/pics.js
• inc/enqueue-script.php
• inc/main-query.php
• inc/image-functions.php
• template-parts/navigation/navigation-top.php
• page-templates/user-history.php

먼저, 활동 페이지의 Fleximage 유형의 출력은 pics.js 파일 다음 코드에 의한 결과입니다. 설명이 추가되어 완성 파일에 포함한 것이며, 코드가 달라진 것은 없습니다.

if ( currentCondition === 'archive' ) {
    $('.flex-images').flexImages({ rowHeight: 350 }); // 둘러보기, 아카이브, 검색, 앨범 아카이브, 회원 활동
}

위의 코드에 사용한 자바스크립트 변수는 enqueue-script.php 파일 22번 줄 조건 이하 내용에 의한 것으로, 활동 페이지의 페이지 템플릿 user-history.php 파일을 조건으로 추가하였습니다.

elseif ( is_home() || is_archive() || is_search() || is_page_template( 'page-templates/album-page.php' ) || is_page_template( 'page-templates/user-history.php' ) ) {
    wp_localize_script('pics-js', 'currentPage', array(
        'current_condition' => 'archive',
    ));
}

페이지 접근 제한

‘활동’ 메뉴는 로그인 후 출력하도록 navigation-top.php 파일 18번 줄부터 정의되어 있습니다.

if ( is_user_logged_in() ) {
    echo '<li class="menu-item"><a href="' . esc_url( home_url( '/download-and-favorite' ) ) . '">활동</a></li>';
}

활동 페이지는 회원에게만 제공하는데, 로그인 전 메뉴가 아닌 URL 직접 접근의 경우 사이트 프런트 페이지로 이동하도록 main-query.php 파일 82번 줄부터 정의하였습니다.

add_action( 'template_redirect', 'restrict_access_page' );
function restrict_access_page() {
    if ( !is_user_logged_in() && is_page_template( 'page-templates/user-history.php' ) ) {
        wp_redirect( esc_url( home_url( '/' ) ) );
        exit;
    }
}

활동 페이지 접근 제어에 관하여 user-history.php 페이지 템플릿 파일에도 7번 줄부터 정의하였는데, main-query.php 파일에 이미 있으므로 생략해도 됩니다.

다운로드 및 추천 이미지 포스트 데이터

지난 과정에서 이미지 다운로드할 때 다운로드한 이미지 포스트 아이디(ID)를 회원의 메타 데이터로 저장하도록 정의했습니다. 편집기의 image-functions.php 파일 199번 줄부터 해당 코드가 있습니다. 회원이 추천한 이미지 포스트 아이디는 Favorites 플러그인에서 제공하는 함수로 구할 수 있습니다. 다음의 코드로 회원이 다운로드하거나 추천한 이미지 포스트 아이디를 조회합니다.

$cuid = get_current_user_id(); // 로그인 회원 ID
$user_download_post_ids = get_user_meta( $cuid, 'download_image_ids', true); // 다운로드 이미지 포스트 ids
$user_favorite_post_ids = get_user_favorites( $cuid ); // 추천 이미지 포스트 ids

회원이 하나의 이미지에 추천과 다운로드 모두 했을 때, 추천 또는 다운로드만 할 때도 있을 것입니다. 따라서 위의 코드를 중복 포스트 아이디를 병합할 때와 아닐 때로 구분하면 다음과 같습니다.

// 중복 포스트 ID 포함
$down_fav_list = array_merge( $user_download_post_ids, $user_favorite_post_ids );
// 중복 포스트 ID 병합
$down_fav_list_unique = array_unique( array_merge( $user_download_post_ids, $user_favorite_post_ids ) );

회원이 추천 및 다운로드한 포스트 아이디와 중복 및 병합 아이디를 확인하고 싶다면 편집기의 연습장 파일에 다음 코드를 추가하고 저장한 후 사이트에서 연습장 페이지를 보면 됩니다.

// 여기서

$cuid = get_current_user_id(); // 로그인 회원 ID
$user_download_post_ids = get_user_meta( $cuid, 'download_image_ids', true); // 다운로드 이미지 포스트 ids
$user_favorite_post_ids = get_user_favorites( $cuid ); // 추천 이미지 포스트 ids
$down_fav_list = array_merge( $user_download_post_ids, $user_favorite_post_ids ); // 중복 포스트 ID 포함
$down_fav_list_unique = array_unique( array_merge( $user_download_post_ids, $user_favorite_post_ids ) ); // 중복 포스트 ID 병합

echo '다운로드 이미지 포스트<pre>' . print_r( $user_download_post_ids, true ) . '</pre>';
echo '추천한 이미지 포스트<pre>' . print_r( $user_favorite_post_ids, true ) . '</pre>';
echo '다운로드 및 추천 포스트 - 중복 포함<pre>' . print_r( $down_fav_list, true ) . '</pre>';
echo '다운로드 및 추천 포스트 - 중복 제거<pre>' . print_r( $down_fav_list_unique, true ) . '</pre>';

// 여기 사이에

커스텀 쿼리

위의 코드를 기준으로 다음처럼 활동 페이지의 커스텀 쿼리를 정의할 수 있습니다.

$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
    'post_type' => 'attachment',
    'post_status' => 'inherit',
    'post_parent' => 0,
    //'post__in' => $down_fav_list, // 중복 포스트 ID 포함
    'post__in' => $down_fav_list_unique, // 중복 포스트 ID 병합
    'posts_per_page' => -1,
);
$user_query = new WP_Query( $args );

위의 6번 또는 7번 줄 중 어떤 것을 사용해도 같은 결과입니다. 직접 변경하여 확인하세요. 이때, 쿼리에 포함할 포스트 아이디 post__in 파라미터(인수)는 배열 데이터를 지정할 수 있으며 유용합니다.

편집기의 user-history.php 파일을 단계로 읽어보면 쉽게 이해할 수 있으므로 나머지 워드프레스 루프와 숫자 내비게이션 등의 요소는 안내하지 않습니다.

페이지 템플릿을 만들고, 기본 인수의 커스텀 쿼리와 워드프레스 루프로 특정 콘텐츠를 출력하는 이번 장의 내용은 워드프레스 커스텀 쿼리 시작할 때 가장 먼저 경험하는 유형이므로 익혀두는 게 좋습니다.