WordPress 中文文档

Using Gravatars

From WordPress Chinese

Jump to: navigation, search

目录

[编辑]

What is a 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.

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 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

You can check how a Gravatar is rated here

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

Image: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.
[编辑]

Gravatar.com Plugin

Install the plugin and activate it. That is all that needs to be done, it is installed and ready for use, awaiting the plugin's template tag to initiate the Gravatar on your site. Place the following function tag inside of the WordPress Loop. 

<?php gravatar(); ?>

This function, however, only calls and prints the URL for the Gravatar, so you have to include it within a image tag like: 

<img src="<?php gravatar(); ?>" alt="Gravatar" />

If you wanted this implemented into your comments, edit your current theme's comments.php. Each WordPress Theme may be a little different. In the Default WordPress Theme, look for this: 

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<cite><?php comment_author_link() ?></cite> Says:

and change it to include the link to the Gravatar like this: 

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
  <a href="http://www.gravatar.com/" title="Get your avatar">
    <img src="<?php gravatar(); ?>" class="gravatar" alt="Gravatar" />
    </a>
<cite><?php comment_author_link() ?></cite> Says:
Image:Gravatar2cwe.gif
Default Gravatar for an unsigned user
This is styled so that the Gravatar will float to the left of the commentors name as an example, but you can add a class to the section to incorporate the style for displaying the Gravatar within your style sheet.

If you want to customize the Gravatar more, you can use CSS, adding some classes to the code, and you can also use some of Gravatars settings listed below.

[编辑]

Customizing Your Gravatars

There are several settings to customize the Gravatars just a little more. Breaking down the settings for gravatar() are as follows. 

<?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 
Default Gravatars are 80px by 80px, so elimating this option will result in all Gravatars being 80px by 80px. If that size is to big for you, then you can add the size value in the function. The size you enter is for both sides, so for example, if you use 40, the Gravatar will be 40px by 40px. So with a maximum rating of PG, and size of 40px by 40px you would have the function as: 
<?php gravatar("PG", 40); ?>
default 
There are still some users without Gravatars out there, and in such a case, Gravatar's servers will return a 1px by 1px transparent GIF image instead. You can override this with your own custom image. This file can be 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"); ?>
[编辑]

Gravatars2 Enhanced Caching Plugin

Installation Instructions: http://zenpax.com/gravatars2/installation/

Edit your theme’s comments.php file and add the folowing inside the “comment loop”: 

<?php if (function_exists('gravatar')) { gravatar_image_link(); } ?>

For example: 

    <?php foreach ($comments as $comment) : ?>

        <li class="<?php echo $oddcomment; author_highlight();?>" id="comment-<?php comment_ID() ?>">

<!-- GRAVATARS2:  Here is the only line you need to add to insert a gravatar image w/ a link: -->
            <?php if (function_exists('gravatar')) { gravatar_image_link(); } ?>
<!-- GRAVATARS2:  That's it.  This comment, and the one before can be deleted.  -->

            <cite><?php comment_author_link() ?></cite>
            <?php if ($comment->comment_approved == '0') : ?>
            <em>Your comment is awaiting moderation.</em>
            <?php endif; ?>
            <br />
            <small class="commentmetadata">
            <a href="#comment-<?php comment_ID() ?>" title="">
            <?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> 
            <?php edit_comment_link('e','',''); ?>
            </small>
            <div style="clear: left;">
            <?php comment_text() ?>
            </div>

        </li>

    <?php endforeach; /* end for each comment */ ?>
[编辑]

Customizing Your Gravatars

Gravatars2 plugin includes a robust management interface for setting most of the options for your gravatars. You can select:

  • a maximum acceptable rating
  • the default size
  • optional border,
  • default image used for commenters without a gravatar
  • whether to cache gravatars locally (and for how long)
  • whether to allow registered users to override their default gravatar image for this blog
  • whether to support the use of gravatars inside the body of posts

The actual gravatar image uses a CSS class on the img tag: 

.gravatar {
        float:left;
        padding: 3px;
        margin-bottom: 5px;
        background: #fff;
}

Insert that block into your theme's style.css, and adjust as necessary.

If you enable the use of gravatars in the body of posts, you'll need an additional CSS class: 

.postgrav {
        float: left;
        padding: 3px;
        margin-right: 5px;
        margin-left: 5px;
        background: #fff;
}

Insert that block into your theme's style.css, and adjust as necessary.

An Updated version of Skippy's Gravatars, Gravatars2, with enhanced caching & cron support is available here: http://zenpax.com/gravatars2/

[编辑]

Resources


Template:Copyedit

取自"http://codex.wordpress.org.cn/Using_Gravatars"
用户