Как вывести последние записи WordPress без плагина

В WordPress можно легко выводить последние записи на страницу или в сайдбаре без необходимости устанавливать дополнительные плагины. Для этого используется стандартный цикл WP_Query, который позволяет получать и отображать записи с определенными параметрами.

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

Первым делом добавляем в файл functions.php код шорткода.

//Шорткод последних записей
function new_posts_shortcode($atts) {
    // Параметры шорткода
    $atts = shortcode_atts(array(
        'count' => 5, // Количество последних записей по умолчанию
    ), $atts);

    $recent_posts = new WP_Query(array(
        'posts_per_page' => $atts['count'],
    ));

    // Формируем вывод
    $output = '<div class="wrap_newpost">';
    while ($recent_posts->have_posts()) {
        $recent_posts->the_post();
        $output .= '<div class="content_newpost">';
        $output .= '<a class="img_newpost" href="' . get_the_permalink() . '">' . get_the_post_thumbnail($post->ID, 'thumbnail') . '</a>';
        $output .= '<a class="title_newpost" href="' . get_the_permalink() . '" rel="bookmark" title="' . get_the_title() . '">' . get_the_title() . '</a>';
        $output .= '</div>';
    }
    $output .= '</div>';

    // Восстанавливаем оригинальные данные запроса
    wp_reset_postdata();
    return $output;
}
add_shortcode('new_recent_posts', 'new_posts_shortcode');

Наследующем этапе делаем поддержку шорткодов в сайдбаре. Для этого также нужно в файл functions.php добавить такую строку:

//поддержка шорткода в сайдбаре
add_filter('widget_text', 'do_shortcode');

Теперь идем в админку «Внешний вид — Виджеты» и добавляем виджет «HTML-код». В нем нам нужно прописать ранее зарегистрированный шорткод, а именно [new_recent_posts]. Этот шорткод по умолчанию выведет 5 последних записей.

Но если мы добавим параметр count, тогда мы сможем управлять количеством записей. Делается это ват так [new_recent_posts count="10"]. И тогда вывод будет уже из 10 саписей.

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

.content_newpost {
  position: relative;
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  padding-bottom: 0.5rem;
  align-items: center;
}
.content_newpost a.img_newpost {
  overflow: hidden;
  position: relative;
  width: calc(100% * 1 / 3.001);
  line-height: 0;
}

И для полного счастья, чтобы вывести шорткод в теле файла/шаблона используйте такой код:

<?php echo do_shortcode('[new_recent_posts]'); ?>

Старый способ

Подключить поддержку PHP в сайдбаре.

После переходим во вкладку «Внешний вид-Виджеты». Добавьте текстовый виджет, а в поле ввода вставьте код:

<div class="wrap_newpost">
   <?php $the_query = new WP_Query('showposts=5'); ?>
   <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
   <div class="content_newpost">
      <a class="img_newpost" href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post->ID, 'thumbnail'); ?></a>
      <a class="title_newpost" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?>        </a>
   </div>
   <?php endwhile; ?>
   <?php wp_reset_query(); ?>
</div>

Сохраняем изменения и открываем файл style.css, и в конце добавьте стили:

.content_newpost {
  position: relative;
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  padding-bottom: 0.5rem;
  align-items: center;
}
.content_newpost a.img_newpost {
  overflow: hidden;
  position: relative;
  width: calc(100% * 1 / 3.001);
  line-height: 0;
}

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

36 комментариев
    1. WordSmall, не знал что так можно очистить кэш ctrl+f5 но все равно ноль все как есть оно даже не двигается при изменении кода. Как стояла так и стоит

      1. Алексей, ВСЕ Заработало Спасибо Огромное

  1. Это уже не смешно! Я только что зашел на ваш сайт и все нормально отображается

    1. WordSmall, Да я написал вам Спасибо огромное. Что заело обновлял, обновлял и не чего а потом раз и все, теперь все без проблем и меняется и обновляется.

  2. Подскажите пожалуйста, как отредактировать у себя на сайте эти вот элементы?

    1. В каждой теме они выводятся по-разному. Смотрите исходный код и, исходя из него, меняйте так как вам нужно.

  3. От души спасибо! От себя добавил дату публикации и поигрался с css, получилось лучше, чем с плагинами!

Оставить ответ

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