Để cho blog hay website của bạn trở nên sống động hơn Silder là một chức năng rất hay. Trong WordPress hiện nay có nhiều Plugin hỗ trợ tạo Slider. Tuy nhiên một nhược điểm là code trong một số đó khá cồng kềnh khiến cho tốc độ càng trở nên chậm chạp.

Cách tạo Slider/Carousel bài viết trong WordPress

Trước tiên bạn cần nhúng các file của Bootstrap vào file header.php

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Bước 1: Chèn đoạn chức năng trong file functions.php

function latestpost_news() {
ob_start();
$args = array(
'post_type' => 'post',
'posts_per_page' => '5',
//'category_name' => 'tin-tuc',
'order' => 'desc',
'suppress_filters' => 0,
);
$query = new WP_Query( $args );
echo '<div class="carousel-inner">';
if ( $query->have_posts() ) :
$dem = 0;
while ( $query->have_posts() ) : $query->the_post();
$dem ++;
if($dem == 1):
echo '<div class="carousel-item active">';
echo '<a href="'%20.%20get_permalink()%20.%20'">'.get_the_post_thumbnail().'</a>';
echo '<div class="carousel-caption">';
echo '<a href="'%20.%20get_permalink()%20.%20'">'.get_the_title().'</a><br/>';
echo '</div>';
echo '</div>';
endif;

echo '<div class="carousel-item">';
echo '<a href="'%20.%20get_permalink()%20.%20'">'.get_the_post_thumbnail().'</a>';
echo '<div class="carousel-caption">';
echo '<a href="'%20.%20get_permalink()%20.%20'">'.get_the_title().'</a><br/>';
echo '</div>';
echo '</div>';

endwhile;
echo '</div>';
wp_reset_postdata();
$output = ob_get_clean();
return $output;
endif;
}
add_shortcode( 'latestpost', 'latestpost_news' );

Bước 2: Vào file index.php chèn một đoạn mã sau vào

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<?php echo do_shortcode('[latestpost]');?>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

Kết quả

Bootstrap là một thư viện tuyệt vời sử dụng để làm Carousels/ Slider post ở trong mã nguồn WordPress. Với hướng dẫn trên bạn sẽ trang trí để blog của mình trông tuyệt vời hơn rồi đấy.