Форма для комментариев для сайта – comment_form() — Выводит на экран готовый код формы комментирования, который можно использовать в шаблонах. Функция WordPress.

Содержание

Система комментариев для сайта с помощью PHP

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

 

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

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

gravatar.com. Для начала рассмотрим построение структуры  Данный код генерируется PHP  с классом Comment.

demo.php

<div>

<div>

<a href=»http://www.rudebox.org.ua»>

<img src=»http://www.gravatar.com/avatar/112fdf7a8fe3609e7af2cd3873b5c6bd?size=50&default=http%3A%2F%2Fdemo.tutorialzine.com%2F2010%2F06%2Fsimple-ajax-commenting-system%2Fimg%2Fdefault_avatar.gif»>

</a>

</div>

<div><a href=»http://www.rudebox.org.ua»>Имя пользователя</a></div>

<div title=»Added at 06:40 on 30 Jun 2010″>30 Jun 2010</div>

<p>Текст комментария</p>

</div>

div avatar содержит ссылку (если пользователь ввел правильный URL при размещении комментария) и изображение аватара, которое мы получаем с 

gravatar.com. Другим важным элементом в XHTML является форма комментария. Она отправляется с помощью POST. Все поля, кроме URL, должны быть заполнены.

demo.php

<div>

<p>Добавить комментарий</p>

<form method=»post» action=»»>

<div>

<label for=»name»>Имя</label>

<input type=»text» name=»name» />

<label for=»email»>Email</label>

<input type=»text» name=»email» />

<label for=»url»>Вебсайт (не обязательно)</label>

<input type=»text» name=»url» />

<label for=»body»>Содержание комментария</label>

<textarea name=»body» cols=»20″ rows=»5″></textarea>

<input type=»submit» value=»Отправить» />

</div>

</form>

</div>

Форма отправляется с помощью AJAX. Проверка выполняется в фоновом режиме в submit.php. Каждое поле имеет соответствующий элемент label, с установленным атрибутом for.

PHP обрабатывает коммуникацию с базой данных MySQL и генерирует разметку для комментария. Он также получает окончание запроса AJAX и вставляет данные комментария в таблицу comments.

demo.php

/*

/ Выбираем все комментарии и наполняем массив $comments объектами

*/

 

$comments = array();

$result = mysql_query(«SELECT * FROM comments ORDER BY id ASC»);

 

while($row = mysql_fetch_assoc($result))

{

$comments[] = new Comment($row);

}

Запрос MySQL выбирает все записи из таблицы и заполняет массив $comments объектами класса comment. Данный массив выводится далее при выполнении скрипта.

demo.php

/*

/ Вывод комментариев один за другим:

*/

 

foreach($comments as $c){

echo $c->markup();

}

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

mysql_fetch_assoc() ) и сохраняет ее в переменной  $data. Она доступна только методу класса.

comment.class.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

class Comment

