Шаг №56.Как создать страницу с комментариями сайта?

Всем привет дорогие друзья!Надеюсь все удачно встретили Новый Год! Пока были праздничные выходные я тут прикольную штуку сделал на сайте, надеюсь Вы уже заметили. Ну а если кто то не заметил даю подсказку, в меню появилась новая кнопочка “комментарии на сайте” в общем я вынес все комментарии на страницу. Теперь все последние комментарии можно посмотреть на отдельной странице. Если Вы помните у меня на сайте в сайдбаре стоял плагин, который выводил последние комментарии на сайте, от которого я отказался. Отказался потому что сайдбар сразу же становился очень длинным, и портил внешний вид сайта.

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

Комментарии на странице

Вот так выглядят комментарии на странице, которая располагается по адресу http://wpcreate.ru/comment .Как видите я сделал 5 вариантов отображения количества комментариев на странице(10,30,50,100,200) при нажатии на любую из цифр, будет автоматически подгружаться такое же количество комментариев.

Как вывести комментарии на страницу?

1)Создаем шаблон страницы вывода комментариев

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

В моем случае в файле page.php находится 5 строк:

<?php get_template_part('content', 'before'); ?>
 
<div class="content">
 
<?php get_template_part('loop', 'page'); ?>
 
</div><!-- .content -->
<?php get_template_part('loop', 'page'); ?><?php get_template_part('content', 'after'); ?>

Создаем новый файл, называем его comments-page.php и копируем в него все что есть у Вас в файле page.php. Теперь в начало файла добавляем название шаблона:

<?php
 /**
 * Template Name: Comments-page
 */
 ?>

И удаляем строку отвечающую обычно за вывод записей на экран:

Комментарии на странице

Не забываем сохранить новый файл на сервере или локально!

Все шаблон готов.Теперь нам необходимо создать новую страницу на сайте, и присвоить ей шаблон Comments-page.

2)Создаем новую страницу и присваиваем ее новому шаблону.

Переходим в админ панель, и создаем новую страницу “Страницы->Добавить новую”

Комментарии на странице

В название страницы пишем что это “Комментарии на сайте” а в постоянную ссылку вписываем comment

Комментарии на странице

А теперь присваиваем странице шаблон:

Комментарии на странице

3)Вставляем функцию выводящую последние комментарии в файл functions.php

function page_comments($limit=10, $ex=45, $cat=0, $echo=1, $gravatar=''){
 global $wpdb;
 if($cat){
 $IN = (strpos($cat,'-')===false)?"IN ($cat)":"NOT IN (".str_replace('-','',$cat).")";
 $join = "LEFT JOIN $wpdb->term_relationships rel ON (p.ID = rel.object_id) LEFT JOIN $wpdb->term_taxonomy tax ON (rel.term_taxonomy_id = tax.term_taxonomy_id)";
 $and = "AND tax.taxonomy = 'category' AND tax.term_id $IN";
 }
 $sql = "SELECT comment_ID, comment_post_ID, comment_content, post_title, guid, comment_author, comment_author_email FROM $wpdb->comments com LEFT JOIN $wpdb->posts p ON (com.comment_post_ID = p.ID) {$join}
 WHERE comment_approved = '1' AND comment_type = '' {$and} ORDER BY comment_date DESC LIMIT $limit";
 
$results = $wpdb->get_results($sql);
 
$out = '<div id="comments"><ol class="commentlist">';
 foreach ($results as $comment){
 if($gravatar) $grava = get_avatar( $comment, 50 );
 $comtext = strip_tags($comment->comment_content);
 $leight = (int) iconv_strlen( $comtext, 'utf-8' );
 if($leight > $ex) $comtext =  iconv_substr($comtext,0,$ex, 'UTF-8').' …';
 if(strip_tags($comment->comment_author) == 'Артем Петрусенко'){
 $autor = " <cite style='color:red;' class='fn'> ".strip_tags($comment->comment_author)."</cite> ответил на вопрос в статье";
 }else{
 $autor = " <cite class='fn'>".strip_tags($comment->comment_author)."</cite>  прокомментировал(а) статью";
 }
 $out .= "
 <li class='comment'>
 <div  class='comment-body'>
 $grava
 <div class='comment-wrapper'>
 <div class='comment-meta' style='margin-bottom:5px;'>
 $autor <a style='font-size:14px;line-height: 0.5;' href='". get_comment_link($comment->comment_ID) ."'>{$comment->post_title}</a>
 </div>
 <div class='hentry-content'>
 {$comtext}
 </div>
 </div>
 </div>
 </li>
 ";
 } $out .= "</ol></div>";
 
if ($echo) echo $out;
 else return $out;
 }

