Комментарии для сайта WordPress — настройка без плагинов

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Сегодняшний пост будет посвящен настройке комментариев для сайта WordPress c помощью редактирования файлов текущей темы (тут о загрузке и установке тем для Вордпресс подробнее) и без использования плагинов. Я уже неоднократно отмечал, что замена расширений Вордпресс кодами дает возможность снизить нагрузку на сервер хостера и тем самым дать лишний плюс в деле оптимизации проекта.

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

Кстати, несмотря на мое стремление к сокращению расширений, некоторые из них весьма функциональны и полезны. Кроме того, ведь должен всегда быть выбор, поэтому предлагаю все-таки ознакомиться с материалом по настройке WordPress комментариев с помощью плагинов Comment form Quicktags и WP Monalisa. Также неплохо бы обеспечить читателям возможность подписаться на комментарии с помощью расширения Subscribe to Comments.

Ко всему нужно подходить взвешенно, есть расширения, без которых точно невозможно обойтись. Если коснуться темы оформления комментариев, то обязательным, на мой скромный взгляд, безусловно, является плагин WordPress Akismet для защиты от спама в комментариях. С ним вы будете чувствовать себя комфортно.

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

Настройка комментариев для сайта WordPress посредством редактирования файлов comments.php и functions.php

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

В чем же заключается эта гибкость? Да в том, что все изменения, которые вы будете вносить в файлы темы WordPress, сохранятся и после обновления текущей версии движка. В интернете очень часто можно встретить советы, и весьма конструктивные, которые предполагают редактирование файлов ядра Вордпресс (например, в нашем случае, comment-template.php, comment.php, отвечающие за вывод комментариев).

Но все дело в том, что после обновления движка все эти изменения сойдут на нет и придется снова их повторять, что крайне неудобно. А вот однажды отредактированные файлы шаблона вашей темы (для нашего случая это файлы single.php, comment.php, functions.php) останутся неизменными и после обновления.

Прежде, чем приступить к описанию редактирования файлов темы, которые выводят комментарии WordPress, хочу предупредить, что перед внесением изменений обязательно сохраняйте копии старых файлов, чтобы подстраховаться. Если даже напортачите, всегда сможете вернуться к предыдущему варианту. Лучше всего использовать для этих целей функциональный редактор notepad++, который просто незаменим в качестве инструмента вебмастера.

Итак, перехожу к делу. Движок WordPress генерирует отображение комментариев на блоге по умолчанию. Но для того, чтобы обеспечить выше упомянутое гибкое решение, можно составить свой вариант вывода комментариев с помощью функции mytheme_comment, содержание которой я позаимствовал на блоге уважаемого мной Андрея Морковина. Эту функцию нужно вставить в файл functions.php текущей темы (чтобы не ошибиться, вставьте в самый конец):

function mytheme_comment($comment, $args, $depth)
{
	$GLOBALS['comment'] = $comment;
	switch ( $comment->comment_type ) :
		case '' :
?>
	   <li <?php comment_class(); ?> id=&amp;quot;li-comment-<?php comment_ID() ?>&amp;quot;>
			<div id=&amp;quot;comment-<?php comment_ID(); ?>&amp;quot;>
				<div class=&amp;quot;comment-author vcard&amp;quot;>
					<?php edit_comment_link( __( 'Редактировать' ), ' ' ); ?>
					<?php echo get_avatar( $comment->comment_author_email, $args['avatar_size']); ?>
					<?php printf(__('<cite class=&amp;quot;fn&amp;quot;>%s</cite> <span class=&amp;quot;says&amp;quot;>says:</span>'), get_comment_author_link()) ?>
				</div>

				<div class=&amp;quot;comment-meta commentmetadata&amp;quot;>
					<a href=&amp;quot;<?php echo esc_url( get_comment_link( $comment->comment_ID ) ) ?>&amp;quot;><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a>
				</div>

<?php if ($comment->comment_approved == '0') : ?>
				<div class=&amp;quot;comment-awaiting-verification&amp;quot;><?php _e('Your comment is awaiting moderation.') ?></div>
			 <br />
<?php endif; ?>
				<?php comment_text() ?>
				<div class=&amp;quot;reply&amp;quot;>
					<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
				</div>
			</div>

<?php
		break;
		case 'pingback'  :
		case 'trackback' :
?>
			<li class=&amp;quot;post pingback&amp;quot;>
				<?php comment_author_link(); ?>
				<?php edit_comment_link( __( 'Редактировать' ), ' ' ); ?>
<?php
		break;
	endswitch;
}

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

