CSS WordPress bổ sung

Trong bài viết này, tôi sẽ chỉ cho bạn cách sử dụng CSS tùy chỉnh trên các trang cụ thể trong WordPress. Nếu bạn đã từng muốn áp dụng kiểu dáng cho một trang duy nhất cụ thể nhưng không chắc chắn về cách thực hiện trước đây, thì không cần tìm đâu xa

WordPress actually makes it quite easy for us to style specific pages (isn’t it awesome?) by adding a unique page specific class to the of every page.

To target and apply styles to specific pages, you first need to locate the page specific class in the of the page you are looking to style.

tags you say?

Đừng lo lắng, tôi đã cung cấp một video đơn giản dưới đây cho bạn thấy chính xác những gì tôi muốn nói

Như bạn có thể thấy từ video, có một lớp id trang duy nhất được tạo trong phần thân. Đừng nhầm lẫn với bit id của lớp (lúc đầu tôi thừa nhận), đó là một lớp không phải là #id

Đối với những người mới sử dụng WordPress hoặc CSS và những người muốn sử dụng CSS tùy chỉnh trên các trang WordPress cụ thể, để kiểu dáng của bạn có hiệu lực, bạn sẽ cần thêm mã CSS của mình vào các kiểu. css có thể truy cập thông qua chương trình phụ trợ WordPress của bạn, thường bằng cách đi theo đường dẫn này

Giao diện> Trình chỉnh sửa> Kiểu. css

Tùy thuộc vào Chủ đề bạn đang sử dụng, bạn có thể có một tab CSS tùy chỉnh được tích hợp trong chủ đề, tab này thực hiện điều tương tự cho bạn và xuất các kiểu của bạn trong Styes của bạn. css, nhưng cho phép bạn nhập CSS của mình vào trình chỉnh sửa trong tab Chủ đề

Trong video ở trên, tôi đã chỉ cho bạn cách tìm lớp id trang cụ thể bằng cách sử dụng trang Trang web WordPress của chúng tôi làm ví dụ mà bạn cần sử dụng CSS tùy chỉnh cho các trang cụ thể trên WordPress

Trong video, có vẻ như lớp id trang cho trang này là

.page-id-2211

Vậy làm cách nào để áp dụng các kiểu cho trang cụ thể này?

Cũng giống như cách tôi áp dụng kiểu dáng thông thường, sử dụng lớp id trang làm 'phần tử' hoặc 'mục tiêu' của tôi

Chẳng hạn, nếu tôi muốn đặt tiêu đề trên trang đó thật lớn, tôi sẽ sử dụng CSS bên dưới

.page-id-2211 .vcex-heading-inner.clr{ font-size: 100px; }

Tiêu đề quái vật trông không tuyệt vời một cách đáng ngạc nhiên

Tạo kiểu cho một phần tử trên toàn trang

If you want to apply styles to all the

tags on a particular page for example, the code would look like this:

.page-id-2211 p { font-size: 24px; }

Tạo kiểu cho nhiều phần tử trên toàn trang

Nếu bạn muốn áp dụng một tập hợp kiểu cho nhiều thẻ trên một trang cụ thể, nó sẽ giống như thế này

.page-id-2211 h1, h2, h3, h4, p, img { margin-top:20px; }

Giả sử bạn muốn tạo kiểu cho nhiều trang WordPress độc đáo bằng cùng một CSS. Bạn có thể viết nhiều dòng mã không hiệu quả và không hiệu quả về mặt thời gian, như bên dưới

page-id-2741 h1, h2, h3, h4, p, img { margin-top: 20px; }.page-id-2211 h1, h2, h3, h4, p, img { margin-top: 20px; }

Page-id-2741 tôi phát hiện ra là lớp id trang cho trang WordPress Pro của tôi

Viết ra cùng một mã hoặc kiểu cho mỗi trang có thể tốn thời gian, tuy nhiên, đừng lo, có một cách viết CSS hiệu quả hơn để nhắm mục tiêu nhiều trang, trong một dòng mã

Tôi đã viết lại CSS ở trên để nhắm mục tiêu nhiều trang bằng một dòng mã bên dưới

.page-id-2211 h1, h2, h3, h4, p, img, .page-id-2741 h1, h2, h3, h4, p, img { margin-top: 20px; }

Và một phần phong cách đơn giản hơn

.page-id-2741 p, .page-id-2211 p { color: red; }

Như bạn có thể thấy từ các hình ảnh của tôi bên dưới, dòng mã này đã thay đổi đoạn văn bản thành màu đỏ trên cả Trang web WordPress và trang WordPress Pro của tôi. Tôi đã thay đổi nó sau đó, tiếc là văn bản màu đỏ không dành cho tôi

Để tạo kiểu cho trang Blog của bạn bằng CSS tùy chỉnh trên WordPress, tôi. e trang mà các bài đăng trên blog của bạn được hiển thị trên đó, bạn có thể sử dụng đoạn mã sau

.blog h1 { font-size: 60px; }

Nếu cách này không hiệu quả, có thể là do trang blog của bạn không được đặt làm trang đăng bài mặc định trong cài đặt đọc WordPress của bạn

Nếu CSS của bạn không hiển thị, hãy sử dụng cùng một phương thức id trang để lấy id trang của trang blog thực của bạn

Tạo kiểu cho một bài đăng cụ thể cũng dễ dàng như tạo kiểu cho một trang cụ thể. Sử dụng chính xác cùng một phương pháp, nhưng thay vì id trang, bạn sẽ tìm id bài đăng duy nhất cho bài đăng bạn muốn tạo kiểu

Dưới đây tôi đã cung cấp một ví dụ về cách bạn tạo kiểu cho một bài đăng blog cụ thể

post-id-4475 là lớp post-id duy nhất cho bài đăng trên blog của tôi Tại sao trang web của bạn đang phá hoại doanh số bán hàng của bạn

Nếu tôi lưu mã này trong tab css tùy chỉnh của mình hoặc trong. styles css cho chủ đề WordPress của tôi, nó sẽ được xuất thành Tại sao trang web của bạn đang phá hoại bài đăng trên blog bán hàng của bạn

Hy vọng rằng bạn thấy bài đăng này Cách sử dụng CSS tùy chỉnh trên các trang cụ thể trong WordPress hữu ích. Nếu có bất cứ điều gì bạn muốn xem được mở rộng khi cho tôi biết hoặc nếu bạn cần trợ giúp với dự án WordPress, hãy gửi email cho tôi theo địa chỉ — hello@squareinternet. đồng