Bỏ qua đến nội dung chính

Làm thế nào để đưa ra một phong cách độc đáo cho mỗi mục trên WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

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.Cách tạo phong cách riêng cho từng bài viết trên wordpress

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 trên các yếu tố khác nhau của trang web của bạn. Một chủ đề WordPress tương thích tiêu chuẩn phải có mã do WordPress yêu cầu để thêm các lớp CSS cho phần thân, bài viết, trang, widget, menu, v.v.

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.

Lớp học css bảng điều khiển wordpress

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.

Tùy chỉnh giao diện của một bài viết trên wordpress

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

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

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

Tùy thuộc vào chủ đề WordPress của bạn, bạn sẽ tìm thấy hàm post_group () trong tệp single.php của bạn 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

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀ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ó số lượng bình luận, bạn cần thêm mã sau vào các tệp chủ đề WordPress của mình. 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ác plugin WordPress khác để mang lại vẻ ngoài 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 Memberhip Pro là một plugin hạn chế nội dung và đăng ký WordPress cao cấp tuyệt vời. 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.

Thành viên cuối cùng thành viên chuyên nghiệp wordpress thành viên plugin wordpress

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, Authorize.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 cơ hội để lại nhận xét trên trang web của bạn. Với hộp bình luận hiện đại và không xâm phạm này, plugin WordPress này cung cấp chức năng Like Box và Fan Page Wall sẽ mở rộng sự tích hợp trang web của bạn với mạng xã hội Facebook.Cách trượt cho facebook wordpress plugin xã hội wordpress

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.Ninja đăng nhập plugin wordpress

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

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.

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.

... 

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang