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

Опубликовано ,

Содержание:

  1. Зачем нужен вывод списков постов?
    • Добавляем миниатюру к записи.
  2. Вывод популярных, похожих, случайных и последних статей
    1. Похожие записи:
      • Из одной категории;
      • По меткам.
    2. Случайные записи
    3. Перемешиваем записи на страницах архивов
    4. Вывод последних записей
    5. Популярные записи
  3. Добавляем функции в сайдбар или после текста поста
    • Возможность выводить php код в виджете

 1. Зачем дополнительно выводить списки статей?

Вывод других записей после текста несет несколько полезных функций:

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

Согласитесь, неплохо?

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

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

Внимание! Перед изменением файлов шаблона, не забываем делать резервные копии!

Для работы с .php файлами темы удобно пользоваться PHP клиентом, например, FileZilla.

 

Добавляем миниатюру к посту

Для пущей визуализации мы будем выводить заголовки записей рядом с картинками, поэтому первым делом стоит подключить (если еще не подключено) вывод миниатюр. Для этого добавьте в начало файла function.php после открывающего тега <?php следующие строки:

if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
}
/******МОЖНО ЗАДАТЬ ДОПОЛНИТЕЛЬНЫЕ РАЗМЕРЫ МИНИАТЮР*****/
add_image_size( 'main', 600, 200, true ); /*миниатюру с заданным именем обрезаем по размерам, false - миниатюра создается по одной подходящей стороне*/

В тексте самой статьи или в списке статей миниатюры будут выводиться при помощи следующего кода:

<?php if(has_post_thumbnail( )){the_post_thumbnail(' ');}?>
/********ЕСЛИ ЗАДАНО НАЗВАНИЕ МИНИАТЮРЫ********/
<?php if(has_post_thumbnail( )){the_post_thumbnail('main');}?>

При желании можно установить их вывод только на главную страницу (index.php) или только на одиночную запись (single.php).

Добавить изображение к посту можно на странице редактирования текста:

Задаем миниатюру поста Вордпресс

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

 

2. Вывод похожих, случайных, популярных и последних записей

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

Похожие записи

Вывод похожих записей блога

 

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

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

Данные функции выводят подзаголовок только при наличии меток или категорий, что очень удобно.

1. Похожие статьи из данной категории

//выводим похожих записи (категория)
<div id="pohozhie_zapisi">
 <?php $categories = get_the_category($post->ID);
if ($categories) {
 $category_ids = array();
 foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
 $args=array(
 'category__in' => $category_ids,  //пост из данной категории
 'post__not_in' => array($post->ID),
 'showposts'=>6,  //выбираем количество постов
 'orderby'=>rand, // случайный порядок
 'caller_get_posts'=>1); // убираем одинаковые записи
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
echo '<h3>А вот еще интересненькое:</h3>' // если есть записи - выводим заголовок 
 echo '<ul>';
 while ($my_query->have_posts()) {
 $my_query->the_post();
?>
<li><div id="cell"><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a></span><br> // миниатюра статьи
<span><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span></div></li> // название статьи
<?php
}
echo '</ul>';
}
wp_reset_query(); //аннулируем данные запроса
}
?>
</div>

2. Похожие записи по данной метке

Функция немного отличается:

/*похожие записи по меткам*/
 <div id="pohozhie_zapisi">
<?php $tags = wp_get_post_tags($post->ID);
if ($tags) {
 $tag_ids = array();
 foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
 $args=array(
 'tag__in' => $tag_ids,  //сортируем по меткам
 'post__not_in' => array($post->ID),
 'showposts'=>6,  //сколько ячеек выводится
 'orderby'=>rand, // задаем случайный порядок вывода
 'caller_get_posts'=>1); //убираем одинаковые записи
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
echo '<h3>А вот еще интересненькое:</h3>'; //вводим заголовок
 echo '<ul>';
 while ($my_query->have_posts()) {
 $my_query->the_post();
?>
<li><div id="cell"><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a></span><br> //миниатюра
<span><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></span></div> //название поста
</li>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?>
</div>

 CSS оформление:

#pohozhie_zapisi{
 margin: 15px 0px;   /*  верхний и нижний отступ */
 float: left;    
 width: 100%;  
}
#pohozhie_zapisi ul {
 margin-left: 25px;
 width: 630px;  /* ширина блока записей без учета отступов от краев страницы */
padding-top: 0px;
}
#pohozhie_zapisi li {
 list-style: none;  /* без нумерации */
