Ну что же, попробуем начать.
Перед тем как вносить все следующие изменения в свою тему, сохраните где-то запасную копию, на случай если у Вас что-то не получится и Вы смогли вернуть все как было.
1. Подключаем вывод в шапке
Открываем файл темы header.php находим в нем подключение функции wp_head(); и перед ней вставляем следующий код.
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
должно получиться так
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?>
или так
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); php wp_head(); ?>
Особой разницы нет. Теперь наша тема будет знать, что мы от нее хотим.
2. Добавляем функцию в functions.php
После того как добавили функцию в шапку файла, нам нужно открыть файл пользовательских функций под названием functions.php и добавить в него следующий код.
Данная функция формирует вид комментария.
function mytheme_comment($comment, $args, $depth)
{
$GLOBALS['comment'] = $comment;
switch ( $comment->comment_type ) :
case '' :
?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div id="comment_block">
<div class="comment-author vcard">
<?php echo get_avatar( $comment->comment_author_email, $args['avatar_size']); ?>
<?php printf(__('<cite class="fn">%s</cite> <span class="says"></span>'), get_comment_author_link()) ?>
<div class="comment-meta commentmetadata">
<a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></a><?php edit_comment_link(__('Изменить '),' ',''); delete_comment_link(get_comment_ID());?>
<div class="coll_comm">Комментариев: <?php commentCount(); ?></div>
</div>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<div class="comment-awaiting-verification"><?php _e('Ваш комментарий ожидает проверки модератором .') ?></div>
<br>
<?php endif; ?><div class="comment_text">
<?php comment_text() ?>
</div>
<div class="reply">
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
<div class="clear"></div>
</div>
</div>
<?php
break;
case 'pingback' :
case 'trackback' :
?>
<li class="post pingback">
<?php comment_author_link(); ?>
<?php edit_comment_link( __( 'Редактировать' ), ' ' ); ?>
<?php
break;
endswitch;
}
//Количество коментариев
function commentCount(){
global $wpdb;
$count = $wpdb->get_var('SELECT COUNT(comment_ID) FROM ' . $wpdb->comments. ' WHERE comment_author_email = "' . get_comment_author_email() . '"');
echo $count . '';
}
// Кнопки Спам и Удалить
function delete_comment_link($id) {
if (current_user_can('edit_post')) {
echo '| <a href="'.admin_url("comment.php?action=cdc&c=$id").'">Удалить</a> ';
echo '| <a href="'.admin_url("comment.php?action=cdc&dt=spam&c=$id").'"> Спам </a>';
}
}
3. Добавляем структуру комментариев
Если у Вас есть Файл comments.php удалите в нем все содержимое и вставьте вместо него код приведенный ниже. Если же такого файла нет, создайте и тоже скопируйте в него данный код
<?php // Do not delete these lines
if (post_password_required()) {
echo '<p class="nocomments">Эта запись защищена паролем. Введите пароль чтобы увидеть комментарии.</p>';
return;
}
$oddcomment = "graybox";
?>
<?php if ($comments) : ?>
<h4 class="comments"><?php comments_number('Комментарии %' );?></h4>
<?php $args = array(
'avatar_size' => 70,
'reply_text' => 'Ответить',
'callback' => 'mytheme_comment',
);
?>
<ul class="comments-list"><?php wp_list_comments($args); ?></ul>
<div id="comment-nav-above">
<?php paginate_comments_links() ?>
</div>
<?php else:?>
<?php if (comments_open()) : ?>
<?php elseif (!is_page()) : // comments are closed ?>
<h4>Комментарии запрещены.</h4>
<?php endif; ?>
<?php endif; ?>
<?php if (comments_open()) : ?>
<?php $comments_args = array(
'comment_notes_after' => '',
); ?>
<?php
$args = array(
'comment_notes_before' => '<p class="comment-notes"><a id="reg" href="/wp-login.php">Войдите</a> или заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *</p>',
'comment_field' => '<p class="comment-form-comment "><label for="comment" >' . _x( 'Comment', 'noun' ) . '</label><br /> <textarea id="comment" name="comment" rows="8" aria-required="true"></textarea></p>',
'comment_notes_after' => '',
'id_submit' => '',
'label_submit' => __( 'Отправить' ),
);
comment_form( $args );
?>
<?php endif; ?>
Благодаря данному коду, формируется структура всех комментариев, а также задается кнопка ответить, размер аватара дополнительный текст и тд.
4. Подключение комментариев в записи
Для того чтобы осуществить вывод комментариев под записью, вам нужно внутри цикла подключить нашу функцию. Откройте файл single.php найдите строку, в которой выводится контент the_content(); и после нее, или немного ниже, в зависимости от того что у Вас в этом файле но не позже строки в которой есть endwhile;
код функции:
<?php comments_template(); ?>
5. Стили CSS
Чтобы все выводилось так, как надо и задать нужный вид, откройте Файл style.css и внесите в него следующий код.
В данных стилях есть две части. Первая задает внешний вид комментариев, вторая часть, внешний вид формы отправки.
/*Комментарии*/
.comments{font-weight:bold;color:#030;margin-top:25px;}
.comments-list ul,.comments-list ol{list-style:none;}
.comments-list{margin:18px 0 0;}
.comments-list li{list-style:none;}
#comment_block{margin:15px 0 0 0px;}
.comments-list .children{margin:0 0 0 20px;}
.comment-author{padding:4px;color:#030;}
li.bypostauthor{background:rgba(255,255,255, 0.4)}
.date_comments{font-size:11px;color:#888;}
.fn{font-style:normal;font-weight:bold;}
.coll_comm{font-size: 11px;color:#888;}
.avatar{padding: 2px;float:left;margin:0 5px 0 0;}
.commentmetadata{font-size:11px;color:#888;padding:3px 0 0;}
.commentmetadata a{color:#888;text-decoration:none;}
.commentmetadata a:hover{color:#060;text-decoration:underline;}
.comment_text{margin:25px 0 10px 85px;padding:5px 7px 0;position:relative;}
.reply{float: right;margin:0 10px 10px 0;}
.reply a{text-transform:lowercase;background:#030;color:#fff;text-decoration:none;padding:0 5px 2px;font-size:13px;line-height:16px;}
.reply a:hover {background:#060;color:#FFF;}
#comment-nav-above{width:100%;margin:15px 0;}
.prev,.next{display:none;}
.page-numbers{color:#cc0000;margin: 0 4px;}
.current{padding:4px;background: #cc0000;color: #333;}
.nav-next{float:right;}
/*Форма добавления комментариев*/
#respond{margin:0 auto 1.625em;padding:1.625em;position:relative;z-index:2;background:#f9f9f9;-webkit-box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 0.2);-moz-box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 0.2);box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 0.2);}
#respond input[type="text"],#respond textarea{border: 1px solid #9c0;position:relative;padding:10px;height:100px;}
#respond .comment-form-author,#respond .comment-form-email,#respond .comment-form-url,#respond .comment-form-comment{position:relative;}
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label{color:#030;display:inline-block;font-size:12px;left:4px;min-width:60px;padding:4px 10px;position:relative;}
#respond input[type="text"]:focus,#respond textarea:focus{text-indent:0;z-index:1;}
#respond textarea{resize:vertical;width:95%;}
#respond .comment-form-author .required,
#respond .comment-form-email .required{color:#bd3500;font-size:22px;font-weight:bold;}
#respond .comment-notes,#respond .logged-in-as{font-size:13px;}
#respond p{margin:10px 0;}
#respond .form-submit,#contactForm .sim{float:right;margin:-20px 0 10px;}
#respond .form-submit input,#contactForm .sim{margin:20px 0;padding:5px;position:relative;cursor:pointer;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.6);border:none;background: #99cc00;background: -moz-linear-gradient(top, #99cc00 52%, #7cad00 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(52%,#99cc00), color-stop(100%,#7cad00));background: -webkit-linear-gradient(top, #99cc00 52%,#7cad00 100%);background: -o-linear-gradient(top, #99cc00 52%,#7cad00 100%);background: -ms-linear-gradient(top, #99cc00 52%,#7cad00 100%);background: linear-gradient(to bottom, #99cc00 52%,#7cad00 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cc00', endColorstr='#7cad00',GradientType=0 );}
#respond .form-submit input:hover,#contactForm .sim:hover{background:#060;}
#respond .logged-in-as a:hover,#respond #cancel-comment-reply-link:hover{text-decoration:underline;}
.commentlist #respond{margin:1.625em 0 0;width:auto;}
#reply-title{color:#030;font-size:20px;letter-spacing:-1px;line-height: 15px;font-weight:bold;}
#cancel-comment-reply-link{display:block;font-size:12px;font-weight:normal;line-height:2.2em;letter-spacing:-1px;position:absolute;right:1.625em;text-decoration:none;text-transform:uppercase;top:1.1em;}
#respond label{line-height:1.5em;}
#respond input[type=text]{display:block;height:15px;width:95%;}
#respond p{font-size:12px;}
Данные стили минимальны и простенькие на вид, если Вы хотите их улучшить, можете смело менять, но будьте очень внимательны.
Сделав все эти инструкции, вы получите древовидные комментарии. Если же Вам нужно вносить изменения, можете делать это, но сохраняйте резервные копии, чтобы иметь возможность потом вернуться обратно. Как я и писал выше, данный способ позволяет настроить внешний вид и внести новые элементы либо удалить ненужные.
Буду очень рад, если данный способ поможет Вам и Вы сможете добиться нужного результата.
На этом все, спасибо за внимание 🙂
