워드프레스 아바타와 Author Archives

이번 장에서는 싱글 이미지 포스트 페이지 오른쪽에 다음 그림의 결과를 출력하는 것이 목표입니다. 그림에 간략한 설명을 추가하였는데, 등록자 정보와 추천 버튼은 워드프레스와 플러그인에서 제공하는 함수로 간단하게 처리할 수 있습니다.

먼저, 테마 루트 template-parts/pic/pic-single-side.php 파일을 편집기로 엽니다. 이 파일은 테마 루트 image.php 파일에 인클루드한 것으로 이번 장뿐만 아니라 오른쪽 영역의 모든 구성이 끝날 때까지 사용합니다.

이미지 포스트 등록자 아바타

열린 pic-single-side.php 파일은 현재 특정 내용이 없는데, 다음처럼 필자가 미리 준비한 소스로 변경합니다. 8, 11번 줄에 함수를 사용하여 아바타와 아카이브 링크를 추가합니다.

<?php
/* image.php 사이드 인클루드 파일 */


?>
<div class="image_author">
    <div class="author_avatar">
        // 아바타
    </div>
    <div class="author_detail">
        <div class="author_nick">등록자 포스트 링크(Author Archives)</div>
        <?php echo '이미지, 추천, 다운로드'; ?>
    </div>
</div>
<?php // 등록자 정보 ?>

워드프레스에서 아바타는 다음 함수로 간단하게 출력할 수 있습니다.

// 기본 예시
get_avatar( $id_or_email, $size, $default, $alt, $args );

예제에서는 다음처럼 등록자 ID와 아바타 사이즈만 지정하여 출력합니다. 추가 정보는 코덱스를 참고하세요.

// ID와 아바타 사이즈
get_avatar( get_the_author_meta( 'ID' ), 55 );

최종 코드는 다음으로, 8번 줄에 추가하고 저장합니다. 그리고 사이트에서 결과를 확인합니다.

// 8번 줄에 다음 코드만 추가
<?php echo get_avatar( get_the_author_meta( 'ID' ), 55 ); ?>

관리페이지의 ‘토론’ 설정 페이지에서 ‘아바타 표시’ 옵션을 선택해야 사이트에서 아바타가 출력된다는 것은 사전 숙지 사항이며, 아바타로 출력할 이미지에 ‘그라바타^Gravatar’ 서비스를 사용할 수 있다는 것은 워드프레스 사용 경험이 있다면 대부분 아는 내용이므로 생략합니다.

Author Archives

등록자의 포스트 아카이브도 함수로 쉽게 출력할 수 있습니다. 다음은 그 함수의 기본 예시입니다.

// 기본 예시
get_author_posts_url( $author_id, $author_nicename );

해당 함수는 URL 정보를 반환하는데, 등록자 ID만 사용하여 다음처럼 추가할 코드를 작성하고, 파일 11번 줄과 대체하고 저장합니다. 그리고 사이트에서 결과를 확인합니다.

<div class="author_nick">
    <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>"><?php the_author(); ?></a>
</div>

사이트에서 출력되는, 아카이브 링크가 있는 등록자 이름을 클릭하면 데이터가 없다고 나오는데, 지금의 과정에서는 그것이 올바른 결과며, 브라우저 주소 필드의 URL만 확인하면 됩니다. 나중의 과정에서 간단하게 처리하므로 지금은 염두에 두지 않아도 됩니다.

esc_url()

위의 코드 2번 줄에 사용한 esc_url 함수는 워드프레스 데이터 ‘Validating Sanitizing and Escaping User Data’ 관련 함수 중 하나로, ‘데이터 적합성과 부호화를 통한 보안’에 관련된 내용입니다. 이런 내용은 예제에서 구분하여 따로 안내하지 않으며, 제공하는 코드를 그대로 따라 사용하기 바랍니다. 특정 과정에서 간략하게 짚을 경우는 있습니다.

‘URL 및 html 속성 출력 시 항상 부호화’할 것을 코덱스에서 권장하고 있으므로 예제의 전체 코드에서 권장 사항을 제대로 적용하지 못한 경우가 있다면 나중에 더 꼼꼼한 자신만의 코드를 만드세요.

플러그인 제공 함수로 템플릿 파일에 추천 버튼 추가

이미지 포스트 수, 추천 및 다운로드 수 출력은 나중에 다시 처리하므로 비워두고, 플러그인에서 제공하는 함수로 추천 버튼을 출력합니다. 추천 버튼 추가는 함수만 추가하면 되므로 다음처럼 정리할 수 있습니다.

<?php
if ( function_exists( 'get_favorites_button' ) ) {
    echo '<div class="pics_favorites">';
        echo get_favorites_button( get_the_ID() );
    echo '</div>';
}
// 추천 버튼
?>

위의 코드는 함수가 존재할 때를 출력 조건으로 둔 것으로, 4번 줄 함수가 플러그인에서 제공하는 함수입니다. 코드 전체를 pic-single-side.php 파일에 이어서 추가하고 저장 후 사이트를 확인하면 버튼을 볼 수 있습니다. 버튼을 클릭하여 추천 후의 결과도 확인하세요.

이 버튼 클릭으로 저장되는 데이터는 데이터베이스 ‘_postmeta’ 테이블에 ‘simplefavorites_count’ 필드 이름으로 해당 포스트의 추천 합계가, ‘_usermeta’ 테이블에 ‘simplefavorites’ 필드 이름으로 추천 회원 ID 및 해당 포스트 ID 등이 저장됩니다.