margin-bottom: 0px;
}
#cell{
 height: 225px;  /* задаем высоту ячейки с текстом  */
 box-shadow: #F5F5F5 0px 2px 3px, #F5F5F5 0 0 3px inset;  /* добавляем тень (не обязательно) */
 float: left;   /* располагаем ячейки друг за другом */
 list-style: none;  /* убираем стили родительского элемента */
 margin: 5px;  /* задаем внешние отступы */
 padding: 2px;  /* внутренние отступы */
 text-align: center; /* центрируем заголовок */
 width: 157px;  /* ширина ячейки */
 overflow: hidden;  /* убираем прокрутку */
 border: #F5F5F4 solid 1px; /* контур вокруг ячейки */
 border-radius: 9px;  /* закругляем углы */
}
#cell a:hover { /* эффекты при наведении */
 color: #C6C600; 
 text-decoration:none; /* нет подчеркивания */
}
#cell a{
 color: #000;
 text-decoration:none;
}
#pohozhie_zapisi li:hover{
 background-color: #f9f8f9; /* меняем фон ячейки при наведении курсора */
}

Естественно, для каждого отдельного шаблона и дизайна внешний вид надо будет редактировать

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

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

Можно добавлять два варианта этой функции:

1. Вывод случайных записей списком

<ul>
<?php $posts = get_posts('orderby=rand&numberposts=5'); //рандомный вывод 5 постов
foreach($posts as $post) { ?>
<li>
<a href=" <?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(array()); ?></a> //миниатюра поста
<a href="<?php the_permalink(); ?>
" title="<?php the_title(); ?>"><?php the_title(); ?></a> 
</li>
<?php } ?>
</ul>

2. Перемешиваем записи внутри архивов

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

Добавляем код в конец файла function.php перед закрывающим тегом: ?>

function maks_post_order( $query ) {
if ( $query->is_archive ) {
$query->set( 'orderby', 'rand' );
}
}
add_action( 'pre_get_posts', 'maks_post_order' );

 

 Последние записи

 Как это выглядит вживую вы можете увидеть в футере моего блога:

вывод последних постов блогаРаз уж они «последние», добавила к заголовку статьи дату ее написания.

/*функция вывода последних статей*/
<div class="poslednie"> // добавим нужное оформление при помощи класса
<ul>
<?php query_posts('showposts=5'); ?> //выводим 5 последних постов
         <?php while (have_posts()) : the_post(); ?>
<li>
<a href=" <?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(array()); ?></a> //вывод миниатюры, она же - ссылка на статью
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<span><br><?php the_time('j '); rus_month( ); the_time(',  Y'); ?></span> //задаем отдельное оформление для даты
</li>
<?php endwhile;?>
</ul>
</div>

Предпочтительный вариант вывода с wp_query

<div class="poslednie">
<ul>
<?php
$poslednie = new WP_query('posts_per_page=5'); ?>
<?php while ($poslednie->have_posts()) : $poslednie->the_post(); ?>
<li>
<a href=" <?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('mini', array()); ?></a>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a><span>
<br><?php the_time('j '); rus_month( ); the_time(',  Y'); ?></span>
</li>
<?php endwhile; wp_reset_query();?>
</ul>
</div>

CSS стили (разумеется, возможно изменение параметров для каждой отдельной темы):