{

private $data = array();

 

public function __construct($row)

{

/*

/ Конструктор

*/

 

$this->data = $row;

}

 

public function markup()

{

/*

/ Данный метод выводит разметку XHTML для комментария

*/

 

// Устанавливаем псевдоним, чтобы не писать каждый раз $this->data:

$d = &$this->data;

 

$link_open = »;

$link_close = »;

 

if($d[‘url’]){

 

// Если был введн URL при добавлении комментария,

// определяем открывающий и закрывающий теги ссылки

 

$link_open = ‘<a href=»‘.$d[‘url’].'»>’;

$link_close = ‘</a>’;

}

 

// Преобразуем время в формат UNIX:

$d[‘dt’] = strtotime($d[‘dt’]);

 

// Нужно для установки изображения по умолчанию:

$url = ‘http://’.dirname($_SERVER[‘SERVER_NAME’].$_SERVER[«REQUEST_URI»]).’/img/default_avatar.gif’;

 

return ‘

<div>

<div>

‘.$link_open.’

<img src=»http://www.gravatar.com/avatar/’.md5($d[’email’]).’?size=50&amp;default=’.urlencode($url).'» />

‘.$link_close.’

</div>

<div>’.$link_open.$d[‘name’].$link_close.'</div>

<div title=»Added at ‘.date(‘H:i \o\n d M Y’,$d[‘dt’]).'»>’.date(‘d M Y’,$d[‘dt’]).'</div>

<p>’.$d[‘body’].'</p>

</div>

‘;

}

Скрипт определяет адрес URL, на котором выполняется, и определяет точный адрес изображения default_avatar.gif. Данное изображение передается на параллельно с хэшем md5, и если никакого аватар не было найдено для переданного email адреса, то будет выведено альтернативное изображение.

comment.class.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

public static function validate(&$arr)

{

/*

/ Данный метод используется для проверки данных отправляемых через AJAX.

/

/ Он возвращает true/false в зависимости от правильности данных, и наполняет

/ массив $arr, который преается как параметр либо данными либо сообщением об ошибке.

*/

 

$errors = array();

$data = array();

 

// Используем функцию filter_input, введенную в PHP 5.2.0

 

if(!($data[’email’] = filter_input(INPUT_POST,’email’,FILTER_VALIDATE_EMAIL)))

{

$errors[’email’] = ‘Пожалуйста, введите правильный Email.’;

}

 

if(!($data[‘url’] = filter_input(INPUT_POST,’url’,FILTER_VALIDATE_URL)))

{

// Если в поле URL был введн неправильный URL,

// действуем так, как будто URL не был введен:

 

$url = »;

}

 

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

 

if(!($data[‘body’] = filter_input(INPUT_POST,’body’,FILTER_CALLBACK,array(‘options’=>’Comment::validate_text’))))

{

$errors[‘body’] = ‘Пожалуйста, введите текст комментария.’;

}

 

if(!($data[‘name’] = filter_input(INPUT_POST,’name’,FILTER_CALLBACK,array(‘options’=>’Comment::validate_text’))))

{

$errors[‘name’] = ‘Пожалуйста, введите имя.’;

}

 

if(!empty($errors)){

 

// Если есть ошибки, копируем массив $errors в $arr:

 

$arr = $errors;

return false;

}

 

// Если данные введены правильно, подчищаем данные и копируем их в $arr:

 

foreach($data as $k=>$v){

$arr[$k] = mysql_real_escape_string($v);

}

 

// email дожен быть в нижнем регистре:

 

$arr[’email’] = strtolower(trim($arr[’email’]));

 

return true;

 

}

Метод validate() (также часть класса) определен как static. Это означает, что его можно вызвать непосредственно с помощью конструкции Comment::validate(), без создания объекта класса. Данный метод проверяет данные, которые передаются через AJAX. Метод использует новую функцию фильтра, которая стала доступна в PHP 5.2.0.. Например, filter_input(INPUT_POST,’url’,FILTER_VALIDATE_URL)

 означает, что мы проверяем, является ли  $_POST[‘url’] правильным адресом URL. Если это так, то функция возвращает значение переменной, в другом случае она возвращает значение false.

comment.class.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

private static function validate_text($str)

{

/*

/ Данный метод используется как FILTER_CALLBACK

*/

 

if(mb_strlen($str,’utf8′)<1)

return false;

 

// Кодируем все специальные символы html (<, >, «, & .. etc) и преобразуем

// символ новой строки в тег <br>:

 

$str = nl2br(htmlspecialchars($str));

 

// Удаляем все оставщиеся символы новой строки

$str = str_replace(array(chr(10),chr(13)),»,$str);

 

return $str;

}

Последний метод validate_text передаётся в качестве возвратной функции в два вызова filter_input. Он преобразует все специальные символы HTML, что эффективно блокирует атаки XSS. Также он заменяет символы новой строки тегами <br />.

submit.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

/*

/ Данный массив будет наполняться либо данными,

/ которые передаются в скрипт,

/ либо сообщениями об ошибке.

/*/

 

$arr = array();

$validates = Comment::validate($arr);

 

if($validates)

{

/* Все в порядке, вставляем данные в базу: */

 

mysql_query(» INSERT INTO comments(name,url,email,body)

VALUES (

‘».$arr[‘name’].»‘,

‘».$arr[‘url’].»‘,

‘».$arr[’email’].»‘,

‘».$arr[‘body’].»‘

)»);

 

$arr[‘dt’] = date(‘r’,time());

$arr[‘id’] = mysql_insert_id();

 

/*

/ Данные в $arr подготовлены для запроса mysql,

/ но нам нужно делать вывод на экран, поэтому

/ готовим все элементы в массиве:

/*/

 

$arr = array_map(‘stripslashes’,$arr);

 

$insertedComment = new Comment($arr);

 

/* Вывод разметки только-что вставленного комментария: */

 

echo json_encode(array(‘status’=>1,’html’=>$insertedComment->markup()));

 

}

else

{

/* Вывод сообщений об ошибке */

echo ‘{«status»:0,»errors»:’.json_encode($arr).’}’;

}

submit.php получает комментарий из данных через запрос AJAX. Проверяет его и выводит объект JSON, в котором содержится либо разметка XHTML с вставленным комментарием, либо список ошибок. jQuery использует свойство status для определения того, что нужно выводить — либо сообщение об ошибках, либо добавлять разметку комментария к странице.

Успешный ответ:

{

«status»: 1,

«html»: «Html Code Of The Comment Comes Here…»

}

Свойство html содержит код комментария.

Ответ об ошибке:

{

«status»: 0,

«errors»: {

«email»: «Please enter a valid Email.»,

«body»: «Please enter a comment body.»,

«name»: «Please enter a name.»

}

}

При наличии ошибки jQuery проходит циклом по объекту ошибок и выводит сообщения рядом с полями, в которых есть ошибки.

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

styles.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

.comment,

#addCommentContainer{

 

/* Стиль для комментариев */

 

padding:12px;

width:400px;

position:relative;

background-color:#fcfcfc;

border:1px solid white;

color:#888;

margin-bottom:25px;

 

/* Скругленные углы и тени CSS3 */

 

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

 

-moz-box-shadow:2px 2px 0 #c2c2c2;

-webkit-box-shadow:2px 2px 0 #c2c2c2;

box-shadow:2px 2px 0 #c2c2c2;

}

 

