Делаем супер форму комментариев WordPress. Тонкая настройка формы комментирования будет для этого в самый раз: "

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

Надеюсь что статья окажется полезной для владельцев блогов на WordPress, знакомых с HTML, CSS и PHP.

***

В WordPress для подключения шаблона комментариев на пост или страницу используется функция comments_template() , которая принимает в себя два параметра:

  • первый — путь к файлу шаблона, по умолчанию это comments.php в папке с текущей темой
  • второй служит для разделения комментариев по типу (обычные, трекбэки и пингбэки), по умолчанию false

Вставим comments_template() после вывода записи в шаблон поста single.php или страницы page.php .

Описание и принимаемые аргументы функции comments_template() и других упоминаемых в статье ищите в Кодексе WordPress .

Подготовка шаблона

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

  • В принципе назвать файл можно как угодно, а после в comments_template() прописать путь к этому файлу, однако лучше придерживаться стандартного названия
  • Редактировать файл можно и в админке WP, кстати
  • Лучше всего конечно писать код и сразу проверять его действие на своем блоге или на локальном сервере.

В WordPress возможно запретить комментарии для отдельных постов, поэтому перед их выводом нужно произвести проверку на «открытость»:

Это код-обертка для наших дальнейших действий. Теперь подготовим контейнер для блока комментариев

с семантически корректным классом или идентификатором (класс конечно предпочтительнее):

Внутри

пропишем заголовок, чтобы вашим читателям было понятно, что здесь находятся комментарии и ничто другое, тег

будет для этого в самый раз:

"

Здесь мы указали одну из функций WordPress — the_title() , результатом выполнения этой функции станет вывод заголовка текущего поста или страницы. Если вы не хотите выводить заголовок, то можно написать просто «Комментарии читателей».

Далее, перед тем как выводить комментарии, нужно удостовериться в их наличии, т.е. произвести проверку, если есть — вывести полный список, если нет — то можно показать пользователю что-то наподобие «». Так посетителю вашего поста/страницы будет понятно, что никто еще ничего не писал, а мотивирующая фраза «Вы можете быть первым» увеличит вероятность того, что вам быстрее что-нибудь напишут.

Итак, после такой постановки задачи становится ясно, что для реализации нам понадобятся конструкции if/else и функция вывода количества комментариев get_comments_number() . Если функция возвращает 0 (ноль), то выводим «Комментариев пока нет…», иначе «Комментарии читателей…»:

Комментариев пока нет, но вы можете стать первым

Комментарии читателей к статье ""

Обсуждения закрыты для данной страницы

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

