Code Bài Viết Liên Quan WordPress Đẹp

Tổng Quát:

Code bài viết liên quan WordPress phía dưới mỗi bài viết không chỉ có chức năng điều hướng và tăng trải nghiệm website của khách hàng, mà 1 phần khác còn giúp cho website của bạn có cảm giác chuyên nghiệp hơn rất nhiều. Hôm nay, mình chia sẻ với các bạn phần bài viết liên quan giống của Tào Máy Tính nhé.

code-bai-viet-lien-quan-wordpress

#1. Giới Thiệu Code Bài Viết Liên Quan WordPress Đẹp

Hướng dẫn này rất hữu ích đối với các bạn làm website, đặc biệt đối với những bạn không biết nhiều về code. Vì Tào Máy Tính đã test rất nhiều lần và thấy rằng: các bạn chỉ việc copy & paste thôi là nó hoạt động hoàn toàn ổn định nha! Code bài viết liên quan WordPress này có sự tham khảo và tổng hợp của nhiều nguồn nha các bạn!

tips-taomaytinh

Lưu ý: Tào Máy Tính thực hiện bài hướng dẫn này dành riêng cho theme Flatsome, các bạn sử dụng themes khác vui lòng tự tìm hiểu thêm nha!

#2. Các Bước Tạo Bài Viết Liên Quan WordPress Đẹp

Trong hướng dẫn này, các bạn chỉ việc copy & paste sẽ tạo ra được 3 khối hữu ích sau:

  • Bài viết mới nhất (xem thêm).
  • Hiển thị danh mục và từ khóa của bài viết.
  • Khối ảnh những bài viết cùng chuyên mục.

Hướng dẫn này sẽ đụng chạm vào code php của theme Flatsome. Do đó, các bạn lưu ý nên backup website trước khi thực hiện, tránh trường hợp làm hỏng có thể gây nguy hại cho website.

Một lưu ý nữa là khi tác động vào theme Flatsome chúng ta nên copy những file được chỉnh sửa sang child theme để sau này update cũng không bị mất. Cụ thể như sau:

Phần 1: Chuyển file từ Core theme sang Child theme để chỉnh sửa

Chúng ta sẽ sửa trong file content-single.php của theme. Do đó, các bạn sẽ thực hiện chuyển file từ Core theme sang Child theme để chỉnh sửa theo các bước sau.

Bước 1: Ở đây mình sử dụng hosting của Azdigi, các bạn dùng hosting khác thì cũng làm tương tự nha. Các bạn vào trang quản trị Hosting > Chọn Quản lý File.

code-bai-viet-lien-quan-wordpress-2

Bước 2: Vào thư mục Tên-website-của-bạn/Wp-content/themes/flatsome/ > Copy toàn bộ thư mục Template-part của theme Flatsome.

Bước 3: Thay đường dẫn thư mục thành: /vietland.doanhnhanvietgroup.com/wp-content/themes/flatsome-child > Chọn Copy File(s) để Copy thư mục Template-part từ flatsome sang flatsome-child. (Lưu ý: các bạn thay vietland.doanhnhanvietgroup.com thành tên website của mình)

code-bai-viet-lien-quan-wordpress-5

Bước 4: Truy cập vào thư mục Tên-website-của-bạn/Wp-content/themes/flatsome-child/ sẽ thấy thư mục Template-part như hình.

code-bai-viet-lien-quan-wordpress-6

Phần 2: Chèn code hiển thị bài viết liên quan vào Website

Bước 1: Bạn copy toàn bộ code dưới đây:

<div class="entry-content single-page">

	<?php the_content(); ?>
	<?php
	wp_link_pages( array(
		'before' => '<div class="page-links">' . __( 'Pages:', 'flatsome' ),
		'after'  => '</div>',
	) );
	?>
<div class="xem-them">
    <span class="tieu-de-xem-them">Xem thêm:</span>
    <ul>
<?php 
    $postquery = new WP_Query(array('posts_per_page' => 5, 'orderby' => 'rand'));
    if ($postquery->have_posts()) {
    while ($postquery->have_posts()) : $postquery->the_post();
    $do_not_duplicate = $post->ID;
?>

<li>
    <a href="<?php the_permalink();?>"><?php the_title();?></a>
</li>

<?php endwhile; }  wp_reset_postdata(); ?>  </ul>

