Code bài viết liên quan cho theme Flatsome không dùng plugin

4 Likes Comment
7 / 100 SEO Score

Những ai đã dùng flatsome thì mới thấy nó không có bài viết liên quan như các theme khác, nó chỉ có bài trước và bài kế tiếp thôi.

Do vậy, trong quá trình làm web cho khách, đôi khi khách yêu cầu phải có bài viết liên quan kiểu như hình bên dưới.

Code bài viết liên quan cho theme Flatsome không dùng plugin 1

Mình thấy một số bạn có share code trên mạng, nhưng đa phần đều phải dùng thêm 1 plugin nữa. Hôm nay mình share 1 đoạn code, không cần plugin, các bạn thêm vào file functions.php của theme là được.

Code này là bài viết liên quan theo tag nhé, không phải theo danh mục, khi viết bài các bạn phải chú ý thêm tag cho bài viết nhé.

/*
 * Code bài viết liên quan
*/
function bvlq() {
	global $post;
	$tags = wp_get_post_tags($post->ID);
	if ($tags){
		$output = '<div class="relatedcat">';
		$first_tag = $tags[0]->term_id;
		
		$args=array(
			'tag__in' => array($first_tag),
			'post__not_in' => array($post->ID),
			'posts_per_page'=>3,
			'caller_get_posts'=>1
		);
		$my_query = new wp_query($args);
		
		if( $my_query->have_posts() ):
			$output .= '<p>Bài viết liên quan:</p><ul class="row related-post">';
			while ($my_query->have_posts()):$my_query->the_post();
			$output .= 
				'<li class="col large-4">
								<a href="'.get_the_permalink().'" title="'.get_the_title().'">
									<div class="feature">
										<div class="image" style="background-image:url('. get_the_post_thumbnail_url() .');"></div>
									</div>                            
								</a>
								<div class="related-title"><a href="'.get_the_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></div>
							</li>';
			endwhile;
			$output .= '</ul>';
		endif; wp_reset_query();
		$output .= '</div>';
		return $output;
	}
	else return;
}
add_shortcode('bvlq', 'bvlq');

Tiếp theo là phần css, bạn chèn vào style.css của child theme

.feature {
    position: relative;
    overflow: hidden;
}
.feature::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}
.feature .image{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-size: cover;
    background-position: center;
}
ul.row.related-post li {
    list-style: none;
}
.related-title {
    line-height: 1.3 !important;
    margin-top: 10px !important;
}

Sau khi thêm đủ 2 cái đó cho con, chúng ta được 1 shortcode là [ bvlq ] . Chúng ta sẽ vào Flatsome –> Theme Option –> Blog –> Blog Single Post, chúng ta kéo xuống dưới cùng, tới phần HTML after blog posts. Chúng ta chèn shortcode vào đó rồi lưu lại là xong

Bài viết liên quan

You might like

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *