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é
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
