Как изменить форму комментариев wordpress

Посмотрите мой видеоурок про то, как реализовать комментарии при создании темы WordPress с нуля.

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

HTML полей и лейблы можно задать при помощи параметра $args функции, если же вам понадобится удалить одно из стандартных полей или добавить новое, воспользуйтесь фильтром comment_form_default_fields. Кроме того, каждое из полей проходит отдельно через фильтр comment_form_field_$name, где $name — это ID поля, задающийся в параметрах в массиве fields.

comment_form( $args = array(), $post_id = null )

Параметры

$args

(массив) Массив с параметрами полей.

fields

(массив) Содержит HTML стандартных полей формы (кроме поля комментария), можно передать свой произвольный HTML для каждого (какого-либо) поля, удалить одно из стандартных полей или добавить новое. Кроме того, если у вас нет возможности передать этот параметр в функцию, то можете отфильтровать его через comment_form_default_fields.

author

(строка) HTML поля автора комментария.

email

(строка) HTML поля электронной почты.

url

(строка) HTML поля «Сайт».

cookies

(строка) HTML чекбокса согласия с принятием куков автора комментария (включается в Настройки > Обсуждение)

Чуть ниже вы найдёте примеры, как изменить лейбл любого из полей, как удалить поле с сайтом например и как добавить произвольное поле в форму комментирования.

comment_field

(строка) HTML поля комментирования.

must_log_in

(строка) HTML, который будет использоваться в качестве сообщения пользователю, если он не залогинен, а оставлять комментарии могут только залогиненные пользователи (настройка устанавливается в админке в Настройки > Обсуждение).

logged_in_as

(строка) HTML, отображающися для зарегистрированных пользователей «Вы вошли, как…».

comment_notes_before

(строка) Текст или HTML-код, который будет добавляться перед полями ввода для неавторизованных пользователей.

comment_notes_after

(строка) Текст или HTML-код, который будет добавляться после всех полей ввода (в том числе после поля комментария) и перед кнопкой отправки. По умолчанию это список тегов, разрешенных к использованию в тексте комментария.

action

(строка) Атрибут action формы, по умолчанию site_url( '/wp-comments-post.php' ).

id_form

(строка) Атрибут id тега <form>. По умолчанию commentform.

class_form

(строка) CSS-класс формы. По умолчанию comment-form.

class_container

(строка) CSS-класс контейнера с id=»respond». По умолчанию comment-respond

title_reply

(строка) Заголовок формы.

title_reply_to

(строка) Заголовок формы при ответе на другой комментарий.

title_reply_before

(строка) Открывающий тег заголовка формы при ответе на другой коммент, по умолчанию <h3 id="reply-title" class="comment-reply-title">.

title_reply_after

(строка) Закрывающий тег заголовка формы при ответе на другой коммент, по умолчанию </h3>.

cancel_reply_link

(строка) Текст ссылки отмены ответа.

cancel_reply_before

(строка) Открывающий тег ссылки отмены ответа, по умолчанию <small>

cancel_reply_after

(строка) Закрывающий тег ссылки отмены ответа, по умолчанию </small>

label_submit

(строка) Текст кнопки отправки комментария.

id_submit

(строка) Атрибут id кнопки отправки формы. По умолчанию submit.

name_submit

(строка) Атрибут name кнопки отправки формы. По умолчанию submit.

class_submit

(строка) CSS-класс(ы) кнопки отправки формы. По умолчанию submit.

submit_button

(строка) HTML-шаблон кнопки отправки комментария, по умолчанию <input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />.

submit_field

(строка) HTML-шаблон тега-контейнера для кнопки отправки комментария, по умолчанию <p class="form-submit">%1$s %2$s</p>.

type

(строка) Установив значение данного параметра html5, мы разрешим использовать разметку HTML5 в форме комментирования.

$post_id

(целое число) ID поста, для которого будем выводить форму комментирования, по умолчанию — текущий пост.

Несмотря на то, что функция имеет довольно большое количество параметров, её можно использовать и без них, например достаточно написать comment_form(), чтобы у вас вывелась рабочая форма комментариев на сайте. Однако, иногда бывает, что при помощи этой функции невозможно сделать форму комментов 1 в 1, как на заданном дизайне или вёрстке, тогда приходится использовать альтернативное решение.

А теперь попробуем изменить форму комментариев при помощи хуков.

Изменяем подписи полей формы

Данный фильтр позволяет нам изменить HTML любого из полей формы (кроме поля комментария), для изменения полей формы мы либо можем полностью передать новый HTML полей, либо воспользоваться функцией str_replace(). Давайте попробуем оба способа!

add_filter( 'comment_form_default_fields', 'truemisha_change_labels', 25 );
 
