Стилизируем комментарии в WordPress. Часть 2

Продолжение статьи Стилизируем комментарии в WordPress. Часть 1

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

Часто вы могли видеть, что комментарии автора записи подсвечиваются либо другим отличительным цветом фона, или же каким-то специальным значком. WordPress добавляет дефолтный класс bypostauthor ко всем комментариям, оставленным автором поста. Дизайнеры тем WordPress могут использовать этот класс для выделения комментариев автора.

Некоторые же шаблоны ВП используют свои собственные функции вызова для вывода комментариев. Используя функцию вызова эти темы могут добавлять дополнительную информацию комментарию автора записи. К примеру, Twenty Twelve использует следующую строку в функции вызова комментариев twentytwelve_comment() (расположена она в файле functions.php темы).

// Если текущий автор записи является также автором комментария, выделим это визуально.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );

Этот код добавляет

<span>Post Author</span>

в мета-информацию комментария. В зависимости от того, как ваша тема WordPress обращается к комментарию автора записи, вы можете изменять код по необходимости.

Если вы используете тему, отличную от указанной Twenty Twelve, то вам понадобиться выяснить как она обращается к комментариям. Просто откройте файл comments.php вашего шаблона. Если он использует собственную функцию вызова, то вы увидите ее внутри функции wp_list_comments, примерно так:

<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

В примере выше вы видите, что тема использует twentytwelve_comment в качестве функции вызова. Если она указана непосредственно, то наиболее вероятное расположение ее — в файле functions.php шаблона.

В следующем примере мы изменяем эту функцию для вывода Редактора, а не автора записи. Для этого мы изменяем функцию вызова комментариев на такую:

// Если текущий автор записи является также автором комментария, выделим это визуально.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Editor', 'twentytwelve' ) . '</span>' : '');

Мы также изменим внешний вид, добавив следующий код в файл style.css нашей темы, вот так:

li.bypostauthor cite span {
	color: #21759b;
	background-color: #f8f0cb;
	background-image: none;
	border: 1px solid #f8f0cb;
	border-radius: 3px;
	box-shadow: none;
	padding: 3px;
	font-weight:bold;
}

Вот как это будет выглядеть в итоге:

Стилизируем ссылку «Ответить на комментарий»

Большинство тем WordPress располагают ссылкой ответа на комментарий по каждым из них. Этот функционал отображается только если у вас включены древовидные комментарии. Для их активации перейдите в раздел административной панели WordPress (Настройки » Обсуждение). Найдите раздел «Другие настройки комментариев» и отметьте галочкой пункт «Разрешить древовидные (вложенные) комментарии глубиной хх уровней».

Стандартные классы, генерируемые WordPress для ссылки ответа, это reply и comment-reply-link. Мы будем использовать эти классы для модификации ссылки ответа и оборачивания ее в кнопку на CSS.

.reply { 
	float:right;
	margin:0 10px 10px 0;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
	padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
	color: #FFFFFF;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #f6e7d7;
}

Вот как это будет выглядеть в итоге:

Стилизируем кнопку редактирования комментария

В большинстве тем WordPress залогиненые пользователи с правами редактирования комментариев видят ссылку редактирования комментария внизу каждого из них. Вот небольшой код CSS, который использует стандартный класс comment-edit-link для стилизации внешнего вида ссылки.

a.comment-edit-link {
	float:left;
	margin:0 0 10px 10px;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

А вот как это будет выглядеть в итоге:

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

У большинства приличных шаблонов WordPress при клике на кнопку Ответить открывается форма комментирования сразу под тем комментарием, на который вы собираетесь ответить со ссылкой для отмены этого самого ответа. Давайте изменим эту ссылку, используя стандартный CSS ID cancel-comment-reply.

#cancel-comment-reply-link  { 
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	color:#FFFFFF;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
	text-decoration:none;
}

А вот он и результат:

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