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

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

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

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

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

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

Подсчет сообщений будет происходить на основе 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 && $author_count=100 && $author_count=250 && $author_count=400 &&$author_count=800 && $author_countПрофессор"; }

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

Объяснение: функция, как и предыдущая, связана с электронной почтой юзера. Только здесь основной задачей является непросто счет сообщений, а количество от и до в зависимости от установленного числа. И как только пользователь достигает его он получает определенную должность. Всего статусов имеется 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 && $author_count=100 && $author_count=250 && $author_count=400 &&$author_count=800 && $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" : ?> @ Ответ для:

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

Заключительный шаг. Открываем файл 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.

Шаг 1. Разбираемся в функцией comment_form и ее аргументами

Рассмотрим функцию WordPress comment_form . Она отвечает за вывод формы комментариев, которая выводится на странице или записи. Вызов данной функции в основном можно встретить в файле comments.php в папке темы. Данный файл включается в различных местах, например, в файлах single.php и page.php , непосредственно или через вызов функции comments_template .

Описание функции можно найти в кодексе WordPress .

Если использовать функцию comment_form для вывода формы, то она будет выводиться с использованием параметров по умолчанию и будет содержать такие поля как имя, email (оба поля являются обязательными), веб сайт и содержание комментария. В теме по умолчанию Twenty Eleven форма будет выглядеть следующим образом.

Некоторые важные аргументы функции comment_form:

fields -с его помощью можно управлять выводом полей в форме комментария.
comment_notes_before и comment_notes_after - используются для вывода информации перед и после формы.
title_reply - используется для изменения названия ответа, которое по умолчанию имеет значение ‘Leave a Reply’.
label_submit - используется для изменения текста на кнопке отправки комментария.

Шаг 2. Настраиваем форму комментария с помощью функции comment_form

Теперь настроим нашу форму комментария с помощью передачи аргументов в функцию comment_form .

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