</div>

	<?php if ( get_theme_mod( 'blog_share', 1 ) ) {
		// SHARE ICONS
		echo '<div class="blog-share text-center">';
		echo '<div class="is-divider medium"></div>';
		echo do_shortcode( '' );
		echo '</div>';
	} ?>
</div><!-- .entry-content2 -->

<?php if ( get_theme_mod( 'blog_single_footer_meta', 1 ) ) : ?>
	<footer class="entry-meta text-<?php echo get_theme_mod( 'blog_posts_title_align', 'center' ); ?>">
		<?php
		/* translators: used between list items, there is a space after the comma */
		$category_list = get_the_category_list( __( ' ', 'flatsome' ) );

		/* translators: used between list items, there is a space after the comma */
		$tag_list = get_the_tag_list( '', __( ' ', 'flatsome' ) );


		// But this blog has loads of categories so we should probably display them here.
		if ( '' != $tag_list ) {
			$meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span> %1$s</div><div class="the-tim-kiem"><span class="title">Từ khóa:</span> %2$s</div>', 'flatsome' );
		} else {
			$meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span>  %1$s</div>', 'flatsome' );
		}

		printf( $meta_text, $category_list, $tag_list, get_permalink(), the_title_attribute( 'echo=0' ) );
		?>
	</footer><!-- .entry-meta -->
<?php endif; ?>
<?php
/*
 * Code hiển thị bài viết liên quan trong cùng 1 category
 */
$categories = get_the_category(get_the_ID());
if ($categories){
    echo '<div class="bai-viet-lien-quan">';
    $category_ids = array();
    foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
    $args=array(
        'category__in' => $category_ids,
        'post__not_in' => array(get_the_ID()),
        'posts_per_page' => 16, // So bai viet dc hien thi
    );
    $my_query = new wp_query($args);
    if( $my_query->have_posts() ):
        echo '<h3>Bài viết cùng chủ đề:</h3>
        <ul class="list-bai-viet">';
        while ($my_query->have_posts()):$my_query->the_post();
            ?>
            <li>
           
            <div class="box-image">
                 <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('large'); ?></a>
            </div>
             <a href="<?php the_permalink() ?>"><h4 class="tieu-de-bai-viet"><?php the_title(); ?></h4>
                        </a>
            </li>
            <?php
        endwhile;
        echo '</ul>';
    endif; wp_reset_query();
    echo '</div>';
}
?>
<?php if ( get_theme_mod( 'blog_author_box', 1 ) ) : ?>
	<div class="entry-author author-box">
		<div class="flex-row align-top">
			<div class="flex-col mr circle">
				<div class="blog-author-image">
					<?php
					$user = get_the_author_meta( 'ID' );
					echo get_avatar( $user, 90 );
					?>
				</div>
			</div><!-- .flex-col -->
			<div class="flex-col flex-grow">
				<h5 class="author-name uppercase pt-half">
					<?php echo esc_html( get_the_author_meta( 'display_name' ) ); ?>
				</h5>
				<p class="author-desc small"><?php echo esc_html( get_the_author_meta( 'user_description' ) ); ?></p>
			</div><!-- .flex-col -->
		</div>
	</div>
<?php endif; ?>

<?php if ( get_theme_mod( 'blog_single_next_prev_nav', 1 ) ) :
	flatsome_content_nav( 'nav-below' );
endif; ?>

Bước 2: Truy cập vào flatsome-child > Template-parts > posts > content-single.php > Chọn Edit > Rồi chọn Edit 1 lần nữa.

code-bai-viet-lien-quan-wordpress-8

Bước 3: Xóa toàn bộ nội dung trong file content-single.php

Bước 4: Paste đoạn code đã copy ở bước 1 vào > Bấm Save Changes để lưu lại.

code-bai-viet-lien-quan-wordpress-12

Bước 4 (Quan trọng): Thay đổi thông tin cần thiết theo ý của bạn.

code-bai-viet-lien-quan-wordpress-10
Thay đổi tiêu đề chữ Xem thêm và số bài viết hiển thị trong phần xem thêm.
code-bai-viet-lien-quan-wordpress-11
Thay đổi tiêu đề “Bài viết cùng chủ đề” và thay đổi số bài viết liên quan cùng chuyên mục.

Phần 3: Thêm CSS để làm đẹp cho phần hiển thị

