워드프레스 템플릿 태그

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

둘러보기 페이지, 검색 결과 페이지, 아카이브 페이지는 현재 워드프레스의 숫자 페이지 내비게이션 함수를 사용하여 여러 페이지로 나눠 이미지 포스트를 출력합니다. 이 함수는 숫자의 페이지 넘버를 표시하지만, 다른 옵션을 설정하지 않으면 숫자 페이지가 출력되지 않습니다.

the_posts_navigation 숫자 페이지 내비게이션

또, 등록자(Author) 아카이브 페이지에는 다음 그림처럼 아카이브 페이지 이름과 등록자 이름이 출력됩니다.

기본 등록자 아카이브 페이지 제목

분류 아카이브 페이지에는 아카이브 페이지 이름과 함께 term 이름이 출력됩니다.

분류 아카이브 페이지 제목

싱글 이미지 포스트 페이지에는 다음 그림처럼 아직 처리하지 않은 등록자의 포스트 관련 정보를 임시 텍스트 ‘이미지, 추천, 다운로드’로 대체한 상태입니다.

싱글 이미지 포스트 페이지의 등록자 정보

이번 장에서는 아카이브 페이지에 쿼리에 의한 이미지 포스트의 개수와 term 이름을 출력하고, 등록자 아카이브 페이지 및 싱글 이미지 포스트 페이지에는 등록자의 이미지 포스트 등록 개수와 기타 메타 데이터를 출력합니다. 이번 장에서 진행할 데이터 출력 방법을 워드프레스 ‘템플릿 태그’로 부릅니다.

템플릿 태그

워드프레스에서 템플릿은 템플릿 파일과 같고, 템플릿 파일은 사이트에서 데이터 및 모든 출력 요소를 결정하는 테마의 파일로 말할 수 있습니다. 이때, 템플릿 파일에 사용하는 고유한 기능이 정의된 함수를 템플릿 태그Template Tags라고 부릅니다. 함수Functions가 꼭 템플릿 태그는 아니지만, 템플릿 파일에 사용하는 모든 함수를 템플릿 태그로 말해도 문제가 없습니다. 워드프레스가 기본으로 제공하는 템플릿 태그 외에 사용자가 직접 정의하여 사용해도 템플릿 태그입니다. 템플릿 태그는 실체가 있는 특정 목록이 아니라 ‘사용 방법’에 의한 ‘용어’입니다.

먼저, 다음 목록의 템플릿 파일을 편집기로 엽니다.

  • inc/template-tags.php
  • template-parts/pic-single-side.php
  • archive.php
  • search.php
  • index.php

테마 루트 inc/template-tags.php 파일은 예제에서 사용하는 템플릿 태그를 모은 것인데, 언더스코어 테마를 생성할 때 기본으로 추가된 것이며, 포스트 메타 데이터와 관련한 템플릿 태그 일부가 미리 정의되어 있습니다. 파일 이름과 템플릿 태그는 프로그램적인 관련이 없으며 구분의 목적입니다.

숫자 페이지 내비게이션

‘둘러보기(is_home)’ 페이지 템플릿 파일은 편집기의 index.php 파일인데, 33번 줄의 the_posts_navigation 함수에 의해 숫자 페이지 내비게이션을 출력합니다. 물론 지금은 숫자 페이지 넘버로 표시되지 않습니다. 이 함수 역시 템플릿에 사용한 템플릿 태그입니다. 그러나, 예제에서 나중에 ‘더보기’ 버튼을 조건에 따라 출력하기 위해서 템플릿 태그를 따로 만들어 변경해봅니다.

다음 코드를 편집기에 열린 template-tags.php 파일 맨 아래에 추가하고 저장합니다.

/* 더보기 버튼, 숫자 페이지 내비게이션 */
function pics_posts_navigation() {
    
    // 나중에 추가하여 변경
    
    the_posts_pagination( array(
        'mid_size' => 5,
        'prev_text' => '«',
        'next_text' => '»',
    ) );

}

위 코드의 pics_posts_navigation 함수가 새로 추가할 템플릿 태그입니다. 함수 the_posts_pagination 설정에 관하여 따로 안내하지 않으므로 코덱스를 참고하기 바라며, 지정한 설정이 있을 때 사이트에서 숫자 페이지 내비게이션으로 출력된다는 정도만 나중에 확인하세요.

