Вывод случайных записей WordPress с плагином и без него

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

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

Плагин случайных статей

Начнем знакомства с плагина Advanced Random Posts Widget. Его название говорит само за себя, то есть «Продвинутый виджет случайных постов». Он действительно хорош в области настроек, которые позволяют по желанию сделать следующее:

  • Отображать дату, дату изменений
  • Показывать миниатюры поста, с любым размером и местом вывода: справа, слева, по центру
  • Показывать краткое описание поста, с возможность устанавливать длину
  • Выбор типа поста: записи, страницы, медиафайлы
  • Делать название виджета ссылкой
  • Выбор количество записей
  • Исключать показ постов с определенных категорий/тегов (Таксономия)
  • Пользовательские стили

После установки плагина нам нужно перейти во закладку «Внешний вид – Виджеты». Слева вы обнаружите новый виджет «Random post», перетаскиваем его в область сайдбара и тут же откроются все параметры плагина, размещенные по вкладкам.

Базовые настройки
setting widget

Результат

random widget

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

Advanced Random Posts Widget

Случайные записи без плагина

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

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

<ul class="randompost">
<!-- из какой рубрики выводить (можно убрать, если не нужно), количество постов-->
    <?php $the_query = new WP_Query('cat=76&showposts=5&orderby=rand'); ?>
    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <li>
<!--миниатюра поста -->
    <a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post->ID, 'thumbnail'); ?></a>
<!--вывод название категории -->
   <span class="namecat"><?php $cat = get_the_category(); echo $cat[0]->cat_name; ?>:</span><br/>
<!--заголовок поста -->
   <a href="<?php the_permalink(); ?>" rel="bookmark">  <?php the_title(); ?></a>
<!--дата поста -->
   <p class="randate">
        <span class=""><?php echo get_the_date('Y-m-d'); ?></span>
   </p>
   </li>
   <?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>

Осталось теперь лишь прописать стили CSS.

ul.randompost li a {
    color: #3f444c;
    font: 500 13px arial;
    vertical-align: top;
}

ul.randompost li {
    overflow: hidden;
    overflow-wrap: break-word;
}

ul.randompost img {
    float: left;
    margin: 5px 10px 10px 0;
    display: block;
    width: 55px;
    height: 55px;
}

.randate {
    color: #999;
    font: 500 11px arial;
}
span.namecat {
    color: #3f444c;
    font: 600 13px arial;
}

Результат.

random post

4 комментария
Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *