워드프레스 attachment 포스트 타입의 아카이브

연재고품격 고품질 워드프레스 무료 사진 저장소완결2

현재 과정까지의 예제에서 타입 attachment 포스트의 모든 아카이브 페이지에는 이미지 포스트가 출력되지 않습니다. 검색 결과도 마찬가지입니다. 워드프레스 아카이브의 기본 출력 포스트는 타입 post에 한정하도록 정의되어 있어 나타나는 결과로, 오류가 아닌 올바른 결과입니다.

예제는 타입 attachment 포스트의 하나인 이미지 포스트만 아카이브 페이지에 출력할 것이며, page 타입은 출력하지 않으며, post 타입은 나중에 템플릿 페이지에 커스텀 쿼리를 사용하여 출력할 것입니다. 따라서 워드프레스 아카이브 쿼리에 ‘attachment’ 타입을 추가하여 이미지 포스트를 출력합니다.

워드프레스 메인 쿼리

이미지 포스트의 아카이브 출력을 위해 이어서 안내하는 워드프레스 조건(태그, 함수)과 템플릿 파일에 관하여 간략하게 알아봅니다. 더 많은 관련 함수가 있지만, 이번 장에서 구성할 예제의 일부에 핵심적인 요소만 안내합니다.

is_home()

대부분 테마는 워드프레스 사이트의 첫 화면(페이지)에 타입 post의 포스트를 출력하도록 정의되어 있습니다. 테마에서 정의하였다는 뜻보다 어떤 정의도 하지 않았기에 워드프레스 기본 설정으로 타입 post의 포스트가 출력된다고 생각해야 합니다. 출력 수는 관리페이지의 설정에 의존합니다. 또, 템플릿 페이지 등의 사용자 정의 페이지가 아닌 테마의 ‘index.php’ 템플릿 파일을 사용합니다. 이때, 워드프레스는 is_home 조건에 의한 쿼리를 정의(선언)합니다. 지난 과정에서 간략하게 확인했는데, 예제에서는 ‘둘러보기’ 메뉴에 의한 페이지가 is_home 조건을 가집니다. 예제 사이트에서 ‘둘러보기’ 메뉴를 클릭한 후 어드민바에 있는 Query Monitor(이후부터 QM으로 표기) 영역에 마우스를 올려보세요.

is_archive()

지난 과정까지 싱글 이미지 포스트 페이지에 데이터를 출력하는 작업을 진행했지만, 분류 term과 등록자의 이미지 포스트 아카이브 페이지는 아직 이미지 포스트가 출력되지 않습니다. 타입 attachment 포스트는 기본으로 아카이브에 출력되지 않기에 나오는 올바른 결과임을 이미 알렸습니다. 아래 목록은 등록자 포스트 아카이브와 term 아카이브 URL 및 조건 태그를 나열한 것으로 일부 예를 든 것입니다.

  • localhost/author/photowoman (등록자 포스트 아카이브, is_author)
  • localhost/camera/nikon-d90 (카메라 분류의 term 아카이브, is_tax)
  • localhost/photocat/여행 (2차분류의 term 아카이브, is_tax)

위의 모든 조건은 is_archive 하나로 정의할 수 있습니다.1 또, 현재 예제에서 테마 ‘archive.php’ 템플릿 파일에 의존합니다. 위의 목록에 있는 URL 페이지로 접근한 후 사이트에서 QM 영역에 마우스를 올려보세요.

is_search()

브라우저 주소 입력란에 다음을 입력한 후 결과를 확인하면 page 타입의 포스트가 출력될 것이며, 이미지 포스트는 나오지 않을 것입니다. 이 결과도 앞에서 안내한 이유와 같습니다.

  • localhost/?s=

이때의 조건은 is_search, 테마의 ‘search.php’ 파일에 의존한 결과입니다. 역시 사이트에서 QM 영역에 마우스를 올려보세요.

is_main_query()

지금까지의 예제 과정에서 is_home, is_archive, is_search 조건과 대응하는 ‘index.php’, ‘archive.php’, ‘search.php’ 테마 템플릿 파일에 쿼리와 관련한 그 어떤 추가 정의를 하지 않았지만, URL 요청에 따라 워드프레스가 특정 조건을 선언하고 그에 맞는 결과(포스트)를 출력하였습니다. 타입 attachment 포스트는 기본으로 출력 정의가 되어 있지 않으므로 나오지 않는 것이 현재는 올바른 결과입니다.

이처럼 사용자가 추가 정의하지 않은, 조건과 템플릿 파일에 따라 워드프레스가 출력하는 포스트 쿼리를 ‘메인 쿼리main query’라고 부릅니다. ‘사전 정의된 워드프레스 기본의 쿼리’로 해석할 수도 있습니다. 반대의 뜻으로 ‘Second Query’가 있지만, 넓게 ‘커스텀 쿼리Custom Query’로 부르는 것이 편리합니다.

메인 쿼리도 is_main_query 조건으로 다른 is_home 조건 등과 연속하여 관계하므로 사용자가 특정 포스트 출력 제어를 위해 메인 쿼리 조건과 다른 조건을 함께 사용하는 것이 일반적입니다.

메인 쿼리에 attachment 타입 포스트 추가

코드를 추가하여 이미지 포스트를 아카이브에 출력하는 것으로 이해를 더합니다. 편집기로 테마 루트의 functions.php 파일을 열고 맨 아래에 다음 코드를 추가하고 저장합니다.