Однако пока эта функция не работает. Чтобы ее задействовать, нужно обратиться к файлу comments.php и найти там следующую строчку (напомню, используйте редактор notepad++, который очень удобен для редактирования):

<?php wp_list_comments(); ?>

Теперь в качестве дополнения укажем массив $args для функции wp_list_comments и несколько необходимых строк этого массива со значениями. Вся эта конструкция будет выглядеть следующим образом:

<?php $args = array(
	 'avatar_size'       => 45,
	 'reply_text'       => 'Ответить на комментарий',
	 'callback'          => 'mytheme_comment',
    ); ?>
	<ul class=&quot;comments-list&quot;><?php wp_list_comments($args); ?></ul>

Где строчки со значениями означают следующее:

• 2 строка — увеличивает размер аватара (сущность которого — граватар, если он, конечно, создан пользователем) до 45 пикселов (при желании указать свой), в то время как размером по умолчанию является величина в 32 пиксела. Если вы хотите оставить дефолтный размер, то эту строчку можно удалить;
• 3 строка — выводит текст ссылки для ответа на комментарий;
• 4 строка — значение ‘callback’ указывает, что все комментарии будут выводится в соответствии с функцией ‘mytheme_comment’, содержание которой было прописано в файле functions.php. Если эту строчку удалить, то WordPress будет обращаться к файлам ядра, где находится запись стандартного вывода комментариев.

Это далеко не все, что можно сделать, хотя для меня этого оказалось пока достаточно. Со всеми возможными значениями массива $args для функции wp_list_comments можете познакомиться на странице Codex WordPress.

Очень часто необходимо поменять надпись с числом комментариев, которая, к сожалению, по умолчанию выводится некорректно на странице со статьей. Я имею ввиду неправильное склонение, типа «4 комментариев», которое режет глаз и нарушает правила грамматики русского языка. Для этого в месте, куда необходимо вывести данную надпись, необходимо вставить вместо кода, отвечающего за вывод комментариев, следующую строчку в файл comments.php:

<?php plural_form(get_comments_number(),array('комментарий','комментария','комментариев'));?>

Обычно она следует за такой строкой:

<?php if ($comments) : ?>

Кроме этого, необходимо прописать соответствующую функцию в файле functions.php, чтобы все это дело заработало (можно опять же это сделать в самом конце после окончания записи вставленной ранее функции mytheme_comment):

function plural_form($number, $after) {
 $cases = array (2, 0, 1, 1, 1, 2);
 echo $number.' '.$after[ ($number%100>4 && $number%100<20)? 2: $cases[min($number%10, 5)] ];
 }

Эта функция позволит отображать записи с числом комментариев в правильном склонении: «1 комментарий», «2 комментария», «5 комментариев» и т.д. Чтобы у начинающих вебмастеров не возникла путаница в голове, дам вариант файла comments.php моей темы после всех этих манипуляций:

<?php // Do not delete these lines
	if (post_password_required()) {            
            echo '<p class=&amp;quot;nocomments&amp;quot;>This post is password protected. Enter the password to view comments.</p>';
            return;
        }
	$oddcomment = &amp;quot;graybox&amp;quot;;
?>

<!-- You can start editing here. -->
<?php if ($comments) : ?>
    <h5><?php plural_form(get_comments_number(),array('комментарий','комментария','комментариев'));?>
</h5>
	<?php $args = array(
	 'avatar_size'       => 45,
	 'reply_text'       => 'Ответить на комментарий',
	 'callback'          => 'mytheme_comment',
    ); ?>
	<ul class=&amp;quot;comments-list&amp;quot;><?php wp_list_comments($args); ?></ul>
    <?php paginate_comments_links() ?>

<?php else:?>
    <?php if (comments_open()) : ?>
        <!-- If comments are open, but there are no comments. -->
    <?php elseif (!is_page()) : // comments are closed ?>
        <!-- If comments are closed. -->
        <h4>Comments are closed.</h4>
     <?php endif; ?>
<?php endif; ?>

<?php if (comments_open()) : ?>
<?php $comments_args = array(
        'comment_notes_after' => '',
); ?>
<?php comment_form($comments_args); ?>
<?php endif; ?>
<?php show_manual_subscription_form(); ?>

Обращаю ваше внимание на то, что полностью копировать содержание comments.php я не советую, поскольку темы у всех разные. Просто внимательно посмотрите, куда вставить массив для для функции wp_list_comments (строки 13-17) и plural_form (строка 11). Далее даю обе функции, которые мы вставили в файл functions.php:

<?php
function mytheme_comment($comment, $args, $depth)
{
	$GLOBALS['comment'] = $comment;
	switch ( $comment->comment_type ) :
		case '' :
?>
	   <li <?php comment_class(); ?> id=&amp;quot;li-comment-<?php comment_ID() ?>&amp;quot;>
			<div id=&amp;quot;comment-<?php comment_ID(); ?>&amp;quot;>
				<div class=&amp;quot;comment-author vcard&amp;quot;>
					<?php edit_comment_link( __( 'Редактировать' ), ' ' ); ?>
					<?php echo get_avatar( $comment->comment_author_email, $args['avatar_size']); ?>
					<?php printf(__('<cite class=&amp;quot;fn&amp;quot;>%s</cite> <span class=&amp;quot;says&amp;quot;>says:</span>'), get_comment_author_link()) ?>
				</div>

				<div class=&amp;quot;comment-meta commentmetadata&amp;quot;>
					<a href=&amp;quot;<?php echo esc_url( get_comment_link( $comment->comment_ID ) ) ?>&amp;quot;><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a>
				</div>

<?php if ($comment->comment_approved == '0') : ?>
				<div class=&amp;quot;comment-awaiting-verification&amp;quot;><?php _e('Your comment is awaiting moderation.') ?></div>
			 <br />
<?php endif; ?>
				<?php comment_text() ?>
				<div class=&amp;quot;reply&amp;quot;>
					<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
				</div>
			</div>

<?php
		break;
		case 'pingback'  :
		case 'trackback' :
?>
			<li class=&amp;quot;post pingback&amp;quot;>
				<?php comment_author_link(); ?>
				<?php edit_comment_link( __( 'Редактировать' ), ' ' ); ?>
<?php
		break;
	endswitch;
}
function plural_form($number, $after) {
 $cases = array (2, 0, 1, 1, 1, 2);
 echo $number.' '.$after[ ($number%100>4 &amp;amp;&amp;amp; $number%100<20)? 2: $cases[min($number%10, 5)] ];
}

Итак, нашими стараниями мы получили свой вариант комментариев, которые будут выводится движком WordPress и кои в дальнейшем можно будет редактировать и подстраивать под себя. А с помощью вставленной функции plural_form мы добились, что надпись с числом комментариев будет отображаться в соответствии с правилами грамматики русского языка.

Стили CSS для оформления комментариев WordPress

Ну, а теперь необходимо призвать на помощь стили CSS, чтобы соответственно вашему желанию придать нужный вид комментариям. Для этих целей очень подходит замечательный плагин Firebug для вэб-браузера Мазила Фаерфокс (здесь информация, как скачать и настроить этот популярный браузер), который просто незаменим при редактировании HTML и CSS кода и аналоги которого уже встроены во всех последних модификациях других популярных web-браузеров (Опера, IE, Google Chrome).

Для вывода комментариев WordPress по умолчанию прописаны соответствующие классы и идентификаторы, правила CSS для которых можно изменить путем редактирования файла style.css. Если открыть любую страницу Вордпресс блога, где есть комментарии, то с помощью выше упомянутого Firebug можно поэкспериментировать путем редактирования стилей с оформлением выводимых WordPress комментариев. Я же воспользовался его аналогом в Хроме:

Так у меня на блоге выглядели блоки древовидных комментариев, которым соответствовали стили классов (class) и идентификаторов (id) для моей темы Вордпресс. Если взгляните на код comments.php, то строчка вывода всего блока комментариев WordPress там обрамлена в контейнер ul с прописанным классом:

