Настраиваем отображение комментариев в WordPress

Даже если ваш шаблон уже сконфигурирован для отображения комментариев, всегда будет полезным что-то улучшить.

Глобальная и локальная нумерация комментариев

Есть два базовых подхода к нумерации комментариев — глобальная и локальная нумерация. Глобальная нумерация происходит автоматически по мере добавления комментариев к базе данных. Номер каждого комментария представляет его позицию в базе данных комментариев. Глобальная нумерация комментариев вызывается тегом шаблона comment_ID. Этот тег может быть использован для связи каждого комментария с его порядковым номером, например, в персональной ссылке

<a href="#comment-<?php comment_ID(); ?>"id="comment-<?php comment_ID(); ?>">Ссылка на комментарий</a>

Идентификация по глобальному номеру делает простой возможность сослаться на определенный комментарий вашего сайта. Однако совершенно бесполезная для понимания порядка появления комментария в конкретной дискуссии.

Глобальная и локальная нумерация
Глобальная и локальная нумерация

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

Для создания локальной нумерации нужно сделать не много — открывайте файл comments.php и перед циклом добавляйте

<?php $commentcount = 1; // номер первого комментария ?>

Далее внутри цикла добавляйте следующую строку в месте, где хотите отображать номер комментария

<p class="comment-count"><a href="#comment-<?php comment_ID(); ?>">#<?php echo 
$commentcount++; ?></a></p>

Если циклы раздельные, например, первый для комментариев, а второй для пингов, то первоначально создается два счетчика

<?php $commentcount = 1; // номер первого комментария ?>
<?php $pingbackcount = 1; // номер первого пинга ?>

И в соответствующие циклы добавляем

<p class="comment-count"><a href="#comment-<?php comment_ID(); ?>">#<?php echo 
$commentcount++; ?></a></p>

и

<p class="pingback-count"><a href="#comment-<?php comment_ID(); ?>">#<?php echo 
$pingbackcount++; ?></a></p>

И это, на самом деле, все. Обратите внимание, что мы также сохранили глобальную нумерацию, т.е. отображается локальный номер комментария, а в ссылке формируется глобальный.

Последним штрихом будет добавление ссылок на соответствующий комментарий

<a href="<?php the_permalink(); ?>#comment-<?php comment_ID(); ?>"id="comment-<?php 
comment_ID(); ?>" title="Permalink for comment #<?php echo $comment_count; ?>">Comment #<?php
echo $comment_count; ?></a>

Локальный и глобальный номер комментарияВ результате комментарий с локальным номером 10 имеет ссылку с реальным номером 72066. И все довольны.

Интересной модификацией будет исключение пингов из счетчика комментариев. Для этого добавим в functioins.php следующую функцию

function countComments($count) {
global $wp_query;
return count($wp_query->comments_by_type['comment']);
}
add_filter('get_comments_number', 'countComments', 0);

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

Изменяем стиль комментариев

Другой способ улучшить общее восприятие и стилистику зоны комментариев – это изменить отображение чередующихся комментариев, выделяя четные или нечетные другим фоном. В зависимости от каждого отдельно взятого дизайна, этот метод контрастного выделения цветом соседних комментариев может значительно повысить читаемость и улучшить восприятие.

Процесс стилизации чередующихся комментариев сильно зависит от того, какие комментарии считать четными, а какие нечетными. Вордпресс «автомагически» помечает комментарии классами odd (нечетный) и even (четный), снимая головную боль по всем вычислениям. Остается только определить нужные нам стили, например, вот такой вот очень контрастный стиль

.odd {background: white;color: black;}
.even {background: black;color: white;}

И все. Реально все 🙂

Отдельный стиль комментариев для зарегистрированных авторов

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

Для авторов записей вордпресс добавляет класс "bypostauthor", а для зарегистрированных пользователей класс "byuser". Соответственно, к этим классам можно применить любые нужные нам стили и выделения.

Старые версии вордпресс таких возможностей не имеют, поэтому придется немного поколдовать. Данный код проверяет, не является ли автор комментария автором записи и если да, то присваивает ему заданных класс.

<?php if ($comment->user_id == $post->post_author) { echo 'class="comment-author"'; } ?>

Для простейшего цикла вывода комментариев полный код выглядит вот так

<?php foreach ($comments as $comment) : ?>
<div<?php if ($comment->user_id == $post->post_author) {echo ' class="comment-author"'; } ?>>
<p><strong><?php comment_author_link(); ?></strong></p>
<?php comment_text(); ?>
</div>
<?php endforeach; ?>

а в стили добавляем например такое

.comment-author {font-weight: bold;color: red;}

Преимуществом данного кода будет то, что он опознает все комментарии всех авторов сайта. Недостатком то, что он не различает одного автора от другого, а значит все они будут в одинаковом стиле. Давайте устраним данный недостаток.