.comment .avatar{

 

/*

/ Аватар позиционируется абсолютно.

/ Внешнее смещение для div комментария

/*/

 

height:50px;

left:-70px;

position:absolute;

width:50px;

background:url(‘img/default_avatar.gif’) no-repeat #fcfcfc;

 

/* Центрируем вертикально: */

 

margin-top:-25px;

top:50%;

 

-moz-box-shadow:1px 1px 0 #c2c2c2;

-webkit-box-shadow:1px 1px 0 #c2c2c2;

box-shadow:1px 1px 0 #c2c2c2;

}

div .comment  и #addCommentContainer имеют одинаковый стиль.  Используется несколько правил CSS3 для скругления углов и отражения теней.

styles.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

.comment .avatar img{

display:block;

}

 

.comment .name{

font-size:20px;

padding-bottom:10px;

color:#ccc;

}

 

.comment .date{

font-size:10px;

padding:6px 0;

position:absolute;

right:15px;

top:10px;

color:#bbb;

}

 

.comment p,

#addCommentContainer p{

font-size:18px;

line-height:1.5;

overflow-x:hidden;

}

 

#addCommentContainer input[type=text],

#addCommentContainer textarea{

 

/* Стиль для ввода */

 

display:block;

border:1px solid #ccc;

margin:5px 0 5px;

padding:3px;

font-size:12px;

color:#555;

font-family:Arial, Helvetica, sans-serif;

}

 

#addCommentContainer textarea{

width:300px;

}

 

label{

font-size:10px;

}

 

label span.error{

color:red;

position:relative;

right:-10px;

}

 

#submit{

 

/* Кнопка «Отправить» */

 

background-color:#58B9EB;

border:1px solid #40A2D4;

color:#FFFFFF;

cursor:pointer;

font-family:’Myriad Pro’,Arial,Helvetica,sans-serif;

font-size:14px;

font-weight:bold;

padding:4px;

margin-top:5px;

 

-moz-border-radius:4px;

-webkit-border-radius:4px;

border-radius:4px;

}

 

#submit:hover{

background-color:#80cdf5;

border-color:#52b1e2;

}

Во второй части мы задаем стили для комментариев и элементов формы. Отметим селектор input[type=text], который выделяет элементы в зависимости от атрибута type. Теперь рассмотрим jQuery.

script.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

