Tạo bài viết cùng chuyên mục trên sidebar trong WordPress (có sticky)

Sau đây là code hướng dẫn các bạn làm bài viết cùng chuyên mục trên sidebar, và có sticky khi bạn scroll chuột qua section "CÙNG CHUYÊN MỤC".

Bạn cần biết :

1. Sidebar (thanh bên) : là dạng layout (bố cục) có nhiều cột, thanh sidebar này có thể nằm bên trái hoặc phải.
2. Sticky (dính) : là cố định khu vực trên website, cho dù cuộn chuột như thế nào thì khu vực đó cũng xuất hiện trên màn hình. Ở trong code này thì sticky lúc bạn kéo qua khỏi khu vực "CÙNG CHUYÊN MỤC" thì khu vực này sẽ trượt theo bên phải màn hình.

P/S : Đặc biệt là sticky này chỉ dùng CSS, không dùng javascript. Demo thì bạn xem trực tiếp trong bài viết này.

Code CSS:

/* Code by ThichCode.NET */
@media only screen and (min-width: 920px) {
	.list_thumb {
		position: -webkit-sticky;
		position: sticky;
		top: 70px;
		padding: 0 15px;
	}
}

.list_thumb ul{
	padding: 0;
    list-style: none;
}
.list_thumb ul div{
	margin-left:160px;
	margin-top: -22px;
}
.list_thumb img{
    width: 150px;
    height: 100px;
    background: white;
    padding: 5px;
	float:left;	
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.list_thumb ul>li{
	float:left;
	margin-bottom:30px;
}
.list_thumb ul a{    
    text-decoration: none;
    color: black;
	-webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

Bạn chèn code bên dưới vào file sidebar.php (cùng thư mục file function.php) dưới dòng code dynamic_sidebar( 'sidebar-1' );

//Code by ThichCode.NET
if (is_single())
{		
	$related = get_posts(
		array( 
			'category__in' => wp_get_post_categories($post->ID), 
			'numberposts' => 6, 
			'post__not_in' => array($post->ID)
		));
	if (count($related) > 0)
	{						
		echo '<section class="widget list_thumb">';
		echo '<h2 class="widget-title">CÙNG CHUYÊN MỤC</h2>';
		echo '<ul class="">';
		foreach ($related as $post) {
			setup_postdata($post);														
			?>
			<li>
				<?=thichcode_net_post_thumbnail('thumb');?>						
				<div>
					<h3><a href="<?=get_the_permalink();?>" title="<?=get_the_title();?>"><?=get_the_title();?></a></h3>
				<?php
				$categories = get_the_category();
				foreach ( $categories as $key=>$category ) {
					$b = '<span class="tags-links"><a href="' . get_category_link( $category ) . '">' . $category->name . '</a></span>';
					echo $b;
				}
				$number_comments = get_comments_number();
				if (get_comments_number() > 0) echo '<span class="comments">'.get_comments_number().' bình luận</span>';						
				?>
				</div>						
			</li>
			<?php					
		}
		echo '</ul>';
		echo '</section>';
	?>				
	<?php
	}
}