function truemisha_change_labels( $fields ){
 
	// можно подсмотреть исходный HTML через:
	//print_r( $fields );
 
	// 1. полностью перезадаём HTML поля
	$fields[ 'email'] = '<p class="comment-form-email"><label for="email">Электронная почта <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required"></p>';
 
	// 2. воспользуемся функция str_replace()
	$fields[ 'author' ] = str_replace( 'Имя', 'Как вас зовут?', $fields[ 'author' ] );
 
	// не забываем возвратить отфильтрованный (изменённый) результат
	return $fields;
 
}

Не знаете, куда вставлять код?

Результат на стандартной теме Twenty Twenty One:

Удаляем поле «Сайт»

Тут всё очень легко:

add_filter( 'comment_form_default_fields', 'truemisha_remove_url_field', 25 );
 
function truemisha_remove_url_field( $fields ) {
	unset( $fields[ 'url' ] );
	return $fields;
}

Не знаете, куда вставлять код?

Меняем поля местами

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

Как нетрудно догадаться, тут всё сводится к сортировке массивов в PHP.

Но я вам вообще покажу, как это сделать через foreach().

add_action( 'comment_form_default_fields', 'truemisha_change_fields_order', 25 );
 
function truemisha_change_fields_order( $fields ) {
 
	// правила сортировки
	$order = array( 'email', 'author', 'url', 'cookies' ); // меняем Имя и Email
 
	// новый массив с изменённым порядком
	$new_fields = array();
 
	foreach( $order as $index ) {
		$new_fields[ $index ] = $fields[ $index ];
	}
 
	return $new_fields;
 
}

Не знаете, куда вставлять код?

Как добавить произвольное поле в форму комментирования WordPress?

Код ниже состоит из трёх этапов:

1. Сначала мы добавляем поле при помощи уже знакомого хука comment_form_defaults.
2. Можем провалидировать значение нашего нового поля любым способом, т.е. можем просто проверить, что поле не пустое, можем проверить, чтобы оно было определённой длины или через регулярные выражения. А можем вообще скипнуть второй шаг.
3. Сохраняем значение поля в метаданные комментария при помощи add_comment_meta().
4. Не забываем про очистку пользовательского ввода.

// 1. добавляем поле
add_filter( 'comment_form_defaults', 'truemisha_add_comment_field');
function truemisha_add_comment_field( $default ) {
 
	$default[ 'fields' ][ 'city' ] = '<p class="comment-form-city"><label for="city">Город <span class="required">*</span></label><input id="city" name="city" size="30" type="text" /></p>';
	return $default;
 
}
 
// 2. валидация поля (если нужно)
add_filter( 'pre_comment_on_post', 'truemisha_verify_comment' );
function truemisha_verify_comment( $commentdata ) {
 
	if ( empty( $_POST[ 'city' ] ) ) {
		wp_die( 'Укажите свой город!' );
	}
	return $commentdata;
 
}
 
// 3. сохраняем значение поля город в метаданные комментария
add_action( 'comment_post', 'truemisha_save_comment_field_data' );
function truemisha_save_comment_field_data( $comment_id ) {
 
	add_comment_meta( $comment_id, 'city', sanitize_text_field( $_POST[ 'city' ] ) );
 
}

Не знаете, куда вставлять код?

Фильтр, который применяется к каждому полю ввода уже после задействования фильтра comment_form_default_fields.

Используя этот фильтр мы можем так же изменить HTML любого из полей формы, и даже поля формы комментирования фильтром comment_form_field_comment (в коде кстати это отдельный фильтр, но в данный момент это не имеет для нас значения)!

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

add_filter( 'comment_form_field_comment', 'truemisha_change_comment_label', 25 );
 
function truemisha_change_comment_label( $field ) {
 
	$field = str_replace( 'Комментарий', 'Что думаете об этой новости?', $field );
	return $field;
 
}

Не знаете, куда вставлять код?

Результат:

Напоминаю также про мой видеоурок про то, как реализовать комментарии при создании темы WordPress с нуля 😁

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

Как изменить текст кнопки на «Оставить отзыв»?

add_filter( 'comment_form_defaults', 'truemisha_comment_button_text', 25 );
 
function truemisha_comment_button_text( $args ) {
 
	$args[ 'label_submit' ] = 'Оставить отзыв';
	return $args;
 
}

Не знаете, куда вставлять код?

Другие хуки

В этом разделе я бы хотел познакомить вас с экшен-хуками, которые в основном позволяют вывести какой-то текст или HTML-код в определённой части формы комментария.

Этот экшн-хук позволяет вывести текст или HTML код вместо формы комментариев, когда комментарии к этой конкретной записи закрыты.

Например:

add_action( 'comment_form_comments_closed', 'truemisha_closed_comments_text', 25 );
 
function truemisha_closed_comments_text() {
	echo '<p><a href="#">Напишите нам</a>, если нужна личная консультация по уроку!</p>';
}

Не знаете, куда вставлять код?

При помощи этого хука вы можете вывести что-либо в самом начале форме комментария, перед тегом <div id="respond">.

Никаких параметров в хук не передаётся.

