Bạn đã bao giờ bắt gặp một trang web xuất bản các bài viết khác nhau trên blog chưa?
Một số trang web có các bài viết nổi bật được đánh dấu với nền tùy chỉnh trong khi những trang khác có thể có mỗi bài đăng danh mục với một giao diện độc đáo. Nếu bạn luôn muốn học cách tùy chỉnh mọi bài đăng trên WordPress, bạn đã đến đúng nơi.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách định hình mỗi bài viết WordPress khác nhau.
Nhưng, nếu bạn chưa bao giờ cài đặt WordPress, hãy khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn
Sau đó trở lại lý do tại sao chúng ta ở đây.
Remarque: Hướng dẫn này yêu cầu bạn thêm CSS tùy chỉnh trên WordPress. Bạn cũng sẽ cần sử dụng công cụ Kiểm tra. Cần có một số kiến thức về CSS và HTML.
Cung cấp một phong cách cá nhân trên các bài báo WordPress
WordPress thêm các lớp CSS mặc định vào các phần tử khác nhau của trang web của bạn. Một theme WordPress tiêu chuẩn tương thích phải có mã do WordPress yêu cầu để thêm các lớp CSS cho nội dung, bài đăng, trang, tiện ích con, menu và hơn thế nữa.
Cũng khám phá hướng dẫn của chúng tôi về Permalinks: Làm thế nào để tùy chỉnh liên kết blog của bạn
Một chức năng chính của WordPress được gọi là " post_class () Được sử dụng bởi các chủ đề để cho WordPress biết nơi thêm các lớp CSS mặc định này vào các bài viết.
Nếu bạn truy cập trang web của mình và sử dụng công cụ Kiểm tra trên trình duyệt của mình, bạn sẽ có thể thấy các lớp này được thêm vào mỗi bài đăng.
Dưới đây là các lớp CSS được thêm theo mặc định dựa trên trang được hiển thị bởi người dùng.
- .post-id
- .poster
- .attachement
- .gluant
- .hentry
- ID .category
- .category tên
- .tag tên
- .format- {format-name}
- {.type- hậu type-name}
- .has hậu thumbnail
- .post-mật khẩu cần thiết
- .protected-by-một-mật khẩu
Một ví dụ về hiển thị sẽ như thế này:
Bạn có thể tùy chỉnh mỗi ấn phẩm WordPress khác nhau bằng cách sử dụng các lớp CSS tương ứng.
Đọc cũng: Làm thế nào để cải thiện blog WordPress cuối tuần này
Ví dụ: nếu bạn muốn chỉnh sửa một ấn phẩm riêng lẻ, bạn có thể sử dụng lớp post-id trong CSS tùy chỉnh của mình.
.post-412 {background-color: #FF0303; color: #FFFFFF; }
Nhớ thay đổi ID bài đăng để khớp với ID bài đăng của bạn.
Hãy xem một ví dụ khác.
Lần này, chúng tôi sẽ đề cập đến tất cả các bài viết được đăng trong một danh mục cụ thể gọi là "tin tức".
Khám phá hướng dẫn của chúng tôi trên Cách thêm CSS tùy chỉnh vào blog WordPress của bạn
Chúng tôi có thể làm điều này bằng cách thêm CSS tùy chỉnh sau vào chủ đề của chúng tôi.
.category-actualites {font-size: 18px; kiểu chữ: italic; }
CSS này sẽ ảnh hưởng đến tất cả các mục trong danh mục " thời sự '.
Hàm post_class ()
Nhà phát triển chủ đề sử dụng chức năng post_class () để cho WordPress biết nơi để thêm các lớp bài đăng. Thường thì nó nằm trong thẻ "article".
Chức năng của post_class () không chỉ tải các lớp CSS do WordPress tạo ra theo mặc định mà còn cho phép bạn thêm các lớp của riêng mình.
Khám phá cũng Làm thế nào để bảo vệ chọc nội dung blog của bạn
Theo của bạn theme WordPress, bạn sẽ tìm thấy hàm post_class () trong tệp single.php của mình hoặc trong các tệp mẫu. Thông thường mã sẽ trông như thế này:
" >
Bạn có thể thêm lớp CSS tùy chỉnh của riêng bạn với một thuộc tính như thế này:
" >
Lớp post_group sẽ in các lớp CSS mặc định tương ứng với lớp CSS tùy chỉnh của bạn.
Nếu bạn muốn thêm nhiều lớp CSS, bạn có thể định nghĩa chúng là một mảng và sử dụng chúng trong hàm post-class ().
" >
Hiển thị các bài viết với một phong cách khác nhau theo các tác giả
Các lớp CSS mặc định được tạo bởi hàm posts_class không bao gồm tên tác giả dưới dạng một lớp CSS.
Nếu bạn muốn tùy chỉnh phong cách của mỗi bài đăng dựa trên tác giả, trước tiên bạn cần thêm tên tác giả làm lớp CSS.
Đọc cũng: Làm thế nào để thêm hình ảnh động CSS WordPress
Bạn có thể làm điều này bằng cách sử dụng đoạn mã sau:
" >
Mã này sẽ thêm tên người dùng dưới dạng lớp CSS. Tên người dùng là tên tương thích với URL được WordPress sử dụng. Nó không có khoảng trắng và tất cả các ký tự đều là chữ thường, điều này làm cho nó hoàn hảo để sử dụng như một lớp CSS.
Cũng xem hướng dẫn của chúng tôi trên Cách thêm CSS tùy chỉnh vào blog WordPress của bạn
Đoạn mã trên có thể sẽ hiển thị như thế này:
Giờ đây, bạn có thể sử dụng ".peter" trong CSS tùy chỉnh của mình để sửa đổi tất cả các bài đăng của tác giả cụ thể đó để chúng xuất hiện khác nhau.
.peter {background-color: #EEEE; đường viền: 1px solid #CCC; }
Tùy chỉnh đăng bài viết dựa trên ý kiến
Bạn có thể đã thấy các trang web với các widget với các bài viết phổ biến đôi khi được xếp hạng dựa trên các bình luận. Trong ví dụ này, chúng tôi sẽ chỉ cho bạn cách tạo một phong cách khác bằng cách sử dụng số lượng bình luận.
Khám phá của chúng tôi 10 plugin WordPress cao cấp để quản lý nhận xét của bạn
Đầu tiên, chúng ta cần lấy số lượng bình luận và liên kết một lớp.
Để có được số lượng bình luận, bạn cần thêm đoạn mã sau vào tệp của mình theme WordPress. Mã này đi vào vòng lặp WordPress, bạn có thể thêm nó ngay trước thẻ .
tán thành; if ($ my_comment_count <10) {$ my_comment_count = 'new'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'phổ biến'; }?>
Mã này kiểm tra số lượng bình luận cho ấn phẩm được đăng và gán cho chúng một giá trị dựa trên tài khoản. Ví dụ: các thư có ít hơn bình luận 10 có được một lớp gọi là " mới Ít hơn 20 được gọi mới nổi ", Và tất cả những gì quan tâm nhiều hơn bình luận 20 là" phổ biến '.
Sau đó, bạn cần thêm lớp CSS vào hàm post_group.
" >
Điều này sẽ thêm các lớp CSS mới, mới nổi và phổ biến cho tất cả các bài viết dựa trên số lượng bình luận trong mỗi bài viết.
Chúng tôi cũng mời bạn đọc bài viết của chúng tôi về Plugin 6 WordPress để ký tài liệu trực tuyến
Bạn cũng có thể thêm CSS tùy chỉnh vào các ấn phẩm phong cách dựa trên mức độ phổ biến:
.new {border: rắn 1px #FFFF00;} .emerging {border: tiêu tan 1px #FF9933;} .popular {border: tiêu tan 1px #CC0000;}
Chúng tôi chỉ thêm đường viền, nhưng bạn có thể thêm bất kỳ quy tắc CSS nào bạn muốn.
Khám phá thêm một số plugin WordPress cao cấp
Bạn có thể sử dụng cái khác plugin WordPress để tạo ra một giao diện hiện đại và để tối ưu hóa kết nối với blog hoặc trang web của bạn.
Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.
1. Ultimate Membership Pro
Ultimate Membership Pro là một Plugin WordPress trả phí đăng ký và hạn chế nội dung. Nó cho phép người dùng được quản lý theo gói của họ (miễn phí hoặc trả phí) bằng cách tạo các cấp độ truy cập độc quyền.
Do đó, nó sẽ có thể bảo vệ tất cả nội dung của trang web của bạn, hoặc chỉ một phần của nó. Ví dụ, nó sẽ là một khóa học, một bài học, một trang, một sản phẩm, một danh mục, một hình ảnh, v.v.
Đọc bài viết của chúng tôi về Các plugin WordPress cao cấp 4 để tạo hình thu nhỏ
Các chức năng chính của nó là trong số những chức năng khác: bảo vệ nội dung, nhiều cấp độ truy cập, hỗ trợ nhiều cổng thanh toán - PayPal, Ủy quyền.net, Đường sọc, 2CheckOut, Chuyển khoản ngân hàng-, bảo vệ một phần nội dung, Và nhiều hơn nữa…
Tải về | Bản demo | Web hosting
2. Thanh trượt cho Facebook
Làm thế nào Slider cho Facebook là một Plugin WordPress cao cấp cung cấp cho khách truy cập tùy chọn để lại nhận xét trên trang web của bạn. Với hộp nhận xét hiện đại và không xâm phạm, điều này Plugin WordPress cung cấp tính năng Like Box và Fan Page Wall sẽ mở rộng khả năng tích hợp trang web của bạn với mạng xã hội Facebook.
Plugin cũng cung cấp các chức năng khác nhau để mở rộng khả năng của trang web của bạn: Chẳng hạn, nó có một phần Thích (“Like Box”) hoặc một trang dành riêng cho người hâm mộ (“Fan Page Wall).
Khám phá quá Cách tải dần bình luận Facebook và Disqus
Bạn không cần phải nhúng các nút "Thích" và "Chia sẻ" vào bài đăng hoặc trang, vì Facebook Comment Slider đã có chúng và chúng có thể xuất hiện trên bất kỳ bài đăng hoặc trang nào. Khách truy cập sẽ tìm thấy nút "Thích", nút "Chia sẻ" và hộp bình luận thanh trượt Facebook. Họ rõ ràng sẽ sử dụng tài khoản Facebook của họ.
Bên cạnh đó, bạn có thể bật, tắt và cài đặt thời gian của hiệu ứng lắc.
Tải về | Bản demo | Web hosting
3. Đăng nhập Ninja
Plugin WordPress cao cấp này cho phép bạn tùy chỉnh trang đăng nhập của mình. Nó không chỉ là tùy chỉnh mẫu đăng nhập của bạn. Bạn có thể tùy chỉnh toàn bộ trang, bằng cách thay đổi màu của trang, thêm hình nền, thêm logo và hơn thế nữa.
Các tính năng khác của nó là: bảo vệ các biểu mẫu đăng nhập và đăng ký bằng captcha, cấm tự động và thủ công các IP tấn công bạn bằng vũ lực, nhật ký chi tiết về tất cả các hoạt động kết nối, chuyển hướng người dùng dựa trên vai trò và tên người dùng, nhận thông báo qua email cho tất cả các sự kiện kết nối, giao diện đồ họa dễ sử dụng, tài liệu chi tiết và hơn thế nữa.
Tải về | Bản demo | Web hosting
Tài nguyên đề xuất
Tìm hiểu về các tài nguyên được đề xuất khác để giúp bạn xây dựng và quản lý trang web của mình.
- Các plugin 9 WordPress để quản lý thanh toán PayPal trên Blog của anh ấy
- 10 plugin WordPress cần thiết để cài đặt trên blog của bạn
- 10 plugin WordPress sử dụng để quản lý quảng cáo
- Plugin 10 WordPress để tạo thuộc tính cho các sản phẩm biến của bạn
Kết luận
Đây là ! Đó là tất cả cho hướng dẫn này, tôi hy vọng nó cho phép bạn tùy chỉnh hiển thị các bài viết trên blog WordPress của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào trong lĩnh vực này, hãy tìm cho mình phần ý kiến để thảo luận.
Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
