当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「Gravatar の使い方」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(en:Using Gravatars 2008年4月25日 (金) 16:44 Alexjohnc3 版/著者 Ensellitis, Lorelle, Alexleonard ほか)
 
(書式・リンク調整、未翻訳/日本語情報追加)
1行目: 1行目:
 +
{{NeedTrans}}
 +
 +
<div id="What_is_a_Gravatar.3F">
 
==What is a Gravatar?==
 
==What is a Gravatar?==
 +
</div>
  
 
Gravatars are '''Globally Recognized Avatars'''.  An avatar or gravatar is an icon, or representation, of a user in a shared virtual reality, such as a forum, chat, website, or any other form of online community in which the user(s) wish to have something to distinguish themselves from other users. Created by Tom Werner, gravatars make it possible for a person to have one avatar across the entire web. Avatars are usually an 80px by 80px image that the user will create themselves.   
 
Gravatars are '''Globally Recognized Avatars'''.  An avatar or gravatar is an icon, or representation, of a user in a shared virtual reality, such as a forum, chat, website, or any other form of online community in which the user(s) wish to have something to distinguish themselves from other users. Created by Tom Werner, gravatars make it possible for a person to have one avatar across the entire web. Avatars are usually an 80px by 80px image that the user will create themselves.   
  
[[Image:gravatars-in-comments.png|frame|right|Gravatars in blog post comments]]A Gravatar is essentially the same thing, but they are all hosted on a single server and are called up by encrypting the users' email address via the MD5 algorithm.  So instead of having one avatar on one forum you visit, and another at a blog you visit, you could have the same avatar at both.
+
[[Image:gravatars-in-comments.png|frame|right|Gravatars in blog post comments]]
 +
A Gravatar is essentially the same thing, but they are all hosted on a single server and are called up by encrypting the users' email address via the MD5 algorithm.  So instead of having one avatar on one forum you visit, and another at a blog you visit, you could have the same avatar at both.
  
Gravatars can easily be used within WordPress with the Gravatar WordPress Plugin or added manually in the <tt>index.php</tt>, <tt>comments.php</tt> and <tt>comments-popup.php</tt> [[Templates|template files]].
+
Gravatars can easily be used within WordPress with the Gravatar WordPress Plugin or added manually in the <code>index.php</code>, <code>comments.php</code> and <code>comments-popup.php</code> [[テンプレート|template files]].
  
 +
<div id="How_a_Gravatar_is_Constructed">
 
==How a Gravatar is Constructed==
 
==How a Gravatar is Constructed==
 +
</div>
 
A Gravatar is a dynamic image resource that is requested from a server. The request URL is presented here, broken into its segments. The URL always begins with:
 
A Gravatar is a dynamic image resource that is requested from a server. The request URL is presented here, broken into its segments. The URL always begins with:
  
 
  <nowiki>http://www.gravatar.com/avatar.php?</nowiki>
 
  <nowiki>http://www.gravatar.com/avatar.php?</nowiki>
  
A mandatory parameter named <tt>gravatar_id</tt> follows this. Its value is the hexadecimal MD5 hash of the requested users' email address with all whitespace trimmed. The value is case insensitive.
+
A mandatory parameter named <code>gravatar_id</code> follows this. Its value is the hexadecimal MD5 hash of the requested users' email address with all whitespace trimmed. The value is case insensitive.
  
 
  gravatar_id=279aa12c3326f87c460aa4f31d18a065
 
  gravatar_id=279aa12c3326f87c460aa4f31d18a065
  
An optional <tt>rating</tt> parameter may follow with a value of <tt>[ G | PG | R | X ]</tt> which determines the highest rating (inclusive) that will be returned.
+
An optional <code>rating</code> parameter may follow with a value of <code>[ G | PG | R | X ]</code> which determines the highest rating (inclusive) that will be returned.
  
 
  &rating=R
 
  &rating=R
22行目: 29行目:
 
