Hướng dẫn Tạo shortcode bài viết liên quan cùng danh mục cho post (bài viết)
Khi bài viết được xuất bản, WordPress sẽ tự động thay thế shortcode này bằng danh sách các bài viết liên quan theo cùng một danh mục với bài viết hiện tại.
Thêm mã sau vào functions.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 48 49 50 51 52 53 54 55 56 57 58 |
// Code tạo shortcode bài viết liên quan cho Webdy function webdy_related_post($content) { if(is_singular('post')) { global $post; ob_start(); $categories = get_the_category($post->ID); if ($categories) { $category_ids = array(); foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id; $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() ) {?> <div class="relatedcat"> <div class="row related-post"> <?php while ($my_query->have_posts()):$my_query->the_post(); ?> <div class="col large-4"> <a href="<?php echo get_the_permalink(); ?>" title="<?php echo get_the_title(); ?>"> <div class="feature"> <div class="image" style="background-image:url(<?php echo get_the_post_thumbnail_url();?>);"></div> </div> </a> <div class="related-title post-title"> <a href="<?php echo get_the_permalink(); ?>" title="<?php echo get_the_title(); ?>"><?php echo get_the_title(); ?></a> </div> <div class='cat-label'> <?php $post = get_post(); $cats = array(); foreach (get_the_category($post_id) as $c) { $cat = get_category($c); array_push($cats, $cat->name); } if (sizeOf($cats) > 0) { $post_categories = implode(', ', $cats); } echo $post_categories; ?> </div> </div> <?php endwhile; ?> </div> </div> <?php } // end if has post } // end if $categories $related_post = ob_get_contents(); ob_end_clean(); return $content.$related_post; } //end if is single post else return $content; } add_shortcode('webdy_related_post', 'webdy_related_post'); |
|
1 |
[webdy_related_post] |
Thêm CSS vào WordPress:
- Cách 1: Thêm CSS vào style.css của theme.
- Truy cập Giao diện > Chỉnh sửa mã > style.css và dán mã vào cuối tệp.
- Cách 2: Thêm CSS vào Tuỳ chỉnh > CSS bổ sung.
- Truy cập Giao diện > Tuỳ chỉnh > CSS bổ sung và dán mã CSS vào đó. Sau đó nhấn Lưu thay đổi.
|
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 |
/* Style cho khung container bài viết liên quan */ .relatedcat { margin-top: 40px; padding: 20px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; } /* Cấu trúc các bài viết liên quan */ .related-post { display: flex; flex-wrap: wrap; justify-content: space-between; } /* Style cho mỗi bài viết liên quan */ .related-post .col { flex: 1 1 calc(33.333% - 20px); /* 3 bài viết mỗi hàng, có khoảng cách giữa các bài */ margin-bottom: 20px; } /* Style cho hình ảnh của bài viết liên quan */ .related-post .col .image { background-size: cover; background-position: center; height: 200px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Hiệu ứng hover cho hình ảnh */ .related-post .col .image:hover { transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } /* Style cho tiêu đề bài viết */ .related-post .related-title { margin-top: 10px; font-size: 16px; font-weight: bold; color: #333; text-align: center; } .related-post .related-title a { text-decoration: none; color: #333; transition: color 0.3s ease; } /* Hiệu ứng hover cho tiêu đề bài viết */ .related-post .related-title a:hover { color: #0073e6; } /* Style cho nhãn danh mục (category) */ .related-post .cat-label { font-size: 14px; color: #777; text-align: center; margin-top: 5px; } /* Các bài viết liên quan cho màn hình nhỏ hơn (Responsive Design) */ @media (max-width: 768px) { .related-post .col { flex: 1 1 calc(50% - 20px); /* 2 bài viết mỗi hàng */ } } @media (max-width: 480px) { .related-post .col { flex: 1 1 100%; /* 1 bài viết mỗi hàng */ } } |
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:
- Công cụ trực tuyến kiểm tra tốc độ website tốt nhất
- Phân biệt web code tay và web dùng WordPress (WP)
- Hướng dẫn code function Tạo mật khẩu (password) cho bài viết (post) để xem tiếp
- Floors by Nature – Thương hiệu sàn gỗ nội thất Australia
- 28 tiêu chí SEO Onpage quan trọng nhất được Google công nhận hoặc khuyến nghị