Việc copy & paste code sang flatsome-child mới giải quyết được việc hiển thị thôi, còn để nó hiển thị cho đẹp thì phải chèm thêm CSS cho nó nữa.

Bước 1: Bạn copy toàn bộ đoạn CSS giao diện cho PC.

/*************** Bài Trước và Bài Tiếp Theo by Tào Máy Tính ***************/
@media(min-width: 100%){
.entry-meta{display: none;}
#nav-below{
padding: 30px;
background: white}
}
.nav-previous &amp;amp;amp;gt; a {
display: block;
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 3em;
line-height: 3em;
background: #4495eb;}
.nav-previous &amp;amp;amp;gt; a:before{
display: block !important;
content: 'BÀI TRUỚC';
color: white;
text-align: center;
font-size: 20px;}.nav-next &amp;amp;amp;gt; a {
display: block;
color: white;
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 3em;
line-height: 3em;
background: #4495eb;
}
.nav-next &amp;amp;amp;gt; a:before{
display: block !important;
content: 'BÀI KẾ TIẾP';
color: white;
text-align: center;
margin-right: -10px;
font-size: 20px;
}/*************** Bài Viết Liên Quan by Tào Máy Tính ***************/
.xem-them .tieu-de-xem-them {
font-weight: 700;
display: block;
margin-bottom: 10px;
font-size: 19px;
color: black;
}
.xem-them ul li {
margin-bottom: 3px;
}
.xem-them ul li a {
font-weight: 700;
font-size: 16px;
color: #2dcc70;
}
.xem-them ul li a:hover {
text-decoration: underline;
}
.danh-muc {
margin-bottom: 15px;
}
.danh-muc span.title, .the-tim-kiem span.title {
border-radius: 4px;
background: #126e32;
padding: 4px 10px;
color: white;
margin-right: 5px;
}
.danh-muc a, .the-tim-kiem a {line-height:32px;
border-radius: 4px;
margin-bottom: 10px;
padding: 4px 10px;
background: #dedede;
color: #464646;
}
.danh-muc a:hover, .the-tim-kiem a:hover {
background: #6dca19;
color: white;
}
.bai-viet-lien-quan {
margin-top: 15px;
}
.bai-viet-lien-quan h3 {
font-size: 19px;
color: black;
}
.bai-viet-lien-quan ul {
margin-bottom: 0;
display: inline-block;
width: 100%;
}
.bai-viet-lien-quan ul li {
list-style: none;
width: 25%;
color: graytext;
float: left;
padding-left: 4px;
padding-right: 5px;
}
.bai-viet-lien-quan ul li .box-image img {
height: 120px;
border-radius: 4px;
object-fit: cover;
object-position: center;
}
.bai-viet-lien-quan h4 {
font-size: 15px;
color: black;
line-height: 19px;
padding-top: 7px;
height: 64px;
overflow: hidden;
}

Bước 2: Vào trang quản lý WordPress > Giao diện > Tùy biến > Style > Custom CSS > Custom CSS > Paste đoạn code đã copy ở bước 1 vào > Bấm Đăng để lưu lại.

code-bai-viet-lien-quan-wordpress-13

Bước 3: Copy đoạn code CSS giao diện cho mobile.

/*************** Bài Viết Liên Quan by Tào Máy Tính ***************/
.bai-viet-lien-quan ul li {
width: 50%;
}
.bai-viet-lien-quan ul li .box-image img {
height: 90px;
}

Bước 4: Vào trang quản lý WordPress > Giao diện > Tùy biến > Style > Custom CSS > Custom Mobile CSS > Paste đoạn code đã copy ở bước 3 vào > Bấm Đăng để lưu lại và tận hưởng thành quả.

code-bai-viet-lien-quan-wordpress-14

#3. Kết

Vậy là Tào Máy Tính đã hướng dẫn rất chi tiết cách Code bài viết liên quan WordPress. Cám ơn các bạn đã quan tâm theo dõi và ủng hộ Tào Máy Tính trong suốt thời gian qua. Nếu cần hỗ trợ hay thắc mắc, các bạn cứ để lại bình luận phía bên dưới nhé.

5/5 (1 Review)
5 1 bình chọn
Article Rating
Đăng ký
Thông báo khi
guest
0 Comments
Phản hồi Cá Nhân
Xem tất cả bình luận
0
Bạn nghĩ gì về bài viết này, hãy để lại bình luận ngay.x
()
x