4) Добавляем вызов функции в файл comments-page.php

Теперь нам осталось добавить вызов функции в файл comments-page.php  выводящий комментарии на страницу:

<h2>Последние комментарии на сайте:</h2>
 Выводить <a href='http://wpcreate.ru/comment?number=10'>10</a>,
 <a href='http://wpcreate.ru/comment?number=30'>30</a>,
 <a href='http://wpcreate.ru/comment?number=50'>50</a>,
 <a href='http://wpcreate.ru/comment?number=100'>100</a>,
 <a href='http://wpcreate.ru/comment?number=200'>200</a> комментариев на странице.
 
<?php
 if (isset($_GET['number'])) { $number=$_GET['number'];}else{ $number = 25;}
 page_comments($number, 1000,'',1,50);
 ?>

Файл comments-page.php у меня теперь выглядит так:

Комментарии на странице

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

5)Добавляем стили в файл style.css

Последний шаг, это вписать стили css в файл style.css который находится в папке с шаблоном.

#comments {margin-bottom: 15px;}
 
.comment-body{border-top: 1px solid #EEECEC;padding: 15px 0;}
 
.commentlist {list-style: none; margin: 0; padding: 0; }
 
.commentlist li.comment { line-height: 24px; position: relative; }
 
#comments .comment-body ul, #comments .comment-body ol { margin-bottom: 15px; } #comments .comment-body blockquote p:last-child { margin-bottom: 15px; }
 
.commentlist .avatar { background: white; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; float: left; width: 50px; height: 50px; padding: 4px; }
 
.comment-wrapper { padding-left: 72px; }
 
.comment-meta { margin-bottom: 2px; font-size: 11px; color: #999; }
 
.hentry-content { color: #555; }
 
.comment-author { padding: 5px; display: block; background: #F2F2F2; border: 1px solid #DFDFDF; border-radius: 4px; }
 
.comment-author cite { font-style: normal; font-weight: bold; }
 
.comment-author .says { font-style: italic; }
 
.fn, .fn a:link, .fn a:hover, .fn a:visited { font-family: Arial, Helvetica, Sans-serif; font-size: 16px; font-style: normal; font-weight: bold; text-decoration: none; }
 
.comment-meta { margin-bottom: -6px; display: block; font-size: 11px; padding:0; }
 
.comment-meta a:link, .comment-meta a:visited { text-decoration: none;}

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

  • http://delitant.ru/ Делитант

    Прикольная фишка! Интересно, на сколько хорошо страница будет индексироваться?

    • http://wpcreate.ru Артем Петрусенко

      Я вообще закрыл от индексации в файле robots.txt дабы не возникало дублирования контента, а фишка сделана в основном для удобства посетителей сайта, так называемое юзабилити. Как известно поведенческие факторы сейчас имеют очень большое влияние, вот и будем работать над улучшением поведенческих факторов.

  • http://secrety-ineta.ru/ Евгений

    Спасибо! Очень полезная статья!!
    Сам подумывал об этом.

    • http://wpcreate.ru Артем Петрусенко

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

  • http://локально Владимир

    Статья как ни кстати, как раз нужна такая фишка. Начал делать. да вот проблема возникла на 3 шаге. Скопировал код в functions.php (правильно?), я так понял с инструкции, и пошла жара, сразу в админке вверху появился этот же код (который добавил) и естественно все следующие шаги не пошли. Результата небыло. Подскажите пожалуйста что к чему.

    • http://wpcreate.ru Артем Петрусенко

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

      • http://локально Владимир

        Да, ошибка была в этом (видимо устал и не внимательно вставил код), очень хорошо получилось, спасибо.

  • Валерий

    У меня в пустой форме добавления остаются имя и e-mail последнего пользователя. Как с этим бороться? В админке следов не нашел. Удалил все комментарии — не помогает!

    • http://wpcreate.ru Артем Петрусенко

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

      • Валерий

        Спасибо, Артем! Буду искать.

  • Шурик

    Андрей, а можете объяснить мне как сделать страницу по типу как у Вас «Предложить урок». Просто я создаю страницу, комментарии разрешены, но когда публикую ее, области добавления комментариев нет???

    • http://wpcreate.ru Артем Петрусенко

      Здравствуйте Шурик) Ну я Артем а не Андрей.А по поводу комментариев на странице wordpress я только что опубликовал урок.

      • Шурик

        Ой, Артем извините. А за урок премного благодарен=))

        • http://wpcreate.ru Артем Петрусенко

          Ничего страшного) Теперь я думаю у Вас получится создать страницу Вопросы пользователей)

  • http://каксоздатькамментарий феликс

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

  • Роман

    Спасибо за статью! Очень подробно и просто все расписано. Все получилось с первого раза.
    Единственное, интересует теперь такой вопрос: как вывести древовидные комментарии?

    • http://wpcreate.ru Артем Петрусенко

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

      • Роман

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

        • Роман

          неправильно написал: ответы идут перед вопросами)

          • http://wpcreate.ru Артем Петрусенко

            Роман, ну что не разобрался по поводу древовидных комментариев на отдельной странице? 😐

  • http://football-ussr.ru Алексей

    здорово!!! только для меня это Все сложновато…(((

  • http://ncuxolog.astrakraft.ru/ Светлана

    Артем, извините, а как поместить комментарии в сайтбар. Что за плагин?

  • http://ncuxolog.astrakraft.ru/ Светлана

    Артем, в файле page.php у меня только
    <?php
    /**
    * @package WordPress
    * @subpackage Constructor
    */
    wp_enqueue_script( 'comment-reply' );

    // load header.php
    get_header();

    // load one of layout pages (layouts/*.php) based on settings
    get_constructor_layout('page');

    // load footer.php
    get_footer();

    ничего похожего на Вашу запись. Тема Constructor.

    • http://ncuxolog.astrakraft.ru/ Светлана

      Артем, искренне надеюсь на Ваш ответ…

      • http://wpcreate.ru Артем Петрусенко

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

  • Alex

    А не подскажите как можно вывести комментарии каждого пользователя на отдельной странице?
    Например типа такой ссылки на его комментарии
    http://wpcreate.ru/comments?Artem

    • http://wpcreate.ru Артем Петрусенко

      К сожалению не подскажу,но если когда нибудь такое нарою,тогда поделюсь.

      • Ник

        А можете подсказать как сделать комментарии к каждой записи на отдельной странице ? А если не знаете, то как вы сделали форму для ввода комментарий сверху а под ней уже комментарии. Заранее благодарен за ответ.

  • kot

    смотрим все вопросы в скайп kot22820

  • Denis

    Приветствую, а почему может не работать функция переключения количества комментариев, кроме этого все отлично отображатеся, спасибо автору.

  • https://sites.google.com/site/shkolotainschool/ lol

    fhgfg

  • http://безсайта свят

    кууууу 😈 😯 🙁 🙄 😛

  • http://безсайта свят
     
  • http://emergy.ru Евгений

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

  • http://eslibolitgolova.ru Анатолий

    Тоже интересует как вставить дату комментария?

  • http://ia-progress.ru/ Рекламный агент

    Спасибо! Я раньше жил во тьме)) Не, реально классная фишка) 😉

  • http://cupoma58.tf9.ru cupoma58

    ссылка сайт/папка — не срабатывает, только на *.html; comments-page.pfp-как файл-обработчик forma.html ?
    добавил в папку comment все 3 вышерекомендованых файла — не сработало…т.с.-без комментариев ! 😐 😐

  • http://hollywoodpresents.ru/ Ксения

    Актуальная тема. Но все же ищу нечто другое: подскажите как вывести вот на такой странице комменты только одного юзера?
    То есть нужно, чтобы у каждого пользователя была вот такая страничка со всеми его комментариями. Это похоже как, например, можно посмотреть все статьи одного автора, так нужно и комменты. В общем что-то типа архива комментов юзера.
    Вот пример
    Наперед спасибо!

  • саша

    Мне очень нравиться работать в данном проекте Light Start Helper! lightstarthelper.biz.если вы ещё до сих пор не можете найти достойную работу и с достойной оплатой ,то вам сюда Light Start Helper! Мгновенные выплаты,и очень много хороших бонусов!!!Спешите уверена что вы не разачеруетись.

  • http://lightstarthelper.biz/ мария

    Мне очень нравиться работать в данном проекте Light Start Helper! lightstarthelper.biz,,кто хочет реально заработать и с удовольствием то вам сюда.
    Регулярно зарабатывать вознаграждение в размере 150$;
    Строить команду партнеров-единомышленников;
    Развивать навыки работы в интернете;
    Заводить новые полезные знакомства для дальнейшего сотрудничества;
    Делиться успешным опытом работы с партнерами своей команды;
    И многое другое, о чем Вы узнаете сразу после регистрации.

    • слава

      Скажите а там действительно реально заработать?

      • слава

        Да реально нажмите на моё имя и вас перекинит!

  • vv

    vvvv

  • Сергей Серов

    А как сделать, чтобы комментарии отображались ссылкой на комментарий, а не просто текстом? И можно было щелкнув по комментарию, перейти на него?