Создаем блоки последних новостей из каждой рубрики с помощью Bootstrap 4

В этом уроке я вам покажу из своего личного опыта как создать вид такого блока вывода последний записи из каждой рубрики с помощью системы Bootstrap 4

Вот сам код его вставляем в шаблон либо на главной либо еще где нибудь

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="col-lg-3 "style="padding: 20px 20px 30px 0px; position: relative;">  // создаем блок указываем отступ вокруг
            <div class="card" > // создаем карточку, и внутри размещаем картинку, текст и кнопку
                <?php
                global $post;
                $args = array( 'numberposts' => 1 , 'category' => 7, 'orderby' => 'date'); // numberposts' => 1 тут указываем количество анонсов из рубрики.  'category' => 7 - тут указываем какую рубрику вывести на страницу
                $myposts = get_posts( $args );
                foreach( $myposts as $post ){ setup_postdata($post);
                ?>
                <?php the_post_thumbnail('thumbnail'); ?> // показываем картинку
                <div class="card-body">
                <h5 class="card-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5> // Загаловок поста и делаем его кликабальным на сам пост
                <p class="card-text">
               <?php
                echo trim_characters(100, '...');  // здесь указываем сколько будет кол-во символов в тексте
            ?></p>
                <a href="<?php the_permalink(); ?>" class="btn btn-outline-secondary btn-sm btn-block">Читать</a> устанавливаем вид кнопки "Читать" из Bootstrap 4       
                 </div>
                <?php
                }
                wp_reset_postdata();
                ?>
            </div>
          </div>

Оставить отзыв

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