Экшн-хук comment_form_must_log_in_after позволяет вам вывести текст или HTML-тег после сообщения о необходимости регистрации, в случае, если комментарии могут оставлять только зарегистрированные пользователи (Настойки > Обсуждение) и если пользователь не авторизован (проверяется функцией is_user_logged_in()).

У хука нет параметров.

Экшн-хук без параметров, срабатывает сразу после открывающего тега <form>.

add_action( 'comment_form_top', 'truemisha_after_form_tag', 25 );
 
function truemisha_after_form_tag() {
	echo 'текст сразу после тега form';
}

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

add_filter( 'comment_form_logged_in', 'truemisha_logged_in_as_text', 25, 3 );
 
function truemisha_logged_in_as_text( $logged_in_as, $commenter, $user_identity ) {
 
	// $logged_in_as – текст/HTML по умолчанию
	// $commenter – куки комментатора, если включены (имя, емейл, сайт)
	// $user_identity – отображаемое имя пользователя
 
	return sprintf( 'Привет, %s! Как насчёт комментария?', $user_identity );
 
}

Не знаете, куда вставлять код?

Экшн-хук, позволяющий вывести текст или HTML-код непосредственно после сообщения в параметре logged_in_as (смотрите предыдущий хук).

Экшн-хук принимает практически такие же параметры, как и comment_form_logged_in, а именно $commenter, $user_identity.

Финишный хук, подготавливающий массив полей для формы комментария.

Помните, я говорил вам, что у вас не получится изменить порядок некоторых полей (поля формы комментария) хуком comment_form_default_fields, так вот, фильтр-хук comment_form_fields позволит вам это сделать. Появился он относительно недавно, в версии WordPress 4.4.0.

Например мы можем воспользоваться этим кодом:

add_action( 'comment_form_fields', 'truemisha_change_all_fields_order', 25 );
 
function truemisha_change_all_fields_order( $comment_fields ) {
 
 	// print_r( $comment_fields );
	// правила сортировки
	$order = array( 'author', 'email', 'comment' );
 
	// новый массив с изменённым порядком
	$new_fields = array();
 
	foreach( $order as $index ) {
		$new_fields[ $index ] = $comment_fields[ $index ];
	}
 
	return $new_fields;
 
}

Не знаете, куда вставлять код?

Этот фильтр-хук позволяет полностью изменить HTML кнопки отправки комментария.

Например:

add_filter( 'comment_form_submit_button', 'truemisha_comment_button', 25, 2 );
 
function truemisha_comment_button( $submit_button, $args ) {
	// $submit_button – исходный HTML кнопки
	// $args[ 'name_submit' ] – атрибут name кнопки
	// $args[ 'id_submit' ] – атрибут id кнопки
	// $args[ 'class_submit' ] – CSS-класс(ы)
	// $args[ 'label_submit' ] – текст кнопки
 
	// тут мы можем сгенерировать новый HTML кнопки и вернуть его
	return $submit_button;
 
}

Экшн-хук, выполняющийся в самом конце формы отправки комментария, перед закрывающимся тегом </form>.

Принимает только параметр $post_id с ID поста, к которому оставляется комментарий.

add_action( 'comment_form', 'truemisha_text_after_comment_form', 25 );
 
function truemisha_text_after_comment_form( $post_id ) {
	echo 'Вы оставляете коммент к посту с ID : ' . $post_id;
}

Экшн-хук в самом конце формы, после закрывающихся тегов </form> и </div> (который <div id="respond">).

Не принимает никаких параметров.

Также хочу ещё раз порекомендовать вам свой видеокурс по созданию темы WordPress на основе готовой вёрстки, вот ссылка.

В 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. По умолчанию для функции используется следующий список полей:

$fields =  array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
    'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
        '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
);

Если нам нужно удалить поле, например, website, нужно просто исключить его из массива и передать массив в функцию comment_form.

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

Теперь форма комментария будет выглядеть следующим образом:

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

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

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
);
 
$comments_args = array(
    'fields' =>  $fields,
    'title_reply'=>'Please give us your valuable comment',
    'label_submit' => 'Send My Comment'
);
 
comment_form($comments_args);

Теперь форма комментария будет выглядеть следующим образом:

Шаг 3. Удаляем поля из формы с помощью крюка

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

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

function remove_comment_fields($fields) {
    unset($fields['url']);
    return $fields;
}
add_filter('comment_form_default_fields','remove_comment_fields');

В данном случае мы добавили функцию remove_comment_fields к фильтру ‘comment_form_default_fields‘, которая удаляет поле url.

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

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

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

function add_comment_fields($fields) {
 
    $fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
        '<input id="age" name="age" type="text" size="30" /></p>';
    return $fields;
 
}
add_filter('comment_form_default_fields','add_comment_fields');

Как только мы добавили поле в тему, то ему нужно задать стиль. Для темы по умолчанию Twenty Eleven добавим селектор #respond .comment-form-age label к другим меткам, таким как  #respond .comment-form-url label и  так далее:

