Codex

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

ko:How to Use Gravatars in WordPress

This article is marked as in need of editing. You can help Codex by editing it.

그라바타란 무엇인가?

다른 웹 사이트를 브라우징하면서, 많은 사용자들이 이름 옆에 그림을 사용하고 있는 것을 목격하였을 것이다. 이그림을 "아바타(avatars)"라고 한다. 워드프레스에서는 “그라바타“라고 하는 특정 형태의 아바타를 사용한다– “Globally Recognized Avatar”의 줄임말이다. 표준 아바타와 달리, 그라바타는 웹에 따라다니면서, 워드프레스 사이트에 댓글을 달면 자동으로 표시된다.

Example of a Gravatar on a Comment

모든 워드프레스 사이트에 그라바타가 적용된다. registered with 그라바타에 등록하면, 프로필 정보는 등록된 이메일 주소의 정보와 같아지고, 댓글 옆에 사용자정의 그라바타 이미지가 표시된다. 그리고 선택적으로(optionally) 워드프레스 사이트 어느 곳이든지 표시할 수 있다. 그라바타에 등록하지 않으면, 관리자가 설정한 기본 아이콘이 이름 옆에 표시된다.


그라바타를 왜 사용하는가?

웹에 글을 올릴때 사용자에게 아바트를 제공하는 것이 관례가 되었다. 그라바트를 활성화하면 관련된 사람들의 프로세스가 단순해진다. 워드프레스 플러그인을 사용하면 사용자의 아바타를 관리할 수 있지만, 그라바타를 사용하면 여러분과 사이트 사용자 모두에게 일이 줄어든다.

관리자의 이점

  • 조금만 노력하면 사용자 그라바타를 추가할 수 있다.
  • 추가로 플러그인을 설치할 필요가 없다.
  • 사이트에 댓글을 다는 사용자(그라바타를 사용하는)의 계정 및 이미지를 관리할 필요가 없다.

사용자의 이점

  • 그라바트를 사용하기 위해, 방문하는 모든 사이트에 등록할 필요가 없다.
  • 한 곳의 이미지만 수정하면 여러 사이트의 그라바타를 수정할 수 있다.

사이트에 그라바타 사용

사이트에 그라바타를 사용 하려면:

  1. 사이트 관리자로 로그인
  2. 설정 > 토론의 “아바타” 섹션의
  3. 여러 옵션 중에서:
    • 아바타 표시: 사이트에 그라바타 적용 여부 선택.
    • 최대 등급: 사용자가 그라바타에 프로필을 만들면, G, PG, R, X 중 적절한 그라바타 이미지 등급을 적용할 수 있다. 사이트에 표시할 최대 등급을 라디오(radio) 버튼에서 선택한다.
    • 기본 아바타: 자신의 그라바타 계정이 없는 댓글 사용자의 기본 이미지를 선택한다. “자동생성” 아이콘 중에서 하나를 선택하면, 당신과 사용자에게 그라바타 계정 등록을 요구하지 않고 그라바타를 제공할 수 있다. 옆의 “자동생성” 아이콘은 댓글 사용자의 이메일을 가져와서, 자동 생성 이미지를 링크한다. 이제, 사이트에 이 사용자가 댓글을 달면 이름 옆에 항상 같은 이미지가 표시된다.

개발자를 위해

워드프레스 2.7부터, wp_list_comments를 사용하여 글 및 페이지의 댓글을 검색할 때, 워드프레스는 사용자의 그라바타를 자동으로 검색한다. 댓글 없이 그라바타만을 검색하려면, get_avatar를 사용할 수 있다.

그라바타 표시 방법 사용자 정의

wp_list_comments를 사용하면, 워드프레스가 테마에서 당신의 댓글을 출력하는 방식을 사용자 정의할 수 있다. 또한 댓글에 첨부되는 그라바타의 크기도 설정할 수 있다. 기본으로, 그라바타는 32px x 32px크기로 반환된다. 이 그라바타의 크기를 변경하려면, wp_list_comments의 ‘avatar_size’ 인수를 사용할 수 있다.

예를 들어, 50px x 50px 그라바타를 만들기 위해, wp_list_comments 를 다음과 같이 호출할 수 있다:

<?php wp_list_comments( array( 'avatar_size' => '50' ) ); ?>

get_avatar는 조금 다르게 작동한다. 그것을 전달하는 첫 번째 인수는 사용자 ID, 이메일 주소 또는 댓글 객체이다. 그리고 반환되는 그라바타의 크기, 사용자가 그라바타를 가지고 있지 않을 경우 표시하기 위해 설정된 기본 이미지의 URL, 그리고 그라바타 이미지의 대체 텍스트이다.

이것은 50px x 50px의 그라바타를 반환한다:

<?php echo get_avatar( 'email@example.com', 50 ); ?>

CSS를 사용하여 그라바타 사용자 정의

댓글과 함께 또는 댓글 없이 그라바타를 반환할 수 있기 때문에, 그라바타를 스타일링할 때 CSS 클래스로 지정해야 한다. 워드프레스가 그라바타를 반환할 때, .avatar 클래스를 할당한다. 그러나 이 클래스는 각각 다른 상황에서 생성되기 때문에, .avatar 클래스가 대상이 되기만을 원하지 않는다. 예를 들어, 워드프레스 관리 바에서 그라바타 위에 마우스를 올려놓으면, 그라바타 .avatar 클래스가 보인다. .avatar 클래스의 CSS를 변경한다면, 테마의 댓글과 관리 바 양쪽 그라바타의 스타일을 변경하게 된다.

Twenty Eleven 테마에서 볼 수 있듯이, 추가 클래스를 사용하여 간단하게 그라바타의 특정 인스턴스를 대상으로 할 수 있다.

이것은 Twenty Eleven 테마의 댓글에서만 다르게 표시된다:

.commentlist .avatar {
	/*Insert
	Your
	Styling
	Here */
}

사용자 정의 기본 아바타 생성

그라바트를 등록하지 않은 사용자에게 기본 이미지가 아닌, avatar_defaults 훅에 필터를 추가하여 당신이 지정한 이미지를 추가할 수 있다.

테마 파일에 새로운 이미지를 업로드한 후, 테마의 function.php 파일에 이것을 추가한다:

<?php
add_filter( 'avatar_defaults', 'new_default_avatar' );

function new_default_avatar ( $avatar_defaults ) {
		//Set the URL where the image file for your avatar is located
		$new_avatar_url = get_bloginfo( 'template_directory' ) . '/images/new_default_avatar.png';
		//Set the text that will appear to the right of your avatar in Settings>>Discussion
		$avatar_defaults[$new_avatar_url] = 'Your New Default Avatar';
		return $avatar_defaults;
}
?>

이제 설정 > 토론 으로 이동하여 리스트에서 새 아바타를 선택한다.

Select Your New Default Avatar

지금부터, 그라바타를 사용하지 않는 사용자는 댓글 옆에 이 아바타가 표시된다.

Custom Default Avatar in Use

그라바타의 Hovercards 사용

WordPress.com에서 처럼 Gravatar의 Hovercard 기능을 사용하려면, Jetpack 플러그인을 설치한다.

An example of a Hovercard

자료