Tạo bài viết liên quan cho wordpress không cần plugin

Như ta thường thấy, mỗi bài viết trong wordpess hay trong bất cứ mã nguồn nào cũng đều hiển thị một vài các bài viết gợi ý bên dưới. Mục đích là để người dùng tiếp cận được với nhiều nội dung hơn. Thông thường mục bài viết liên quan (related posts) sẽ được tích hợp sẵn trong themes bạn cài đặt. Tuy nhiên nếu bạn lỡ thích một theme nào đó vì gọn nhẹ, xinh xắn nhưng lại thiếu phần này thì sao.

Nếu bạn thích dọn sẵn sẽ có cả tá plugin trợ giúp việc này. Nhưng nếu là một người mê design thì sao ta ko tự code để tạo phong cách riêng. Đó là lý do vì sao hôm nay mình sẽ chia sẽ cho các bạn cách để tích hợp chức năng bài viết liên quan vào bài viết mà không cần dùng một plugin nào cả.

Bình thường, để code một chức năng nào đó thì sẽ có 3 phần chính: phần HTML, phần CSS và phần hàm chức năng. Dưới đây mình sẽ cung cấp sẵn các đoạn mã để mọi người chỉ cần copy/paste là xong.

1 Tạo hàm chức năng cho bài viết liên quan

Trước tiên chúng ta cần tạo hàm để lấy các bài viết cùng chuyên mục với bài viết đang xem.
Mở file functions.php của themes đang sử dụng, copy hết đoạn dưới vào.

/*  Related posts
/* ------------------------------------ */

	function canxem_related_posts() {
		wp_reset_postdata();
		global $post;

		// Define shared post arguments
		$args = array(
			'no_found_rows'			=> true,
			'update_post_meta_cache'	=> false,
			'update_post_term_cache'	=> false,
			'ignore_sticky_posts'		=> 1,
			'orderby'			=> 'rand',
			'post__not_in'			=> array($post->ID),
			'posts_per_page'		=> 5
		);
		// Related by categories

		$cats = get_post_meta($post->ID, 'related-cat', true);
			
			if ( !$cats ) {
				$cats = wp_get_post_categories($post->ID, array('fields'=>'ids'));
				$args['category__in'] = $cats;
			} else {
				$args['cat'] = $cats;
			}
				
		$query = !isset($break)?new WP_Query($args):new WP_Query;
		return $query;
	}

Dòng ‘posts_per_page’ => 5 có nghĩa là sẽ hiển thị 5 bài liên quan. Bạn muốn sửa thành số mấy tùy thích.

2 Tích hợp phần HTML

Để cho gọn gàng, chúng ta nên tạo 1 file php, file này là file template, cấu trúc hiển thị. Nó cũng có chức năng liên kết đến hàm đã tạo ở bước 1. Copy hết phần bên dưới quăng vào và lưu lại thành file php, ví dụ đặt tên related-posts.php. Việc tạo file có thể dùng notepad, notepad++ lưu lại rồi tải lên host hoặc tạo trực tiếp từ hosting đều được.

<?php $related = canxem_related_posts(); ?>
<?php if ( $related->have_posts() ): ?>
<h3 class="heading related-heading">
	<i class="far fa-life-ring fa-spin color-item1"></i><?php esc_html_e(' Bài viết liên quan','canxem'); ?>
</h3>
<div class="related-posts group">
	<?php while ( $related->have_posts() ) : $related->the_post(); ?>
	<article class="related-post">

	<div>
		<?php if ( has_post_thumbnail() ): ?>
    		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" aria-hidden="true" tabindex="-1">
      		<?php the_post_thumbnail( 'medium_large', [ 'class' => 'related-thumb' ] ); ?>
    		</a>
		<?php elseif ( get_theme_mod('placeholder') != 'off' ): ?><img class="related-thumb" src="<?php echo esc_url( 		get_template_directory_uri() ); ?>/img/thumb-medium.png" alt="<?php the_title_attribute(); ?>" />
  	<?php endif; ?>
	</div><!--/.post-thumbnail-->			
	<div class="related-inner">			
		<div class="related-title">
			<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
		</div><!--/.post-title-->
		<div class="related-excerpt">
			 <?php
        if( has_excerpt() ) {
          the_excerpt();
        } elseif ( strpos( $post->post_content, '<!--more-->' ) ) {
          the_content( 'Read more' );
        } else {
          the_excerpt();
        }
			?>
	</div>
	</div><!--/.related-inner-->

	</article>
	<!--/.related-->
	<?php endwhile; ?>
	<?php wp_reset_postdata(); ?>

</div><!--/.post-related-->
<?php endif; ?>
<?php wp_reset_postdata(); ?>

Chú ý hình thu nhỏ ở đây được định nghĩa bằng tên gọi: medium_large. Nếu muốn chúng ta có thể tùy biến hình thumbnail theo ý muốn bằng bài viết sau. Nếu không nó sẽ dùng hình mặc định của wordpress tạo ra khi bạn đăng bài viết mới.

Vào theme đang sử dụng > tìm và mở file single.php hoặc content-single.php tùy theme.

Copy dòng này vào vị trí bạn muốn hiển thị phần bài viết liên quan. Lưu ý dòng dưới thể hiện các file phải nằm cùng thư mục. Nếu khác thư mục phải sửa lại đường dẫn của file trong phần dấu ‘ ‘.

<?php get_template_part('related-posts') ?>

3 Viết CSS

Nếu 2 bước trên là bộ lòng, thì phần viết CSS này chính là bộ lông. Bạn có thể tùy ý biến tấu cách thể hiện các bài viết liên quan theo nhiều kiểu khác nhau. Theo list ngang, list dọc, theo grid,…

Dưới đây là đoạn css mẫu, theo kiểu của canxem.com. Mọi người có thể tham khảo.

/*--------------------------------------------------------------
# Related post
--------------------------------------------------------------*/
.related-post {position: relative; display:block; margin-top:20px; border:1px solid rgba(38, 50, 56, 0.3); padding: 20px 30px}
.related-thumb {border-radius: 5px; width:300px; margin-bottom:15px;}
.related-inner {margin-left:320px;position: absolute;top:0; min-height:200px;}
.related-title {padding:15px 20px 10px 0; font-size:20px; }
.related-title a {color: #0f161a; font-weight:600;}
.related-title a:hover {color: #088A08}
.related-excerpt {padding:0px 20px 10px 0; margin-top:0px; font-size: 1.0rem}
.related-category {display:block}
.related-heading {border-bottom: 2px solid #ff00ff;}

@media only screen and (max-width: 820px) {
  .related-post{position: relative; display:block; border: 0px; border-bottom: 1px solid #ddd; padding:0px;}
  .related-thumb{border-radius: 5px; width:120px; margin-bottom:15px;}
  .related-inner{position: absolute; display:block; top:0; margin-left:130px;}
  .related-title{padding: 0px; margin-top:-5px; font-size: 17px; font-weight: 400}
  .related-excerpt{display:none;}
  .related-category{display:none;}

}

Đoạn css này đã được viết phù hợp cho cả chế độ PC và mobile.

Và đây là kết quả sau khi thực hiện đúng như trên:

Nếu có trục trặc gì khi sử dụng code, hãy để lại comment bên dưới.