$(document).ready(function(){

/* Следующий код выполняется только после загрузки DOM */

 

/* Данный флаг предотвращает отправку нескольких комментариев: */

var

Скрипты комментариев на PHP. Скрипт добавления комментариев PHP. Скрипт комментариев для сайта на языке PHP.

Главная Страница » Скрипт добавления комментариев

eComment

PHP скрипт «eComment», распространяется под слоганом «экологически чистое комментирование». Он не требует базы данных, сложной интеграции или отдельных страниц администрирования. Вся система состоит из трех файлов: исполняемого РНР …


SkyCom

Бесплатный скрипт комментариев, написанный на PHP. Использует базу данных MySQL. Код содержит комментарии и всегда можно внести нужные изменения.


rche

Вашему вниманию скрипт комментарием на PHP с использованием Ajax, jQuery (отправка комментариев без перезагрузки страницы), для хранение комментариев используется база данных mySQL. Данный скрипт подойдет …


MPCS — Multi-Page Comment System

Код скрипта комментариев генерируется отдельно для каждой страницы и может быть использован бесконечно. В программу MPCS так же интегрирована защита от спаммеров – CAPTCHA, которая позволяет отсечь всех роботов.


Commentics

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


GentleSource Comments

GentleSource Comments – это скрипт написанный на языке PHP, который может быть легко интегрирован в любой сайт. Скрипт Comments позволяет посетителям оставлять свои комментарии на определённой странице.

Поделиться с друзьями

15 WordPress плагинов для комментариев / WordPress плагины / Постовой

Wordpress плагины: 15 WordPress плагинов для комментариев

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

Смотрите также:
8 плагинов отзывов и комментариев для WordPress
20 лучших плагинов чата на WordPress

HyperComments
Почему люди заменяют стандартные комментарии WordPress на такие, которые работают с помощью стороннего API? Стандартные комментарии неудобны. В частности, для гостей. Нет возможности авторизации через социальные сети и пр.

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

На Постовом, кстати, также используются комментарии от HyperComments.

Стоимость: Бесплатно (Есть тарифные планы, включая FREE)

Wordpress плагины: 15 WordPress плагинов для комментариев

Postmatic
Postmatic позволит пользователям оставлять комментарии под постами и подписываться на email рассылку о комментариях от других людей. Можно отвечать на чужие комментарии, не переходя на сайт, прямо из своего почтового ящика.

Стоимость: Бесплатно

Wordpress плагины: 15 WordPress плагинов для комментариев

Comments Leaderboard
Comments Leaderboard разработан, чтобы мотивировать пользователей вашего сайта комментировать посты. Плагин очень простой в настройке, просто добавьте виджет на страницу и настройте оформление.

Стоимость: Бесплатно

Wordpress плагины: 15 WordPress плагинов для комментариев

Disqus Comment System
Этот сервис и инструмент специально разработан для обсуждений. Он сделает комментирование на вашем сайте более интерактивным. Плагин Disqus для WordPress использует Disqus API и синхронизируется с комментариями на WordPress.

Стоимость: Бесплатно (Есть тарифные планы)

Wordpress плагины: 15 WordPress плагинов для комментариев

WordPress Comment Rating Plugin
WordPress Comment Rating Plugin добавляет иконки для оценки комментария. Плагин также позволит сортировать комментарии по их рейтингу.

Стоимость: $21

Wordpress плагины: 15 WordPress плагинов для комментариев

User Agent Comments
Плагин определяет, какие браузеры и операционные системы используют пользователи вашего сайта и добавляет соответствующие иконки рядом с их именами в комментариях.

Стоимость: Бесплатно

Wordpress плагины: 15 WordPress плагинов для комментариев

Commentator
WordPress плагин Commentator добавит на ваш сайт полноценную систему комментариев.

Стоимость: $17

Wordpress плагины: 15 WordPress плагинов для комментариев

WP Ajaxify Comments
Плагин WP Ajaxify Comments интегрируется в любую WordPress тему и расширяет функционал формы для комментирования. Он отправляет комментарии пользователей на сервер, не обновляя всю страницу. В случае ошибок, плагин отображает их причины, и пользователь может исправить всё, не возвращаясь на предыдущую страницу. Если комментарий успешно прошел на сайт, то плагин добавит его к уже существующим, не покидая страницы.

Стоимость: Бесплатно

Wordpress плагины: 15 WordPress плагинов для комментариев

wpDiscuz
Новая и интерактивная система комментирования, которая использует AJAX. Разработана, чтобы заменить стандартное комментирование в WordPress. Очень быстрая, адаптивная и с множеством полезных функций. Если вы хотите хранить комментарии в своей базе данных, то это лучшая альтернатива Disqus.

Стоимость: Бесплатно

Wordpress плагины: 15 WordPress плагинов для комментариев

Simple Ajax Insert Comments
Simple Ajax Insert Comments это маленький, но функциональный плагин, который позволяет просто и быстро добавлять комментарии. Плагин не перегружает страницу при отправке комментариев, так как использует Ajax, jQuery и PHP.

Стоимость: $19

Wordpress плагины: 15 WordPress плагинов для комментариев

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

Стоимость: Бесплатно

Wordpress плагины: 15 WordPress плагинов для комментариев

No Page Comment
Этот плагин позволяет настроить блокировку комментирования постов по умолчанию, а также с ним можно блокировать комментирование отдельных постов.

Стоимость: Бесплатно

Wordpress плагины: 15 WordPress плагинов для комментариев

Hotspots with Comments
Hotspots with comments позволит вашим пользователям оставлять на изображениях так называемые хот-споты — активные места с комментариями.

Стоимость: $17

Wordpress плагины: 15 WordPress плагинов для комментариев

Comment Attachment
Благодаря этому плагину пользователи смогут добавлять к своим комментариям файлы: документы, изображения и тому подобное.

Стоимость: Бесплатно

Wordpress плагины: 15 WordPress плагинов для комментариев

Comments Lightbox
Этот плагин будет открывать комментарии на вашем сайте с эффектом lightbox, не перегружая при этом страницу. Comments Lightbox не требует настройки и автоматически настраивает свой внешний вид под тему сайта.

Стоимость: $16

Wordpress плагины: 15 WordPress плагинов для комментариев

Какую форму комментариев использовать / Habr

Всем привет. Последнее время всё чаще стал замечать, что в рунете стали использовать сайты, где прикручены по 2-3 способа комментирования одновременно. Как правило, это Фейсбук, Вконтакте и своя форма или Disqus (гигантов мысли, которые бы сделали все 4 не замечал пока — но, может, плохо искал). Причины понятны: страшно упустить хоть одного пользователя, а выбрать между ФБ и ВК практически невозможно. Но реализация совершенно ужасна: сверху идёт форма комментариев и ветка дискуссии, допустим, Вконтакте, ниже — то же самое от Facbook, и в самом низу — ещё какая-нибудь фигня. Думаю, не только у меня это вызывает ужас.

Функциональная вещь красива. Если вещь некрасива — вероятно, она и нефункциональна. Это касается и нашего случая с комментариями: мало того, что это выглядит неэстетично — это ещё и неудобно. Например, иногда можно просто не заметить, что на сайте есть плагин второй соцсети, если не промотать страницу вниз.
Что дальше?

Во-первых, надо зафиксировать факт: форма комментария в которой ты уже залогинен действительно увеличивает количество комментариев. Поэтому социальным плагинам Фейсбука и Вконтакте — быть.

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

Как должно быть?

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


Сорри за пейнт

в WordPress, как выяснилось, такое уже есть:

А вот так это выглядит на сайте Russia Today:

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

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

Ну а что же Disqus? Это замечательная система, но она не поддерживает Вконтакте. Это портит всю малину. Если Disqus сделает поддержку Вконтакте, то у него отличные перспективы на нашем рынке. Или если у нас кто-то сделает свой Дискус с блэкджеком и шлюхами авторизацией через ВК. Тоже мысль.

Плагин комментариев WordPress | WordPress Mania

(Последнее обновление: 20.05.2019)

Здравствуйте, товарищи! Сегодня предлагаю вашему вниманию для вашего сайта отличный плагин комментариев WordPress. Естественно, если у вас веб-ресурс, как мой данный блог, то можно обойтись и родными комментариями, а вот для сайта с другой тематикой (новости, кулинария, медицина и т. д.) нужна более удобная форма комментариев. Желательно конечно — комментарии в реальном времени, особенно на новостных сайтах, где комментируют много и часто.

ПЛАГИН СУПЕР ОТЗЫВЧИВЫЙПЛАГИН СУПЕР ОТЗЫВЧИВЫЙ

Комментарии отзывчивые, подходят для всех размеров экрана

Предлагаемый мной плагин называется wpDiscuz, разработанный специально, чтобы расширить собственные WordPress комментарии. Главное, вам не придётся подключать сторонний сервис системы комментариев, таких как Disqus, Livefyre или hypercomments, если вы хотите сохранять все комментарии в вашей базе данных.

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

Плагин wpDiscuz бесплатный и есть наш родной и могучий русский язык. 100% настраиваемый — цвета, поля, кнопки, фон, функции и так далее. Есть также функция подписки на комментарии и поэтому от плагина Subscribe To Comments можно смело избавиться. Вообщем, достоинств много, все и не перечислить.

Дополнительная инфа на странице плагина — https://wordpress.org/plugins/wpdiscuz/. А теперь, дамы и господа, немного пройдёмся по настройкам плагина комментариев и посмотрим, как форма комментирования выглядит.

Плагин — комментарии wpDiscuz для WordPress

Плагин комментариев WordPress это — система комментариев в реальном времени AJAX с настраиваемой формой комментариев и полями. Плагин комментариев WordPress предназначен для замены собственных/стандартных комментариев WP. Супер быстрый и отзывчивый с десятками функций.

Система комментариев в реальном времени AJAX с настраиваемой формой комментариев и полямиСистема комментариев в реальном времени AJAX с настраиваемой формой комментариев и полями

Комментарии wpDiscuz

Установить модуль можно стандартным способом, через админ панель. После активации wpDiscuz переходите к его настройкам, для этого на панели управления «Комментарии» нажимаете нужный раздел:

Настройки wpDiscuzНастройки wpDiscuz

Раздел настроек комментариев

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

Настройка полей для комментариевНастройка полей для комментариев

Настройка полей для формы комментариев

По умолчанию форма состоит из 4 полей:

  1. Имя; Емейл;
  2. Веб-сайт;
  3. капча.

Многие вебмастера удаляют поле вебсайт (зависит от тематики сайта), так как у многих комментаторов его просто нет. Поле можно убрать при редактирование (в стандартных комментах поле для ввода сайта удаляется просто, читаем тут) — нажимаете на карандашик и снимаете галочку на против Enable. И после всех изменений не забудьте нажать кнопку «Обновить».

Основные настройки плагина происходят в пункте «Настройки». Страница с основными настройками состоит из нескольких вкладок, где вы можете настроить Comments-wpDiscuz под свои нужды:

настройки wpDiscuzнастройки wpDiscuz

Основные настройки wpDiscuz Вкладка — Styling

Не забудьте заглянуть во вкладку Вход через социальные сети. Вы можете использовать одну из наиболее популярных плагинов входа через социальные сети, чтобы комментировать с учетной записи Facebook, Twitter, WordPress, Вконтакте и т.д. Все кнопки социальных сетей будут интегрированы в форму комментарий:

Вход через соцсетиВход через соцсети

Вход через социальные сети

С остальными настройками сами разберётесь, там всё понятно и просто.

Важно: Если у вас установлен плагин кэширования, то удалите все кэши после обновления wpDiscuz.

После настроек загляните на сайт и вы увидите вот такую красоту (цвета по умолчанию):

Форма комментариев WordPressФорма комментариев WordPress

Комментарии для сайта WordPress

И так, с комментариями:

комментарии для сайтакомментарии для сайта

WordPress комментарии

Как вы видите в форме комментариев есть всё, что нужно для полноценного общения с посетителями сайта. К стати, есть функция обновления комментариев в реальном времени, очень удобно для общения. А так выглядят комментарии в тёмном стиле:

Система комментариев WordPress в реальном времени - wpDiscuzСистема комментариев WordPress в реальном времени - wpDiscuz

Комментарии wpDiscuz — тёмный стиль

Что будет со старыми комментариями?

Ничто не будет потеряно! Комментарии — wpDiscuz покажет все старые комментарии.

Вот пожалуй и всё, о чём я хотел вам поведать, а напоследок, для разнообразия взгляните ещё на один простой плагин.

Эпоха (Epoch) — 100% чат в реальном времени и комментирования, который полностью кэш-совместимый. Тоже можно использовать, как альтернативу Disqus.

WordPress комментарии Epoch

WordPress комментарииWordPress комментарии

WordPress комментарии плагин Epoch

Прочитать полное описание можно на странице плагина — https://wordpress.org/plugins/epoch/. Поток комментариев обновляется в режиме реального времени. Сам не устанавливал его и поэтому скриншотов своих нет. Покажу картинки чужие:

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

Форма интегрируется с любой темой и гармонирует с вашим сайтом

И ещё:

Эпоха — 100% мобильный и полностью отзывчивый

Пробуйте. Хотя первый мне больше нравится. Сейчас с вами попрощаюсь и пойду установлю его (wpDiscuz) на свой кулинарный сайт — Я Поварёнок. Давно хотел там заменить невзрачную форму комментирования на более удобную и естественно — симпатичную.

В заключение

Есть плюсы и минусы в каждой системе комментирования в Вордпресс. Поэтому утверждать что, это — самая, самая лучшая в мире система комментирования для WordPress — невозможно.

Для кого то, встроенная система комментариев блога вполне подходит, а кому то нет. Если вы в настоящее время используете систему комментирования, которой вы недовольны , то смело меняйте её. Для большей функциональности для вашего раздела комментариев, я рекомендую выбрать одну из систем комментирования — wpDiscuz или AnyComment.

Друзья, пожалуйста, оставляйте комментарии — угодил ли вам я с WordPress комментариями или как? До встречи. Пока, пока! А женский пол — чмоки, чмоки. Увидимся. 🙂

P.S. Установил комментарии на сайт Я Поварёнок, как и обещал:

Комментарии на WordPressКомментарии на WordPress

Комментарии на сайте Я Поварёнок

По умолчанию цвета принимают дизайн веб-ресурса, надо бы сделать кнопки «Ответить» и «Редактировать» чуть ярче. Хотя, может так и лучше, зато в глаза не бросаются. Как и просил вас, оставьте отзыв свой — понравились комментарии или нет?


Комментарии для современного сайта | htmlbook.ru

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

Комментарии помогают строить сообщество

Теперь пользователи приходят к вам не просто что бы прочитать какую-то новость или статью, но ещё и для того что бы её обсудить.

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

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

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

Комментарии это обратная связь и мотивация

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

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

Что нам нужно от системы комментирования?

Так какими же должны быть «правильные» комментарии на современном сайте?

  • Простыми и понятными для читателей.
  • Удобными и функциональными для администраторов.

Какие варианты есть на данный момент у веб-мастера ?

  • Если сайт построен на популярной CMS, то можно использовать готовый плагин.
  • Воспользоваться сторонним универсальным скриптом.
  • Воспользоваться сторонним сервисом.

Скрипт или сервис?

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

Преимущества

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

Из чего можно выбрать?

  • Сервисы от социальных сетей — виджеты комментариев Вконтакте и Facebook.
  • Западные сервисы типа Disqus, Livefyre, IntenceDebate.
  • Русскоязычные аналоги.

Виджеты социальных сетей

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

Множество минусов

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

Западные сервисы комментирования

Практически все платные, с начальной ценой от 2000-3000$ в месяц.

Исключение — Disqus, который предоставляет большинство своих функций бесплатно. Однако в русскоязычном интернете его использование довольно неудобно по ряду причин:

  • нет поддержки русскоязычных социальных сетей — а западные Facebook и Twitter покрывают крайне малую долю нашей сети;
  • нет полной локализации, регулярно встречающиеся не переведённые надписи и англоязычные письма могут оттолкнуть пользователей.

Русскоязычные сервисы

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

Сервис Cackle

SV Kament

Единственным исключение тут стоит система SV Kament (svkament.ru) которая полностью бесплатна и собирает воедино функционал различных западных систем комментирования, но при этом ориентирована на русскоязычный сегмент.

Давайте вкратце рассмотрит что бы мы хотели видеть в нашей системе комментирования.

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

Социальный логин — значительно упрощает регистрацию и как результат увеличивает количество комментариев. Западные исследования показывают что использование социального логина порой увеличивает конверсию более чем на 60%.

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

Работа в реальном времени — чем удобнее и быстрее работает система, тем больше ей пользуются и чаще пишут комментарии.

 

Уведомления на почту — как часто мы теряем потенциальные комментарии только потому, что пользователь не знает, что кто-то ответил на его предыдущее сообщение.

С точки зрения управления

  • Управление прямо на сайте.

 

  • Информация о пользователях.

  • Единая панель управления комментариями всего сайта.
  • Возможность назначать модераторов.
  • Простота установки.

Так же есть ряд интересных возможностей у системы SV Kament.

  • Социальные трансляции — позволяют «вернуть» общение на ваш сайт из социальных сетей. Если у вас есть группа в Вконтакте, в которой вы размещаете анонсы новых статей на сайте, то зачастую часть обсуждения статей остаётся в комментариях к самой записи, и было бы здорово транслировать эти комментарии обратно на ваш сайт.

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

Всё и сразу?

Есть довольно распространенная практика размещать сразу несколько систем комментирования, например отдельно виджет ВКонтакте, отдельно Facebook, отдельно для всех остальных.

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

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

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

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

Конструируем форму для комментариев / Habr

Хотелось бы изложить свое мнение по поводу темы затронутой в топике «Идеальное комментирование» (автор dezmaster). У меня появились свои идеи, как сделать более удобной эту форму регистрации:

Я, разумеется, не претендую на идеал, но сотни заполненных подобных форм позволяют мне высказать несколько мыслей.

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

Шаг первый: ревизия полей


Проведем ревизию полей для заполнения и их необходимсть. Первое поле «Имя», не является обязательным. У некоторых сайтов анонимные комментарии вообще являются частью культуры. Убираем звездочку и подправляем метку (это понадобиться в дальнейшем). Аналогично поступаем с полем «E-mail». Поле «Веб-сайт» не является критически важным, во-первых, не у всех есть сайты и даже блоги, а, во-вторых, сайт автора не редко относиться к теме комментария, в противном случае его можно указать в теле комментария. Удаляем это поле.
Переставлять поля ввода местами не стоит, ведь на всех остальных сайтах они идут в таком же порядке.

Шаг второй: контролы


Делаем контролы стандартными, даже если они в результате «хуже смотрятся», но пользователь к ним привык. Я вставил контролы моего браузера и ОС. Также необходимо вставить кнопку «Просмотреть», и сменить название у кнопки «Комментировать» на стандартное в данном случае «Отправить», хотя второй момент немного спорный.
Опять теперь расположим кнопки в самом низу формы, как это обычно бывает. Для этого поднимем чекбокс над ними и сделаем более ясную метку.

Шаг третий: Web 2.0


Веб-два-ноль уже на дворе, так что и мы не останемся в стороне. Сделаем поддержку для логина через OpenID и ЖЖ. Первый вариант — просто разместить соответсвующие логотипы (с поясняющим тултипом) справа от поля для логина и спрашивать пароль при вводе соответствующего логина (например, [email protected]). Пароль придется справшивать через JS, чтобы не создавать поле ввода пароля, ненужное для тех, кто не пользуется OpenID.

Также надо добавить пояснения к полю ввода адреса электронной почты, чтобы пользователь не боялся ее оставлять. И дополнительно добавим ссылку на RSS с комментариями.

Шаг четвертый: визуальный редактор


Не все знают HTML, но многие хотят создавать комментарии с ссылками, картинками и элементами форматирования. Нужно ли позволять делать это анонимным посетителям вопрос, конечно, спорный, и какие элементы форматирования разрешать должен решать владелец сайта (и не забываем про XSS!).
Я вставил обычный визуальный редактор Tiny MCE и добавил к нему счетчик символов.

Шаг пятый: контекст или как сделать форму легче


Форма у нас получилась немного тяжеловатая. Этот пункт шаг — для тех, кто так считает. Форма у нас не сама по себе, а находиться на сайте. Поэтому мы можем убрать ссылку на RSS, и добавить ленту с комментариями в саму страницу. Также можно заменить логотоипы OpenID и ЖЖ на текст, как итог форма полегчала.

Постскриптум: что еще можно доработать


  • каптча — поскольку форма для «анонимусов»
    заголовок формы
    ввод пароля для OpenID в этой же форме
    растягивающееся поле ввода
    большее по размеру поле ввода (вы знаете почему в супермаркетах такие большие тележки? 🙂 )

    Думаю, если данная статья заинтересует читателей можно воплотить в жизнь все выше описанное.Изображения при загрузке на хабр почему-то немного утратили резкость 🙁
    Update: несколько людей сделали очень интересное предложение по оптимизации — показывать поле для ввода E-mail, только если стоит чекбокс для подписки на новости.

Author: admin

Отправить ответ

avatar
  Подписаться  
Уведомление о