Gravatar offers a [http://gravatar.com/rating.php rate checking service] so you can determine your rate.
 
Gravatar offers a [http://gravatar.com/rating.php rate checking service] so you can determine your rate.
  
An optional <tt>size</tt> parameter may follow that specifies the desired width and height of the Gravatar. Valid values are from 1 to 80 inclusive. Any size other than 80 will cause the original Gravatar image to be downsampled using bicubic resampling before output.
+
An optional <code>size</code> parameter may follow that specifies the desired width and height of the Gravatar. Valid values are from 1 to 80 inclusive. Any size other than 80 will cause the original Gravatar image to be downsampled using bicubic resampling before output.
  
 
  &size=40
 
  &size=40
  
An optional <tt>default</tt> parameter may follow that specifies the full [[Glossary#URL|URL]], encoded URL, protocol included, of a GIF, JPEG, or PNG image that should be returned if either the requested email address has no associated gravatar, or that Gravatar has a rating higher than is allowed by the <tt>rating</tt> parameter.
+
An optional <code>default</code> parameter may follow that specifies the full [[用語集#URL|URL]], encoded URL, protocol included, of a GIF, JPEG, or PNG image that should be returned if either the requested email address has no associated gravatar, or that Gravatar has a rating higher than is allowed by the <code>rating</code> parameter.
  
 
  &default=http%3A%2F%2Fwww.somesite.com%2Fsomeimage.jpg
 
  &default=http%3A%2F%2Fwww.somesite.com%2Fsomeimage.jpg
  
An optional <tt>border</tt> parameter may follow that specifies the hexadecimal value of a 1px border to be overlaid on the Gravatar. The supplied value may be either the full six character hex string (e.g. <tt>FF0000</tt> for red) or the abbreviated three character hex string (e.g. <tt>F00</tt> for red).
+
An optional <code>border</code> parameter may follow that specifies the hexadecimal value of a 1px border to be overlaid on the Gravatar. The supplied value may be either the full six character hex string (e.g. <code>FF0000</code> for red) or the abbreviated three character hex string (e.g. <code>F00</code> for red).
  
 
  &border=FF0000
 
  &border=FF0000
  
 +
<div id="Using_Gravatars_in_WordPress">
 
== Using Gravatars in WordPress ==
 
== Using Gravatars in WordPress ==
[[Image:gravatarCWE.gif|frame|right|An example of a Gravatar]]For most people, encrypting an email address with MD5 is no easy task, most of the time requiring [http://www.php.net/ PHP] or other form of scripting.  Several [[Plugins|WordPress Plugins]] have been created to help with this task, such as the [http://www.gravatar.com/implement.php#section_2_2 Gravatar.com Plugin] and [http://zenpax.com/gravatars2/ Gravatars2 Enhanced Caching Plugin].For information on using and installing those WordPress Plugins, see the Plugin's documentation.
+
</div>
 +
[[Image:gravatarCWE.gif|frame|right|An example of a Gravatar]]For most people, encrypting an email address with MD5 is no easy task, most of the time requiring [http://www.php.net/ PHP] or other form of scripting.  Several [[プラグイン|WordPress Plugins]] have been created to help with this task, such as the [http://www.gravatar.com/implement.php#section_2_2 Gravatar.com Plugin] and [http://zenpax.com/gravatars2/ Gravatars2 Enhanced Caching Plugin].For information on using and installing those WordPress Plugins, see the Plugin's documentation.
  
As of WordPress 2.5, Gravatars are built-in and require no additional Plugins for basic usage and management.
+
As of [[Version 2.5|WordPress 2.5]], Gravatars are built-in and require no additional Plugins for basic usage and management.
  
WordPress 2.5 marries theme authors and casual WordPress users together with support for Gravatars in the WordPress Administration Panels. Theme authors have an option to include Gravatars in their designs, and are recommended to do so. WordPress users can easily control their Gravatar usage in the '''Settings > Discussion''' Administration Panel.
+
WordPress 2.5 marries theme authors and casual WordPress users together with support for Gravatars in the WordPress Administration Panels. Theme authors have an option to include Gravatars in their designs, and are recommended to do so. WordPress users can easily control their Gravatar usage in the '''[[管理パネル#Settings - Configuration Settings|Settings]] > [[Settings Discussion SubPanel|Discussion]]''' [[管理パネル|Administration Panel]].
  
 
WordPress users can change:
 
WordPress users can change:
45行目: 54行目:
 
* Which rating of Avatars are shown.
 
* Which rating of Avatars are shown.
  
 +
<div id="Theme_Support_for_WordPress_2.5">
 
=== Theme Support for WordPress 2.5 ===
 
=== Theme Support for WordPress 2.5 ===
 +
</div>
 
The function to add Gravatars to your theme is called: <code>get_avatar</code>. The function returns a complete image HTML tag of the Avatar.
 
The function to add Gravatars to your theme is called: <code>get_avatar</code>. The function returns a complete image HTML tag of the Avatar.
  
75行目: 86行目:
 
If the gravatar reverts to the default image, whether you have specified a default or not, the <code>img</code> element will also be given a class of <code>avatar-default</code>
 
If the gravatar reverts to the default image, whether you have specified a default or not, the <code>img</code> element will also be given a class of <code>avatar-default</code>
  
 +
<div id="Backwards_Compatibility">
 
=== Backwards Compatibility ===
 
=== Backwards Compatibility ===
 +
</div>
  
 
If you wish to develop a WordPress Theme with Avatars for 2.5 and below, add a check for the Gravatar function to the code:  
 
If you wish to develop a WordPress Theme with Avatars for 2.5 and below, add a check for the Gravatar function to the code:  
88行目: 101行目:
 
   }</nowiki>
 
   }</nowiki>
  
 +
<div id="Gravatar.com_Plugin">
 
=== Gravatar.com Plugin ===
 
=== Gravatar.com Plugin ===
 +
</div>
 
The [http://www.gravatar.com/implement.php#section_2_2 Gravatar.com Plugin] from Gravatar is the official Plugin for handling Gravatars.  
 
The [http://www.gravatar.com/implement.php#section_2_2 Gravatar.com Plugin] from Gravatar is the official Plugin for handling Gravatars.  
  
 
To use it:
 
To use it:
 
# Install and activate the Plugins.
 
# Install and activate the Plugins.
#Place the <code>&lt;?php gravatar(); ?></code> function tag into the WordPress template file within the [[The Loop|WordPress Loop]] within an HTML image tag:
+
# Place the <code><nowiki><?php gravatar(); ?></nowiki></code> function tag into the WordPress template file within the [[The Loop|WordPress Loop]] within an HTML image tag:
  
 
   <img src="<?php gravatar(); ?>" alt="Gravatar" />
 
   <img src="<?php gravatar(); ?>" alt="Gravatar" />
99行目: 114行目:
 
For more information on using and installing the Gravatars.com WordPress Plugin, visit the [http://www.gravatar.com/ Gravatars site].
 
For more information on using and installing the Gravatars.com WordPress Plugin, visit the [http://www.gravatar.com/ Gravatars site].
  
 +
<div id="Customizing_Your_Gravatars">
 
=== Customizing Your Gravatars ===
 
=== Customizing Your Gravatars ===
 +
</div>
  
 
There are several settings to customize the Gravatars. The setting parameters are:
 
There are several settings to customize the Gravatars. The setting parameters are:
105行目: 122行目:
 
  <?php gravatar(''"rating", size, "default", "border"''); ?>
 
  <?php gravatar(''"rating", size, "default", "border"''); ?>
  
;rating :The highest rating of Gravatar to be shown. The values are <tt>G, PG, R,</tt> and <tt>X</tt>. Showing only Gravatar's with a rating higher than <tt>PG</tt> can be accomplished with the following code:
+
;rating :The highest rating of Gravatar to be shown. The values are <code>G, PG, R,</code> and <code>X</code>. Showing only Gravatar's with a rating higher than <code>PG</code> can be accomplished with the following code:
  
 
  <?php gravatar("PG"); ?>
 
  <?php gravatar("PG"); ?>
115行目: 132行目:
 
;default :If a user is not registered with Gravatars or another compatible Avatar service, a default image will be shown. You can override this with a custom image as a PNG, JPG, or GIF.  
 
;default :If a user is not registered with Gravatars or another compatible Avatar service, a default image will be shown. You can override this with a custom image as a PNG, JPG, or GIF.  
  
  <?php gravatar("PG",40,"<nowiki>/images/no_gravatar.gif</nowiki>"); ?>
+
  <?php gravatar("PG",40,"/images/no_gravatar.gif"); ?>
  
;border :To add a border, use the <tt>border</tt> function.  It will add a 1px wide border around the Gravatar of the color that you choose.  By default there is no border. The following is an example of a Gravatar that will be no higher than a <tt>PG</tt> rating, be 40px by 40px, have a default image if no Gravatar is present, and have a 1px red border:
+
;border :To add a border, use the <code>border</code> function.  It will add a 1px wide border around the Gravatar of the color that you choose.  By default there is no border. The following is an example of a Gravatar that will be no higher than a <code>PG</code> rating, be 40px by 40px, have a default image if no Gravatar is present, and have a 1px red border:
  
  <?php gravatar("PG",40,"<nowiki>/images/no_gravatar.gif</nowiki>","FF0000"); ?>
+
  <?php gravatar("PG",40,"/images/no_gravatar.gif","FF0000"); ?>
  
 +
<div id="Resources">
 
==Resources==
 
==Resources==
 +
</div>
  
 
* [http://www.gravatar.com/ Gravatar]
 
* [http://www.gravatar.com/ Gravatar]
* [[Plugins|WordPress Plugins]]
+
* [[プラグイン|WordPress Plugins]]
 
* [http://www.obeattie.com/2006/05/20/meet-the-gravatars/ oBeattie : Meet the Gravatars]
 
* [http://www.obeattie.com/2006/05/20/meet-the-gravatars/ oBeattie : Meet the Gravatars]
 
* [http://www.gravatar.com/implement.php Gravatars Implement Page]
 
* [http://www.gravatar.com/implement.php Gravatars Implement Page]
130行目: 149行目:
 
* [http://fecklessmind.com/main/7/live-comment-preview-now-with-live-gravatars Live Gravatar Preview Hack]
 
* [http://fecklessmind.com/main/7/live-comment-preview-now-with-live-gravatars Live Gravatar Preview Hack]
 
* [http://weblogtoolscollection.com/archives/2008/03/03/gravatars-and-wordpress-25/ Gravatars & WordPress 2.5]
 
* [http://weblogtoolscollection.com/archives/2008/03/03/gravatars-and-wordpress-25/ Gravatars & WordPress 2.5]
 +
* [http://wp.tekapo.com/2008/03/07/gravatars-and-wordpress-25/ わーどぷれすっ! » Gravatars と WordPress 2.5] -- 管理画面の設定~テーマへの追加方法、テーマを WordPress 下位バージョン互換にする方法
 +
* [http://everydays.hassii.com/archives/972 e.b.i.f » テーマにアバターを導入する方法 (WP 2.5+)] -- コメント欄への表示方法
 +
 +
== 変更履歴 ==
 +
* [[Version 2.5|2.5]] : WordPress 標準機能として組み込まれました。
  
 +
{{原文|Using Gravatars|56753}}
  
[[Category:Design and Layout]]
+
{{DEFAULTSORT:Gravatarのつかいかた}}
 +
[[Category:デザインとレイアウト]]
 +
[[Category:wp2.5]]
  
 
[[en:Using Gravatars]]
 
[[en:Using Gravatars]]

2008年5月2日 (金) 01:10時点における版

このページ「Gravatar の使い方」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

Gravatars are Globally Recognized Avatars. An avatar or gravatar is an icon, or representation, of a user in a shared virtual reality, such as a forum, chat, website, or any other form of online community in which the user(s) wish to have something to distinguish themselves from other users. Created by Tom Werner, gravatars make it possible for a person to have one avatar across the entire web. Avatars are usually an 80px by 80px image that the user will create themselves.

ファイル:gravatars-in-comments.png
Gravatars in blog post comments

A Gravatar is essentially the same thing, but they are all hosted on a single server and are called up by encrypting the users' email address via the MD5 algorithm. So instead of having one avatar on one forum you visit, and another at a blog you visit, you could have the same avatar at both.

Gravatars can easily be used within WordPress with the Gravatar WordPress Plugin or added manually in the index.php, comments.php and comments-popup.php template files.

How a Gravatar is Constructed

A Gravatar is a dynamic image resource that is requested from a server. The request URL is presented here, broken into its segments. The URL always begins with:

http://www.gravatar.com/avatar.php?

A mandatory parameter named gravatar_id follows this. Its value is the hexadecimal MD5 hash of the requested users' email address with all whitespace trimmed. The value is case insensitive.

gravatar_id=279aa12c3326f87c460aa4f31d18a065

An optional rating parameter may follow with a value of [ G | PG | R | X ] which determines the highest rating (inclusive) that will be returned.

&rating=R

Gravatar offers a rate checking service so you can determine your rate.

An optional size parameter may follow that specifies the desired width and height of the Gravatar. Valid values are from 1 to 80 inclusive. Any size other than 80 will cause the original Gravatar image to be downsampled using bicubic resampling before output.

&size=40

An optional default parameter may follow that specifies the full URL, encoded URL, protocol included, of a GIF, JPEG, or PNG image that should be returned if either the requested email address has no associated gravatar, or that Gravatar has a rating higher than is allowed by the rating parameter.

&default=http%3A%2F%2Fwww.somesite.com%2Fsomeimage.jpg

An optional border parameter may follow that specifies the hexadecimal value of a 1px border to be overlaid on the Gravatar. The supplied value may be either the full six character hex string (e.g. FF0000 for red) or the abbreviated three character hex string (e.g. F00 for red).

&border=FF0000

Using Gravatars in WordPress

ファイル:gravatarCWE.gif
An example of a Gravatar
For most people, encrypting an email address with MD5 is no easy task, most of the time requiring PHP or other form of scripting. Several WordPress Plugins have been created to help with this task, such as the Gravatar.com Plugin and Gravatars2 Enhanced Caching Plugin.For information on using and installing those WordPress Plugins, see the Plugin's documentation.

As of WordPress 2.5, Gravatars are built-in and require no additional Plugins for basic usage and management.

WordPress 2.5 marries theme authors and casual WordPress users together with support for Gravatars in the WordPress Administration Panels. Theme authors have an option to include Gravatars in their designs, and are recommended to do so. WordPress users can easily control their Gravatar usage in the Settings > Discussion Administration Panel.

WordPress users can change:

  • Whether Avatars (aka, Gravatars) are displayed or not.
  • Which rating of Avatars are shown.

Theme Support for WordPress 2.5

The function to add Gravatars to your theme is called: get_avatar. The function returns a complete image HTML tag of the Avatar.

The function is called as follows:

  <?php 
   echo get_avatar( $id_or_email, $size = '96', $default = '<path_to_url>' ); 
   ?>

The parameters are:

  • id_or_email (required): Author’s User ID (an integer or string), an E-mail Address (a string) or the comment object from the comment loop. Note: with most comment templates you can use $comment here, in order to display the gravatar of the commenter.
  • size (optional): Avatar display size (max is 512).
  • default (optional): Absolute location of the default avatar to use (used when the person has no email address associated with them). If this is left blank then the gravatar you see here will be used as the default avatar.

Some things to note here:

  • The default Avatar size is 96x96 if you do not set the size using the size paramater.
  • The default Avatar is Gravatar
  • The Avatars will show only if the user allows them in the WP Admin Panel (enabled by default).
  • The Avatars will only show based on the rating the user has selected in the WordPress Administration Panels.

Code output:

The default output is when using the above function is listed below. Various classes are applied to img element to help you with element styling.

<img alt='' src='http://gravatarurl_or_default'
class='avatar avatar-$size' height='$size' width='$size' />

If the gravatar reverts to the default image, whether you have specified a default or not, the img element will also be given a class of avatar-default

Backwards Compatibility

If you wish to develop a WordPress Theme with Avatars for 2.5 and below, add a check for the Gravatar function to the code:

   if (function_exists('get_avatar')) {
      echo get_avatar($email);
   } else {
      //alternate gravatar code for < 2.5
      $grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=
         " . md5($email) . "&default=" . urlencode($default) . "&size=" . $size;
      echo "<img src='$grav_url'/>";
   }

Gravatar.com Plugin

The Gravatar.com Plugin from Gravatar is the official Plugin for handling Gravatars.

To use it:

  1. Install and activate the Plugins.
  2. Place the <?php gravatar(); ?> function tag into the WordPress template file within the WordPress Loop within an HTML image tag:
 <img src="<?php gravatar(); ?>" alt="Gravatar" />

For more information on using and installing the Gravatars.com WordPress Plugin, visit the Gravatars site.

Customizing Your Gravatars

There are several settings to customize the Gravatars. The setting parameters are:

<?php gravatar("rating", size, "default", "border"); ?>
rating 
The highest rating of Gravatar to be shown. The values are G, PG, R, and X. Showing only Gravatar's with a rating higher than PG can be accomplished with the following code:
<?php gravatar("PG"); ?>
size 
Gravatar size is 80px by 80px by default. To change the sie, change the size value, keeping the size square, such as 80px by 80px:
<?php gravatar("PG", 80); ?>
default 
If a user is not registered with Gravatars or another compatible Avatar service, a default image will be shown. You can override this with a custom image as a PNG, JPG, or GIF.
<?php gravatar("PG",40,"/images/no_gravatar.gif"); ?>
border 
To add a border, use the border function. It will add a 1px wide border around the Gravatar of the color that you choose. By default there is no border. The following is an example of a Gravatar that will be no higher than a PG rating, be 40px by 40px, have a default image if no Gravatar is present, and have a 1px red border:
<?php gravatar("PG",40,"/images/no_gravatar.gif","FF0000"); ?>

Resources

変更履歴

  • 2.5 : WordPress 標準機能として組み込まれました。

最新英語版: WordPress Codex » Using Gravatars最新版との差分