#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-age label,
#respond .comment-form-comment label {
    background: #eee;
    -webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
    -moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
    box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
    color: #555;
    display: inline-block;
    font-size: 13px;
    left: 4px;
    min-width: 60px;
    padding: 4px 10px;
    position: relative;
    top: 40px;
    z-index: 1;
}

Теперь наша форма комментария будет выглядеть следующим образом:

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

function add_comment_meta_values($comment_id) {
 
    if(isset($_POST['age'])) {
        $age = wp_filter_nohtml_kses($_POST['age']);
        add_comment_meta($comment_id, 'age', $age, false);
    }
 
}
add_action ('comment_post', 'add_comment_meta_values', 1);

Как только данные сохранены, их можно выводить в комментарии следующим образом:

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

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

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

function add_comment_fields($fields) {
 
    if( is_singular( 'books' ) ) {
 
        $fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
            '<input id="age" name="age" type="text" size="30" /></p>';
    }
    return $fields;
 
}
add_filter('comment_form_default_fields','add_comment_fields');

Шаг 6. Создаем возвратную функцию для вывода комментариев

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

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

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

wp_list_comments( array( 'callback' => 'twentyeleven_comment' ) );

Изменим ее на:

wp_list_comments( array( 'callback' => 'my_comments_callback' ) );

Функция my_comments_callback будет вызываться для каждой записи.

Шаг 7.  Стилизация комментариев

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

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

function my_comments_callback( $comment, $args, $depth ) {
    $GLOBALS['comment'] = $comment;
 
    ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
        <article id="comment-<?php comment_ID(); ?>" class="comment">
 
            <div class="comment-content"><?php comment_text(); ?></div>
 
            <p><?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?></p>
 
            <div class="reply">
                <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply <span>&darr;</span>', 'twentyeleven' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
            </div>
        </article>
    </li>
    <?php
}

Изменяем цвет фона следующим образом:

.commentlist > li.comment {
 
    background: #99ccff;
    border: 3px solid #ddd;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 0 0 1.625em;
    padding: 1.625em;
    position: relative;
}

Комментарии будут иметь следующий вид:

Заключение

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

A WordPress website consists of three main sections, posts, pages, and comments. By default, each section is in its most basic form.

Although in WordPress, you can customize every single file in your theme and change the structurebut we also sugWordPress provides you with the ability to customize every single file in your theme and change the structure, however, we suggest you also check out the WordPress comment plugins that are extremely useful when editing and customizing the WordPress comments. 

The comment form underneath every post is of particular
importance. But first, this section must be appealing to readers and users.
Unfortunately, the default themes are not appealing to WordPress users.

If the comment form is appealing, users get encouraged to post their comments and join in on the discussion in the comment form below your posts.

In this article, we discuss how to customize the WordPress comment form by modifying the codes in your WordPress theme. In addition, we introduce plugins to make this section more appealing.

By using CSS classes, you can change how texts appear inside the input boxes. For example, in the code below, we change the font of author, email address and URL. Simply add the code to your style.css file:

#author, #email { 
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d; 
letter-spacing:.1em;
} 
#url  { 
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace; 
}

To change the appearance of the submit comment button in WordPress, use the code below in your style.css file:

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
} 
#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a; 
}
#submit:active { 
position:relative;
top:1px;
}

To change the name of the submit comment button in WordPress comment form, use the code below in the functions.php file or add it to the plugin you have to customize WordPress comment form:

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
);
$comments_args = array(
    'fields' =>  $fields,
    'label_submit' => 'Send My Comment'
);
comment_form($comments_args);

The URL field in the WordPress comment form is very attractive to spammers.

By simply removing this field you can’t prevent spammers from posting comments on your website, but you stop a spammer from typing an inappropriate URL in the URL field.

In addition, by removing this field, posting a comment becomes much simpler for your users.

To remove the website URL field, copy the code below in your functions.php file:

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

By using the comment_form_default_fields filter, you can add new fields to the WordPress comment form.

Using filters becomes handy when you want to customize comments form from plugins without manually changing the theme files.

For example, in the code below we will add the age field to
the WordPress comment form:

function add_comment_fields($fields) {
    $fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
        '<input id="age" name="age" type="text" size="30" /></p>';
    return $fields;
}
add_filter('comment_form_default_fields','add_comment_fields');

reCAPTCHA increases the security of your website and
prevents spammers from publishing comments on your website.

The Invisible reCAPTCHA plugin is one of the best plugins you can use to add reCAPTCHA to WordPress.

reCAPTCHA is a service supported by Google and it’s designed to separate bots from people. Only a person can answer its security questions and bots cannot bypass the reCAPTCHA security layers.

As you can probably tell, the Invisible reCAPTCHA plugin is an invisible plugin. It tracks your mouse pointer and IP address to identify if you are a human or a bot.