/*******ПОСЛЕДНИЕ ЗАПИСИ********/
.poslednie ul li{
line-height:15px; /*междустрочный интервал*/
display:block;
padding:0px 0px 16px 0px; /*нижний отступ*/
height:50px; /*высота ячейки*/
font-size:11px; /*размер шрифта*/
}
.poslednie ul li img {
width: 60px; /*размеры миниатюры*/
height: 60px;
background:#ffffff;
padding:3px;
float:left; 
margin:0 9px 0 0px;
-moz-box-shadow: 0 0 9px rgba(0,0,0,0.2); /* учитываем параметры */
-webkit-box-shadow: 0 0 9px rgba(0,0,0,0.2); /* для разных браузеров */
box-shadow: 2px 2px 2px rgba(0,0,0,0.1); /* тень */
-moz-transition: border 0.3s 0.05s ease;
-o-transition: border 0.3s 0.05s ease;
-webkit-transition: border 0.3s 0.05s ease; /*скорость изменения эффектов*/
}
.poslednie li img:hover {
border:1px solid red; /*рамка при наведении*/
}
.poslednie span {
color: rgba(250, 255, 254, 0.69); /*оформление даты*/
}

Популярные записи

Ввод популярных записей WordPress

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

<div class="popular">
<ul>
<?php
function filter_where($where = '') {
 $where .= " AND post_date > '" . date('Y-m-d', strtotime('-30 days')) . "'"; //вывод за 30 дней
 return $where;
}
add_filter('posts_where', 'filter_where');
query_posts('post_type=post&posts_per_page=5&orderby=comment_count&order=DESC'); //5 записей по количеству комментариев, расположены по возрастанию
while (have_posts()): the_post(); ?>
<li>
<a href=" <?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array()); ?></a> //миниатюра
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a><span> // заголовок
<br> Комментарии: <?php comments_popup_link('Комментариев нет.', '1 Комментарий', 'Комментариев %'); ?></span>количество комментариев
</li>
<?php
endwhile;
wp_reset_query();
?>
</ul>
</div>

Второй вариант вывода (предпочтительней так как WP_query не нарушает основной цикл)

<div class="popular">
<ul>
<?php
function filter_where($where = '') {
 $where .= " AND post_date > '" . date('Y-m-d', strtotime('-30 days')) . "'";
 return $where;
}
add_filter('posts_where', 'filter_where');
$popular = new WP_query('orderby=comment_count&posts_per_page=5'); ?>
<?php while ($popular->have_posts()) : $popular->the_post(); ?>
<li>
<a href=" <?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('mini', array()); ?></a>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a><span>
<br> Комментарии: <?php comments_popup_link('Комментариев нет.', '1 Комментарий', 'Комментариев %'); ?></span>
</li>
<?php endwhile; wp_reset_query(); ?>
</ul>
</div>

 

CSS оформление у меня аналогично предыдущему:

.popular ul li{
line-height:16px;
display:block;
padding:0px 0px 15px 0px;
height:50px;
font-size:12px;
margin-top:2px;
}
.popular ul li img {
width: 60px;
height: 50px;
border:1px solid #ccc;
background:#fff;
padding:2px;
float:left;
margin:0 10px 0 0px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); /* учитываем параметры */
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); /* для разных браузеров */
box-shadow: 2px 2px 2px rgba(0,0,0,0.1); /* тень */
-moz-transition: border 0.3s 0.05s ease;
-o-transition: border 0.3s 0.05s ease;
-webkit-transition: border 0.3s 0.05s ease;
}
.popular li img:hover {
border:1px solid #888;
}

3. Добавляем функции в сайдбар или в конце поста

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

Похожие записи я расположила в самом конце страницы, после кнопок поделиться и подписки на рассылку.

Поэтому открываем файл single.php и добавляем наш код перед закрывающим тегом </article> :

Вставляем код

 

Готово =)

Вывод php кода в виджете

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

/*php код в сайдбаре*/
function php_execute($html){
if(strpos($html,"<"."?php")!==false){
ob_start();
eval("?".">".$html);
$html=ob_get_contents();
ob_end_clean();
}
return $html;
}
add_filter('widget_text','php_execute',100);

