Здравствуйте Друзья! На связи Владимир Савельев. Сегодня я покажу Вам как сделать, настроить и красиво оформить форму комментариев 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 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!

Подробнее

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

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

Вот что мы сделаем:

  • Полная пользовательская настройка
  • Оформление внешнего вида
  • Нумерация комментариев
  • Подсчет сообщений каждого пользователя
  • Присвоить статус каждому пользователю
  • И прочее мелочи

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

Пользовательская настройка комментариев

В WordPress’e вывод комментариев осуществляется через функцию wp_list_comments , обычно в файле comments.php . А формирование отдельных функций так же, как и сам цикл, используется из шаблона системного файла comment-template.php . Но в редких случаях бывает, что настройка может находиться в теме WordPress, файл functions.php или comments.php .

Так вот, если ваша тема не попадает в редкий случай и есть необходимости сделать свои настройки, тогда открываем файл functions.php и перед знаком?> добавляем следующий код:

If (! function_exists("my_comment")) : function my_comments($comment, $args, $depth) { global $commentnumber; $GLOBALS["comment"] = $comment; switch ($comment->comment_type) : case "pingback" : case "trackback" : ?>

  • ", ""); ?>
  • id="li-comment-">
    comment_parent) $avatar_size = 39; echo get_avatar($comment, $avatar_size); /* translators: 1: comment author, 2: date and time */ printf(__("%1$s %2$s", "my_press"), sprintf("%s", get_comment_author_link()), sprintf("", esc_url(get_comment_link($comment->comment_ID)), get_comment_time("c"), /* translators: 1: date, 2: time */ sprintf(__("%1$s %2$s", "my_press"), get_comment_date(), get_comment_time()))); ?>
    comment_approved == "0") : ?>
    __("Reply", "my_press"), "depth" => $depth, "max_depth" => $args["max_depth"]))); ?>
    ", ""); ?>

    Затем в файле comments.php добавить функцию вызова:

      "my_comments")); $commentnumber = 0; ?>

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

    Подсчет комментариев каждого пользователя

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

    Открываем уже знакомый нам файл functions.php и прописывает в конце перед знаком?> следующий код:

    //подсчет сообщений пользователей function bac_comment_count_per_user() { global $wpdb; $comment_count = $wpdb->get_var("SELECT COUNT(comment_ID) FROM ". $wpdb->comments. " WHERE comment_author_email = "" . get_comment_author_email() ."" AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")"); if ($comment_count == 1) { echo " 1 Сообщение"; } else { echo " " . $comment_count . " Сообщений"; } }

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

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

    Присваиваем статус каждому пользователю в зависимости от количества его комментариев

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

    Снова открываем файл functions.php и перед знаком?> добавляем следующий код:

    //статус пользователя function get_author_class($comment_author_email,$user_id){ global $wpdb; $adminEmail = get_option("admin_email"); $author_count = count($wpdb->get_results("SELECT comment_ID as author_count FROM $wpdb->АдминUseR"; if($author_count>=1 && $author_count<50 && $comment_author_email !==$adminEmail) echo "Прохожий"; else if($author_count>=50 && $author_count<100 && $comment_author_email !==$adminEmail) echo "Новичок"; else if($author_count>=100 && $author_count<250 && $comment_author_email !==$adminEmail) echo "Знающий"; else if($author_count>=250 && $author_count<400 && $comment_author_email !==$adminEmail) echo "Опытный"; else if($author_count>=400 &&$author_count<800 && $comment_author_email !==$adminEmail) echo "Бывалый"; else if($author_count>=800 && $author_count<1200 && $comment_author_email !==$adminEmail) echo "СуперПупер"; else if($author_count>Профессор"; }

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

    comment_author_email,$comment->user_id)?>

    Объяснение: функция, как и предыдущая, связана с электронной почтой юзера. Только здесь основной задачей является непросто счет сообщений, а количество от и до в зависимости от установленного числа. И как только пользователь достигает его он получает определенную должность. Всего статусов имеется 7, плюс админ и знак отличия для зарегистрированных участников.

    Полностью готовый код комментариев

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

    Открываем файл functions.php и в конце перед знаком?> добавляем следующий код:

    //подсчет сообщений пользователей function bac_comment_count_per_user() { global $wpdb; $comment_count = $wpdb->get_var("SELECT COUNT(comment_ID) FROM ". $wpdb->comments. " WHERE comment_author_email = "" . get_comment_author_email() ."" AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")"); if ($comment_count == 1) { echo " 1 Сообщение"; } else { echo " " . $comment_count . " Сообщений"; } } //статус пользователя function get_author_class($comment_author_email,$user_id){ global $wpdb; $adminEmail = get_option("admin_email"); $author_count = count($wpdb->get_results("SELECT comment_ID as author_count FROM $wpdb->comments WHERE comment_author_email = "$comment_author_email" ")); if($comment_author_email ==$adminEmail) echo "Админ"; if($user_id!=0 && $comment_author_email !=$adminEmail) echo "UseR"; if($author_count>=1 && $author_count<50 && $comment_author_email !==$adminEmail) echo "Прохожий"; else if($author_count>=50 && $author_count<100 && $comment_author_email !==$adminEmail) echo "Новичок"; else if($author_count>=100 && $author_count<250 && $comment_author_email !==$adminEmail) echo "Знающий"; else if($author_count>=250 && $author_count<400 && $comment_author_email !==$adminEmail) echo "Опытный"; else if($author_count>=400 &&$author_count<800 && $comment_author_email !==$adminEmail) echo "Бывалый"; else if($author_count>=800 && $author_count<1200 && $comment_author_email !==$adminEmail) echo "СуперПупер"; else if($author_count>=1200 && $comment_author_email !==$adminEmail) echo "Профессор"; } //пользовательская настройка комментариев if (! function_exists("wordsmall_comment")) : function wordsmall_comment($comment, $args, $depth) { global $commentnumber; $GLOBALS["comment"] = $comment; switch ($comment->comment_type) : case "pingback" : case "trackback" : ?>

  • id="li-comment-">
    %s", get_comment_author_link()); ?> comment_parent){ $comment_parent_href = htmlspecialchars(get_comment_link($comment->comment_parent)); $comment_parent = get_comment($comment->comment_parent); ?> @ Ответ для: comment_author;?>
    comment_parent) $avatar_size = 60; echo get_avatar($comment, $avatar_size); ?> comment_author_email,$comment->user_id)?>
    comment_approved == "0") : ?>
    ", ""); ?> __("Ответить", "wallpress"), "depth" => $depth, "max_depth" => $args["max_depth"]))); ?>

    Теперь откройте файл comments.php , находим в нем функцию вызова комментариев. Выглядит примерно так:

    Меняем на эту:

      "wordsmall_comment")); ?>

    Заключительный шаг. Открываем файл style.css и в конце прописываем следующие стили:

    My_commentlist{ border-top:none; } .my_commentlist .comment{ padding:0 0 15px 0; border:none; } .my_commentlist .pingback{ padding:0 0 15px 0; border:none; } .my_commentlist .comment .children { list-style-type: none; padding:0px; margin-left:0px;/*если нужен отступ для древовидных ком. поставьте 15px*/ } .my_commentlist .comment .children .comment{ margin:15px 0 0 0; border:none; padding: 0; } #comments { background: #fff; } #comments .my_commentlist { margin: 10px 0; padding: 0; list-style:none; background: #ebf0f3; padding: 5px; } #comments .my_commentlist .comment { margin:0; padding: 0 0 10px; background: #fff; } #comments .my_commentlist .my_comment-author { display: inline; border-right: 1px solid #e0e0e0; width: 100px; float: left; margin: 0px 15px 10px 0; } #comments .my_commentlist .commentmetadata { float:left; } #comments .my_commentlist p { clear:none; color: #555; font: 14px arial; line-height: 23px; } #comments .my_commentlist .comment-content { margin-left: 116px; padding-right: 10px; } #comments .my_commentlist .reply { text-align:right; } #comments .my_commentlist .reply a{ background: #f5f5f5; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 2px; color: #515456; display: inline-block; font-size: 13px; font-weight: normal; line-height: 30px; margin-right: 15px; min-height: 30px; padding: 0 12px; text-align: center; text-decoration: none; } .my_commentlist .avatar{ border: medium none; border-radius: 50%; float: none; margin: 5px auto; padding: 0px; display: table; } .my_commentlist .comment-header{ height: 30px; background: #DEE5EB; margin-bottom: 15px; } .my_commentlist cite.fn{ color: #444; font: bold 13px/30px arial; padding-left: 10px; } .my_commentlist .com_date { color: #8ca0b5; font: normal 13px/30px arial; float: right; padding-right: 15px; } .my_commentlist .commentnumber { color: #8ca0b5; float: right; font: italic 13px/30px arial; padding-right: 15px; } .my_commentlist .comment-body { overflow: hidden; position: relative; background:#fff; } .my_commentlist .rep-authorcom { color: #25394e; font-size: 13px; line-height: 30px; } .my_commentlist .edit-link a { background: none !important; border: none !important; border-radius: 0 !important; color: #999!important; display: inline-block; font-size: 11px !important; font-weight: normal; line-height: 30px; margin-right: 5px !important; min-height: 30px; padding: 0 !important; text-align: center; text-decoration: none; } .com_per { border: medium none; color: #666; display: block; font-size: 11px; text-align: center; } .vip1,.vip, .vp, .vip2, .vip3, .vip4, .vip5, .vip6, .vip7 { border: medium none; font: bold 13px arial; display: block; text-align: center; margin-bottom: 5px; text-decoration: none; } .vp {color: #e82e24;} .vip1 {color: #348be8;} .vip2 {color: #BE005E;} .vip3 {color: #2e517e;} .vip4 {color: #658a18;} .vip5 {color: #00A56D;} .vip6 {color: #e35d28;} .vip7 {color: #99A400;} .vip {color: #4c5176;font-size: 11px;margin: 0;}

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

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

    Перед тем, как мы начнем какие-либо манипуляции с кодом, хочу Вас заранее предупредить, что мы будем править файлы самого WordPress’a, а не файлы темы. Да, это может-быть покажется кому-то опасным, кому-то бессмысленным, кому-то просто не понравится:) Но Я сделал это именно так и никаких проблем у меня не возникло. Советую перед началом сделать бекап редактируемого файла.
    Насчет безопасности предупредил, теперь хочу показать результат, к которому я пришел.


    Как мы видим, была убрана строчка «Ваш e-mail не будет опубликован. Обязательные поля помечены *». Не нужно считать посетителей безмозглыми идиотами. Они итак понимают что нужно заполнять, а что нет. Так же я спрятал названия полей внутрь самих полей. К чему эти жирные записи? Большинство посетителей уже и без названий полей может «на глаз» определить, какое к чему относится. Но внутренние хинты все таки должны присутствовать. Ну и подпись к полю комментария утратила свою ненужную жирноту. На мой взгляд, так стало гораздо лучше и свободней.

    Так давайте же скорее все менять! ;)
    Идем в папку своего сайта и находим в нем файл wp-includes/comment-template.php. Ищем в нем строку 1522, да да именно ее. Как я сам ее нашел это целая история, расскажу об этом чуть позже:)
    Итак, открываем файл на редактирование и переходим к 1522 строчке. Сейчас она и следующие (до 1529й) примерно такие:

    $fields = array("author" => "

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

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

    " . "

    ",);

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

    Placeholder="Текст подсказки"

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

    "

    " "

    " "

    "

    Удалять же будем строки:

    "

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

    "

    Они отвечают за вывод подписей над полями.
    В результате ВСЕХ этих манипуляций, получаем следующее:

    $fields = array("author" => "

    ", "email" => "

    ", "url" => "

    ",);

    Остается только удалить глупую подсказку «Ваш e-mail не будет опубликован. Обязательные поля помечены *». Для этого удаляем строку (примерно 1537):

    "comment_notes_before" => "

    " . __("Your email address will not be published.") . ($req ? $required_text: "") . "

    ",

    Вот вроде бы и все, теперь наша форма стала немного более привлекательной. Надеюсь эта информация кому-то пригодится:)

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

    Недавно копался в файлах своей темы 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") : ?>
      comment_ID)) ?>">
      $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)