그라바타 사용 방법

What is a Gravatar?

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

Example of a Gravatar on a Comment

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

Why use Gravatars?

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

Benefits for Administrators

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

Benefits for Users

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

Using Gravatars on your Site

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

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

For Developers

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

Customizing how Gravatars are displayed

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

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

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

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

Customizing Gravatars with CSS

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

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

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

Create a Custom Default Avatar

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

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

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

Select Your New Default Avatar

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

Custom Default Avatar in Use

Using Gravatar’s Hovercards

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

An example of a Hovercard

Resources

“그라바타 사용 방법”에 대한 4개의 댓글

  1. 좋은 글 잘 읽었습니다. 그런데, 질문 드릴게 있는데요..
    워드프레스 고유주소를 /%category%/%postname%/로 했는데, 검색을 통해서 온갖 방법을 다 시도해봤는데, IE 에서는 한글 url이 깨지더라구요. 그래서.. 반포기 상태였다가 이 글(사이트)을 발견하고 질문드립니다.

    RewriteEngine On
    RewriteBase /blog/
    RewriteRule ^index.php$ – [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /blog/index.php [L]

    ServerEncoding UTF-8
    ClientEncoding EUC-KR

    최종적으로 위와 같이 했는데도, 불구하고 IE 주소창에서 한글이 깨지는데.. 이것외에 뭔가 다른 방법이 있나요? 처음 본거 같네요.. 이 사이트 같이 독립적인 워드프레스 사이트, 한글 주소가 IE에서 안 깨지고 나오는거요..

답글 남기기