This plugin filters the comments form and prevents spammers from posting comments. This is one key feature of the Invisible reCAPTCHA plugin.

To add reCAPTCHA to the comment form, from the WordPress dashboard go to Plugins and Add New. Type in Invisible reCAPTCHA in the search box and then proceed to install and activate it. Follow the steps below to configure Invisible reCAPTHCAon your website

This service is supported by Google. Therefore, you need to create an account in Google reCAPTCHA:

• Open this link https://www.google.com/recaptcha/admin/create
• Enter the required information to connect reCAPTCHA to your account.

• Then register by clicking on the Submit.

• Once the registration process is over, a Site key and Secret key will be displayed to you. Make sure you copy them in a notepad. You will need these keys to activate the plugin.
• In the next step, we need to activate the features we want. Go to WordPress dashboard and then Invisible reCAPTCHA Settings.

There are a few tabs in the settings. To enable reCAPTCHA in the comment section, you need to check “Enable Comments From Protection”.

Finally, save the changes.

Change the Title of Your Comment Section

To change the title above
the WordPress comments form, add the code below to the functions.php file or
the plugin you use to customize the WordPress comment form:

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
);
$comments_args = array(
    'fields' =>  $fields,
    'title_reply'=>'Please give us your valuable comment',
);
comment_form($comments_args);

Move Text Field to the Bottom of the Form

By default, after WordPress version 4.4, in the comments section, the first field is the text field, then name, email and website URL.

In the previous versions, it was first name, email and website URL then the text field. If you want to use the older format in your website, simply copy the code below to the functions.php file or the plugin you are using to customize the WordPress comments form:

function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}

This code simply moves
the text field to the bottom of the comments form.

When a user submits a comment on your website, he/she may want to get notifications about the replies.

If you consider a Subscribe checkbox in the comment section, users can check and get notifications in their email addresses.

To add this feature, you need to install and activate the Subscribe to Comments Reloaded plugin. In the Settings, click on Subscribe to Comments to configure the plugin.

By configuring the
plugin, you enable the checkbox in the WordPress comment section. Keep in mind,
WordPress users don’t necessarily have to post a comment to subscribe to
comments and get email notifications.

Add Text Editor to WordPress Comment Section (Quicktags in Comments)

Quicktags are the options you see above the text field in the comment form. Quicktags are used to change the font and style of a text, you can use them to bold, add links and etc. to the text.

To add Quicktags, you need to install and activate the Comment Form Quicktags plugin.

Then, in the Settings click on discussions and look for the Quicktags and enable it. Finally, save your changes.

If you want to change the
CSS of your comment section, copy and paste the code below to the style.css
file:

/* ## Comments
--------------------------------------------- */
.comment-respond,
.entry-pings,
.entry-comments {
    color: #444;
    padding: 20px 45px 40px 45px;
    border: 1px solid #ccc;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    border-left: 4px solid #444;
}
.entry-comments h3{
    font-size: 30px;
    margin-bottom: 30px;
}
.comment-respond h3,
.entry-pings h3{
    font-size: 20px;
    margin-bottom: 30px;
}
.comment-respond {
    padding-bottom: 5%;
    margin: 20px 1px 20px 1px;
        border-left: none !important;
}
.comment-header {
    color: #adaeb3;
    font-size: 14px;
    margin-bottom: 20px;
}
.comment-header cite a {
    border: none;
    font-style: normal;
    font-size: 16px;
    font-weight: bold;
}
.comment-header .comment-meta a {
    border: none;
    color: #adaeb3;
}
li.comment {
    background-color: #fff;
    border-right: none;
}
.comment-content {
    clear: both;
    overflow: hidden;
}
.comment-list li {
    font-size: 14px;
    padding: 20px 30px 20px 50px;
}
.comment-list .children {
    margin-top: 40px;
    border: 1px solid #ccc;
}
.comment-list li li {
    background-color: #f5f5f6;
}
.comment-list li li li {
    background-color: #fff;
}
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
    width: 50%;
}
.comment-respond label {
    display: block;
    margin-right: 12px;
}
.entry-comments .comment-author {
    margin-bottom: 0;
    position: relative;
}
.entry-comments .comment-author img {
    border-radius: 50%;
    border: 5px solid #fff;
    left: -80px;
    top: -5px;
    position: absolute;
    width: 60px;
}
.entry-pings .reply {
    display: none;
}
.bypostauthor {
}
.form-allowed-tags {
    background-color: #f5f5f5;
    font-size: 16px;
    padding: 24px;
}
.comment-reply-link{
    cursor: pointer;
    background-color: #444;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 4px 10px 4px;
    text-transform: uppercase;
    width: auto;
}
.comment-reply-link:hover{
    color: #fff;
}
.comment-notes{
    display:none;   
}

Customize Comments for a Specific Post Type

You may want to add or remove fields from the WordPress comment form of a specific post type. For example, in the code below you can see the Age field in the Movies post type:

