Стандартных добавить комментарий comment. Шаблон комментариев WordPress. Как настроить форму комментариев WordPress

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

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

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

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

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

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

При таком вызове 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 и немного его изменить:

"

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

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

" . __("Website") . "" . "

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

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

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

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

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

"

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

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

" . __("Website") . "

Мы изменили поля ввода данных. Теперь подредактируем саму форму комментариев . Код формы изменяем с помощью параметра comment_field массива $args:</p><p> <?php "comment_field" => "<p class="comment-form-comment"><label for="comment">" . _x("Comment", "noun") . "</label><textarea id="comment" name="comment" class="comment-form" cols="45" rows="8" aria-required="true" placeholder="Текст сообщения...">

Это стандартный код 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); ?>

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

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

" . __("Website") . "

" . _x("Comment", "noun") . "

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

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 весь код будет перезаписан — придется править снова
• Помните — идеального шаблона комментариев не бывает

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

Пришло время серьезно заняться оформлением внешнего вида комментариев 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" : ?>

Затем в файле 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" : ?>

Теперь откройте файл 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 блога.

Начну с того, что в каждом шаблоне (теме) WordPress есть файл comments.php , Полный путь к нему от корневого каталога: /wp-content/themes/папка_шаблона/comments.php

Именно comments.php отвечает в целом за блок комментариев в конкретной теме WordPress.

Что чаще всего содержится в comments.php:

– проверка защиты комментариев паролем

– проверка разрешены ли комментарии к статье

– проверка наличия комментариев и вывод соответствующего текста (“Комментариев нет …” или “Оставлено n комментариев”)

– вызов функции вывода комментариев – wp_list_comments()

– вывод навигации (пейджинации) при многостраничном размещении комментариев

– вывод формы для оставления комментариев к статье

Здесь понятно, что вы можете задавать свои классы или изменять свойства в style.css для уже существующих классов. Таким образом, вы можете изменить внешний вид формы для оставления комментариев и текстов до списка комментариев и после этого списка или формы. Но стили вывода непосредственно самих комментариев в comments.php изменить нельзя.

Когда я перечислял содержимое файла comments.php , то специально отметил подчеркиванием, что в comments.php происходит всего лишь вызов функции вывода комментариев wp_list_comments() , но не сам вывод. Т.е. в comments.php вы не найдете (по крайней мере, в последних версиях WordPress и при правильном подходе к разработке шаблонов): вывод имени автора сообщения и ссылки на его сайт, вывод аватарки автора, вывод даты и времени комментария, самого комментария и ссылки “ответить”.

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

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

Вызов функции wp_list_comments() возможен без колбэка (callback – функция обратного вызова) и с колбэком.

1. Вызов wp_list_comments без колбэка:

Т.е. в параметрах функции (то что в скобочках, после названия) нигде не фигурирует параметр с названием ‘callback’.

Если в comment.php вашего шаблона такая ситуация, то это означает, что в данной теме нет собственной (пользовательской) функции для вывода комментариев и для этого используется стандартный шаблон (шаблон из ядра WordPress). Расположен он файле . А поскольку , то в данном случае изменить стили отображения комментариев не получится, пока мы не прейдем ко второму варианту.

2. Вызов wp_list_comments с колбэком:

callback=custom_comment указывает, что для вывода комментариев у нас есть пользовательская функция custom_comment , код которой, грубо говоря, мы и передаем в качестве параметра для исполнения в стандартную функцию wp_list_comments . Но нас интересует больше не техническая сторона этого вопроса, а именно наличие в шаблоне собственной функции для вывода комментариев. Код этой функции расположен в .

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

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

get_comment_author_link() – получает html ссылку на сайт автора текущего комментария;

get_comment_date() – получает дату комментария;

get_comment_time() – получает время комментария;

comment_text() – выводит текст комментария;

Вы можете находить фрагменты с этими функциями в коде и изменять внешний вид тех или иных элементов, обрамляя их в блоки div или span и присваивая определенные классы стилей.

Например, в коде пользовательской функции фрагмент вывода аватарки:

Теперь осталось в style.css задать желаемые свойства классу comment-author . Подробней конкретные примеры изменения стилей рассмотрю в одной из следующих статей.

Теперь у вас может возникнуть вопрос: “Что делать, если в моем шаблоне нет пользовательской функции для вывода комментариев? ”

Ответ: нужно создать её.

Самый простой вариант – скопировать код стандартной функции WordPress comment() .

Инструкция по созданию пользовательской функции для вывода комментариев:

1. Откройтефайл /wp-includes/comment-template.php и найдите в нем функцию comment() .

Вот начало её описания

/** * @since 3.6 * @access protected * * @param object $comment Comment to display. * @param int $depth Depth of comment. * @param array $args Optional args. */ protected function comment($comment, $depth, $args) {

2. Скопируйте все тело функции comment() .

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

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

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

Первое, что надо сделать, это имплементировать в своём модуле 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 с вот таким содержимым:

По сути, я взял файл 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" ; } } }

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

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

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

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