Hướng dẫn tạo bài viết liên quan trong WordPress bằng ShortCode

Hướng dẫn tạo bài viết liên quan trong WordPress bằng ShortCode
0

image

Thêm tất cả code bên dưới vào file functions.php của theme bạn đang sử dụng, giải thích thêm:

1. Tạo shortcode bài viết liên quan dựa vào code Widget mặc định trong WordPress

add_shortcode( 'recent_posts', 'wpex_recent_posts' );
function wpex_recent_posts( $atts ) {
	extract( shortcode_atts( array(
		'number' => $number,
		'show_date' => $show_date
	), $atts ) );
	ob_start();
	$number = ( ! empty( $atts['number'] ) ) ? absint( $atts['number'] ) : 3;
	if ( ! $number ) {
		$number = 3;
	}
	$show_date = isset( $atts['show_date'] ) ? $atts['show_date'] : false;
	$r = new WP_Query( array( 
		'posts_per_page'      => $number,
		'post_status'         => 'publish',
		'orderby' => 'date' ) );
	if ( ! $r->have_posts() ) {
		return;
	}
	?>
	<ul>
		<?php foreach ( $r->posts as $recent_post ) : ?>
			<li>
				<?php if ( $show_date ) : ?>
					<span class="post-date"><?php echo get_the_date( __('d/m/Y'), $recent_post->ID ); ?></span>
				<?php endif; ?>
				<a href="<?php the_permalink( $recent_post->ID ); ?>"><?php echo get_the_title( $recent_post->ID); ?></a>
			</li>
		<?php endforeach; ?>
	</ul>
	<?php
	return ob_get_clean();
}

2. Chèn shortcode bài viết liên quan vào sau thẻ H3 của nội dung bài viết (Bạn có thể thay bằng thẻ khác)

add_filter('the_content', function ($content){
    if (!is_single()) return $content;
    $recentposts = do_shortcode('[recent_posts number="3" show_date="true"]');
    return preg_replace('/<\/h3>/i', '</h3>'.$recentposts, $content, 1);
});

Chúc các bạn thành công :smile:

2 Likes

Nếu em muốn chèn vào sau đoạn đầu tiên của nội dung thì thế nào ạ?
Vì bài viết của em thường là:
Đoạn nội dung đầu giới thiệu
Tiêu đề thẻ h2
Đoạn nội dung
Tiêu đề thẻ h3…

Đơn giản là bạn dùng thẻ đọc thêm span sau đó thay h3 thành span

Đoạn này chèn ở đâu ạ
add_filter(‘the_content’, function ($content){
if (!is_single()) return $content;
$recentposts = do_shortcode(’[recent_posts number=“3” show_date=“true”]’);
return preg_replace(’/</h3>/i’, ‘’.$recentposts, $content, 1);
});

Vẫn trong file functions.php luôn b nhé

Để chèn trước nội dung bài viết

add_filter('the_content', function ($content){
    if (!is_single()) return $content;
    $recentposts = do_shortcode('[recent_posts number="3"]');
    return $recentposts.$content;
});
1 Like

Cả anh làm css cho nó đẹp hơn tí nữa đi anh .


giống như demo bên trên em thấy hiển thị đẹp :smile:
Và hiện tại em thấy nó chỉ lấy content bài viết mới nhất, không lấy liên quan

Phiên bản đầy đủ kèm chú thích

if ( ! function_exists( 'wpex_recent_posts' ) ) {
    function wpex_recent_posts() {
		extract( shortcode_atts( array(
			'number' => $number,
			'hide_date' => $hide_date
		), $atts ) );
        ob_start();
		$number = ( ! empty( $atts['number'] ) ) ? absint( $atts['number'] ) : 3;
		if ( ! $number ) {
			$number = 3;
		}
        $id = get_the_ID();  
        $categories = get_the_category($id); // Disabled this if you want tag wise posts 
        // $categories = wp_get_post_tags($id); // Enable this for tags wise related posts
        if (!empty($categories)) :
            $categories_ids = array_column( $categories, 'term_id' );
            $related_args = [
                'post_status'         => 'publish',
                'category__in'        => $categories_ids, // Disabled this if you want tag wise posts
                //'tag__in'        => $categories_ids, // Enable this for tag wise related posts
                'post__not_in'        => [ $id ], // Exclude Current Post
                'posts_per_page'      => $number, // Number of related posts to show
                'ignore_sticky_posts' => 1
            ];
            $get_posts = new WP_Query( $related_args );
            if ( $get_posts->have_posts() ) :
                echo '<ul class="related_posts_list">';
                while ( $get_posts->have_posts() ) : $get_posts->the_post();
					echo '<li>';
						if ( $hide_date == false ) :
							echo '<span class="post-date">'. get_the_date( __('d/m/Y'), $recent_post->ID ).'</span>';
						endif;
						echo '<a href="'.get_the_permalink().'">'.get_the_title().'</a>';
					echo '</li>';
                endwhile;
                echo '</ul>';
            endif;
        endif; 
        return ob_get_clean(); 
    }
    add_shortcode('recent_posts', 'wpex_recent_posts');
}
1 Like

Cảm ơn anh Tiến nhé. Code rất chất