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

29 Мая 2022г. в 04:33

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



Шаг 1. Разбираемся в функцией comment_form и ее аргументами
Рассмотрим функцию WordPress comment_form. Она отвечает за вывод формы комментариев, которая выводится на странице или записи. Вызов данной функции в основном можно встретить в файле comments.php в папке темы. Данный файл включается в различных местах, например, в файлах single.php и page.php, непосредственно или через вызов функции comments_template.

Описание функции можно найти в кодексе WordPress.

Если использовать функцию comment_form для вывода формы, то она будет выводиться с использованием параметров по умолчанию и будет содержать такие поля как имя, email (оба поля являются обязательными), веб сайт и содержание комментария. В теме по умолчанию Twenty Eleven форма будет выглядеть следующим образом.

Форма комментария в теме по умолчанию

Некоторые важные аргументы функции comment_form:

fields –с его помощью можно управлять выводом полей в форме комментария.
comment_notes_before и comment_notes_after – используются для вывода информации перед и после формы.
title_reply – используется для изменения названия ответа, которое по умолчанию имеет значение ‘Leave a Reply’.
label_submit – используется для изменения текста на кнопке отправки комментария.


Шаг 2. Настраиваем форму комментария с помощью функции comment_form
Теперь настроим нашу форму комментария с помощью передачи аргументов в функцию comment_form.

В случае, если нам нужно настроить поля в форме комментариев, нужно передать их список в функцию comment_form. По умолчанию для функции используется следующий список полей:

1
$fields = array(
2
'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
3
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
4
'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
5
'<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
6
'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
7
'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
8
);
Если нам нужно удалить поле, например, website, нужно просто исключить его из массива и передать массив в функцию comment_form.

01
$commenter = wp_get_current_commenter();
02
$req = get_option( 'require_name_email' );
03
$aria_req = ( $req ? " aria-required='true'" : '' );
04
$fields = array(
05
'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
06
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
07
'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
08
'<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
09
);
10

11
$comments_args = array(
12
'fields' => $fields
13
);
14

15
comment_form($comments_args);
Теперь форма комментария будет выглядеть следующим образом:

Изменнный список полей

В дополнение также сменим название формы на ‘Please give us your valuable comment’, а надпись на кнопке на ‘Send My Comment’.

Для выполнения задачи передаем в функцию comment_form следующие аргументы:

01
$commenter = wp_get_current_commenter();
02
$req = get_option( 'require_name_email' );
03
$aria_req = ( $req ? " aria-required='true'" : '' );
04
$fields = array(
05
'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
06
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
07
'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
08
'<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
09
);
10

11
$comments_args = array(
12
'fields' => $fields,
13
'title_reply'=>'Please give us your valuable comment',
14
'label_submit' => 'Send My Comment'
15
);
16

17
comment_form($comments_args);
Теперь форма комментария будет выглядеть следующим образом:

Форма комментария



Шаг 3. Удаляем поля из формы с помощью крюка
Также форма комментария WordPress может быть изменена с помощью крюков и фильтров. Такая настройка может быть особенно полезна при работе с плагином, когда нужно настроить несколько элементов, но не изменять файлы темы. Фильтр для добавления иди удаления полей из формы - ‘comment_form_default_fields‘

Удалим поле адреса URL с помощью фильтра. Приведенный код можно использовать в плагине или в файле functions.php активной темы.

1
function remove_comment_fields($fields) {
2
unset($fields['url']);
3
return $fields;
4
}
5
add_filter('comment_form_default_fields','remove_comment_fields');
В данном случае мы добавили функцию remove_comment_fields к фильтру ‘comment_form_default_fields‘, которая удаляет поле url.



Шаг 4. Добавляем данные в форму комментария с помощью крюка
Мы можем добавить поля в форму с помощью фильтра ‘comment_form_default_fields‘. Добавим поле возраста автора с помощью фильтра и сохраним данное поле дополнительные данные и будем их выводить в комментарии.

Добавляем поле следующим образом:

