Trong số các bài gần đây của tôi, hướng dẫn thêm bài viết liên quan không dùng đến plugin nào. Và bài viết này là viết về cách hiển thị bài viết liên quan trong genesis dạng lưới bao gồm tiêu đề, hình ảnh, và bao quay là những đường viền hiệu ứng nhòe. Hiển thị bài viết liên quan vào genesis không chỉ trông tuyệt vời mà nó còn hỗ trợ hiển thị cực đẹp trên điện thoại di động.
Trong bài viết này cơ bản chúng ta sẽ sử dụng các đoạn mã thiệt lập vào file functions.php và một số cú pháp CSS để thiết kế cho nó hài hòa với giao diện của bạn.
Lưu ý rằng bạn viết này tôi thực hiện cho phép số bài viết hiển thị theo kiểu 3 bài, bạn cũng có thể tùy chỉnh sao cho hợp với mục đích của mình.
Và dưới đây là mẫu demo tôi đã thực hiện trên website của mình, bạn thấy sẽ có khác hơn nhiều với các hiển thị thông thường mà tôi đã hướng dẫn ở những bài viết trước.
Live demo: Click để xem
Sau khi thực hiện bài hướng dẫn
Hướng dẫn tùy biến bài viết liên quan theo phong cách dạng lưới trong genesis
Bước 1: Thêm chức năng vào functions.php
Copy toàn bộ code dán vào functions.php của bạn.
//* Populate Related Posts in Genesis based on Category
add_action( 'genesis_after_entry_content', 'sk_related_posts', 12 );
function sk_related_posts() { global $do_not_duplicate;
if ( ! is_singular ( 'post' ) ) { return; }
$count = 0; $related = ''; $do_not_duplicate = array(); $cats = wp_get_post_categories( get_the_ID() );
// If we have some categories and less than 5 posts, run the cat query.
if ( $cats && $count <= 4 ) { $query = sk_related_cat_query( $cats, $count ); $related .= $query['related']; $count = $query['count'];}
// End here if we don't have any related posts.
if ( ! $related ) { return; }
// Display the related posts section.
echo '<div class="related-posts">';
echo '<h3 class="related-title">Related Posts</h3>';
echo '<div class="related-posts-list" data-columns>' . $related . '</div>';
echo '</div>';
}
function sk_related_cat_query( $cats, $count ) {
global $do_not_duplicate;
if ( ! $cats ) {
return;
}
$postIDs = array_merge( array( get_the_ID() ), $do_not_duplicate );
$catIDs = array();
foreach ( $cats as $cat ) {
if ( 3 == $cat ) {
continue;
}
$catIDs[] = $cat;
}
$showposts = 3 - $count;
$tax_query = array(
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => array( 'post-format-link', 'post-format-status', 'post-format-aside', 'post-format-quote' ),
'operator' => 'NOT IN'
)
);
$args = array(
'category__in' => $catIDs, 'post__not_in' => $postIDs, 'showposts' => $showposts, 'ignore_sticky_posts' => 1, 'orderby' => 'rand', 'tax_query' => $tax_query,
);
$related = '';
$cat_query = new WP_Query( $args );
if ( $cat_query->have_posts() ) {
while ( $cat_query->have_posts() ) {
$cat_query->the_post();
$count++;
/*$title = genesis_truncate_phrase( get_the_title(), 35 );*/
$title = get_the_title();
$related .= '<div class="one-third">';
$related .= '<a class="related-image" href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to ' . $title . '">' . genesis_get_image( array( 'size' => 'related' ) ) . '</a>';
$related .= '<div class="one-copy">';
$related .= '<a class="related-post-title" href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to ' . $title . '">' . $title . '</a>';
$related .= '</div>';
$related .= '</div>';
}
}
wp_reset_postdata();
$output = array( 'related' => $related, 'count' => $count );
return $output;
}
Bước 2: Thiết kế CSS cho phù hợp với chủ đề của bạn.
Sao chép và dán vào file style.css
.related-posts {
border-top: 1px solid #ccc;
padding-top: 40px;
}
.related-posts-list .one-third {
border: 1px solid #dde5ea;
border-radius: 5px;
box-sizing: border-box;
box-shadow: 2px 1px 10px 0 rgba(0, 0, 0, .1);
}
.related-posts-list .one-third:first-child {
margin-left: 0;
}
a.related-post-title {
line-height: 27px;
color: #333;
font-size: 18px;
}
.one-copy {
padding: 1.5rem 1.25rem 1.75rem;
}
Lưu lại mọi cài đăt. Và quay lại bài viết để kiểm tra kết quả.
Lưu ý rằng bạn có thể phải thay đổi một vài điều nếu bạn muốn hiển thị các bài viết liên quan ở vị trí khác, thay đổi số lượng bài đăng có liên quan hoặc sử dụng các lớp cột Genesis khác. Chỉ cần tìm kiếm các phần sau và thay đổi nếu cần.
Add_action (‘genesis_after_entry_content’, ‘sk_related_posts’, 12) : Thay đổi genesis_after_entry_content sang móc ưa thích của bạn. Sử dụng tài nguyên này để chọn móc trong Genesis.
$ Showposts = 3 – $ count : Thay đổi chữ số để hiển thị số bài viết bạn muốn hiển thị.
$ Related. = ” : Thay đổi một phần ba và sử dụng bất kỳ lớp cột nào khác mà bạn chọn. Kiểm tra các lớp Cột Genesis khác nhau ở đây .
Nếu bạn có bất kỳ câu hỏi nào hãy cho tôi biết ngay nhé.
