Cách tạo bài viết liên quan có hình ảnh cho theme Genesis không Plugin

[Thủ thuật WordPress] Tạo bài viết liên quan có hình ảnh cho theme Genesis không Plugin – Có thể nói bài viết liên quan (Related Post) là một chức năng rất quan trọng cho trang Web nó giúp trang Web giữ chân độc giả từ đó giúp cho số lượng pageviews trên trang web tăng lên đáng kể đây là một trong các yếu tố quyết định đến thứ hạng trang web ngoài ra nó còn tăng tính thẩm mỹ cho trang Web, vì thế đây là một tính năng rất quan trọng nếu bạn chưa tích hợp thì hãy bắt tay tích hợp ngay vào trang Web, nếu bạn đang sử dụng WordPress thì việc tích hợp Related Post rất đơn giản bạn có thể sử dụng Plugin hoặc Code.

Trong bài viết trước đây về thủ thuật WordPress mình có hướng dẫn các bạn cách hiển thị bài viết liên quan theo ý thích bằng cách sử dụng Plugin giúp bạn có thể dễ dàng tích hợp bài viết liên quan trong WordPress tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tạo bài viết liên quan có hình ảnh cho theme Genesis không Plugin đơn giản nhất.

Tạo bài viết liên quan có hình ảnh cho theme Genesis

Thông thường một số giao diện hiện nay được tích hợp sẵn luôn tính năng Related Post tuy nhiên đối có một số giao diện không có điển hình là theme Genesis, nếu bạn cảm thấy việc sử dụng Plugin không tốt thì bạn có thể sử dụng Code để thêm tính năng bài viết liên quan trong theme Genesis, hãy cùng blog thủ thuật tìm hiểu cách tạo bài viết liên quan có hình ảnh cho theme Genesis không Plugin.

Đầu tiên bạn hãy truy cập vào tập tin Functions.php của giao diện đang sử dụng (nếu bạn dùng theme Genesis thì chắc chắn bạn sẽ có một giao diện con (child theme) hãy truy cập vào tập tin Functions.php của giao diện con) bằng cách truy cập vào trang quản lý WordPress > Vào Giao diện > Kích chọn Sửa (bạn có thể tham khảo bài viết sửa giao diện, plugin WordPress không cần FTP để nắm rõ hơn cách chỉnh sửa các tập tin của giao diện).

Tùy chỉnh Code

Sau khi truy cập vào tập tin Functions.php hãy sao chép 2 đoạn Code bên dưới

Đoạn mã thứ nhất

add_image_size('sidebar-featured', 100, 100, TRUE);

Đoạn mã thứ hai

//for XHTML themes
add_action( 'genesis_after_post_content', 'child_related_posts' );
//for HTML5 themes
add_action( 'genesis_after_entry_content', 'child_related_posts' );
/**
* Outputs related posts with thumbnail
*
* @author
* @url http://mygenesisthemes.com/related-posts-genesis
* @global object $post
*/
function child_related_posts() {
if ( is_single ( ) ) {
global $post;
$count = 0;
$postIDs = array( $post->ID );
$related = '';
$tags = wp_get_post_tags( $post->ID );
$cats = wp_get_post_categories( $post->ID );
if ( $tags ) {
foreach ( $tags as $tag ) {
$tagID[] = $tag->term_id;
}
$args = array(
'tag__in' => $tagID,
'post__not_in' => $postIDs,
'showposts' => 6,
'ignore_sticky_posts' => 1,
'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'
)));
$tag_query = new WP_Query( $args );
if ( $tag_query->have_posts() ) {
while ( $tag_query->have_posts() ) {
$tag_query->the_post();
$img = genesis_get_image() ? genesis_get_image( array( 'size' => 'related' ) ) : '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/related.png" alt="' . get_the_title() . '" />';
$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . $img . get_the_title() . '</a></li>';
$postIDs[] = $post->ID;
$count++;
}}}
if ( $count <= 4 ) {
$catIDs = array( );
foreach ( $cats as $cat ) {
if ( 3 == $cat )
continue;
$catIDs[] = $cat;
}
$showposts = 5 - $count;
$args = array(
'category__in' => $catIDs,
'post__not_in' => $postIDs,
'showposts' => $showposts,
'ignore_sticky_posts' => 1,
'orderby' => 'rand',
'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'
)));
$cat_query = new WP_Query( $args );
if ( $cat_query->have_posts() ) {
while ( $cat_query->have_posts() ) {
$cat_query->the_post();
$img = genesis_get_image() ? genesis_get_image( array( 'size' => 'related' ) ) : '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/related.png" alt="' . get_the_title() . '" />';
$related .= '<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . $img . get_the_title() . '</a></li>';
}}}
if ( $related ) {
printf( '<div class="related-posts"><h3 class="related-title">Related Posts</h3><ul class="related-list">%s</ul></div>', $related );
}
wp_reset_query();
}}

và dán vào trong thẻ đóng <?php (bạn nên dán ở cuối) là được!

Tùy biến Code

Để thay đổi số lượng bài viết hiển thị bạn hãy thay đổi câu lệnh

'showposts' => 6,

Thay số 6 thành số bài viết bạn muốn hiển thị tương ứng là được, sau đó hãy lưu lại và tận hưởng thành quả tuy nhiên nó sẽ hiển thị không được đẹp cho lắm vì thế bạn cần phải tùy biến thêm bằng cách sao chép đoạn Code bên dưới và dán vào cuối tập tin Style.css của theme là được.

/************ Related Posts *************/
.related-posts {
    overflow: hidden;
    margin: 0 0 10px;
}
.related-list li {
  float: left;
  list-style-type: none;
  margin: 0 10px 0 0;
  text-align: center;
  width: 105px;
}
.related-list img {
 display: block;
  margin: 0 auto;
  padding: 5px;
}

Sau khi thực hiện xong hãy lưu lại và ra ngoài trang chủ kích chọn một bài viết để xem kết quả (sau khi thực hiện xong bạn sẽ thấy kết quả như thế này).

Quá đơn giản để bạn có thể tạo bài viết liên quan có hình ảnh cho theme Genesis không sử dụng Plugin phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!