Как вывести последние записи 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. Здравствуйте. Спасибо вам, отлично всё работает без всяких плагинов. Вопрос возник, как сделать чтоб выводились даты записей?

    1. Добрый вечер. В конце перед тегом <br /> добавьте следующий код:

      <?php echo get_the_date('Y-m-d'); ?>

      1. Оберните функцию даты в див или спан с определенным классом. Затем задайте любые стили, в том числе, цвет.

  2. У меня не получается убрать точки от списка — они черного цвета и отображаются справа от списка, портят всю картину(

  3. У меня не получается картинки уменьшить они не уменьшаются и точки от списка убрать тоже не фига. Что то не так. Не правильный код.

    1. Прежде чем заявлять «неправильный код», потрудились бы прочитать комментарии выше! Если размер картинок не меняется, то добавьте !important.

      1. WordSmall, Не хотел обидеть, Но комментарий я прочел и добавил код ul.newpost li {

        list-style:none;} этот код !important. добавить как я понял напротив где изменяется размер миниатюр.Хотел показать скриншот что получилось но не знаю как и куда его прикрепить.

  4. Да, вы все правильно поняли. По большой части, оформление идет от самой темы, вам нужно лишь чуть подредактировать. Скриншот, просто вставьте ссылку.

    1. Не, скрина там нет. Да, в любом случае, !important должен исправить эту проблему.

      1. WordSmall, Да как нет ссылка в браузер вставьте и по центру там про кошек.

      2. Да, теперь увидел. Так попробуйте импортант. Или давайте ссылку на сайт, гляну что там.

  5. Не получается, нечего не редактируется, все равно картинка не меняется заголовки у картинок вверху, точки так и стоят. Ссылку кинул она на модерации.

  6. Просто ваша тема добавляет чуток своих стилей. Импортант работает! Насчет обтикания, то измените эти стили:

    ul.newpost .title { clear: none; float: left; padding: 5px 5px 5px 0; width: 135px; }

    А миниатюру сделайте хотябы 40 px

    1. WordSmall, Да нет вообще не чего не меняется а миниатюру я разную делал она тоже не меняется не больше не меньше.

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

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