다음 3개 파일에서 숫자 페이지 내비게이션을 출력합니다.

  • index.php
  • archive.php
  • search.php

위의 각 파일에서 다음 1번 줄을 찾아 3번에서 5번 줄로 대체하고 저장합니다.

the_posts_navigation();

if ( function_exists( 'pics_posts_navigation' ) ) : 
    pics_posts_navigation();
endif;

다음의 주소와 설명에 의한 사이트 페이지에 접근하여 숫자 페이지 내비게이션이 출력되는지 확인하세요.

  • localhost/pics
  • localhost/photocat/자연
  • localhost/author/photoman
  • 검색 폼의 검색 버튼 클릭

결과로 이해하기 바라며, the_posts_pagination 함수도 값을 자유롭게 변경하여 결과를 확인하는 것으로 이해를 더하세요.

아카이브 페이지 제목

이번에는 분류, 등록자, 둘러보기 아카이브 페이지의 제목 출력을 변경하고, 쿼리에 의한 개수를 출력합니다. 사이트 각 페이지의 현재 출력 상태를 이미 확인했으므로 템플릿 태그 코드를 추가하고, 변경 결과를 다시 확인합니다.

다음 코드를 template-tags.php 파일 맨 아래에 추가 및 저장합니다.

/* 아카이브 페이지 제목, 쿼리 결과 포스트 개수 */
function pic_the_archive_title( $before = '', $after = '' ) {
    // 등록자 포스트 아카이브 페이지
    if ( is_author() ) {
        echo '<div class="author_avatar">' . get_avatar( get_the_author_meta( 'ID' ), 85 ) . '</div>';
        echo $before . '<span class="vcard">' . get_the_author() . '</span>' . $after;
        //author_pics_count_info();
    }
    // 등록자 포스트 아카이브 제외 모든 아카이브 페이지
    elseif ( is_archive() && !is_author() ) {
        global $wp_query;
        $title = '<span class="qvar">' . single_term_title( '', false ) . '</span>';
        echo $before . $title  . '<sapn class="q_count">' . number_format_i18n( $wp_query->found_posts ) . '</span>' . $after;
    }
    // 둘러보기(is_home) 페이지
    if ( is_home() ) {
        global $wp_query;
        echo $before . '<sapn class="q_count">' . number_format_i18n( $wp_query->found_posts ) . '</span>' . $after;
    }
}

예제에서 아카이브 제목과 쿼리에 의한 포스트 개수를 출력하는 페이지는 다음과 같습니다.

  • 등록자 아카이브 페이지
  • 등록자 아카이브 제외한 페이지
  • 둘러보기 페이지

같은 템플릿 태그와 템플릿 파일(archive.php)을 사용하지만, 등록자 아카이브 페이지는 아바타, 포스트 등록 개수, 추천 개수, 다운로드 이미지 개수를 출력하기 위해 조건 태그로 구분하였습니다. 7번 줄의 함수가 관련 개수를 구하는 것인데, 구분하여 진행하므로 우선 비활성화하였습니다.

편집기의 archive.php 파일 16, 17번 줄을 다음 5번에서 7번 줄 코드로 대체하고 저장합니다.

// archive.php 파일
the_archive_title( '<h1 class="page-title">', '</h1>' ); // 16번 줄
the_archive_description( '<div class="archive-description">', '</div>' ); // 17번 줄

if ( function_exists( 'pic_the_archive_title' ) ) : 
    pic_the_archive_title( '<div class="page-title">', '</div>' );
endif;

편집기의 index.php 파일 12번 줄에서 20번 줄을 다음 코드로 대체하고 저장합니다.

if ( have_posts() ) : ?>

    <header class="page-header">
        <?php
            if ( function_exists( 'pic_the_archive_title' ) ) : 
                pic_the_archive_title( '<div class="page-title">', '</div>' );
            endif;
        ?>
    </header><!-- .page-header -->

    <?php

다음 목록의 주소에 접근하여 아카이브 제목 변경 결과를 확인하세요.

  • localhost/pics
  • localhost/photocat/자연
  • localhost/author/photoman

사이트 등록자 아카이브 페이지에서 아바타 출력을 확인했다면 template-tags.php 파일의 다음 1번 줄 코드를 2번 줄로 변경하고 저장합니다.

//author_pics_count_info();
author_pics_count_info();

