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

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

완성 예제 사이트의 싱글 이미지 포스트 페이지에는 다음 그림처럼 ‘관련 있는 사진들’이 있습니다. 싱글 이미지 포스트의 photocat term 아이디(ID)와 같은 term이 있는 포스트를 ‘랜덤’으로 출력하며, 이때 접근한 싱글 이미지 포스트(ID)는 제외합니다.

싱글 이미지 포스트의 관련 사진

이번 장에서 구성하는 ‘관련 있는 사진들’은 이전에 구성한 페이지와 비슷하므로 완성 파일을 올린 후 안내합니다.

연습장 파일만 제외하고 편집기에 열린 모든 파일을 닫습니다. 그리고, 다음 링크의 파일을 받은 후 압축을 풀어 테마 루트에 덮어쓰세요.

테마 루트에 변경 파일을 올린 후 다시 다음 파일을 편집기로 엽니다.

  • assets/js/pics.js
  • template-parts/pic/pic-realted.php

그리고, 사이트에서 아무 싱글 이미지 포스트 페이지에 접근하여 출력 결과를 확인하세요.

싱글 이미지 포스트 페이지의 ‘관련 사진’

편집기에 열린 pic-related.php 파일 8번 줄에서 27번 줄의 코드는 다음과 같습니다.

$obj_id = get_the_ID(); // 현재 포스트 ID
$photocat_ids = wp_get_post_terms( $obj_id, 'photocat',  array('fields' => 'ids') ); // 포스트의 photocat taxonomy term id(s). 예제에서는 1개만 존재

$args = array(
    'post_type' => 'attachment',
    'post_status' => 'inherit',
    'post_parent' => 0,
    'post__not_in' => array( $obj_id ), // 현재 포스트(접근한 싱글 이미지 포스트) 제외
    'posts_per_page' => 6,
    'orderby' => 'rand',
    'no_found_rows' => true, // 쿼리에 의한 개수를 사용하지 않을 때 true.
    'tax_query' => array(
        array(
            'taxonomy' => 'photocat',
            'field' => 'term_id', // Default 'term_id'
            'terms' => $photocat_ids
        )
    )
);
$related_query = new WP_Query( $args );

포스트에 연결된 term

2번 줄 wp_get_post_terms 함수로 $obj_id 포스트와 연결된 photocat 분류 term 아이디(ID)를 조회하였습니다. 제한을 두지 않았지만, 예제에서는 하나의 이미지 포스트에 하나의 term을 선택하였습니다.

커스텀 쿼리 인스턴스

WP_Query 클래스로 생성한 $related_query 인스턴스 파라미터에서 8번 줄은 현재 접근한 포스트를 쿼리에서 제외하는 것입니다. 11번 줄은 쿼리에 의한 데이터베이스 전체 열 계산을 중지하는 것으로 포스트 아카이브 페이지에 사용한 페이징(paging) 및 포스트 개수와 같은 데이터를 사용하지 않는다면, 위의 코드와 같은 설정이 사이트 성능 향상에 작은 이점이 있습니다.

no_found_rows

사이트에서 no_found_rows 설정에 관하여 잠깐만 확인합니다. 현재 true 상태에서 사이트의 ‘둘러보기’ 메뉴를 클릭한 후 검색 필드에 ‘달나라’를 입력합니다. 검색 결과의 포스트의 싱글 페이지에 접근하여 어드민바의 쿼리 수를 확인합니다. 다음 그림의 ‘25’를 확인하세요.

no_found_rows 파라미터

편집기의 pic-related.php 파일 18번 줄을 false로 변경하고 저장 후 사이트에서 ‘달나라 여행’ 페이지를 새로 고쳐 쿼리 수를 확인하면 ‘26’이 나올 것입니다. 다시 원래대로 true로 변경하고 저장합니다.

워드프레스 5 - 매물의 추억

