Bạn thường hay thấy ở những blog khác họ chèn bài viết liên quan ở giữa, đầu hay cuối bài viết, mỗi khi đọc bài viết nào đó ta thường thấy những chủ đề liên quan đến nó, giúp ta có thể tìm được những bài viết đang quan tâm khác, ví dụ: Bạn đang đọc bài viết về thủ thuật genesis framework nó sẽ hiện chủ đềliên quan đến bài viết này, rất tiện lợi phải không nào?
Bài viết này tôi sẽ hướng dẫn bạn cách làm thế nào để thêm bài viết liên quan vào đầu, giữa, cuối bài viết một cách đơn giản nhất.
Chúng ta sẽ sử dụng plugin Related Posts by Taxonomy.
để chèn vào vị trí mình muốn, ví dụ tôi thường chèn bài viết liên quan ở dòng thứ 4 trong bài viết.
Để hiển thị bài viết liên quan đúng vị trí bạn cần hãy để ý đến nguyên lý hoạt động của nó như vầy, mỗi khi bạn viết bài, bạn xuống dòng nó sẽ tự định nghĩa đó là một dòng (một cặp thẻ < p> </ p>) vậy nó tương tự khi bạn viết bài bạn ấn Enter một cái là nó xuống một dòng… 2 enter là 2 dòng vậy bạn chèn nó hiện ở dòng thứ 4 thì cứ 4 enter là nó hiện lên.
Hướng dẫn chèn bài viết liên quan vào giữa bài viết genesis
Bước 1: Cài đặt và kích hoạt plugin Related Posts by Taxonomy.
Bước 2: Chèn đoạn mã code này vào cuối file functions.php trong child theme.
// Code đếm số dòng trong văn bản
function count_paragraph( $insertion, $paragraph_id, $content ) {
$closing_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 );
}
//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= do_shortcode('[related_posts_by_tax title=""]');
if ( is_single() ) {
return count_paragraph( $related_posts, 4, $content );
}
return $content;
}
Lưu ý: Ở đây mình để là 4 bạn thay số tương tự để nó hiển thị đúng vị trí mong muốn nhé.
Bước 3: Thay CSS nếu muốn.
Để thay style cho nó bạn chỉ cần thay mã này thành.
$related_posts= do_shortcode('[related_posts_by_tax title=""]');
Thành
$related_posts= "<div class='meta-related'>".do_shortcode('[related_posts_by_tax title=""]')."</div>";
Và thêm CSS vào style.css
meta-related {
font-size: 13px;
line-height: 1.4em;
font-weight: bold;
}
.entry-content ol, .entry-content ul {
margin-left: 40px;
}
.entry-content ul > li {
list-style-type: square;
}
.entry-content a {
color: #e8554e;
}
Kết quả:
