Hướng dẫn tạo Slider/ Carousel bài viết trong WordPress

Để 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="' . get_permalink() . '">'.get_the_post_thumbnail().'</a>';
echo '<div class="carousel-caption">';
echo '<a href="' . get_permalink() . '">'.get_the_title().'</a><br/>';
echo '</div>';
echo '</div>';
endif;

echo '<div class="carousel-item">';
echo '<a href="' . get_permalink() . '">'.get_the_post_thumbnail().'</a>';
echo '<div class="carousel-caption">';
echo '<a href="' . get_permalink() . '">'.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ả

Tạo Silder bài viết WordPress

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.

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *