Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 7
Ở phần 7 mình sẽ hướng dẫn về file home.php, trong đó có có carousel slider bootstrap, lấy bài viết theo từng danh mục.
Bạn vào backend WP Bài viết và chọn những bài viết nổi bật để chạy ở slider
Tất cả bài viết > Sửa nhanh > Dán bài này lên đầu
Tạo file home.php
- wp-content/themes/logicviet/home.php
Phần này mình sẽ hướng dẫn các bạn cách lấy bài viết theo từng danh mục,
$args = [
'posts_per_page' => 1, // Số lượng bài
'post__in' => get_option( 'sticky_posts' ) // Lấy bài viết được đánh dấu sticky
];
$the_query = new WP_Query($args); // Gọi hàm WP_Query
Bạn lưu ý rằng khi chúng ta sử dụng WP_Query() thì trước hàm have_posts() và hàm the_post() phải có $the_query->
$the_query->have_posts();
$the_query->the_post();
Sử dụng hàm wp_trim_words để cắt chuỗi tiêu đề, ví dụ ở đây cắt 12 chữ
<?php echo wp_trim_words( get_the_title() , 12 ) ?>
Hàm get_the_title() sẽ lấy tiêu đề bài viết.
Vì carousel slider của bootstrap cần slide đầu tiên phải có class .active thế nên ta sử dụng
$the_query->current_post // Lấy key của bài viết hiện tại nếu là 1 thì gán class active
Hàm wp_reset_postdata() dùng để reset các giá trị trong WP_Query(), cần thiết nếu trong 1 trang sử dụng nhiều WP_Query().
Code carousel slider
<?php
$args = [
'posts_per_page' => 1,
'post__in' => get_option( 'sticky_posts' )
];
$the_query = new WP_Query($args);
?>
<div id="demo" class="carousel slide my-4" data-ride="carousel">
<div class="carousel-inner">
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="carousel-item <?php echo $the_query->current_post == 1 ? 'active' : '' ?>">
<?php the_post_thumbnail('blog-thumbnail',['class'=>'fuild-img']) ?>
<div class="carousel-caption">
<h3><a href="<?php the_permalink() ?>"><?php echo wp_trim_words( get_the_title() , 12 ) ?></a></h3>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<?php wp_reset_postdata() ?>
Kết quả:
Kế tiếp mình sẽ lấy bài viết thuộc danh mục Xã Hội có slug = 'xa-hoi'
<?php
$args = [
'category_name' => 'xa-hoi', // Slug của danh mục. Bạn có thể thêm danh mục nữa cách nhau bởi dấu,
'posts_per_page' => 6, // Số lượng bài viết
];
$the_query = new WP_Query($args);
?>
<div class="card my-4">
<h5 class="card-header">
Xã hội
</h5>
<div class="card-body">
<div class="row">
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php get_template_part( 'template-parts/content-home', get_post_format() ); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
<?php wp_reset_postdata() ?>
Tạo file content-home.php trong template-parts có nội dung như sau:
<div class="col-sm-6">
<div class="media mb-3">
<?php the_post_thumbnail('post-small',['class'=>'mr-3 post-small img-thumbnail']) ?>
<div class="media-body">
<h6 class="mt-0"><a href="<?php the_permalink() ?>"><?php echo wp_trim_words( get_the_title() , 12 ) ?></a></h6>
<small><?php echo get_the_date() ?></small>
</div>
</div>
</div>
Kết quả:
Chúc các bạn thành công. Hẹn các bạn ở phần 8
0 Comments
no comments!
Bài viết liên quan
![Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 10](https://logicviet.com/images/posts/59413897.PNG)
![Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 3](https://logicviet.com/images/posts/42289365.PNG)
Theo Dõi Trang
- Bài Viết Mới
- Tags
Các cách xóa và giảm dung lượng ổ C win 10 hiệu quả nhất
1 năm trước
Ổ cứng của máy tính, laptop bị đầy sau một thời gian dài sử dụng là vấn đề thường gặp của nhiều người. Nếu dung lượng ổ cứng quá lớn có thể ảnh hưởng đến tốc độ xử lý của nhiều ứng dụng và hoạt động của bạn. Vì vậy, việc quản lý, dọn dẹp ổ cứng nói chung và ổ đĩa C nói riêng nên thực hiện thường xuyên
Các website chuyển văn bản thành giọng nói online tốt nhất
1 năm trước
Bạn đang tìm kiếm các trang web giúp bạn chuyển văn bản thành giọng nói online trên máy tính một cách chính xác và nhanh chóng nhất. Bài viết dưới đây sẽ tổng hợp cho các bạn TOP 8 trang web chuyển văn bản thành giọng nói online tốt nhất.
UTM Tracking là gì? Hướng dẫn tạo UTM vào quản lý hiệu quả Marketing
1 năm trước
UTM (viết tắt cho Urchin tracking module), hay UTM code là một đoạn mã đơn giản được gắn vào các đường dẫn URL tùy chỉnh của bạn, giúp theo dõi các nguồn, phương tiện trung gian, hoặc tên các chiến dịch của bạn.
Cách sử dụng hàm Query trong Google Sheet
1 năm trước
Bạn làm việc với lượng lớn dữ liệu trên Google Sheet, việc lọc và tìm kiếm dữ liệu theo cách thủ công sẽ tốn rất nhiều thời gian. Hàm QUERY trong Google Sheet giúp bạn có thể tra cứu và lọc dữ liệu theo bất kỳ định dạng nào bạn muốn. Cùng tìm hiểu cách dùng hàm QUERY nhé!
Cách tính lãi suất vay mua nhà và số tiền phải trả hàng tháng
1 năm trước
Hiện nay, hầu hết những người có thu nhập thấp hoặc trung bình sẽ lựa chọn phương án vay vốn ngân hàng để mua nhà. Tuy nhiên, bạn có biết để có thể làm thủ tục vay vốn người mua cần đáp ứng được những điều kiện gì? Các mức lãi suất? Số tiền trả hàng tháng?
Hướng dẫn cách sử dụng và cài đặt Google Tag Manager
1 năm trước
Trình quản lý thẻ của Google – Google Tag Manager là một công cụ được thiết lập để giải quyết các vấn đề của doanh nghiệp giữa các phòng ban, theo dõi chiến dịch marketing, quản lý thẻ JavaScript và HTML, chủ động cập nhật website,…