1
function add_comment_fields($fields) {
2

3
$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
4
'<input id="age" name="age" type="text" size="30" /></p>';
5
return $fields;
6

7
}
8
add_filter('comment_form_default_fields','add_comment_fields');
Как только мы добавили поле в тему, то ему нужно задать стиль. Для темы по умолчанию Twenty Eleven добавим селектор #respond .comment-form-age label к другим меткам, таким как #respond .comment-form-url label и так далее:

01
#respond .comment-form-author label,
02
#respond .comment-form-email label,
03
#respond .comment-form-url label,
04
#respond .comment-form-age label,
05
#respond .comment-form-comment label {
06
background: #eee;
07
-webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
08
-moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
09
box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
10
color: #555;
11
display: inline-block;
12
font-size: 13px;
13
left: 4px;
14
min-width: 60px;
15
padding: 4px 10px;
16
position: relative;
17
top: 40px;
18
z-index: 1;
19
}
Теперь наша форма комментария будет выглядеть следующим образом:

Форма с дополнительным полем

Теперь возраст хранится как дополнительная информация. Нужно использовать крюк в ‘comment_post‘:

1
function add_comment_meta_values($comment_id) {
2

3
if(isset($_POST['age'])) {
4
$age = wp_filter_nohtml_kses($_POST['age']);
5
add_comment_meta($comment_id, 'age', $age, false);
6
}
7

8
}
9
add_action ('comment_post', 'add_comment_meta_values', 1);
Как только данные сохранены, их можно выводить в комментарии следующим образом:

1
<?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?>
Дополнительная информация в комментарии



Шаг 5. Настройка комментариев для определенных типов записей
Иногда требуется использовать поля в комментариях только для определенных типов записей. Изменим код для вывода поля возраста только для записи типа book:

01
function add_comment_fields($fields) {
02

03
if( is_singular( 'books' ) ) {
04

05
$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
06
'<input id="age" name="age" type="text" size="30" /></p>';
07
}
08
return $fields;
09

10
}
11
add_filter('comment_form_default_fields','add_comment_fields');


Шаг 6. Создаем возвратную функцию для вывода комментариев
Функция wp_list_comments используется для вывода комментариев в записях. В кодексе WordPress функция описана подробно.

wp_list_comments имеет аргумент ‘callback‘ в котором можно определить функцию, которая вызывается при выводе комментария.

В теме Twenty Eleven в файле comments.php можно найти строку:

1
wp_list_comments( array( 'callback' => 'twentyeleven_comment' ) );
Изменим ее на:

1
wp_list_comments( array( 'callback' => 'my_comments_callback' ) );
Функция my_comments_callback будет вызываться для каждой записи.



Шаг 7. Стилизация комментариев
Теперь мы немного изменим стиль комментария. Просто будем выводить содержание записи и поле возраста, которое было добавлено нами ранее. Мы также изменим цвет фона для комментариев.

Код функции ‘my_comments_callback‘:

01
function my_comments_callback( $comment, $args, $depth ) {
02
$GLOBALS['comment'] = $comment;
03

04
?>
05
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
06
<article id="comment-<?php comment_ID(); ?>" class="comment">
07

08
<div class="comment-content"><?php comment_text(); ?></div>
09

10
<p><?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?></p>
11

12
<div class="reply">
13
<?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply <span>&darr;</span>', 'twentyeleven' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
14
</div>
15
</article>
16
</li>
17
<?php
18
}
Изменяем цвет фона следующим образом:

01
.commentlist > li.comment {
02

03
background: #99ccff;
04
border: 3px solid #ddd;
05
-moz-border-radius: 3px;
06
border-radius: 3px;
07
margin: 0 0 1.625em;
08
padding: 1.625em;
09
position: relative;
10
}
Комментарии будут иметь следующий вид:

Вид комментариев



Заключение
Комментарии играют важную роль при построении сообщества пользователей сайта. В зависимости от функционала сайта комментарии также можно изменить. WordPress обеспечивает гибкую систему настройки и изменения функционала комментариев на вашем сайте.