Как установить Gravatars на WordPress-блоге, не используя плагины

Gravatar - Globally Recognized Avatars

Отличный способ добавить в свой блог глобально распознаваемые аватары (GRAvatar = Globally Recognized Avatar) я нашла на блоге Коннора Уилсона (Connor Wilson).

Пожалуй, не буду переводить две первые части его поста, где рассказывается, что такое Gravatars и что мы выигрываем, используя их. По-простому говоря, Gravatar – это такая картиночка, которая будет использоваться как аватар в любом месте, где выполнены 2 условия.

  1. Вы введете свой e-mail,
  2. Поддерживается сервис gravatars.

Может быть, это немного похоже на OpenID, и я даже считаю, что было бы здорово объединить эти сервисы и включить единую аватарку в OpenID координаты. Ну да ладно, это дело будущего.

А пока давайте посмотрим, как включить Gravatars на своем WordPress-блоге.

В файле comments.php и лучше всего после начала вот этого цикла <?php foreach ($comments as $comment) : ?> вставляем такой код:

<?
$email = $comment->comment_author_email;
$default = ""; // link to your default avatar
$size = 70; // size in pixels squared
$grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=
" . md5($email) . "&default=" . urlencode($default) . "&size=" . $size;
?>

Теперь там, где нужно показать саму картинку аватара, пишем

<img src=”<?=$grav_url ?>” height=”<?=$size ?>” width=”<?=$size ?>” alt=”User Gravatar” />

Вот и все. Теперь можно настроить размер картинки в строке $size = ...; и задать стили: рамку, отступы и так далее.

Пример работы можно увидеть в комментариях этого блога.

Как сделать свой сайт OpenID-логином?

Самое главное сказано в статье «Собственный блог как OpenID-идентификатор», которую я прочитала на Хабре.

Цитирую:

1. Если вы уже зарегистрированы в livejournal.com, moikrug.ru или любом другом сервисе, предоставляющем OpenID, то ничего делать не нужно. Если нет – регистрируемся в любом провайдере OpenID (например, myopenid.com).

2. Идём на страничку вашего идентификатора (например, myname.openid.com, myname.livejournal.com и т.п.), открываем исходник страницы и ищем строку вида
<link rel=”openid.server” href=”адрес” />.

3. Вставляем в блок head вашей странички, которую вы хотите сделать идентификатором, следующие строки:

  • <link rel="openid.server" href="адрес />"
    — ту, которую вы нашли перед этим
  • <link rel="openid.delegate" href="адрес" />,
    где адрес — это OpenID-идентификатор, предоставляемый вашим провайдером (например, myname.openid.com)

В итоге, на вашей страничке должно быть что-то вроде этого:

<head>
<!-- пропущено -->
<link rel="openid.server" href="http://www.myopenid.com/server" />

<link rel=”openid.delegate” href=”http://daeq.myopenid.com/” />
<!– пропущено –>
</head>

С «Моим кругом» этого я не пробовала, с Livejournal возникли проблемы с отображением имени, а вот с myopenid.com все получилось очень хорошо.

Для тех, кто хочет сделать так же.

1. Регистрируемся на myopenid.com.

2. Добавляем там «New Person» и называем своим именем. Именно то, что вы напишете в поле «Persona name» будет потом отображаться как имя в вашей OpenID-подписи.

3. Дальше все просто. Каждый может увидеть, что в блоке <head> моей главной страницы есть вот такие строчки:

<link rel="openid.server" href="http://www.myopenid.com/server" />
<link rel="openid.delegate" href="http://Kate.Kulikova.myopenid.com/" />

Добавляете такие же к себе на сайт. Во второй строке пишете свой OpenID-адрес — … и все. 🙂 Это работает.

Ответ по OpenID

Что было?

Итак, проблема состояла в следующем: после установки этого блога делегатом моего OpenID из Livejournal все было хорошо, но имя отображалось не так, как я бы хотела «Kate Kulikova», а «blog» или «blog.kulikova.nnov.ru». Таков был вопрос по OpenID.

Что стало?

Бесплатный провайдер OpenID - myopenid.com

Бросайте, господа, этот LiveJournal, который дает не пойми какой OpenID. Долго ходила я там по вкладочкам и искала, как заменить displayed name на что-нибудь приличное. И не нашла. Если кто найдет, то скажите…

На одном американском сайте автор сказал мне, что он завел себе OpenID на специальном сервисе типа myopenid.com, myid.net или getopenid.com.

Я отправилась, не раздумывая на myopenid.com, потому что этот адрес мне сразу и легко запомнился (вот оно – вебмастерам на заметку: делайте URL запоминающимся!), и за пару минут зарегистрировала себе новый OpenID. Потом настроила перенаправление, чтобы можно было везде подписываться адресом этого блога — и все. 🙂

Очень хорошее и простое решение. Всем советую.

HTML и CSS > Границы ячеек в таблицах

Кто бы мог подумать, что такая простейшая вещь, как рамки (borders) для пустых ячеек внутри таблицы, не работает в IE 6. А может быть и в других IE тоже, этого я не знаю, не было возможности проверить… Но это, конечно, возмутительно.

Итак, у нас есть таблица, в которой некоторые ячейки заполнены, а некоторые пусты. Ее html-код таков:

<table>
<tr>
<td>item 1,1</td><td></td><td>item 1,3</td>
</tr>
<tr>
<td></td><td>item 2,2</td><td>item 2,3</td>
</tr>
</table>

Добавляем стили, чтобы отрисовать границы всех ячеек в таблице (в том числе и внутренних):

table
{
border-color: #600;
border-width: 0 0 1px 1px;
border-style: solid;
}
td
{
border-color: #600;
border-width: 1px 1px 0 0;
border-style: solid;
margin: 0px;
padding: 4px;
text-align: center;
empty-cells:show;
}

И видим вот такую картинку:

Конечно, это не совсем то, что хотелось бы. Идем в Google и находим, что нужно применить к table и td свойство empty-cells: show;. Отлично! Добавляем его в стили и видим, что это ничего не изменило для Internet Explorer 6. Но более приятная картинка теперь в Mozilla Firefox 2.0.*:

А это небольшое уточнение для IE, которое заодно сделает все границы ровными и без разрывов, я нашла на Accessify Forum.

В свойства table добавляем строчку border-collapse:collapse; и видим прелестную картинку в обоих браузерах:

Ну и напоследок. Тем, кто не слишком дорожит разделением данных и модели их представления, можно предложить еще один способ получения границ: вставлять неразрывный пробел во все пустые ячейки таблицы.

Итак, для исходной таблицы получаем следующий CSS в результате:

table
{
border-color: #600;
border-width: 0 0 1px 1px;
border-style: solid;
empty-cells: show;
border-collapse:collapse;
}
td
{
border-color: #600;
border-width: 1px 1px 0 0;
border-style: solid;
margin: 0px;
padding: 4px;
text-align: center;
}

Вот и все мои изыскания по этому вопросу. HTML и CSS — это все-таки какая-то магия. 🙂