예제에서는 체감하기 어렵지만, 사이트 콘텐츠 수가 방대할 때 이와 같은 설정의 차이가 사이트 성능에 일정 영향을 미칠 수 있습니다. 실제 어떤 쿼리에 관한 것인지는 확인하지 않지만, 혹시 궁금하다면 QM 하위 메뉴의 Queries 메뉴로 확인해도 됩니다.

tax_query 파라미터

위의 코드 12번 줄 tax_query 파라미터는 포스트에 연결된 분류의 term을 조회하는 것으로 현재 싱글 포스트에 연결된 term 아이디를 기준으로 설정한 것입니다. 관련 포스트 쿼리의 핵심 쿼리입니다.

분류(taxonomy) 쿼리를 위한 WP_Tax_Query 클래스가 있지만, SQL 구문을 구하기 위해 사용하는 때를 제외하고, 독립적으로 사용하지 않습니다. 또, 포스트와 사용자 및 코멘트 메타 데이터 쿼리를 위한 WP_Meta_Query 클래스가 있지만, SQL 구문을 작성할 때를 제외하면 직접 사용하지 않습니다. 분류와 메타 데이터 기준의 ‘포스트’를 위한 쿼리는 보통 WP_Query 클래스의 파라미터로 정의한다는 정도만 숙지하면 됩니다

wp_reset_postdata

사이트에서 제목 ‘달나라 여행’ 포스트 페이지의 오른쪽 영역에 있는 추천 수, 이미지 사이즈 목록의 숫자, 카메라 분류, 카테고리, EXIF 정보, 지도가 어떤 데이터인지 대략 기억하세요. 그리고 편집기에 열린 pics-related.php 파일 50번 줄을 다음처럼 비활성 후 저장합니다.

// pic-related.php 파일 50번 줄, 아래처럼 ‘//’ 추가
//wp_reset_postdata();

사이트의 ‘달나라 여행’ 포스트 페이지를 새로 고쳐 오른쪽 영역의 데이터 변화를 확인해보세요. 여러 번 고쳐 데이터 변화를 확인하세요. 데이터 변화를 확인한 후 50번 줄을 다시 활성화합니다.

50번 줄의 wp_reset_postdata 함수의 사용 결과를 실제 확인한 것으로 충분하므로 설명은 필요가 없습니다.

관련 이미지 출력 제어

편집기의 pics.js 파일 12번 줄에 다음 코드가 있습니다.

// pics.js 12번 줄
$('#realted_photo').flexImages({ rowHeight: 150, maxRows:6, truncate:true });

지난 과정에서 안내한 것으로 한 줄에 최대 6개의 이미지를 출력하며, 한 줄을 채우지 못하는 이미지 줄은 출력하지 않는다는 설정입니다. 위의 자바스크립트에서 설정한 6개는 쿼리에서 설정한 싱글 이미지 포스트의 관련 이미지 출력 수 6개와 맞춘 것인데, 쿼리 설정이 우선합니다.

// 관련 이미지 포스트 출력 수
'posts_per_page' => 6,

쿼리에서 10개로 변경하면 10개가 출력됩니다. 물론, 관련 이미지 포스트가 10개 이상일 때 10개 모두 출력될 수 있으며, 자바스크립트 설정으로 한 줄을 채우지 못하는 이미지 출력일 때 10개 미만으로 출력될 수 있습니다. 운영자의 선택에 따르며, 예제 구성 결과에 문제가 없으므로 원하는 것으로 변경해도 됩니다.

예제 목차

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. 구글 지도에 표시하는 사진 촬영 위치

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

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

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

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

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

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

31. 워드프레스 WP_Query

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

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

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 인증과 제한 및 제어

어떤 의견이 있거나 궁금한 무언가 있다면 다음 링크의 사이트를 이용하세요.

이메일로 소식 받기

이메일로 새로운 포스트를 받으려면 아래에 이메일 주소를 입력하고, 구독합니다! 버튼을 클릭하세요. 그리고 입력한 이메일 계정에 접속하여 구독 확인 메일 내용을 확인하세요.