Hướng dẫn code function Thêm bài viết liên quan tự động dưới mỗi bài viết (post)
Dán code sau vào function.php
|
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 |
function webdy_related_post($content) { if(is_singular('post')) { global $post; ob_start(); $categories = get_the_category($post->ID); if ($categories) { $category_ids = array_map(function($category) { return $category->term_id; }, $categories); $args = array( 'category__in' => $category_ids, 'post__not_in' => array($post->ID), 'posts_per_page' => 6, 'ignore_sticky_posts' => 1, ); $my_query = new WP_Query($args); if($my_query->have_posts()) { echo '<div class="relatedcat">'; echo '<h2>Bài viết liên quan</h2>'; // Thêm tiêu đề "Bài viết liên quan" echo '<div class="row related-post">'; while ($my_query->have_posts()) { $my_query->the_post(); $thumbnail = get_the_post_thumbnail_url() ?: 'path/to/default-image.jpg'; // Thay bằng ảnh mặc định nếu không có echo '<div class="col large-4">'; echo '<a href="' . get_the_permalink() . '" title="' . get_the_title() . '">'; echo '<div class="feature"><div class="image" style="background-image:url(' . esc_url($thumbnail) . ');"></div></div>'; echo '</a>'; echo '<div class="related-title post-title"><a href="' . get_the_permalink() . '" title="' . get_the_title() . '">' . get_the_title() . '</a></div>'; echo '<div class="cat-label">' . implode(', ', wp_list_pluck(get_the_category(), 'name')) . '</div>'; echo '</div>'; } echo '</div></div>'; } else { echo '<p>No related posts found.</p>'; } wp_reset_postdata(); } $related_post = ob_get_clean(); return $content . $related_post; } return $content; } add_shortcode('webdy_related_post', 'webdy_related_post'); |
Để hiển thị bài viết liên quan dưới mỗi bài viết, bạn cần chèn đoạn shortcode webdy_related_post vào tệp single.php trong theme WordPress của bạn
|
1 2 3 4 5 |
<?php if (function_exists('do_shortcode')) { echo do_shortcode('[webdy_related_post]'); } ?> |
CSS tí
|
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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/*CSS bai viet lien quan*/ /* Container chính */ .relatedcat { margin-top: 40px; padding: 20px; background-color: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* Tiêu đề phần bài viết liên quan */ .relatedcat h2 { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: center; text-transform: uppercase; } /* Layout dạng lưới */ .related-post { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; } /* Mỗi bài viết */ .related-post .col { flex: 0 1 calc(33.333% - 20px); /* 3 bài viết trên mỗi hàng */ max-width: calc(33.333% - 20px); background: #fff; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .related-post .col:hover { transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } /* Hình ảnh bài viết */ .related-post .feature .image { width: 100%; height: 180px; background-size: cover; background-position: center; } /* Tiêu đề bài viết */ .related-title { padding: 15px; text-align: center; } .related-title a { font-size: 16px; font-weight: bold; color: #333; text-decoration: none; transition: color 0.3s ease; } .related-title a:hover { color: #0073aa; /* Màu xanh khi hover */ } /* Danh mục bài viết */ .cat-label { font-size: 14px; text-align: center; color: #666; margin-bottom: 10px; font-style: italic; } /*--------*/ |
Quý khách cần tư vấn thiết kế web giá rẻ, vui lòng nhấn nút bên dưới:
Chào ! Bạn thấy nội dung này thế nào?
Xem thêm:
- Solar Top – Chọn điện mặt trời – Chọn Solar Top
- Floors by Nature – Thương hiệu sàn gỗ nội thất Australia
- SEO Từ Khóa: Làm Thế Nào Để Nhét Từ Khóa Vào Bài Viết Một Cách Tự Nhiên?
- Hướng dẫn code Function trang Kiểm tra Whois domain (tên miền) tại nhiều nhà đăng ký
- Phân biệt web code tay và web dùng WordPress (WP)
