Cách chèn bài viết liên quan vào giữa WordPress

Cách chèn bài viết liên quan vào giữa WordPress – Tùy biến mã nguồn WordPress theo yêu cầu của cá nhân là điều không phải ai cũng thực hiện được nếu bạn là người không am hiểu nhiều về mã nguồn hay một chút kỹ năng lập trình Website. Bản thân tôi cũng không rành lắm về mã lệnh tuy nhiên tôi biết cách sử dụng và tùy biến một số chức năng đơn giản để tạo Website theo phong cách riêng.

Để tùy biến cấu trúc Website đòi hỏi bạn phải biết các thành phần chính trong mã nguồn mà bạn đang sử dụng từ đó bạn có thể biết được cách can thiệp vào những tập tin nào để tạo ra được kết quả theo nhu cầu của chính bạn!

Chèn bài viết liên quan vào giữa WordPress

Bạn có để ý rằng khi truy cập vào một số trang báo bạn nhìn thấy hiển thị các bài viết liên quan đến bài viết ở ngay đầu hoặc giữa bài viết! Vậy trong mã nguồn WordPress để hiển thị được các bài viết dạng đó thì phải thực hiện như thế nào?

Để đơn giản cho việc hiển thị bài viết liên quan trong WordPress đầu tiên bạn hãy cài đặt Plugin Related Posts by Taxonomy Plugin về máy sau đó cài đặt và Kích hoạt Plugin để sử dụng (bạn có thể tham khảo bài viết hướng dẫn cài đặt Plugin trong mã nguồn WordPress với các phương pháp).

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á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)…

Chèn bài viết liên quan vào giữa bài viết

Đầu tiên, bạn phải đếm số dòng trong văn bản để xác định được vị trí chính xác chúng ta chèn shortcode hiển thị bài viết liên quan. Hãy sao chép đoạn mã bên dưới và dán vào trước thẻ đóng ?> trong tập tin functions.php của giao diện bạn đang dùng là được.

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 );
}

Tiếp theo bạn hãy Copy và paste đoạn code bên dưới và dán vào phía dưới tập tin functions.php của giao diện đang sử dụng.

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, 1, $content );
        }
 
        return $content;
}

Cuối cùng, hãy lưu lại tập tin functions.php và kiểm tra kết quả.

Để hiển thị hình ảnh đại diện bạn có thể thay câu lệnh này.

$related_posts= do_shortcode('[related_posts_by_tax title=""]');

bằng câu lệnh này.

$related_posts= do_shortcode('[related_posts_by_tax format="thumbnails" image_size="medium"]');

Nếu muốn hiển thị bài viết liên quan theo phong cách riêng của Website của bạn hãy thực hiện thay đổi như sau.

Hãy thay thế đoạn lệnh này.

$related_posts= do_shortcode('[related_posts_by_tax title=""]');

bằng câu lệnh này.

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

Css cho bài viết liên quan

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 đang sử dụng là được.

.meta-related{display:block;
margin-top:10px;
margin-bottom: 10px;
} 
.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;
}

Bạn có thể tùy chỉnh CSS theo ý thích nếu bạn muốn. Vậy là bạn đã biết cách chèn bài viết liên quan vào giữa mã nguồn WordPress rồi đấy! quá đơn giản phải không nào?

Sau khi thực hiện bạn sẽ thấy kết quả như bên dưới.

Hãy đợi chút: Bạn có biết cách hiển thị các bài viết ngẫu nhiên trong WordPress mà không cần sử dụng đến Plugin hay không? hãy tham khảo cách tạo bài viết ngẫu nhiên trong wordpress dùng code đơn giản.

Kết luận

Chỉ vài bước đơn giản như vậy là bạn có thể chèn bài viết liên quan vào giữa Wordpress rồi đấy, hy vọng với bài viết này sẽ giúp ích cho bạn trong việc tùy biến bài viết liên quan trong WordPress.