$fields = array("author" => "

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

", "email" => "

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

", "url" => "

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

",);

Если нам нужно удалить поле, например, website , нужно просто исключить его из массива и передать массив в функцию comment_form .

$commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("author" => "

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

", "email" => "

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

",); $comments_args = array("fields" => $fields); comment_form($comments_args);

В дополнение также сменим название формы на ‘Please give us your valuable comment’, а надпись на кнопке на ‘Send My Comment’.

Для выполнения задачи передаем в функцию comment_form следующие аргументы:

$commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("author" => "

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

", "email" => "

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

",); $comments_args = array("fields" => $fields, "title_reply"=>"Please give us your valuable comment", "label_submit" => "Send My Comment"); comment_form($comments_args);

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

Шаг 3 . Удаляем поля из формы с помощью крюка

Также форма комментария WordPress может быть изменена с помощью крюков и фильтров. Такая настройка может быть особенно полезна при работе с плагином, когда нужно настроить несколько элементов, но не изменять файлы темы. Фильтр для добавления иди удаления полей из формы - ‘ comment_form_default_fields ‘

Удалим поле адреса URL с помощью фильтра. Приведенный код можно использовать в плагине или в файле functions.php активной темы.

Function remove_comment_fields($fields) { unset($fields["url"]); return $fields; } add_filter("comment_form_default_fields","remove_comment_fields");

Шаг 4. Добавляем данные в форму комментария с помощью крюка

Мы можем добавить поля в форму с помощью фильтра ‘ comment_form_default_fields ‘. Добавим поле возраста автора с помощью фильтра и сохраним данное поле дополнительные данные и будем их выводить в комментарии.

Добавляем поле следующим образом:

Function add_comment_fields($fields) { $fields["age"] = "

" . __("Age") . "" . "

"; return $fields; } add_filter("comment_form_default_fields","add_comment_fields");

#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-age label, #respond .comment-form-comment label { background: #eee; -webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); -moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); box-shadow: 1px 2px 2px rgba(204,204,204,0.8); color: #555; display: inline-block; font-size: 13px; left: 4px; min-width: 60px; padding: 4px 10px; position: relative; top: 40px; z-index: 1; }

Теперь наша форма комментария будет выглядеть следующим образом:

Теперь возраст хранится как дополнительная информация. Нужно использовать крюк в ‘ comment_post ‘:

Function add_comment_meta_values($comment_id) { if(isset($_POST["age"])) { $age = wp_filter_nohtml_kses($_POST["age"]); add_comment_meta($comment_id, "age", $age, false); } } add_action ("comment_post", "add_comment_meta_values", 1);

Как только данные сохранены, их можно выводить в комментарии следующим образом:

Шаг 5 . Настройка комментариев для определенных типов записей

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

Function add_comment_fields($fields) { if(is_singular("books")) { $fields["age"] = "

" . __("Age") . "" . "

"; } return $fields; } add_filter("comment_form_default_fields","add_comment_fields");

Шаг 6. Создаем возвратную функцию для вывода комментариев

Функция wp_list_comments используется для вывода комментариев в записях. В кодексе WordPress функция описана подробно.

wp_list_comments имеет аргумент ‘ callback ‘ в котором можно определить функцию, которая вызывается при выводе комментария.

В теме Twenty Eleven в файле comments.php можно найти строку:

Wp_list_comments(array("callback" => "twentyeleven_comment"));

Изменим ее на:

Wp_list_comments(array("callback" => "my_comments_callback"));

Функция my_comments_callback будет вызываться для каждой записи.

Шаг 7. Стилизация комментариев

Теперь мы немного изменим стиль комментария. Просто будем выводить содержание записи и поле возраста, которое было добавлено нами ранее. Мы также изменим цвет фона для комментариев.

Код функции ‘ my_comments_callback ‘:

Function my_comments_callback($comment, $args, $depth) { $GLOBALS["comment"] = $comment; ?>

Т.е. в параметрах функции (то что в скобочках, после названия) нигде не фигурирует параметр с названием ‘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 и присваивая определенные классы стилей.

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

< div class = "comment-author" >

< / div >

Теперь осталось в 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) {

* @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 до закрывающейся фигурной скобки } и следующего за ней подобного описания другой функции

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

В этой заметке вы узнаете один из самый простых (но, субъективно, один из наиболее предпочтительных) способов добавить комментарии на сайт - простой пример для новичков + варианты для более продвинутых веб-мастеров.

Действительно, для чего изобретать велосипед и писать кучу кода, который в будущем еще придется поддерживать, фиксить и т.д., если есть куча готовых решений от сторонних сервисов (речь идет о социальных сетях + disqus )?

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

Преимущества сторонних решений:

Простота в реализации.
Защищенность от спама "с коробки" (в своем решении пришлось бы это дополнительно реализовать, так что, теоретически, связано с предыдущим пунктом).
В меньшей степени подвержено ошибкам, багам и т.д., так как сторонние решения проверили миллионы пользователей (опять связано с первым: вы тоже можете написать все без багов, но уйдет дополнительное время на отладку).
Как правило, сервисы предоставляют готовую админку, статистику, уведомления для админов, иногда модерацию, несколько админов, премодерацию и т.д., на реализацию чего у веб-мастера, особенно начинающего, могут уйти месяцы, если не годы.
Пользователю не нужно регистрироваться, вводить свое имя и т. д. - предполагается, что у него уже есть аккаунт в популярной соцсети.
Скорее всего, выдержит большую нагрузку из-за того, что соц. платформы изначально рассчитаны на большие нагрузки.

Недостатки:

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

Как видите, преимуществ намного больше. Невозможность изменить внешний вид, скорее всего, сделана для того, чтобы узнавать стиль сервиса комментариев, таким образом создавав ненавязчивую рекламу. (Как один из вариантов). А что касается индексации - так ли уж она важна, ведь далеко не все комменты несут смысловую нагрузку.

Но довольно теории, перейдем к практике.

1. Простейший вариант - добавить комментарии с использованием какой-то выбранной соцсети.

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

1) Добавляем в :

VK.init({apiId: 2951023, onlyWidgets: true});

2) Добавляем в том месте, где хотим видеть виджет комментариев (например, после заметки, если речь идет о блоге):

VK.Widgets.Comments("vk_comments", {redesign: 1, limit: 10, width: "665", attach: "*"});

2. Добавить виджеты из нескольких сервисов. Например, как на этом ресурсе. Переключаются табами:

Добавляем в разметку (для корректной работы должен быть подключен twitter bootstrap!) в месте, где нужно вывести виджет комментариев :

Discuss
Vkontakte

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

Этого можно избежать, реализовав ленивую инициализацию виджетов комментариев . Сначала код целиком, потом разъяснение:

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

Для начала создаем маппинг типов виджетов комментариев , переменная initialized . Дальше, функция initComments(type) позволяет инициализировать виджет комментария , причем она ничего не делает, если он уже был инициализирован.

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

Готовый скрипт на и coffeescript на gist. Пример работы - внизу (примеры кода взяты с этого сайта)

Компьютер