Phần 1: Cài đặt plugin Related Posts By Taxonomy
Mục lục
Phần 2: Chèn bài viết liên quan vào giữa bài viết
Các bước tiếp theo chúng ta cùng làm để hiển thị bài viết liên quan vào giữa bài viết nhé! Bước 1: Chèn code đếm số dòng văn bản trong bài viết 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. Theo hệ thống WordPress, mỗi khi bạn Enter xuống dòng thì nó tự định nghĩa đoạn văn bản đó nằm trong cặp thẻ <p>…</p>. Do đó, code đếm số dòng (hay chính xác là đếm đoạn) thì nó cũng dựa vào thẻ <p>…</p> để đếm. Ta có hàm count_paragraph có nhiệm vụ xác định các cặp thẻ <p>…</p>. Copy đoạn code sau và paste vào file function.php của theme Flatsome (theme gốc) mà không cần sửa gì hết!1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 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 ); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //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, 1, $content ); } return $content; } |
1 | if ( is_single() ) { return count_paragraph( $related_posts, 1, $content ); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | // 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 ); } //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, 1, $content ); } return $content; } |
Phần 3: Css cho bài viết liên quan
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:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .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; } |