Отлично, мы вывели заголовки в зависимости от наличия или отсутствия комментариев, теперь логично вывести сами комментарии — за это отвечает функция wp_list_comments() . Функция по умолчанию заключает все комментарии в теги

  • , поэтому следует добавить обертку
      с присвоением класса.commentlist:

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

      $args = array("avatar_size" => 64, // размер аватара 64*64px, по умолчанию 32 "reply_text" => "Ответить" // текст ответа на комментарий "callback" => "my_comments" // функция формирования внешнего вида комментария)

      Отдельного рассмотрения заслуживает параметр callback , который принимает значение имени пользовательской функции вывода комментария. С ее помощью можно гибко настроить внешний вид каждого комментария. Вот так выглядит стандартная функция вывода из файла comment-template.php:

    1. id="li-comment-">
      "); ?> %s says:"), get_comment_author_link()) ?>
      comment_approved == "0") : ?>
      $depth, "max_depth" => $args["max_depth"]))) ?>

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

      После вывода списка комментариев можно изменять их внешний вид через стили CSS. Некоторые параметры wp_list_comments() дублируются в админке WP, вкладка Параметры → Обсуждение, в частности наличие древовидных комментариев, сортировка по дате и т.п.

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

      Для добавления формы комментариев используется функция comment_form() . Добавим ее под список комментариев:

      Комментариев пока нет, но вы можете стать первым

      Комментарии читателей к статье ""

      1. 64, "reply_text" => "Ответить", "callback" => "my_comments"); wp_list_comments($args); ?>

      Обсуждения закрыты для данной страницы

      При таком вызове comment_form() загрузит стандартный код из файла WordPress comment-template.php . Функция принимает в себя два параметра:

      Comment_form($args, $post_id);

      • $args — массив настроек вывода формы
      • $post_id — id поста, к которому будет применена функция, по умолчанию текущий пост

      Давайте к примеру сделаем валидацию на HTML5 полям формы, добавим текстовые подсказки. Создадим массив $args для ввода нужных настроек:

      $args = array(); comment_form($args);

      В массив необходимо прописать ключи настроек:

      $args = array("fields" => apply_filters("comment_form_default_fields", $fields));

      Теперь нам необходимо заполнить переменную-массив $fields , которая включает в себя поля формы. Проще всего взять стандартный код WordPress из comment-template.php и немного его изменить:

      "

      " . ($req ? "*" : "") . "

      ", "email" => "", "url" => "

      " . "

      "); $args = array("fields" => apply_filters("comment_form_default_fields", $fields)); comment_form($args); ?>

      Здесь значения параметров author , email и url — html-код полей «Имя», «Почта» и «Сайт соответственно. Эти значения необходимо отредактировать.

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

      • required — делает поля обязательным для заполнения, добавляем его для полей «Имя» и «Сайт»
      • placeholder — добавляет текстовую подсказку в поле
      • pattern="{3,}" для поля «Имя» — указываем имя буквами латинского или русского алфавита и длину не менее 3 символов
      • type="email" для поля «Почта» — тем самым мы добавим валидацию HTML5 электронной почты
      • autocomplete — включает автозаполнение для полей
      • type="url" для поля «Сайт»

      Не забудьте, что в старых браузерах новые атрибуты HTML5 работать не будут. Те браузеры, которые не понимают новые типы полей, будут просто выводить их как текстовые, т.е. .

      Вдобавок я для своего блога кое-где поменял местами теги, добавил классы для стилизации, в результате у меня получился такой код массива $fields:

      "

      ", "email" => "", "url" => "

      "); ?>

      Мы изменили поля ввода данных. Теперь подредактируем саму форму комментариев

      " ?>

      Это стандартный код WordPress, я лишь немного видоизменил его — добавил текстовую подсказку и прописал дополнительный класс для стилизации.

      Вот что я в итоге получил с применением стилей CSS:

      Форма комментариев WordPress с использованием атрибутов HTML5

      Итог

      Напоследок скину свой получившийся код comments.php:

      читателей статьи ""

      • Оставьте первый комментарий - автор старался
      1. id="li-comment-">
        "); ?> %s пишет:"), get_comment_author_link()) ?>
        comment_approved == "0") : ?>
        $depth, "max_depth" => $args["max_depth"]))) ?>
        "Ответить", "callback" => "verstaka_comment"); wp_list_comments($args); ?>
      "

      ", "email" => "", "url" => "

      "); $args = array("comment_notes_after" => "", "comment_field" => "

      ", "label_submit" => "Отправить", "fields" => apply_filters("comment_form_default_fields", $fields)); comment_form($args); ?>

      Обсуждения закрыты для данной страницы

      FAQ по комментариям

      Как выделить комментарии автора и пользователя?

      Иногда бывает очень удобно задать отдельный внешний вид для авторских комментариев, для этого есть даже специальные плагины. Однако можно обойтись без всяких плагинов — просто прописав стили для класса.bypostauthor в css-файле. Аналогично можно задать стили для пользовательских комментариев — .bypostuser:

      Как задать стили для древовидных комментариев?

      Для включения древовидных комментариев нужно зайти в админку WP, Параметры → Обсуждение → Разрешить древовидные комментарии. Теперь дочерние комментарии будут иметь древовидную структуру, им можно задать отдельные стили, например сделать отступы. Все что нужно — установить правила в css для списка с классом.children:

      Commentlist .children { padding: 0 0 0 40px; /* отступ слева для дочерних комментариев */ }

      Стили для четных и нечетных комментариев

      WordPress по умолчанию дает нечетным комментариям класс.even , четным.odd . Через эти классы легко задавать свои стили:

      Commentlist .even { /* стили для нечетных комментариев */ } .commentlist .odd { /* стили для четных комментариев */ }

      Как закрыть комментарии на отдельном посте?

      Очень легко — заходим на страницу написания поста, Настройки экрана → Обсуждения, под полем поста появляется блок Обсуждения, снять выделение пункта Разрешить комментарии.

      • При составлении собственного шаблона комментариев можно пользоваться файлами comments.php из стандартных и других платных и бесплатных тем WordPress
      • Альтернатива стандартным комментариям — сторонние плагины форм комментирования, например популярная DISQUS
      • Вполне возможно править код прямо в самом файле comment-template.php , однако в случае обновления WordPress весь код будет перезаписан — придется править снова
      • Помните — идеального шаблона комментариев не бывает

      Помощь проекту

      66 голосов, в среднем: 4,47 из 5)

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

      Способ №1

      Для первого способа, вы должны в папке с темой, что установлена у вас на сайте, найти файл comments.php . Если такой есть, открыть его и поискать в нем массив, отвечающий за настройки и вывод содержания формы комментариев. Выглядит он примерно так:

      $args = array("comment_notes_before" => "

      ", "comment_field" => "

      ", "id_submit" => "comm_subm", "label_submit" =>

      Так вот, к этому массиву, нужно добавить новый параметр с нужным значением и все. В нашем случаи, это:

      "title_reply" => "Оставить свой отзыв",

      Как понимаете - Оставить свой отзыв , это и есть новое название вместо - Добавить комментарий. Добавить такой параметр можно в конец или в начало массива. Получится как-то так:

      $args = array("title_reply" => "Оставить свой отзыв", "comment_notes_before" => "

      Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

      ", "comment_field" => "

      ", "id_submit" => "comm_subm", "label_submit" => "Отправить",); comment_form($args);

      Добавлено в начало и теперь, на страницах записей будет выводится строка - Оставить свой отзыв. Этот способ не сложный и требует минимальных сил, главное правильно определить массив. Но иногда так бывает, что внутри темы нет файла comments.php или в нем нет массива и вы не знаете как правильно его туда добавить, тогда вам поможет второй способ.

      Способ №2

      Суть второго способа заключается в том, чтобы добавить новую функцию, которая и сделает замену названия. Для этого в папке с активной темой, нужно найти файл function.php с пользовательскими функциями и в удобное место, если не знаете такого, то в самый конец перед закрывающим тегом PHP - ?> , если такого нет, то просто в самый конец, добавить вот такой код:

      Function wph_change_submit_label($defaults) { $defaults["title_reply"] = "Оставить свой отзыв"; return $defaults; } add_filter("comment_form_defaults", "wph_change_submit_label");

      Бонус

      Это то же самое, по сути что делалось и в первом способе, просто, там мы внедряли непосредственно в массив, а тут через фильтр. После этих действий, вы увидите изменение в названии. Как и в первом способе, можете поменять текст - Оставить свой отзыв, на тот что вам нравится. Данный текст указан как пример.

      Еще хочу предложить и обратить внимание на склонение слова Комментарии. Если у вас выводит в форме строку - Опубликовано 1 комментарий или Комментариев: 10. Можете воспользоваться Функцией из статьи . Если вы уже пользуетесь ней, то рекомендую в строке с массивом:

      Array("комментарий","комментария","комментариев")

      Изменить названия на отзыв,отзыва,отзывов, если вы использовали это слово в способах выше. таким образом, у вас будет все одинаково, а не в разброс, там отзывы, а там комментарии.

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

      На этом все, спасибо за внимание. 🙂

      Здравствуйте Друзья! На связи Владимир Савельев. Сегодня я покажу Вам как сделать, настроить и красиво оформить форму комментариев WordPress, с плагинами и без... И разберем очень важный вопрос: Влияют ли комментарии на ранжирование блога в поисковых системах? Но обо всем по порядку...

      В этой статье я разберу такие вопросы:

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

      Дело в том, что я недавно сам, на своем блоге доводил до ума форму комментариев wordpress и в поисках нужной и правильной информации, у меня ушло очень много времени. Вот если бы я наткнулся на такую статью, где собрана почти вся информация, я бы сэкономил кучу времени, и посвятил бы это время более важным вопросам, а не техническим!

      Кстати поздравляю Вас с первым снегом! Не знаю, как у Вас, а у нас в городе сегодня весь день идет снег, предвкушая скорый новый год и запах мандаринов =) Я так и не успел насладится ушедшим летом, все время был в делах и работе, не заметил, как лето то и прошло =(Ну да ладно, успею еще расслабится и отдохнуть. Как говорит моя любимая жена — на пенсии отдохну!

      Ладно, давайте теперь вернемся к теме!

      Начну с того, как WordPress комментарии влияют на ранжирование блога, в поисковых системах?! Ответ очевиден — это влияние ПФ, то есть поведенческие факторы!

      Рассмотрим пример, есть два блога на одном из них есть форма комментариев wordpress, на другом нет! Посетитель зашел на блог, где — прочитал интересную статью и все, вряд ли, он снова вернется на страницу материала, вы со мной согласны?

      А на том блоге, где есть комментирование, после прочтения статьи, посетитель будет читать и комментарии, интересно же, что пишут другие люди на данную тему! А если посетитель еще и присоединится к дискуссии, то это будет вообще шикарно =) Сколько раз, он еще зайдет на эту страницу, чтобы проверить, ответил ли ему кто ни будь?!

      Я кстати наткнулся на один ресурс, где был поставлен эксперимент с двумя блогами, на одном блоге комментарии были, на другом нет. Так вот, блог который комментировали, успешно продвигался и росла посещаемость, по сравнению с другим блогом!

      Благодаря комментариям увеличивается время нахождения на блоге, а так же число прямых заходов, тем самым улучшая показатели сайта или блога, и это еще не все плюсы!

      Ну хватит теории, переходим к практической части!

      Как настроить форму комментариев WordPress

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

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

      На этом этапе, вам понадобятся, хотя бы базовые знания css и html. Если у Вас их нет, то делайте на свой страх и риск и не забудьте перед редактированием, сохранить оригинал кода.

      Чтобы поменять оформление комментариев нужно найти в настройках, Внешний вид – Редактор – Таблица стилей (style.css), примерно такой код:

      Commentlist div.comment{background:#f6f6f6;margin-bottom:15px;padding:10px 10px 10px 80px;position:relative;border: 1px solid #bbb; border-radius: 8px;}

      Короче, ищем все стили которые начинаются на comment , и меняем их значение на свой вкус и цвет Экспериментируем!

      Как выделить комментарии автора без плагина

      Зачем это нужно?! Ну во первых, это дает представление посетителю, кто есть автор блога, среди прочих комментаторов! Так же, будет проще ориентироваться и автору блога!

      Решить эту задачу поможет плагин — Highlight Author Comments , но я не сторонник плагинов, так как их большое количество негативно влияют на работу блога! Поэтому, по возможности, я стараюсь все делать кодом, чего и Вам советую!

      Чтобы реализовать эту возможность кодом без плагина, нужно, в настройках: Внешний вид – Редактор – Таблица стилей (style.css), добавить новый класс стиля, с логином администратора блога.

      В моем случае код имеет такой вид:

      Commentlist div.comment-author-Ваш логин при входе в админку {background-color:#f5f5e1!important;margin-bottom:15px;padding:10px 10px 10px 80px;position:relative;border: 1px solid #bbb; border-radius: 8px;}

      И изменить оформление, отличающееся от других комментариев! Все просто!

      Чтобы злоумышленник не узнал Ваш реальный логин, пропишите код в functions.php

      function del_login_css ($css) {
      foreach ($css as $key => $class) {
      if (strstr ($class, «ВАШ РЕАЛЬНЫЙ ЛОГИН»)) {
      $css[$key] = "ПРИДУМАЙТЕ ВЫМЫШЛЕННЫЙ"; } }
      return $css;
      }
      add_filter ("comment_class", "del_login_css");

      Как сделать свой граватар (фото в комментах)

      Если Вы хотите чтобы, при комментировании на своем или других блогах выводилась Ваша фотография, а не пустая картинка, то нужно сделать следующее. Регистрируемся на https://ru.gravatar.com

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

      Важные WordPress плагины для комментирования

      Перечислю три основных плагина для комментирования, которые стоят у меня на блоге. Рекомендую и Вам установить их!

      • Comment Redirect by Yoast – плагин благодарности за первый комментарий! Предварительно нужно создать страницу благодарности и вписать ее путь в настройки плагина!
      • WordPress Zero Spam – невидимая капча, предназначена для защиты от спама, не напрягает комментаторов решать арифметические примеры, они просто ее не видят...
      • – подписка на комментарии. Принцип работы: посетитель написав комментарий, может подписаться на их обновления, а так же управления подписками.

      Смайлики в форму комментариев wordpress

      Прочтите статью о том, как сделать , а так же как заменить стандартные смайлики на другие.

      На этом все! Надеюсь у Вас все получилось настроить, если Вы не нашли свой вопрос про форму комментариев wordpress, то смело пишите коммент и я с радостью на него отвечу! Понравилась статья, подпишитесь на обновления блога и рекомендуйте ее своим друзьям, потыкав кнопочки социальных сетей, которые находятся ниже! Буду очень признателен! До скорого в новой статье!


      С уважением, Владимир Савельев

      Премиум-уроки от клуба webformyself

      Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!

      Подробнее

      По мало понятным мне причинам в седьмом Друпале нет возможности поменять направленость списка комментарив. Безусловно, для блогов вполне удобен "коробочный" вариант - старые комментарии вверху, новые внизу, а форма комментариев вообще в конце страницы. Однако могу привести пример сайта с сериалами: на одной странице есть плеер со всеми сериями сериала, а под ним располагаются комментарии. А теперь представьте, что серии постоянно добавляются в плеер, и в комментариях идёт живое обсуждение. И далеко не каждый пользователь захочет каждый раз пролистывать сотню-другую комментариев, чтобы почитать последние и/или написать своё мнение. И таких примеров можно привести много. Поэтому исключение возможности поменять направление комментариев, на мой взгляд, грубая ошибка. Однако что сделано - то сделано, и сейчас я расскажу как восстановить справедливость.

      Шаг первый. Меняем направление списка комментариев.

      Первое, что надо сделать, это имплементировать в своём модуле hook_query_TAG_alter() . Выборка комментарив из базы помечена тэгом comment_filter , чем мы и воспользуемся:

      /** * Implements hook_query_TAG_alter(). */ function ИМЯМОДУЛЯ_query_comment_filter_alter(QueryAlterableInterface $query ) { // Убираем сортировку по умолчанию. $order =& $query ->getOrderBy () ; unset ($order [ "torder" ] ) ; // Выставляем правильную сортировку. $query ->orderBy ("c.cid" , "DESC" ) ; }

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

      Шаг второй. Меняем положение формы комментариев.

      Для того, чтобы вынести форму комментариев над списком комментариев, достаточно создать в корне темы файл comment-wrapper.tpl.php с вот таким содержимым:

      >

      type != "forum" ) : ?>

      По сути, я взял файл comment-wrapper.tpl.php из модуля ядра comment и скопировал его в корень темы. После чего поменял местами вывод списка комментариев и формы комментариев.

      После сброса кэша форма появиться над списком комментариев.

      Шаг третий. Плюшки.

      Первых двух шагов для выполнения поставленной задачи вполне хватает. Однако я бы предложил добавить удобства при работе с комментариями и поставить модуль ajax comments . После его установки комментарии будут добавляться в список без перезагрузки страницы - красиво, чёрт побери! Но есть один нюанс - комментарии будут добавляться в конец списка (как и предполагалось комментариям из "коробки"). Для того, чтобы комменты добавлялись в начало списка, нужно имплементировать в своём модуле ещё один хук, который меняет поведение модуля ajax comments :

      /** * Implements hook_ajax_render_alter(). */ function ИМЯМОДУЛЯ_ajax_render_alter(&$commands ) { foreach ($commands as $key => $command ) { if ($command [ "method" ] == "append" && $command [ "selector" ] == "#comment-wrapper" ) { $commands [ $key ] [ "method" ] = "prepend" ; } } }

      Снова сброс кэша - профит!

      Шаг четвёртый. Полёт фантазии.

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

      Удачи в разработке!

      Бывает, что посетители блога по ошибке оставляют комментарий к другому посту. Сегодня я расскажу, как можно решить эту проблему, и переместить комментарий из одного поста в другой .

      Есть два варианта, и оба они сводятся к тому, что необходимо изменить ID связанного поста в базе данных.

      Cпособ 1. Правка базы данных вручную

      При помощи phpMyAdmin, нужно зайти в таблицу wp_comments, найти там нужный комментарий, и изменить ID записи в ячейке в столбце comment_post_ID:

      Чтобы узнать ID комментария, нужно навести в списке комментариев в Консоли курсор на дату комментария, см. на скриншоте:

      Аналогичным способом можно узнать ID поста в WordPress.

      Остается только заменить в базе ID поста, к которому привязан комментарий сейчас, на ID того поста, куда вы хотите перенести комментарий.

      Cпособ 2. Использование плагина Tako Movable Comments

      Для тех, кто не хочет заморачиваться с правкой базы, или боится сделать там ошибку, существует специальный плагин, который позволяет переносить комментарии в другие посты. Плагин называется Tako Movable Comments . Он поддерживает функции автоподстановки поста по названию и массовый перенос комментариев в другую запись. Также есть возможность перемещать комментарии не только в пост, но и в любой другой тип записи (страница или custom post type).

      После установки плагина, в Консоли на странице Комментарии, в выпадающем списке “Действия” появится пункт “Move Comments”, который позволяет применять действия массово к нескольким комментариям. А на странице редактирования комментария снизу добавится метабокс “Move Comments with Tako”, при помощи которого быстро и легко можно переместить текущий комментарий в любую запись, которая есть в блоге.

      А вы когда-нибудь переносили комментарии в WordPress в другую запись?

      Железо