В 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; }
В принципе все, но только можете стили отредактировать под себя, чтобы подходило под дизайн вашего сайта.
Очистите кэш браузера ctrl+f5
WordSmall, не знал что так можно очистить кэш ctrl+f5 но все равно ноль все как есть оно даже не двигается при изменении кода. Как стояла так и стоит
Алексей, ВСЕ Заработало Спасибо Огромное
Это уже не смешно! Я только что зашел на ваш сайт и все нормально отображается
WordSmall, Да я написал вам Спасибо огромное. Что заело обновлял, обновлял и не чего а потом раз и все, теперь все без проблем и меняется и обновляется.
Подскажите пожалуйста, как отредактировать у себя на сайте эти вот элементы?
Алексей, Как добавить иконки как у вас в блоге ?
Иконки заданы через CSS с помощью шрифта wordsmall.ru/grafika-i-di... -primenenie.html
В каждой теме они выводятся по-разному. Смотрите исходный код и, исходя из него, меняйте так как вам нужно.
От души спасибо! От себя добавил дату публикации и поигрался с css, получилось лучше, чем с плагинами!
Рад, что кому-то это приносит пользу)