KUKINGMMO Học và làm SEO, Make Money Online
Hướng dẫn chèn bài viết liên quan vào Flatsome giữa nội dung bài viết đơn giản nhất
Phần 1: Cài đặt plugin Related Posts By Taxonomy
Mục đích việc cài đặt plugin này là cho phép chúng ta sử dụng shortcode của nó để chèn vào các đoạn mã khai báo trong function.php mà lát nữa chúng ta sẽ sử dụng.
Hơn nữa, plugin cũng cho phép chúng ta chèn nhanh các bài viết liên quan vào widget như sidebar, footer hoặc nhiều vị trí khác rất dễ dàng. Anh em an tâm vì plugin này khá nhẹ và được đánh giá cao trên cộng đồng rồi nên không phải lo ngại, cứ cài thôi, không chiếm nhiều tài nguyên lắm đâu!
Bước 1: Trong trang quản trị, các bạn vô Gói mở rộng > Cài mới > Gõ tìm kiếm “Related Post”.
Bước 2: Cài đặt và kích hoạt plugin “Related Post by Taxanomy”
Bước 3: 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ả!
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é!
Như vậy, bạn đã hoàn thành việc chèn bài viết liên quan vào giữa bài viết rồi nhé. Dưới đây là toàn bộ code của bài này: (Chèn tất cả vào funtion.php của theme Flatsome (theme gốc)).
|
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;
}
|
và ta có kết quả như sau:
