Thu gọn tiêu đề bài viết trên WordPress bằng CSS
Như tiêu đề thì hôm nay mình chia sẻ đến các bạn cách làm cho tiêu đề bài viết chỉ hiển thị 02 dòng trên WordPress ( thu gọn tiêu đề ) bằng CSS.
Tính ứng dụng, hay thủ thuật này nó có ích lợi gì ?
Tiêu đề nghe có vẻ nó được dành riêng cho WordPress nhưng mà không, nó dành chung cho mọi loại web, miễn là có xài CSS 😀
Các bạn có thể áp dụng thủ thuật này ở những chỗ như: tiêu đề bài viết trên trang chủ, recent post (bài viết gần đây), popular post (bài đăng phổ biến), recent comment (bình luận gần đây),…
Tác dụng hay ích lợi của nó cũng tùy thuộc vào quan điểm thẩm mỹ của bạn, cũng có thể bạn thích hoặc không nhưng đối với mình thì nó có lợi như sau:
- Cắt gọn những tiêu đề quá dài so với mặt bằng chung để cái danh sách nó được đều và chuyên nghiệp hơn;
Thu gọn tiêu đề bài viết trên WordPress bằng CSS
- Tiêu đề bị khuất mất một đoạn cũng có thể gây tò mò với người đọc, họ cũng có thể click vào xem xem rốt cuộc cái bài đó nó có tiêu đề gì :v
Cách thu gọn tiêu đề bài viết trên WordPress bằng CSS
Như ở trên mình có nói là nó dành cho tất cả các loại web chứ không riêng gì WordPress, ở đây mình áp dụng trên WordPress nên sẽ làm như sau:
Bước 1: Tìm ID hoặc class của nhóm tiêu đề bạn muốn thu gọn, ví dụ ở đây mình muốn thu gọn tiêu đề của danh sách bài viết mới trên trang chủ của Hocban.vn thì mình tìm đến class:
|
1 |
.widget-category-posts .small-post .entry-title |
Bước 2: Thêm vào bên dưới nó đoạn CSS sau (đã bao gồm class ở trên luôn) là tiêu đề nó được rút gọn rồi đấy:
|
1 2 3 4 5 6 7 |
.widget-category-posts .small-post .entry-title { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } |
Bài viết được tham khảo từ: Blogchiasethuthuat.com
Như vậy là mình đã chia sẻ xong cách thu gọn tiêu đề bài viết trên WordPress rồi đấy, anh em cũng làm thử xem có đẹp hơn không nhé ! 😀
Hocban.vn
Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên đẹp zai chuẩn sói ca, có sở thích vọc vạch về máy tính và Internet, hiện tại là người chém gió nhiều nhất trên Hocban.vn.
Thanks bạn. Trước nay vẫn khó chịu với tiêu đề dòng dài dòng ngắn. May mà có bài này.
Nếu web của bạn là Homedy kia thì nó quá chuyên nghiệp rồi 😀
Không bạn. Web công ty thôi.
Thế bạn có viết blog cá nhân không ?
Có. Blog của mình đây: cunglaptrinh.com
Theme blog trên là bạn tự thiết kế luôn à ?
Bạn có thể xem theme Bimber trên themeforest đó. Mình đang sử dụng theme này rồi tùy chỉnh lại để hợp với mình luôn.
Ò ò, lúc nãy tưởng bạn tự làm theme này. Theme mình cũng sửa lại từ theme Smartline của Themezee. Dạo này cộng đồng chơi blog thấy anh em im ru, chủ yếu tập trung quẩy ở một số blog như Canhme và Facebook. Bạn có ý tưởng gì để cho nó sôi động lại trên các blog không nhỉ 😀
Cho mình hỏi để tạo một hộp box ngoài trang chủ để thông báo một việc gì đó. Ví dụ như: thay đổi tên miền thì nên dùng đoạn code hay plugin nào? Cảm ơn.
Cái này nếu mà bác làm kiểu thông báo trước kiểu lưu ý thì có thể tạo một cái widget ngoài trang chủ, rồi soạn văn bản, đổi màu chữ cho nó sặc sỡ lên là được. Hoặc cũng có thể làm như bên Sidebar của Hocban.vn cũng được.
Các mẫu cho bác đây, dán vào widget text ở chế độ soạn HTML, sau đó chọn chế độ Visual edit cho dễ sửa nhé !
Hiện em dùng lệnh này -webkit-line-clamp: 2; cho web nhưng khi xem bằng firefox thì lệnh này không được áp dụng, nó báo fail? Giờ sửa thế nào bác?
Nó có cái phần CSS cho trình duyệt nữa, em thì chưa có mần đến phần đó, bác đăng chi tiết link demo lên nhóm này để được hỗ trợ nhé !
https://www.facebook.com/groups/Wordpresscoban/
id thì thay bằng dấu chấm (.) còn class thay bằng dấu thăng (#) sao nhỉ chú
Ngược lại nghen bác, bác học HTML CSS theo 2 serie trên Hocban.vn nhé !
Dạo này không thấy bạn ra bài mới. Bạn dùng gói hosting nào của bên AZDIGI vậy?
Em nghỉ viết 22 ngày đó bác 😀 Em dùng gói 20GB bên AZDIGI nhé bác !
bạn nhiều site phết.
Em nhiều site á bác ? :v
Thì 3 site là nhiều rồi. Hihi
Haha, hiện tại em chỉ có site Hocban.vn với Tịnh Nguyễn Blog thôi bác, còn lại là web demo đó, ko phải web đang xài đâu :v
Ui cha. Mình thì mình cứ để nguyên thôi. Ý kiến riêng của mình là wordpress đã thiết kế để làm sao tiêu đề bài viết ở mức độ vừa phải giữa các ký tự cho chuẩn SEO thôi
Dù sao cũng học tập cách viết của bạn
Thanks!
Haha, cái này nó thu gọn tiêu đề trong danh sách bài viết chứ để nó đẹp hơn chứ ko liên quan gì đến SEO hết á 😀
Công nhận trang bác tịnh load nhanh thật !
Mới chuyển host qua bên AZDIGI đó Phước ĐT :v
Mới đổi sang hosting mới thấy nhanh phết đấy bác 😀
Hề hề, xài cũng được phết bác ạ :p dạo này em mắc quá không viết bài với đi chém gió với anh em được 😀
Ít bình loạn quá nạ, dẫy lên nào ace ê :v
Dạo này Tịnh Nguyễn bỏ bê con Hocban.vn cũng tội nghiệp ghê, do đang bận làm một số thứ nên ko dành nhiều thời gian cho nó được, xong vụ này là sẽ cho nó quẩy lên 😀
Đang làm cái dâm (theme) khác cho em nó à? :3
Ko, sửa theme cho site mới. Mà theme ngon nhiều chức năng quá nên mần hơi bị lâu :v
Quào, dâm cho blog.hocban à :3 định làm chủ đề gì đó?
Không, cho cái site chia sẻ theme WordPress ấy mà :v Sưu tầm được bao nhiêu theme đẹp mà ko giới thiệu anh em thì cũng phí :v
Ơ blog bác không có reply cho cấp thứ 2 à? k thấy nút trả lời đâu
Có 02 cấp bình luận à Phan Hùng, hôm có viết một bài về lý do chọn 02 cấp comment, anh em tham khảo qua nhé !
Cám ơn bạn về kiến thức này. Mình đang tìm hiểu thêm về css.
Khà khà, em cũng có tài liệu học CSS cho người mới (dân không chuyên) bác có yêu thích thì đọc thử nhé !
Học CSS Cơ Bản
Trước cái thời e làm WAPSITE có sử dụng nhưng chuyển qua web thì thôi rồi 😀
Vì trên điện thoại nên phải giới hạn tiêu đề lại đúng không nhờ ? Dạo trước cái recent comments của Hocban.vn cái dài cái ngắn nhìn rất mất cân đối, nhờ cái này cũng đỡ hơn 😀