Теперь заходим в панели админа: «Внешний вид/Виджеты» и вставляем текстовый виджет в нужное место в сайдбаре.

Популярные записи в сайдбаре wordpress

Вот и все. Надеюсь, статья будет вам полезна =)

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

  1. Сергей

    Спасибо!

    Ответить
  2. Ольга

    Здравствуйте, подскажите пожалуйста как выставить картинки в ряд, а не столбиком как у вас на примере. Спасибо.

    Ответить
  3. Ева

    Добрый день!
    Подскажите, а если мне нужно выводить случайную запись не во всех постах, а лишь в 1 записи. Как это сделать?
    Если я прописываю код в single, то автоматом выводится везде, а мне нужно в 1 месте. Как сделать?

    Ответить
    1. Анастасия

      Здравствуйте, Ева, извиняюсь за долгий ответ
      Вам стоить помещать функцию, обернув ее уточняющим тегом с id нужной записи:

      <?php if (is_single(ID записи)) { ?>
      ТУТ КОД ПОХОЖИХ/ДРУГИХ ЗАПИСЕЙ
      <?php } ?>

      id записи можно получить, зайдя в ее редактор: http://prntscr.com/9worfy

      Например, это будет так:

      <?php if (is_single(836)) { ?>
      ТУТ КОД ПОХОЖИХ/ДРУГИХ ЗАПИСЕЙ
      <?php } ?>
      Ответить
  4. ильдар

    добрый день хотел вывести популярные записи по просмотрам за 24 часа из определенной рубрики. Статистику просмотров вывел по этой инструкции http://bloggood.ru/wordpress/vyvodim-kolichestvo-prosmotrov-stranicy-na-wordpress.html/

    в single.php добавил код для вывода

    ‘» . date(‘Y-m-d H:i:s’, strtotime(‘-24 hours’)) . «‘»;
    return $where;
    }
    add_filter(‘posts_where’, ‘filter_where’);
    $popular = new WP_query(‘orderby=comment_count&posts_per_page=5&meta_key=post_views_count&cat=7’); ?>
    have_posts()) : $popular->the_post(); ?>

    <a href=" » title=»»>
    <a href="» title=»»>

    .
    но что-то не совсем правильно выводит записи по просмотрам. Можете подсказать где я ошибся ?

    Ответить
    1. Анастасия

      Здравствуйте, добавила кнопки для добавления кода в форме комментариев, теперь код стираться не будет

      Ответить
  5. ильдар

    <ul>
    <?php
    function filter_where($where = ») {
    $where .= » AND post_date > ‘» . date(‘Y-m-d H:i:s’, strtotime(‘-24 hours’)) . «‘»;
    return $where;
    }
    add_filter(‘posts_where’, ‘filter_where’);
    $popular = new WP_query(‘orderby=comment_count&posts_per_page=5&meta_key=post_views_count&cat=7’); ?>
    <?php while ($popular->have_posts()) : $popular->the_post(); ?>
    <li>
    <a href=» <?php the_permalink(); ?>» title=»<?php the_title(); ?>»><?php the_post_thumbnail(‘mini’, array()); ?></a>
    <a href=»<?php the_permalink(); ?>» title=»<?php the_title(); ?>»><?php the_title(); ?></a>
    </li>
    <?php endwhile; wp_reset_query(); ?>
    </ul>
    Ответить
    1. Анастасия

      Ильдар, а что значит не совсем правильно? Вы выводите одноременно по количеству комментариев и числу просмотров?
      + при включенном браузерном кешировании (или при плагине кеширования) функции корректно не работают.
      При необходимости я пользуюсь кодом от Камы: http://wp-kama.ru/id_101/funktsiya-vyivoda-zapisey-po-kolichestvu-prosmotrov.html

      Ответить

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован.

Добавить в комментарий код: CSSHTMLPHP