<ul class=&quot;comments-list&quot;><?php wp_list_comments($args); ?></ul>

После работы движка Вордпресс происходит интерпретация этой части PHP кода в HTML код и в браузере происходит отображение соответствующего элемента вебстраницы. Таким образом, между открывающим и закрывающим тегами ul с помощью функции wp_list_comments($args) будут отображаться все комментарии.

По аналогии, если вы посмотрите на файл functions.php, то обратите внимание на строчку:

<li <?php comment_class(); ?> id=&quot;li-comment-<?php comment_ID() ?>&quot;>

Это кусок кода PHP отвечает за вывод ветки комментариев WordPress, то есть если происходит какой-то диалог на определенную тему пользователя с администратором. Благодаря таким разветвлениям очень легко отслеживать общение между конкретными пользователями. И для каждой ветки также прописаны определенные классы.

Но в данном случае нас интересует оформление отдельного комментария. Для того, чтобы улучшить внешний вид каждого из комментариев, я добавил некоторые свойства для уже имеющегося класса «comment-body» в файл style.css темы и полностью правило CSS для него стало выглядеть так:

.comment-body {
border: 1px solid #bbb; /* Толщина, стиль и цвет линии границы */
border-radius: 8px; /* Радиус закругления границы */
padding: 10px; /* Поля вокруг текста */ 
}

После внесения этих изменений комментарии получили такое оформление:

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

Выделение комментариев админа на блоге WordPress

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

Возможно, для начинающих еще сложно разобраться во всех этих хитросплетениях и комбинациях с файлами темы и проще воспользоваться плагином, установка и настройка которого займет минуты. Например, с этой задачей может легко справиться Simple Author Highlighter. Кому еще тяжело втянуться в редактирование файлов темы для корректной настройки комментариев WordPress, может, конечно воспользоваться им, ну а для любознательных вроде меня следует продолжение.

Не знаю, возможно, для некоторых тем, где нет древовидных комментариев, эта задача окажется простой. Но я уже отмечал причины, по которым не желаю отказываться от такого вида комментариев и, думаю, читатели блога одобрят такое решение. Поэтому перехожу к сути, а именно к описанию моих изысканий, конечным результатом которых явилось выделение комментариев админа цветом. Взгляните на файл functions.php и найдите в составе функции mytheme_comment такую строчку:

<div id="comment-<?php comment_ID(); ?>">

Этот кусок кода выводит одинаково оформленные комментарии, независимо от того, кому они принадлежат. Однако, если прописать в файле style.css различные классы для комментариев читателей и ответов админа, то возможно их разделить внешним видом. Например, для общих комментариев мы оставим класс «comment-body», который уже имеется. Для комментариев администратора создадим новый, скажем, класс «adm_comment-body», однако воспользуемся правилом группирования CSS и оставим для него уже имеющиеся значения:

.comment-body, .adm_comment-body {
border: 1px solid #bbb; /* Толщина, стиль и цвет линии границы */
border-radius: 8px; /* Радиус закругления границы */
padding: 10px; /* Поля вокруг текста */
}

Хотя вы можете поставить другие значения и сделать, например, рамку вокруг текста комментария толще, другого цвета или увеличить поля вокруг текста, тут дело вкуса. Я же решил просто выделить свои комментарии цветом. Для этого я отдельно прописал свойство color для класса «adm_comment-body»:

.adm_comment-body {
background: #e2e9eb;
}

Прописали мы отдельно свойства CSS для сообщений администратора, но этого еще недостаточно. Нужно, чтобы WordPress как-то прореагировал на наши действия и начал выводить комментарии админа соответствующим образом. Вот теперь строчку в файле functions.php для функции mytheme_comment:

<div id="comment-<?php comment_ID(); ?>">

Заменяем на такую:

<div id="comment-<?php comment_ID(); ?>" class="<?php if ( get_comment_author_email() == get_the_author_email() ) echo adm_; else echo $oddcomment; ?>comment-body">

Если интерпретировать эту запись, то здесь заложено условие: если автором сообщения является администратор блога, то к выводимому комментарию применяется класс «adm_comment-body». Все, задача решена, можете в этом убедиться:

На этом все. Желаю всем благополучия и побольше удачи!