Hướng dẫn chèn bài viết liên quan vào giữa bài viết

Khi viết một bài viết trên blog hoặc trang web, việc chèn các bài viết liên quan vào giữa nội dung là một cách hiệu quả để tăng khả năng tương tác của người đọc và duy trì họ ở lại trang web của bạn trong thời gian lâu hơn. Chèn bài viết liên quan giữa bài viết không chỉ giúp bạn tăng lượng truy cập cho các bài viết khác mà còn giúp người đọc tìm hiểu thêm về các chủ đề liên quan mà họ có thể quan tâm. Dưới đây là một hướng dẫn đơn giản về cách chèn bài viết liên quan vào giữa bài viết của bạn.

Hướng dẫn chèn bài viết liên quan vào giữa bài viết

Phần 1: Cài đặt Plugin Related Posts By Taxonomy 

Các bạn có thể tải về tại đây (plugin sạch get trực tiếp từ gu gồ)  Tải xuống tại đây

Các bạn tải về và cài đặt như các plugin khác.

Sau khi cài đặt và kích hoạt thành công, các bạn không cần quan tâm các bước khai báo hay setting gì cho plugin này đâu. Vì nó chẳng có bảng option để mình cài đặt gì cả!

Ngay lúc này, các bạn có thể chèn bài viết liên quan vào widget Sidebar được luôn rồi nhé! Các bạn khai báo các thông số để hiển thị bài viết liên quan như: Post type (kểu định dạng hiển thị post hay page hay cả hai); Display (kiểu hiển thị có ảnh, không có ảnh hoặc chỉ có tóm tắt…);  Image Display (ảnh đại diện)…

Phần 2: Chèn code bài viết liên quan

1. Chèn code đếm số dòng trong bài viết

Copy đoạn code bên dưới dán vào function.php trong theme bạn đang kích hoạt

// Code đếm số dòng trong văn bản

function count_paragraph( $insertion, $paragraph_id, $content ) {

        $closing_p = '</p>';

        $paragraphs = explode( $closing_p, $content );

        foreach ($paragraphs as $index => $paragraph) {

                if ( trim( $paragraph ) ) {

                        $paragraphs[$index] .= $closing_p;

                }

                if ( $paragraph_id == $index + 1 ) {

                        $paragraphs[$index] .= $insertion;
                }
        }
        return implode( '', $paragraphs );
}

2. Chèn code bài viết liên quan vào giữa nội dung

Copy đoạn code bên dưới dán vào tiếp vào function.php trong theme bạn đang kích hoạt

//Chèn bài liên quan vào giữa nội dung

add_filter( 'the_content', 'prefix_insert_post_ads' );

function prefix_insert_post_ads( $content ) {

$related_posts= "<div class='meta-related'>".do_shortcode('[related_posts_by_tax title=""]')."</div>";

if ( is_single() ) {
return count_paragraph( $related_posts, 2, $content );
}

return $content;
}

Sau đó Lưu lại

• Giải thích 1 chút

Phần 3: Chèn CSS cho phần hiển thị

Về cơ bản là chúng ta đã chèn được bài viết liên quan vào giữa bài viết rồi phải không? Bước tiếp theo, các bạn cần CSS cho chúng được đẹp và phù hợp với tông màu của toàn trang.

Bạn để ý đoạn code trên có đoạn $related_posts= “<div class=’meta-related’>”.do_shortcode(…).”</div>”;. Nghĩa là toàn bộ phần bài viết liên quan sẽ nằm trong một cặp thẻ <div>…</div> có class = “meta-related”. Do đó, chúng ta sẽ CSS cho .meta-related nhé!

Copy đoạn CSS dưới đây và paste vào Giao diện > Tùy chỉnh > Tùy chỉnh CSS của theme:

.meta-related{
display:block; 
margin-top:10px; 
margin-bottom: 10px;
background: #edf1ff;
padding: 20px;
color: #000000;
border: 2px dashed #7bafff;
border-radius: 0px;
line-height: 22px;
font-size: 15px;
} 
.meta-related ul li { 
list-style: square; 
font-size: 15px; 
margin-bottom:0px; 
} 
.meta-related ul li a{ 
color: #0092ff; 
text-transform: none; 
} 
.meta-related ul li a:hover{ 
color: #0072c8; 
}

Nào giờ thì hưởng thụ thành quả thôi nhỉ:

Kết luận

Trên đây đội ngũ Thiết kế web Nam Định cùng các bạn tìm hiểu Hướng dẫn chèn bài viết liên quan vào giữa bài viết rồi nhé. Hy vọng các bạn đã tìm thấy được nội dung hữu ích phục vụ cho quá trình làm việc của mình. Chúc các bạn thành công!!!