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();
}}

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).

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

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

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!

17
bình luận. Để lại câu hỏi & nhận trả lời nhanh qua email.

avatar
6 Comment threads
11 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
SojuHiếu LêtuấnThuần Te TuaSơn Recent comment authors
newest oldest most voted
Soju
Guest
Soju

sidebar-featured nó có tác dụng gì cho cái related post vậy bác thuần. e thấy trong code có gọi nó ra đâu nhỉ

Hiếu Lê
Guest

Chỉnh kích thước Image sao không được anh, cư vẫn giữ nguyên kích thước cũ 🙁

Tuấn
Guest

đã làm thử và thành công , cám ơn bác thuần nhiều nha ,bài viết rất hữu ích

tuấn
Guest

làm được rồi bác thuần ơi , vui qúa

Hai lúa
Guest
Hai lúa

Hi, tôi muốn code link liên quan kg hình ảnh theo tag, tôi phải sửa thế nào?
thank.

Thái Tài
Guest

Mục bài viết liên quan mà site bạn đang sử dụng là code hay là dùng plugin vậy, nhìn cũng ok quá