Cách Thêm Nút Xem Thêm Rút Gọn Nội Dung Text Cho WordPress

Thêm nút xem thêm rút gọn nội dung là điều mà mình đã mất đến 2 ngày để tìm hiểu khi thấy những website khác đều có. Nhưng mình tìm thì chỉ có thu gọn cho danh mục sản phẩm hoặc chi tiết sản phẩm mà thôi.
Vấn đề mình cần ở đây thu gọn cho một nội dung bất kì nào đó ngay trên trang chủ, và không có ai hướng dẫn mình đã tự mày mò và đã thêm được thành công. ở bài viết này mình xin chia sẻ đến bạn cách làm nhanh chóng và thành công này.

1. Vì sao cần thu gọn nội dung text bất kì ?

Hiện nay việc SEO là cực kì quan trọng và không thể thiếu trong việc phát triển, vận hành website. Vì vậy mục đích chính của tất cả cũng chính là đưa web của bạn lên top cao khi có khách hàng tìm kiếm từ khóa nhất định trên google.

Để việc SEO được tốt nhất thì bạn sẽ thường thêm text văn bản vào trang chủ để tối ưu từ khóa hiệu quả. Nhưng như vậy sẽ làm cho website của bạn bị dài hơn rất nhiều gây khó chịu cho người dùng, thì khi này việc thu gọn nội dung có nút xem thêm chính là giải pháp cho bạn.

code nút xem thêm rút gọn nội dung
code nút xem thêm rút gọn nội dung

2. Cách thêm nút xem thêm rút gọn nội dung

Việc này mình có hỏi trên các diễn đàn nhưng chưa được hỗ trợ nên mình đã tự mày mò mọi thứ và đã thêm thành công đoạn code này website, hãy theo các bước dưới đây nhé.
Bước 1: Đăng nhập vào admin quản trị website bạn, nếu dùng flatsome thì vào global setting và thêm vào phần body bottom. Nếu bạn đang dùng 1 theme bất kì thì thêm nó vào funtinon.php của giao diện bạn đang dùng nhé.

Nút xem thêm thu gọn nội dung
Nút xem thêm thu gọn nội dung
Dán đoạn code sau đây vào
Bước 2: Tại menu đó vào phần custom css hoặc với những theme khác thì vào giao diện => tùy biến => tùy chỉnh css dán đoạn code sau vào:
.hidden-content { overflow: hidden; line-height: 1.5em; height: 10.5em; } .show-more { display: block; cursor: pointer; color: #381800; text-decoration: underline; border-color: #381800; border: 1px solid #381800; border-radius: 5px; margin: 0 auto; max-width: 150px; padding: 5px 5px; text-align: center; } .hidden-content { margin-bottom: 10px; }
Bước 3: Sau khi thêm xong css và script vào rồi thì hãy cầm đoạn code html dưới đây dán ở bất kì đâu mà bạn muốn nó hiển thị là ok nhé.

<div id=”hiddenContent” class=”hidden-content”> <p> Đây là đoạn nội dung mà bạn cần xem thêm và rút gọn </p> </div> <span id=”showMoreLink” class=”show-more” onclick=”toggleContent()”>Xem thêm</span>

Trên đây là hướng dẫn code nút xem thêm thu gọn nội dung bất kì với wordpress dành cho những bạn không chuyên về code. Mọi vấn đề khác mà bạn cần hỗ trợ vui lòng để lại bình luận phía dưới DTrick sẽ phản hồi trong thời gian sớm nhất.

Leave a Reply

Your email address will not be published. Required fields are marked *