버튼의 스타일은 지난 과정의 관리페이지 해당 플러그인 설정에 의한 결과입니다. 각자가 원하는 색으로 변경하여도 완성 예제에 영향이 없으므로 버튼 스타일이 마음에 들지 않는다면 변경하면 됩니다. 필자는 추천 전과 후 글자(text)의 색을 흰색으로 변경하였습니다.

템플릿 편집 방식으로 워드프레스 웹사이트를 구성할 때 템플릿에서 사용할 수 있는 함수나 API를 제공하는 플러그인의 사용은 효율적일 때가 많습니다.

WP_Post Object, $post

지금 예제의 과정은 싱글 이미지 포스트 페이지에서 해당 ‘포스트’와 관련한 데이터를 출력하고 있습니다. 워드프레스는 싱글 포스트 페이지 요청이 있을 때 해당 포스트와 관련한 데이터를 $post 변수에 저장합니다.

먼저, 변수 $post에 어떤 데이터가 있는지 확인하기 위해 다음 코드를 현재 작업하는 파일 적당한 곳에 삽입하고 저장합니다. (파일에서 3번 줄에 추가하면 됩니다.)

// 파일에서 3번 줄에 추가
echo '<pre>' . print_r( $post, true ) . '</pre>';

사이트에서 결과를 확인하면 다음의 데이터를 볼 수 있으며, 필자와 다른 부분이 있을 수 있습니다.

WP_Post Object
(
    [ID] => 357
    [post_author] => 13
    [post_date] => 2017-10-20 22:46:19
    [post_date_gmt] => 2017-10-20 13:46:19
    [post_content] => 검은, 노란, 밤, 별, 어두운, 텐트, 하늘
    [post_title] => 달나라 여행
    [post_excerpt] => 달나라 여행
    [post_status] => inherit
    [comment_status] => open
    [ping_status] => closed
    [post_password] => 
    [post_name] => %eb%8b%ac%eb%82%98%eb%9d%bc-%ec%97%ac%ed%96%89
    [to_ping] => 
    [pinged] => 
    [post_modified] => 2017-10-20 22:46:23
    [post_modified_gmt] => 2017-10-20 13:46:23
    [post_content_filtered] => 
    [post_parent] => 0
    [guid] => http://localhost/wp-content/uploads/tent-548022.jpg
    [menu_order] => 0
    [post_type] => attachment
    [post_mime_type] => image/jpeg
    [comment_count] => 0
    [filter] => raw
)

이번 장에서 추가한 코드는 다음 3가지가 사실 전부인데, 등록자 ID, 포스트 ID를 구할 때도 워드프레스의 함수를 사용하였습니다.

get_avatar( get_the_author_meta( 'ID' ), 55 );
get_author_posts_url( get_the_author_meta( 'ID' ) );
get_favorites_button( get_the_ID() );

변수 $post의 데이터를 사용하여 위의 3줄 코드를 다음처럼 변경할 수 있습니다.

get_avatar( $post->post_author, 55 );
get_author_posts_url( $post->post_author );
get_favorites_button( $post->ID; );

함수를 사용할 때와 $post 변수를 사용할 때의 구분 기준은 없습니다. 워드프레스 루프(The Loop) 안에서는 워드프레스 함수를 사용하여 관련 데이터를 출력하는 것이 보편적이며, 커스텀 쿼리 또는 사용자 함수를 정의하여 포스트 데이터를 출력할 때는 그때의 상황에 따라 워드프레스 함수나 $post 변수를 사용해야 포스트 데이터 출력이 가능하다는 정도로 요약할 수 있습니다. 핵심은 포스트 데이터 출력 결과가 올바른지 확인해야 한다는 것입니다.

예제에서는 되도록 워드프레스 루프를 사용한 테마 템플릿 파일에는 워드프레스 함수를 사용하는데, 그에 따라 이번 장의 전체 코드를 다음처럼 정리합니다.

<?php
/* image.php 사이드 인클루드 파일 */
//echo '<pre>' . print_r( $post, true ) . '</pre>';

//$attach_id = $post->ID;
//$author_id = $post->post_author;
$attach_id = get_the_ID(); // 포스트 ID
$author_id = get_the_author_meta( 'ID' ); // post author
?>
<div class="image_author">
    <div class="author_avatar">
        <?php echo get_avatar( $author_id, 55 ); ?>
    </div>
    <div class="author_detail">
        <div class="author_nick">
            <a href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>"><?php the_author(); ?></a>
        </div>
        <?php echo '이미지, 추천, 다운로드'; ?>
    </div>
</div>
<?php // 등록자 정보 ?>

<?php
if ( function_exists( 'get_favorites_button' ) ) {
    echo '<div class="pics_favorites">';
        echo get_favorites_button( $attach_id );
    echo '</div>';
}
// 추천 버튼
?>

3번 줄은 직전에 추가한 코드로 비활성화하여 혹시 나중에 참고할 분을 위해 추가한 것이며, 5번과 6번 줄에 $post 변수를 사용한 코드는 7, 8번 줄과 같은 것으로 역시 나중에 참고할 수 있도록 추가한 것입니다. 그에 따라 12, 16, 26번 줄도 변경되었음을 확인할 수 있습니다. 워드프레스 함수를 사용하더라도 포스트 ID는 현재 파일에서 계속 필요하므로 7번 줄처럼 변수로 지정하여 사용하는 것은 당연할 것입니다.

다음의 링크가 있는 제목을 클릭하여 이번 장에서 변경한 파일을 받아 압축을 풀어, 혹시 모를 완성 예제의 오류를 방지하기 위해 테마 루트에 덮어쓰세요.

다음 장에서 해당 포스트에 속한 이미지 사이즈별 데이터를 출력합니다.