function add_comment_fields($fields) {
    if( is_singular( 'Movies' ) ) {
        $fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
            '<input id="age" name="age" type="text" size="30" /></p>';
    }
    return $fields;
}add_filter('comment_form_default_fields','add_comment_fields');

As we mentioned before, the WordPress default themes are quite simple.

In addition, although the comments published below each post attracts and encourages visitors to look at the content of the website, some website admins prefer to disable the comment section to prevent spammers from posting a comment.

In any case, if you ever
wanted to have a comment section enabled in WordPress, there are many great
plugins that can help you customize the WordPress comment form. Let us
introduce some useful plugins in this genre:

JetPack

JetPack is more than a comment plugin. You have more than 20 modules in this plugin and the key feature of this plugin is the ability to use the old comments form.

Users can post comments without filling out each of the fields in the comment section, and also, they can use their social media accounts to submit a comment.

However, users aren’t required to use their social media accounts, they can always manually fill in the fields.

Disqus

The Disqus comment system is one of the popular plugins in the commenting genre. Although this plugin is very popular in the WordPress community, it comes with many disadvantages & advantages and has found many supporters and anti-Disqus amongst the WordPress users.

Below are some advantages of this plugin:

• It has a better design compared to the WordPress comment form.
• Users can sort comments based on newer and older. Also, they can suggest their favorite comments to others.
• It recommends other content from your website to users.
• If you have many comments on your website, it’s recommended to use the Disqus plugin to reduce the send & receive from the WordPress server.
• It synchronizes comments with your WordPress database. So you can go back to the WordPress default comment form whenever you want.
• With a Disqus account, users can comment on websites that use this plugin. Therefore, if users are on another website, as soon as they see the reply notification, they can go back to their comments.

The disadvantages of
Disqus:

• To comment, you need to have an account with Disqus. You didn’t have to register to post a comment in the old WordPress comment form.
• You need to disable ads. Otherwise, Disqus can use their links on other websites.
• Some users have noticed, after you leave the Disqus services, this plugin leaves its URL in the comment section.

The main reason for its
popularity is its friendly interface and the fact that it reduces the size of
your comments. Finally, we recommend paying extra attention to the privacy this
plugin requires before installing it on your website.

If you are planning to install this plugin on your website, we recommend downloading Disqus Conditional Load as well. This plugin increases the time required to load your comment section, therefore, your website loads faster.

Simple Comment Editing

Simple Comment Editing makes a simple change to the default WordPress comment form. It enables the ability to edit comments 5 minutes after posting them.

According to researchers, after publishing a comment, users notice they have made spelling mistakes. With this plugin, they have a second chance of publishing the same comment.

Lazy Load for Comments

Lazy Load for Comments doesn’t add any new features to your website, but it optimizes your website. If a website loads fast, its users are satisfied and happy.

The Lazy Load for Comments plugin reduces the loading time of your comments.

The comment section always appears at the bottom of the page, therefore, by the time users are scrolling down the page or post, the comment section is loaded for them.

Conclusion

The comment section is
very important in any website. In simple words, you can build your community in
the comment section.

Even though the default WordPress comment form is not appealing to anyone, but luckily, this platform is very customizable and you can customize every section of it, even the comment section.

As a result, based on your website’s design you can customize WordPress comment form.

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

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

Если мы будем применять функцию comment_form для вывода на экран формы, то форма отобразится в стандартном виде, используя параметры, заданные по умолчанию. Этими параметрами будут выступать поля Name (Имя), Email (Электронный адрес), Website (Сайт), а также поле для ввода комментария. Первые два параметра являются обязательными. В стандартной теме Twenty Eleven форма имеет следующий вид:

Важными аргументами функции comment_form являются:

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

Изменяем форму для комментариев с помощью функции comment_form

Давайте теперь приступим к изменению нашей формы для комментариев. Мы будем передавать функции comment_form различные параметры.

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

$fields =  array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
    'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
        '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
);

К примеру, если нам необходимо удалить поле website, мы должны создать массив fields без поля website и передать его в функцию comment_form, как показано в следующем примере:

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

Теперь, если мы взглянем на форму комментариев, то она будет выглядеть следующим образом:

Вдобавок к этому давайте изменим заголовок ответа на «Please give us your valuable comment» и заголовок для кнопки отправки на «Send My Comment».

Чтобы достигнуть этого, мы будем передавать аргументы в функцию comment_form.

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
);
 
$comments_args = array(
    'fields' =>  $fields,
    'title_reply'=>'Please give us your valuable comment',
    'label_submit' => 'Send My Comment'
);
 
comment_form($comments_args);

Теперь форма комментариев будет выглядеть следующим образом:

Удаление полей из комментариев с помощью хуков

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

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

Код будет выглядеть следующим образом:

function remove_comment_fields($fields) {
    unset($fields['url']);
    return $fields;
}
add_filter('comment_form_default_fields','remove_comment_fields');