<?php if ($comment->comment_author_email == "chris@digwp.com") echo 'class="author-chris"'; ?>

Теперь по емейлу будет опознан конкретный автор и ему будет присвоен конкретный стиль. Если авторов несколько, то функция будет выглядеть вот так

<?php if ($comment->comment_author_email == "chris@digwp.com") echo 'class="author-chris"'; elseif 
($comment->comment_author_email == "jeff@digwp.com") echo 'class="author-jeff"'; ?>

И в данную функцию можно добавить сколько угодно авторов.

Стилизуем комментарии с граватарами

Как мы уже знаем, граватары — это глобальный сервис опознавания комментаторов по их емейл, отображающий заданный личный аватар при комментировании любого блога, поддерживающего этот сервис. Поэтому для увеличения узнаваемости будет круто оставлять не только ник и урл сайта, но и персональное изображение. Отображение граватар в вордпрессе включается на странице Настройки обсуждения→Аватар по умолчанию.

Теперь останется только добавить функцию вставки изображения внутри цикла вывода комментариев.

<?php if(function_exists('get_avatar')) { echo get_avatar($comment, $size ='50', $default = 
'https://supersite.ru/default.png'); } ?>

Также в качестве аватара можно использовать аватары Твиттера, для этого забирайте плагин Twitter отсюда и вставляйте в комментарии функцию

<?php twittar('50','https://digwp.com/path/default.png', '#ffffff','twitavatars', 1, 'G'); ?>

Базовыми настройками аватар остаются их размеры — по умолчанию квадрат со стороной 50 пикселей, который может быть увеличен до 96 пикселей и изображение по умолчанию, которое отображается, если аватар не задан. Эта функция вернет тег изображения img с ссылкой на аватар пользователя или на картинку по умолчанию с вашего сайта.

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

<?php $author_email = get_the_author_email(); 
echo get_avatar($author_email, '96'); ?>

Добавление сообщения «Ваш комментарий ожидает модерации»

Если комментарии на сайте не публикуются сразу же, а отправляются на проверку, будет удобным отображать посетителям соответствующее сообщение, чтобы они знали, что их комментарий ожидает проверки, а не пропал или не сохранился. По умолчанию, вордпресс отображает комментарии, ожидающие модерации, только автору и больше никому. И это несколько обескураживает, видеть, что комментарий появился в общем потоке, однако на него никто не обращает внимания, т.к. не видит. С этой точки зрения, добавление текста типа «Ваш комментарий ожидает модерации» будет крайне полезным для улучшения юзабилити сайта.

Хорошая новость в том, что если использовать в шаблоне тег wp_list_comments, то особенно ничего больше делать и не нужно, система уведомлений встроена в эту функцию. А для пользовательских циклов комментариев в functions.php добавляется небольшой код

<?php if ($comment->comment_approved == '0') : ?>
<p class="moderation">Ваш комментарий ожидает модерации.</p>
<?php endif; ?>

Ссылки модерирования комментариев

В разделе 5.3 мы уже рассматривали добавление дополнительных ссылок к комментариям для того, чтобы их удалять или помечать как спам. Это позволит быстро удалять ненужные комментарии и спам без захода в админку.

Традиционно добавим в functions.php

<?php // spam & delete links for all versions of WordPress
function delete_comment_link($id) {
if (current_user_can('edit_post')) {
echo '| <a href="'.get_bloginfo('wpurl').'/wp-admin/comment.php?action=cdc&c='.$id.'">Удалить</a> ';
echo '| <a href="'.get_bloginfo('wpurl').'/wp-admin/comment.php?action=cdc&dt=spam&c='.id.'">
Spam</a>';}} ?>

И вставим ее вызов в подходящем месте comments.php

<?php delete_comment_link(get_comment_ID()); ?>

И снова все. Кнопки Удалить и Spam будут выводиться возле всех комментариев. И этот способ лучше показанного раньше, т.к. не зависит от версии вордпресс и не привязан к шаблону.

Отображение счетчика комментариев

А вот вам способ простого отображения счетчика комментариев, пингбеков и трекбеков для каждого вашего поста. Откройте файл шаблона single.php и добавьте следующий параметр в функцию

<?php comments_template('/comments.php', true); ?>

Теперь для отображения счетчика просто вставьте в шаблон comments.php код

<?php global $wp_query;  ?>
<?php // счетчик pingback и trackback
echo count($wp_query->comments_by_type['pings']); ?>
<?php // счетчик trackback 
echo count($wp_query->comments_by_type['trackback']); ?>
<?php // счетчик pingback 
echo count($wp_query->comments_by_type['pingback']); ?>
<?php // счетчик комментариев
echo count($wp_query->comments_by_type['comments']); ?>

Каждая из этих функций возвращает только соответствующее число, выберете нужную вам сами.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Scroll Up