등록자의 포스트, 추천, 다운로드 개수

등록자 아카이브 페이지와 싱글 이미지 포스트 페이지에는 다음 그림처럼 특정 개수 데이터를 출력할 것입니다.

등록자 아카이브 페이지 제목과 싱글 포스트 이미지의 등록자 정보

특정 회원의 등록 포스트 개수를 구하는 가장 간단한 방법은 count_user_posts 함수를 사용하는 것인데, 예제의 주 포스트 타입은  ‘attachment’, 이 타입의 공개 상태(post_status)는 ‘inherit’이므로 이 함수를 사용할 수 없습니다.

특정 포스트 타입 지원 여부 등을 생각할 필요 없이 개수나 합계와 같은 간단한 또는 단일 데이터를 획득하는 방법은 커스텀 쿼리를 사용하는 것인데, 그중에서도 wpdb 클래스를 사용하는 것이 가장 효율적입니다. 다음은 특정 아이디(ID)의 사용자가 등록한 attachment 포스트의 개수를 구하는 것입니다.

$post_count = $wpdb->get_var( $wpdb->prepare( 
    "SELECT COUNT(ID) FROM $wpdb->posts WHERE post_type = 'attachment' AND post_status = 'inherit' AND post_author = %d",
    get_the_author_meta( 'ID' )
) );

그러나, 예제에서는 포스트 추천 개수 및 다운로드 개수도 함께 구하기 위해 다음처럼 포스트 아이디(IDs)를 구합니다.

$author_pics_list = $wpdb->get_col( $wpdb->prepare( 
    "SELECT ID FROM $wpdb->posts WHERE post_type = 'attachment' AND post_status = 'inherit' AND post_author = %d",
    get_the_author_meta( 'ID' )
) );
$pics_list = implode( ',', $author_pics_list );

위에서 구한 포스트 아이디로 등록자 아카이브 페이지와 싱글 이미지 포스트 페이지에 출력할 등록자의 모든 포스트 추천 개수와 다운로드 개수는 다음처럼 구할 수 있습니다.

// 회원별 등록 포스트의 추천 합계
$author_pics_like_count = $wpdb->get_var( "SELECT sum(meta_value) FROM $wpdb->postmeta WHERE meta_key = 'simplefavorites_count' AND post_id IN ( {$pics_list} )" );

// 회원별 등록 포스트의 다운로드 합계
$author_pics_download_count = $wpdb->get_var("SELECT sum(meta_value) FROM $wpdb->postmeta WHERE meta_key = 'download_count' AND post_id IN ( {$pics_list} )" );

추천 합계는 플러그인에서 생성한 메타 데이터의 값 기준이며, 템플릿 태그로 사용하기 위해 다음처럼 마크업을 포함하여 구성할 수 있습니다.

/* 등록자(author)의 포스트, 추천, 다운로드 개수 */
function author_pics_count_info() {
    global $wpdb;
    // 회원별 등록 이미지 포스트 ID(s)
    $author_pics_list = $wpdb->get_col( $wpdb->prepare( 
        "SELECT ID FROM $wpdb->posts WHERE post_type = 'attachment' AND post_status = 'inherit' AND post_author = %d",
        get_the_author_meta( 'ID' )
    ) );
    $pics_list = implode( ',', $author_pics_list );

    // 회원별 등록 사진의 추천 합계
    $author_pics_like_count = $wpdb->get_var( "SELECT sum(meta_value) FROM $wpdb->postmeta WHERE meta_key = 'simplefavorites_count' AND post_id IN ( {$pics_list} )" );

    // 회원별 등록 사진의 다운로드 합계
    $author_pics_download_count = $wpdb->get_var("SELECT sum(meta_value) FROM $wpdb->postmeta WHERE meta_key = 'download_count' AND post_id IN ( {$pics_list} )" );

    // 등록 포스트(사진) 수
    echo '<div class="author_count_info">';
    if ( $author_pics_list ) {
        echo '<span title="등록 사진 수">' . number_format_i18n( count( $author_pics_list ) ) . '</sapn>';
    }
    // 총 추천 수
    if ( $author_pics_like_count ) {
        echo ' · <span title="총 추천 수">' . number_format_i18n( $author_pics_like_count ) . '</sapn>';
    }
    // 총 다운로드 수
    if ( $author_pics_download_count ) {
        echo ' · <span title="사진 다운로드 수">' . number_format_i18n( $author_pics_download_count ) . '</sapn>';
    }
    echo '</div>';
}

