Всем привет дорогие друзья!Надеюсь все удачно встретили Новый Год! Пока были праздничные выходные я тут прикольную штуку сделал на сайте, надеюсь Вы уже заметили. Ну а если кто то не заметил даю подсказку, в меню появилась новая кнопочка “комментарии на сайте” в общем я вынес все комментарии на страницу. Теперь все последние комментарии можно посмотреть на отдельной странице. Если Вы помните у меня на сайте в сайдбаре стоял плагин, который выводил последние комментарии на сайте, от которого я отказался. Отказался потому что сайдбар сразу же становился очень длинным, и портил внешний вид сайта.
Последние комментарии находящиеся на отдельной странице, как мне кажется улучшат поведенческие факторы да и общий дизайн и продуманность внутренней структуры сайта. Также преимущество такого подхода это возможность пользователю самостоятельно выбрать сколько комментариев отображать на странице. Ведь в сайдбаре не поставишь отображать последние 100 комментариев, представляете как в таком случае растянется сайт вниз. Ладно не буду Вас мучать лучше покажу как это выглядит на сайте, а потом расскажу как сделать отдельную страницу с комментариями и как это реализовано у меня.
Вот так выглядят комментарии на странице, которая располагается по адресу http://wp.infohub.su/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://wp.infohub.su/comment?number=10'>10</a>,
<a href='http://wp.infohub.su/comment?number=30'>30</a>,
<a href='http://wp.infohub.su/comment?number=50'>50</a>,
<a href='http://wp.infohub.su/comment?number=100'>100</a>,
<a href='http://wp.infohub.su/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;}
Это все.Теперь переходите на страницу с комментариями, и если не получилось пишите мне в комментарии. Так же хотелось бы услышать про какие интересные штучки знаете Вы!