236 Показывать списки самых комментируемых статей в WordPress можно и без использования различных плагинов.
Мы научим вас, как это можно сделать и даже пойдем дальше. Покажем, как отображать небольшие превьюшки вместо обычных ссылок для большей привлекательности.
PHP
Для начала немного верстки.
|
1 |
<ul id="popular-comments"> |
Создадим WordPress Query запрос! Пропишем его так, чтобы возвращался список самых комментируемых статей и ограничение поставим на 10 штук самых комментируемых.
|
1 2 3 |
<?php $pc = new WP_Query('orderby=comment_count&posts_per_page=10'); ?> |
Дальше работает сам WordPress.
|
1 2 |
<?php while ($pc->have_posts()) : $pc->the_post(); ?> <li> |
Статьи с наибольшим количеством комментариев будут отображаться, бок о бок с маленькими превьюшками, взятыми из избранных изображений (если изображенией нет, то превьюшки показываться не будут).
|
1 2 |
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(10,10)); ?></a> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> |
Добавим немного основных деталей. Например, автора и дату публикации.
|
1 2 3 4 |
<p>Posted by <strong><?php the_author() ?></strong> on the <?php the_time('F jS, Y') ?> with <?php comments_popup_link('No Comments;', '1 Comment', '% Comments'); ?></p> </li> |
Закрываем цикл.
|
1 2 |
<?php endwhile; ?> </ul> |
Из всего этого можно сделать шорткод и жестко привязать к теме.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ul id="popular-comments"> <?php $pc = new WP_Query('orderby=comment_count&posts_per_page=10'); ?> <?php while ($pc->have_posts()) : $pc->the_post(); ?> <li> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(10,10)); ?></a> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <p>Pyosted b <strong><?php the_author() ?></strong> on the <?php the_time('F jS, Y') ?> with <?php comments_popup_link('No Comments;', '1 Comment', '% Comments'); ?></p> </li> <?php endwhile; ?> </ul> |
CSS стили
Пропишем основные CSS свойства, чтобы они соответствовали вашей теме оформления.
|
1 2 3 4 5 6 7 8 9 |
#popular-comments { list-style:none; width:360px; } /*Ширина вашей популярной статьи*/ #popular-comments li { overflow:auto; margin:10px 0px; border-bottom:1px solid #E6E6E6; padding-bottom:5px; } #popular-comments li img { float:left; margin-right:10px; border:4px solid #EEEEEE;} #popular-commentss li a { text-decoration:none; font-weight:bold; color:#1e292b;} #popular-comments li p { margin-top:10px; } |
Конечный результат
Теперь все. Посмотрите на скрин.
Хорошее решение, спасибо за статью