Hướng dẫn chèn bài viết liên quan vào giữa nội dung bài viết đơn giản nhất

Chào các bác, hôm trước trên group Flatsome Việt Nam có nhiều bác hỏi về vấn đề chèn bài viết liên quan vào giữa nội dung thế nào cho đẹp và hiệu quả nhất. Các bác lại lôi đúng hình ảnh của web em ra để hỏi, thế là một số anh em biết và đề xuất em hướng dẫn cụ thể hơn cho nhiều người có thể làm được. Hôm nay, thông qua bài viết này, chúng ta cùng tìm hiểu cách chèn bài viết liên quan vào giữa nội dung bài viết thật đơn giản nhé!

Lưu ý: Bài viết sử dụng mẫu web dùng theme Flatsome và Child theme!

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”

Cài đặt plugin Related post by Taxonomy
Cài đặt plugin Related post by Taxonomy

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ả!

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

Chèn bài viết liên quan vào sidebar
Chèn bài viết liên quan vào sidebar

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!

Bước 2: Chèn bài viết liên quan vào giữa nội dung

Nhiệm vụ tiếp theo chúng ta sử dụng hàm count_paragraph đã tạo ở trên và filter trong WordPress để chèn bài viết liên quan. Copy và paste đoạn này vào funtion.php của theme Flatsome (theme gốc):

Trong đó ta có biến $related_posts chứa hàm thực thi shortcode của plugin “Related Post by Taxanomy”.

Kế tiếp, chúng ta phân tích đoạn này:

Đoạn này chúng ta có hàm is_single() để kiểm tra trang đó phải là bài viết thì nó mới áp dụng, tránh trường hợp áp dụng cả vào page tranh chủ thì không đẹp!

Kế tiếp là đoạn return count_paragraph( $related_posts, 1, $content ). Số 1 nghĩa là bài viết liên quan sẽ chèn vào sau đoạn 1 của bài viết. Bạn có thể thay số 1 thành số tự nhiên bất kỳ >1 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)).

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:

và ta có kết quả như sau:

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

Lời kết

Như thế là mình đã cùng các bạn tìm hiểu cách chèn bài viết liên quan vào giữa nội dung rồi nhé! Các bạn thử thực hiện xem sao nhé. Có lỗi gì vui lòng comment hoặc liên hệ ngay để mình trợ giúp nhé!

Bài viết tham khảo từ nhiều nguồn.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    Bài viết cùng chuyên mục:

    • Cảnh báo virtu cho website

      Cảnh giác web dính virut khi khôi phục xong không gỡ plugin Duplicator

      Anh em mua source code của Ninh Bình Web xin lưu ý: Hiện có một vài bạn mua source code của mình về làm web một thời gian bị virut và có phản hồi lại với mình! Qua kiểm tra thì mình có nhận định như sau, muốn thông tin cho những anh em khác …

    • Thêm hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce bằng CSS

      Chào các bạn, bài viết trước mình đã hướng dẫn các bạn thêm hiệu ứng ánh sáng trượt khi hover vào ảnh bài viết trong theme Flatsome rồi phải không? Hôm nay mình tiếp tục hướng dẫn các bạn thêm hiệu ứng ánh sáng đẹp khi hover ảnh sản phẩm Woocommerce nhé! Demo: http://dienmay3.ninhbinhweb.info, http://bds8.ninhbinhweb.info …

    • Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome

      Chào các bạn, nếu ai để ý có thể thấy các mẫu website gần đây của Ninh Bình Web mình hay sử dụng hiệu ứng ánh sáng trượt lấp lánh khi rê chuột vào ảnh bài viết. Có một số bạn thích hiệu ứng CSS đó và muốn mình chỉ cách làm. Do đó, hôm …

    • Hướng dẫn chèn Breadcrumbs cho website WordPress sử dụng plugin Yoast Seo

      Chào các bạn, trên blog Ninh Bình Web mình cũng đã chia sẻ một bài viết tạo breadcrumbs không sử dụng plugin rồi phải không? Hôm nay, mình sẽ hướng dẫn các bạn thêm một cách nữa để chèn Breadcrumbs cho website WordPress sử dụng plugin Yoast SEO nhé! Bài viết mình hướng dẫn thao …

    • Sửa lỗi khung bình luận Facebook trên website WordPress đột nhiên bị thu hẹp chiều rộng

      Chào các bạn, mấy hôm nay trên mạng đột nhiên xuất hiện tình trạng nhiều bạn than vãn về việc khung bình luận của Facebook (Comment Facebook) trên website WordPress đột nhiên bị thu hẹp chiều rộng, làm cho bố cục bài viết trở nên xộc xệch mất thẩm mỹ. Trong bài viết này, GiuseArt …

    • Code chèn Hotline và chat Facebook vào chân trang trên giao diện mobile cho website

      Có nhiều plugin có thể giúp bạn tạo nút chèn Hotline hoặc Chat Facebook ở chân trang trên website WordPress. Tuy nhiên, ai trong chúng ta cũng thường e ngại khi dùng plugin, vì nỗi lo nó có thể gây nặng nề hoặc xung đột với các thành phần khác của website. Mình có làm …

    • Thêm Google Forms vào bài viết cho website WordPress

      Chào các bạn, Google Froms là một công cụ được sử dụng rất phổ biến để tạo trang khảo sát và thu thập ý kiến người dùng bởi tính năng mạnh mẽ và giao diện bắt mắt của nó. Nếu bạn muốn thêm google forms  vào WordPress thì trong bài này mình sẽ hướng dẫn …

    • Tối ưu tốc độ website WordPress bằng cách nén ảnh

      Chào các bạn, có thể nói hình ảnh là một phần không thể thiếu đối với bất kỳ một trang web nào, cho dù đó là một trang tin tức, bán hàng hay chỉ đơn thuần là blog cá nhân như Ninh Bình Web. Nhưng nếu ta không biết cách tối ưu hóa nó thì sẽ …

    Chat Facebook