В этой статье мы рассмотрим, как создать полностью кастомную форму для комментариев или обратной связи в соответствии со всеми требованиями,которые предъявляет css-фреймворк Bootstrap3. И подготовим комментарии для вывода в любой нестандартный шаблон.

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

Скачать данный шаблон можно по ссылке:
https://github.com/sbogdanov108/article_wp/archive/master.zip

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

Итак, после установки шаблона перейдем в директорию wp-content/themes/blogus и откроем для редактирования файл content.php. Вставим в него следующий код, после строки:

<? the_content() ?>

<? if ( comments_open() ) : ?>
  <? comments_template() ?>
<? endif ?>

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

Теперь создадим шаблон комментариев, добавив в корень директории blogus файл с именем comments.php. Этот файл будет содержать в себе всю html-разметку, необходимую для работы формы и вывода комментариев.

Предварительно добавим в файл functions.php функцию, которая будет отвечать за правильное окончание слова «комментарий», в зависимости от количества самих комментариев:

/**
 * Получить окончание слова
 */
function get_end_of_word( $number )
{
  $cases = [ 2, 0, 1, 1, 1, 2 ];
  $titles = [ 'комментарий', 'комментария', 'комментариев' ];

  return $titles[ ( $number % 100 > 4 && $number % 100 < 20 ) ? 2 : $cases[ ( $number % 10 < 5 ) ? $number % 10 : 5 ] ];
}

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

Первый блок кода:

<?php
/*
 * Если данный пост защищен паролем через админку и
 * пользователь еще не ввел пароль, тогда мы не
 * будем загружать комментарии
*/
if ( post_password_required() )
{
  return;
}
?>

Второй блок кода, который размещаем сразу же после предыдущего:

<? /* Выводим комментарии только в том случае, если они есть */ ?>
<?php if ( have_comments() ) : ?>
<div class="row comments">
  <div class="col-md-12">
    <h4>
      <? /* Получаем кол-во комментариев */ ?>
      <?= get_comments_number() ?>
      <? /* Получаем корректное окончание слова, в зависимости от кол-ва комментариев. Функцию end_of_word помещаем в файл functions.php */ ?>
      <?= end_of_word( get_comments_number() ) ?>
    </h4>
  </div>

  <div class="col-md-12" id="comments">
    <? /* Выводим все комментарии */ ?>
    <? wp_list_comments( [
      'style'    => 'div',
      'type' => 'comment',
    ] ) ?>
  </div>
</div>
<? endif ?>

И третий блок кода, самый объемный, который отвечает за вывод формы для комментариев. Его помещаем после предыдущего блока:

<div class="row comment-form" id="respond">
  <div class="col-md-12">
    <h3><? comment_form_title( 'Оставить комментарий', 'Оставить комментарий для %s' ) ?></h3>

    <div id="cancel-comment-reply">
      <small>
        <? /* Получаем ссылку для отмены ответа на комментарий */ ?>
        <?= get_cancel_comment_reply_link() ?>
      </small>
    </div>

    <form class="form-horizontal" action="<?= get_option( 'siteurl' ) ?>/wp-comments-post.php" method="post" id="form-comment">

      <? /* Этот блок будет отрабатываться только для зарегистрированного пользователя */ ?>
      <? if ( is_user_logged_in() ) : ?>
        <p>Вы вошли как <a href="<?= get_option( 'siteurl' ) ?>/wp-admin/profile.php"><?= $user_identity ?></a>.
          <? /* Получаем ссылку для выхода из аккаунта */ ?>
          <a href="<?= wp_logout_url( get_permalink() ) ?>" title="Выйти из аккаунта">Выход</a>
        </p>
      <? else : ?>
        <div class="form-group">
          <label for="author" class="col-xs-3 col-sm-12 col-md-3 control-label">Имя
            <span class="star">*</span>
          </label>

          <div class="col-xs-9 col-sm-12 col-md-9">
            <input type="text" class="form-control" name="author" id="author" value="<?= esc_attr( $comment_author ) ?>" tabindex="1" aria-required="true" />
          </div>
        </div>

        <div class="form-group">
          <label for="email" class="col-xs-3 col-sm-12 col-md-3 control-label">E-mail (не публикуется)
            <span class="star">*</span>
          </label>

          <div class="col-xs-9 col-sm-12 col-md-9">
            <input type="text" class="form-control" name="email" id="email" value="<?= esc_attr( $comment_author_email ) ?>" tabindex="2"/>
          </div>
        </div>

        <div class="form-group">
          <label for="url" class="col-xs-3 col-sm-12 col-md-3 control-label">Сайт</label>

          <div class="col-xs-9 col-sm-12 col-md-9">
            <input type="text" class="form-control" name="url" id="url" value="<?= esc_attr( $comment_author_url ) ?>" tabindex="3"/>
          </div>
        </div>
      <? endif ?>

      <div class="form-group">
        <div class="col-sm-12">
          <textarea class="form-control" name="comment" id="comment" tabindex="4" placeholder="Комментарий..."></textarea>

          <span class="help-block">
            <small>Вы можете использовать следующие HTML-теги:<br/><code><?= allowed_tags() ?></code></small>
          </span>
        </div>
      </div>

      <div class="help-block help-required">
        <span class="star">*</span> Обязательно к заполнению
      </div>

      <div class="form-group">
        <div class="col-sm-12">
          <button type="submit" class="btn btn-default" id="submit" tabindex="5">Отправить</button>
          <? /* Генерируем необходимую служебную информацию для работы движка WordPress */ ?>
          <? comment_id_fields() ?>
        </div>
      </div>
    </form>
  </div>
</div>

А теперь приведем немного в порядок внешний вид формы и комментариев, добавив несколько стилей в файл style.css:

.comments {
  margin-top: 40px; }

.comments .comment .comment {
  margin-left: 40px; }

.comment {
  margin-top    : 15px;
  margin-bottom : 15px; }

.comment-form {
  margin-top : 40px; }

.comment-form textarea {
  height : 150px; }

.comment-form .help-block code {
  font-size : 70%; }

.comment-form .star {
  color : #c7254e; }

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

И форма для комментариев, сверстанная полностью в соответствии с требованиями css-фреймворка Bootstrap3

На этом создание Bootstrap3 формы для WordPress завершено.

Исходные коды использованной темы доступны по ссылке:
https://github.com/sbogdanov108/article_wp