// functions.php 파일을 열고 맨 아래에 다음 코드를 추가
require get_parent_theme_file_path( '/inc/main-query.php' );

위의 코드에 있는 ‘main-query.php’ 파일은 메인 쿼리와 관련한 일부 코드만 추가할 것으로 독자의 나중 활용을 위해 구분하여 두는 것을 목적으로 합니다.

  • 테마 루트 inc 디렉터리에 ‘main-query.php’ 이름의 파일을 만듭니다.
  • 만든 파일을 편집기로 엽니다.

바로 코드를 추가해봅니다. 다음 코드를 main-query.php 파일에 추가하고 저장합니다.

<?php
add_action( 'pre_get_posts', 'pics_attachment_query_filter' );
function pics_attachment_query_filter( $query ) {
    if ( ! is_admin() && $query->is_main_query() ) { // 관리페이지가 아닐 때, 메인 쿼리일 때
        /* 타입 attachment 포스트를 메인 쿼리에 추가 */
        if ( $query->is_archive() || $query->is_home() || $query->is_search() ) { // 메인 쿼리가 특정 조건일 때
            $query->set( 'post_type', 'attachment' ); // attachment 포스트 타입
            $query->set( 'post_status', 'inherit' ); // 'inherit' 포스트 상태 (기본으로 attachment 포스트 타입에만 존재하므로 생략 가능)
            $query->set( 'post_parent', 0 ); // 예제처럼 attachment 포스트를 단독으로 사용할 때 (특정 포스트에 첨부하여 등록하지 않을 때)
        }
    }
}

pre_get_posts

2번 줄에서 사용한 pre_get_posts 훅이 코드의 핵심으로 쿼리 오브젝트를 결정하는 것입니다. 이 훅은 메인 쿼리를 변경하는 것이 아니라 메인 쿼리를 사용자가 정의(결정)할 때 사용하는 유용한 훅이므로 사용 패턴을 먼저 익히는 것이 유리합니다. 나머지는 코드의 설명을 참고하고, 더 많은 정보는 코덱스에서 얻으세요.

WordPress Codex – pre_get_posts

아래 주소를 브라우저에 각각 입력하여 접근하여 이미지 포스트가 출력되는지 확인하세요. 그림으로 따로 안내하지 않습니다.

  • localhost/pics
  • localhost/author/photoman
  • localhost/author/photowoman
  • localhost/mediacat/사진
  • localhost/camera/nikon-d90
  • localhost/photocat/여행
  • localhost/?s=

위 목록의 주소는 ‘둘러보기’ 페이지에 해당하는 is_home 조건, 등록자 아카이브의 is_author 조건, term 아카이브의 is_tax 조건, 검색 조건 is_search에 해당하는 것으로 모든 페이지에 출력되는 포스트 수는 ‘20’개이며 관리페이지의 설정에 의존합니다. 관리페이지 설정에 의존하지 않으려면 다음 코드를 추가하면 됩니다.

// 관리페이지 설정에 의존하지 않으려면 다음 코드를 추가
$query->set( 'posts_per_page', 10 ); // ‘10’은 10개를 출력한다는 것으로 원하는 수를 입력

검색 결과 페이지에는 코드를 추가하기 전 page 타입의 포스트가 출력되었지만, 추가한 후 attachment 타입의 이미지 포스트만 출력된 것을 볼 수 있습니다.

워드프레스에 사전 정의된 쿼리를 ‘메인 쿼리’로 간단하게 생각할 수 있다고 하였고, 지금처럼 사용자가 변경하면 ‘커스텀 쿼리’로 정의할 수 있다고 하였습니다. 그러나 지금의 방식은 ‘변경’이 아닌 ‘결정’의 개념으로 이해하면 됩니다. 또, pre_get_posts 훅으로 메인 쿼리를 결정할 수 없는 조건도 있으므로 코덱스와 여러 예시 및 예제를 통해 ‘경험적 이해’를 축적하는 것이 좋습니다.

다음 링크의 파일을 받아 압축을 푼 후 테마 루트에 덮어쓰세요.

다음 장에서는 공개 소스와 워드프레스 자바스크립트 변수 데이터 등록 방법으로 아카이브 페이지에 이미지 포스트 섬네일 목록 출력을 구성합니다.

예제 목차

0. 고품격 고품질 워드프레스 무료 사진 저장소

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

3. 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

7. 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

9. 워드프레스 이미지 파일 제어

10. 타입 attachment 템플릿과 image.php

11. 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

13. 이미지 메타 데이터를 포스트 메타 데이터에 추가

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

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

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

24. 구글 지도에 표시하는 사진 촬영 위치

» 워드프레스 attachment 포스트 타입의 아카이브

26. 워드프레스 함수로 자바스크립트 변수 데이터 생성

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘pic_album’

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

31. 워드프레스 WP_Query

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

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 워드프레스 옵션 페이지, 옵션 필드

38. 워드프레스 사이트 프런트 페이지

39. 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 워드프레스 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

43. 간단한 워드프레스 코멘트 폼 수정

44. 워드프레스 대시보드 위젯 추가

45. 워드프레스 REST API 간략 이해

46. 워드프레스 REST API 응답에 커스텀 필드 추가

47. 워드프레스 REST API 커스텀 라우트 및 엔드포인트

48. 워드프레스 REST API 커스텀 엔드포인트로 구글 클러스터 지도 마커와 인포 윈도 표시

49. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 포스트 Ajax Load More

50. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 코멘트 Ajax Load More

51. 워드프레스 REST API 인증과 제한 및 제어