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

1. Структура статьи и комментариев

Для SEO важно разделять основной контент статьи и комментарии. Используем itemscope itemtype=»https://schema.org/BlogPosting» для статьи и Comment для каждого комментария.

2. Функция render_custom_comment()

Создаем PHP функцию для рендера комментариев с вложенными ответами:

function render_custom_comment($comment, $level = 0) {
  $likes = get_comment_meta($comment->comment_ID, 'likes_count', true) ?: 0;
  ?>
  <div class="custom-comment level-<?php echo $level; ?>" itemscope itemtype="https://schema.org/Comment">
      <strong itemprop="author"><?php echo esc_html($comment->comment_author); ?></strong>
      <time itemprop="datePublished" datetime="<?php echo get_comment_date('c', $comment); ?>">
        <?php echo get_comment_date('d.m.Y H:i', $comment); ?>
      </time>
      <div itemprop="text"><?php echo esc_html($comment->comment_content); ?></div>
      <div class="comment-actions">
        <button class="like-btn" data-id="<?php echo $comment->comment_ID; ?>">👍 <span><?php echo $likes; ?></span></button>
        <button class="reply-btn" data-id="<?php echo $comment->comment_ID; ?>">Ответить</button>
      </div>
      <div class="reply-wrapper"></div>
  </div>
  <?php
  $children = get_comments(['post_id' => $comment->comment_post_ID, 'parent' => $comment->comment_ID, 'status' => 'approve']);
  foreach($children as $child){
      render_custom_comment($child, $level + 1);
  }
}

3. AJAX форма для комментариев

Форма с AJAX позволяет пользователям оставлять комментарии без перезагрузки страницы:

<form id="custom-comment-form">
  <input type="text" name="author" placeholder="Ваше имя" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="comment" placeholder="Ваш комментарий" required></textarea>
  <input type="hidden" name="post_id" value="123">
  <input type="hidden" name="parent_id" id="parent_id" value="0">
  <button type="submit">Отправить</button>
  <button type="button" id="cancel-reply">Отменить ответ</button>
</form>

4. JavaScript для лайков и ответов

document.addEventListener("DOMContentLoaded", function(){
  const ajaxUrl = "/wp-admin/admin-ajax.php";
  const form = document.getElementById("custom-comment-form");
  const parentInput = document.getElementById("parent_id");

  form.addEventListener("submit", function(e){
    e.preventDefault();
    let fd = new FormData(this);
    fd.append("action","send_custom_comment");
    fetch(ajaxUrl,{method:"POST",body:fd})
      .then(res => res.json())
      .then(data => {
        form.reset();
        parentInput.value = 0;
      });
  });

  document.addEventListener("click", function(e){
    if(e.target.closest(".like-btn")){
      let btn = e.target.closest(".like-btn");
      let id = btn.dataset.id;
      let fd = new FormData();
      fd.append("action","like_comment");
      fd.append("comment_id",id);
      fetch(ajaxUrl,{method:"POST",body:fd})
        .then(res => res.json())
        .then(data => { btn.querySelector("span").innerText = data.data.likes; btn.classList.add("liked"); });
    }

    if(e.target.closest(".reply-btn")){
      parentInput.value = e.target.closest(".reply-btn").dataset.id;
    }
  });
});

• кастомная форма комментариев WordPress
• микроразметка комментариев schema
• вложенные ответы WordPress
• Habr-style комментарии WordPress
• AJAX лайки комментариев WordPress
• кастомный шаблон Аспро

5. Пример готового комментария

6. Дополнительные советы

Вы можете добавить:

• Отображение аватаров через Gravatar
• Модерацию и фильтры спама
• Сортировку по дате или популярности
• AJAX пагинацию
• Кастомные поля комментариев (например, рейтинг товара)
• Визуальные эффекты при добавлении комментария (анимации)

Эта структура гарантирует, что сайт получает максимум SEO пользы, пользователи вовлечены, а комментарии красиво оформлены и интерактивны.