Здесь мы подцепляем функцию remove_comment_fields к фильтру comment_form_default_fields и затем сбрасываем url, чтобы удалить поле website.

Добавляем дополнительные данные к комментариям с помощью хуков

Мы можем также добавить поля к форме комментариев через фильтр comment_form_default_fields. Давайте добавим поле с возрастом через этот фильтр, затем сохраним данные этого поля и отобразим их в комментариях.

Добавить новое поле можно следующим образом:

function add_comment_fields($fields) {
 
    $fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
        '<input id="age" name="age" type="text" size="30" /></p>';
    return $fields;
 
}
add_filter('comment_form_default_fields','add_comment_fields');

Как только мы добавим новое поле, нам понадобится присвоить ему некоторые стили в зависимости от используемой темы. Так как я использую тему Twenty Eleven, то стилизация будет осуществляться при помощи объединения стилей #respond .comment-form-age label с существующими стилями для других полей:

#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-age label,
#respond .comment-form-comment label {
    background: #eee;
    -webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
    -moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
    box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
    color: #555;
    display: inline-block;
    font-size: 13px;
    left: 4px;
    min-width: 60px;
    padding: 4px 10px;
    position: relative;
    top: 40px;
    z-index: 1;
}

Если взглянуть на форму, то она будет выглядеть следующим образом:

Теперь, когда возраст указан в метаданных комментария, мы должны соединиться с comment_post и занести возраст в метаданные age комментария:

function add_comment_meta_values($comment_id) {
 
    if(isset($_POST['age'])) {
        $age = wp_filter_nohtml_kses($_POST['age']);
        add_comment_meta($comment_id, 'age', $age, false);
    }
 
}
add_action ('comment_post', 'add_comment_meta_values', 1); 
 

Теперь, когда метаданные сохранены, их можно вывести в комментарии:

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

Изменение вида комментариев для определенных типов записей

Иногда полезно варьировать поля формы для комментариев в зависимости от типов записей. Давайте немного изменим предыдущий код, чтобы вывести на экран поле с возрастом только при задании определенного типа записи (пусть она называется Book).

Код, позволяющий выводить возраст только для произвольного типа записей book, будет следующим:

function add_comment_fields($fields) {
 
    if( is_singular( 'books' ) ) {
 
        $fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
            '<input id="age" name="age" type="text" size="30" /></p>';
    }
    return $fields;
 
}
add_filter('comment_form_default_fields','add_comment_fields');

Таким образом, поле добавляется только в том случае, если запись имеет тип ‘Books’.

Создание callback-функции для отображения комментариев

Функция wp_list_comments используется для вывода на экран комментариев к записи. Вы можете прочитать про данную функцию в кодексе WordPress: http://codex.wordpress.org/Function_Reference/wp_list_comment.

Функция wp_list_comments обладает аргументом callback, в котором можно определить функцию, вызываемую для вывода комментария. В теме Twenty Eleven в файле comments.php вы можете увидеть следующую строку:

wp_list_comments( array( 'callback' => 'twentyeleven_comment' ) );

Мы изменим ее на

wp_list_comments( array( 'callback' => 'my_comments_callback' ) );

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

Стилизация комментариев

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

Код для функции my_comments_callback будет выглядеть следующим образом:

function my_comments_callback( $comment, $args, $depth ) {
    $GLOBALS['comment'] = $comment;
 
    ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
        <article id="comment-<?php comment_ID(); ?>" class="comment">
 
            <div class="comment-content"><?php comment_text(); ?></div>
 
            <p><?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?></p>
 
            <div class="reply">
                <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply <span>&darr;</span>', 'twentyeleven' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
            </div>
        </article>
    </li>
    <?php
}

Мы также изменим цвет бэкграунда в стилях:

.commentlist > li.comment {
 
    background: #99ccff;
    border: 3px solid #ddd;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 0 0 1.625em;
    padding: 1.625em;
    position: relative;
}

Теперь, если мы взглянем на комментарии, мы увидим следующее:

http://wp.tutsplus.com/tutorials/creative-coding/customizing-comments-in-wordpress-functionality-and-appearance/

<?php comment_form($args, $post_id); ?>

// Modify comments header text in comments
add_filter( 'genesis_title_comments', 'child_title_comments');
function child_title_comments() {
    return __(comments_number( '<h3>No Responses</h3>', '<h3>1 Response</h3>', '<h3>% Responses...</h3>' ), 'genesis');
}

// Unset URL from comment form
function crunchify_move_comment_form_below( $fields ) { 
    $comment_field = $fields['comment']; 
    unset( $fields['comment'] ); 
    $fields['comment'] = $comment_field; 
    return $fields; 
} 
add_filter( 'comment_form_fields', 'crunchify_move_comment_form_below' ); 

// Add placeholder for Name and Email
function modify_comment_form_fields($fields){
    $fields['author'] = '<p class="comment-form-author">' . '<input id="author" placeholder="Your Name (No Keywords)" name="author" type="text" value="' .
                esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />'.
                '<label for="author">' . __( 'Your Name' ) . '</label> ' .
                ( $req ? '<span class="required">*</span>' : '' )  .
                '</p>';
    $fields['email'] = '<p class="comment-form-email">' . '<input id="email" placeholder="your-real-email@example.com" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
                '" size="30"' . $aria_req . ' />'  .
                '<label for="email">' . __( 'Your Email' ) . '</label> ' .
                ( $req ? '<span class="required">*</span>' : '' ) 
                 .
                '</p>';
    $fields['url'] = '<p class="comment-form-url">' .
             '<input id="url" name="url" placeholder="http://your-site-name.com" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /> ' .
            '<label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
               '</p>';
    
    return $fields;
}
add_filter('comment_form_default_fields','modify_comment_form_fields');

$args = array(
    'fields' => apply_filters(
        'comment_form_default_fields', array(
            'author' =>'<p class="comment-form-author">' . '<input id="author" placeholder="Your Name (No Keywords)" name="author" type="text" value="' .
                esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />'.
                '<label for="author">' . __( 'Your Name' ) . '</label> ' .
                ( $req ? '<span class="required">*</span>' : '' )  .
                '</p>'
                ,
            'email'  => '<p class="comment-form-email">' . '<input id="email" placeholder="your-real-email@example.com" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
                '" size="30"' . $aria_req . ' />'  .
                '<label for="email">' . __( 'Your Email' ) . '</label> ' .
                ( $req ? '<span class="required">*</span>' : '' ) 
                 .
                '</p>',
            'url'    => '<p class="comment-form-url">' .
             '<input id="url" name="url" placeholder="http://your-site-name.com" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /> ' .
            '<label for="url">' . __( 'Website', 'domainreference' ) . '</label>' .
               '</p>'
        )
    ),
    'comment_field' => '<p class="comment-form-comment">' .
        '<label for="comment">' . __( 'Let us know what you have to say:' ) . '</label>' .
        '<textarea id="comment" name="comment" placeholder="Express your thoughts, idea or write a feedback by clicking here & start an awesome comment" cols="45" rows="8" aria-required="true"></textarea>' .
        '</p>',
    'comment_notes_after' => '',
    'title_reply' => '<div class="crunchify-text"> <h5>Please Post Your Comments & Reviews</h5></div>'
);

/* ## Comments
--------------------------------------------- */
.comment-respond,
.entry-pings,
.entry-comments {
    color: #444;
    padding: 20px 45px 40px 45px;
    border: 1px solid #ccc;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    border-left: 4px solid #444;
}
.entry-comments h3{
    font-size: 30px;
    margin-bottom: 30px;
}
.comment-respond h3,
.entry-pings h3{
    font-size: 20px;
    margin-bottom: 30px;
}
.comment-respond {
    padding-bottom: 5%;
    margin: 20px 1px 20px 1px;
        border-left: none !important;
}
.comment-header {
    color: #adaeb3;
    font-size: 14px;
    margin-bottom: 20px;
}
.comment-header cite a {
    border: none;
    font-style: normal;
    font-size: 16px;
    font-weight: bold;
}
.comment-header .comment-meta a {
    border: none;
    color: #adaeb3;
}
li.comment {
    background-color: #fff;
    border-right: none;
}
.comment-content {
    clear: both;
    overflow: hidden;
}
.comment-list li {
    font-size: 14px;
    padding: 20px 30px 20px 50px;
}
.comment-list .children {
    margin-top: 40px;
    border: 1px solid #ccc;
}
.comment-list li li {
    background-color: #f5f5f6;
}
.comment-list li li li {
    background-color: #fff;
}
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
    width: 50%;
}
.comment-respond label {
    display: block;
    margin-right: 12px;
}
.entry-comments .comment-author {
    margin-bottom: 0;
    position: relative;
}
.entry-comments .comment-author img {
    border-radius: 50%;
    border: 5px solid #fff;
    left: -80px;
    top: -5px;
    position: absolute;
    width: 60px;
}
.entry-pings .reply {
    display: none;
}
.bypostauthor {
}
.form-allowed-tags {
    background-color: #f5f5f5;
    font-size: 16px;
    padding: 24px;
}
.comment-reply-link{
    cursor: pointer;
    background-color: #444;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 4px 10px 4px;
    text-transform: uppercase;
    width: auto;
}
.comment-reply-link:hover{
    color: #fff;
}
.comment-notes{
    display:none;   
}

I’m an Engineer by profession, Blogger by passion & Founder of Crunchify, LLC, the largest free blogging & technical resource site for beginners. Love SEO, SaaS, #webperf, WordPress, Java. With over 16 millions+ pageviews/month, Crunchify has changed the life of over thousands of individual around the globe teaching Java & Web Tech for FREE.

Reader Interactions

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. We have been creating WordPress tutorials since 2009, and WPBeginner has become the largest free WordPress resource site in the industry.