위의 코드를 복사하여 template-tags.php 파일 맨 아래에 추가하고 저장한 후 다음 주소의 페이지에 접속하여 결과를 확인해보세요.

  • localhost/author/photoman
  • localhost/author/photowoman

싱글 이미지 포스트 페이지의 등록자 정보

다음으로 pic-single-side.php 파일 23번 줄을 다음 코드로 대체하고 저장 후 싱글 이미지 포스트 페이지를 확인해보세요. 어떤 부분인지 따로 안내하지 않아도 짐작할 것입니다.

<?php
if ( function_exists( 'author_pics_count_info' ) ) : 
    author_pics_count_info();
endif;
?>

사이트 전체의 포스트 관련 데이터

이번에는 사이트 전체 기준으로 특정 포스트 개수와 추천 수가 가장 많은 포스트를 구해봅니다. 이번 장에서 출력하는 것은 아니지만, 나중에 사용할 데이터를 템플릿 태그로 미리 정의합니다.

첨부되지 않은 attachment 포스트 타입의 개수

예제의 주 콘텐츠는 특정 포스트에 첨부되지 않은 attachment 포스트 타입의 이미지입니다. 템플릿 태그 사용을 전제로 전체 개수는 다음처럼 간단하게 구할 수 있습니다.

// 첨부되지 않은 attachment 포스트 수
function total_pics_count() {
    global $wpdb;
    $total_pics_count = $wpdb->get_var( "SELECT count(ID) FROM $wpdb->posts WHERE post_status = 'inherit' AND post_type = 'attachment' AND post_parent = 0" );
    return $total_pics_count;
}

위의 코드를 template-tags.php 파일 맨 아래에 추가하고 저장합니다.

추천이 가장 많은 포스트

예제의 추천 기능은 Favorites 플러그인을 사용하여 구성한 것이며, 플러그인으로 생성한 simplefavorites_count 커스텀 필드(meta_key)에 추천 수가 누적 저장됩니다. 템플릿 태그로 사용할 것을 전제로 다음 코드로 정의할 수 있습니다.

// 추천이 가장 많은 포스트
function like_best_pic() {
    global $wpdb;
    $like_best_pic = $wpdb->get_var( "SELECT post_id FROM $wpdb->postmeta WHERE meta_key = 'simplefavorites_count' ORDER BY meta_value+0 DESC limit 1" );
    return $like_best_pic;
}

위의 코드도 template-tags.php 파일 맨 아래에 추가하고 저장합니다.

데이터베이스 _postmeta 테이블에서 simplefavorites_count 필드 값을 내림차순(DESC) 정렬한 것으로, 필드(meta_value)는 숫자 형식이 아니므로 정렬 기준에 0을 더한 것입니다. 해당 필드는 최소 한 번의 추천이 있을 때 생성되며, 이후 추천 수가 0이 되더라도 필드는 남아 있습니다. 추천 수가 같다면 먼저 생성된 필드가 우선하므로 그 필드의 포스트 아이디가 출력됩니다.

결과를 확인하고 싶다면 연습장 파일에 다음 코드를 추가하고 사이트에서 연습장 페이지를 새로 고쳐 존재하는 추천 수 저장 필드를 모두 삭제합니다.

$del_field_sql = "DELETE FROM $wpdb->postmeta WHERE meta_key = 'simplefavorites_count'";
$wpdb->query($del_field_sql);

위의 코드를 지우고, 다음 코드를 연습장 파일에 추가하고 저장한 후 사이트에서 연습장 페이지를 보면 포스트 개수만 출력될 것입니다.

echo '첨부되지 않은 포스트:' . total_pics_count();
echo '<br />추천이 가장 많은 포스트:' . like_best_pic();

사이트 전체에서 특정 이미지 포스트를 몇 개 선택하여 추천하고, 세션이 다른 브라우저에서 같은 이미지 포스트를 추천하는 등의 다양한 경우를 가정하여 연습장 페이지에서 결과를 확인해보세요.

이번 장에서 변경한 내용의 완성 파일을 다음 링크로 제공합니다. 압축을 풀어 테마 루트에 덮어쓰면 됩니다.

예제 목차

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. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

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

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

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

» 워드프레스 템플릿 태그

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

댓글 1