Tạo slider bài viết liên quan đẹp cho website wordpess sử dụng theme Flatsome

1889 lượt xem
Đăng vào bởi Lê Văn Thiện
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Hôm nay, mình tiếp tục chia sẻ tới các bạn cách tạo slider bài viết liên qua đẹp cho website wordpress sử dụng theme Flatsome nhé

Giuseart.com---Tạo-slider-bài-viết-liên-quan
Giuseart.com – Tạo slider bài viết liên quan cho website sử dụng theme Flatsome

Bước 1: Copy code tạo slider bài viết liên quan vào theme

Các bạn vào Giao diện – Sửa (theme file editor) – theme Flatsome – Template-part/post/content-single.php. Chèn đoạn code sau vào vị trí ngay phía trên code gọi author box.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?php
/*
* Code hiển thị bài viết liên quan trong cùng 1 category
*/
$categories = get_the_category(get_the_ID());
if ($categories) {
    echo '<div class="bai-viet-lien-quan">';
    $category_ids = array();
    foreach ($categories as $individual_category) {
        $category_ids[] = $individual_category->term_id;
    }
 
    $args = array(
        'category__in' => $category_ids,
        'post__not_in' => array(get_the_ID()),
        'posts_per_page' => 16, // Số bài viết được hiển thị
    );
 
    $my_query = new WP_Query($args);
    if ($my_query->have_posts()) :
        echo '<h3>Bài viết cùng chủ đề:</h3> <div class="row list-post large-columns-3 medium-columns-1 small-columns-1 row-small slider row-slider slider-nav-simple slider-nav-outside slider-nav-push is-draggable flickity-enabled"
             data-flickity-options=\'{"imagesLoaded": true, "groupCells": "100%", "dragThreshold": 5, "cellAlign": "left", "wrapAround": true, "prevNextButtons": true, "percentPosition": true, "pageDots": false, "rightToLeft": false, "autoPlay": false}\'>';    
 
        while ($my_query->have_posts()) : $my_query->the_post();
            ?>
            <div class="col post-item" style="position: relative;">
                <div class="col-inner">
                    <div class="box box-normal box-text-bottom box-blog-post has-hover">
                        <div class="box-image">
                            <div class="image-zoom image-overlay-add image-cover" style="padding-top:65%;">
                                <a href="<?php the_permalink(); ?>">
                                    <?php the_post_thumbnail('full'); ?>
                                </a>
                                <div class="overlay" style="background-color: rgba(0, 0, 0, 0.262)"></div>
                            </div>
                        </div>
                        <div class="box-text text-left">
                            <div class="box-text-inner blog-post-inner">
                                <h5 class="post-title is-large">
                                    <a href="<?php the_permalink(); ?>">
                                        <?php the_title(); ?>
                                    </a>
                                </h5>
                                <div class="post-meta is-small op-8"><?php echo get_the_date(); ?></div>
                                <p class="from_the_blog_excerpt"><?php echo get_the_excerpt(); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php
        endwhile;
 
        echo '   </div>';
    endif;
 
    wp_reset_postdata();
    echo '</div>';
}
?>

Sau đó, các bạn vào xem một bài viết bất kỳ xem có sự thay đổi chưa.

Bước 2: Trang trí với CSS

Các bạn copy toàn bộ code CSS này vào phần Custom CSS nhé. Giao diện – Tùy biến – Style – Custom CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.bai-viet-lien-quan h3 {
    font-size: 25px;
    margin-bottom: 0;
    font-weight: 500;
}.list-post .post-item .box-image {
    border-radius: 10px;
}.bai-viet-lien-quan .list-post .post-item .box-text {
    padding-bottom: 15px;padding: 15px;
    border-radius: 0 0 10px 10px;
}.list-post .post-item .post-title {
    margin-bottom: 7px;
}.list-post .post-item .post-title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    word-break: break-word;
    -webkit-line-clamp: 2;
    height: calc(21px* 2);
    line-height: 21px;
    color: #424242;
    font-weight: 500;
    font-size: 18px;
}.list-post .post-item .post-meta {
    color: #007bff;
    opacity: 1;
    font-size: 14px;
}.bai-viet-lien-quan .post-item .from_the_blog_excerpt {
    font-size: 15px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    word-break: break-word;
    -webkit-line-clamp: 2;
    line-height: 20px;
}

Bước 3: Lưu lại và xem thành quả

Các bạn lưu lại và xem thành quả có giống như mình không nha

Giuseart.com---Tạo-slider-bài-viết-liên-quan
Giuseart.com—Tạo-slider-bài-viết-liên-quan
5/5 - (1 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebook và zalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết cùng chuyên mục:

Bài viết mới cập nhật:

2 bình luận về “Tạo slider bài viết liên quan đẹp cho website wordpess sử dụng theme Flatsome”

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *