Hướng dẫn wordpress add custom css to single page - wordpress thêm css tùy chỉnh vào một trang

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 độc đáo cụ thể nhưng không chắc chắn làm thế nào trước đây, thì đừng tìm đâu xa!

Cách nhắm mục tiêu các trang cụ thể

WordPress thực sự giúp chúng tôi khá dễ dàng để tạo kiểu cho các trang cụ thể (có phải là tuyệt vời không?) Bằng cách thêm một lớp cụ thể trang duy nhất vào mỗi trang.

Để nhắm mục tiêu và áp dụng các kiểu cho các trang cụ thể, trước tiên bạn cần xác định vị trí lớp cụ thể của trang trong trang bạn đang tìm kiếm kiểu.specific pages, you first need to locate the page specific class in the of the page you are looking to style.

thẻ bạn nói?

Đừ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 cơ thể. Don Tiết bị nhầm lẫn bở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à một #ID.page-id class generated in the body. Don’t be confused by the id bit of the class (I was at first I’ll admit), it’s a class not an #id.

Cách xuất trình CSS của bạn

Đối với những người mới đến 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 tệp Styles.css có thể truy cập thông qua phụ trợ WordPress của bạn, thường bằng cách theo dõi con đường này:

Ngoại hình> Biên tập> Styles.css

Tùy thuộc vào chủ đề bạn đang sử dụng, bạn có thể có tab CSS tùy chỉnh được tích hợp vào chủ đề, điều này làm điều tương tự cho bạn và xuất ra các kiểu của bạn trong tệp styes.css của bạn, nhưng cho phép bạn nhập CSS của bạn vào một trình soạn thảo trong một trình soạn thảo trong một Tab chủ đề.Custom CSS tab built into the theme, which does the same thing for you and outputs your styles within your Styes.css file, but allows you to input your CSS in an editor within a Theme tab.

Áp dụng kiểu dáng bằng lớp trang duy nhất

Trong video trên, tôi đã chỉ cho bạn cách tìm lớp ID trang cụ thể bằng trang WordPress trang web của chúng tôi làm ví dụ, bạn cần sử dụng CSS tùy chỉnh cho các trang cụ thể trên WordPressspecific page-id class using our WordPress Websites page as an example, which you need to use custom CSS for specific pages on WordPress

Trong video, có vẻ như lớp ID trang cho trang này là:page-id class for this page is:

.page-id-2211

Vậy làm thế nào tôi sẽ áp dụng các kiểu cho trang cụ thể này?

Theo cùng một cách mà tôi đã áp dụng kiểu dáng bình thường, sử dụng lớp ID trang làm ‘phần tử của tôi hoặc‘ Target.apply styling normally, using the page-id-class as my ‘element’ or ‘target’.

Chẳng hạn, nếu tôi muốn làm cho tiêu đề trên trang đó lớn, tôi sẽ sử dụng CSS dưới đây:title on that page monstrously large, I would use the below CSS:

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

Tiêu đề quái vật đã không có vẻ tuyệt vời. didn’t look great surprisingly.

Kiểu dáng toàn bộ trang

Kiểu một trang yếu tố

Ví dụ, nếu bạn muốn áp dụng các kiểu cho tất cả các thẻ trên một trang cụ thể, mã sẽ trông như thế này:

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

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

Tạo kiểu nhiều yếu tố rộng

Nếu bạn muốn áp dụng một tập hợp các kiểu cho nhiều thẻ trên một trang cụ thể, nó sẽ trông như thế này:styles to multiple tags on a particular page, it would look like this:

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

Tạo kiểu nhiều trang với cùng một CSS

Hãy nói rằng bạn muốn tạo kiểu cho nhiều trang WordPress độc đáo với 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ề thời gian, như dưới đây:style multiple unique WordPress pages with the same CSS. You could write multiple lines of code that would be inefficient and not time effective, like below:

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

Trang-ID-2741 Tôi phát hiện ra là lớp ID trang cho trang WordPress Pro của tôi.I found out was the page-id class for my WordPress Pro page.

Viết ra cùng một mã hoặc kiểu cho mỗi trang có thể khiến thời gian tốn thời gian, không sợ, 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ạo kiểu nhiều trang theo một dòng

Tôi đã viết lại các 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 h2, h2, h3, h4, p, img, .page-id-2741 h2, h2, h3, h4, p, img { margin-top: 20px; }

Và một phần đơn giản hơn của kiểu dáng:

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

Như bạn có thể thấy từ hình ảnh của tôi dưới đây, dòng mã này đã thay đổi văn bản đoạn văn màu đỏ trên cả trang web WordPress của tôi và các trang WordPress Pro. Tôi đã thay đổi nó trở lại sau đó, thật không may, văn bản màu đỏ không phải là đối với tôi.paragraph text red on both my WordPress Websites and WordPress Pro pages. I did change it back after, unfortunately the red text wasn’t for me.

Kiểu trang blog

Để tạo kiểu trang blog của bạn với CSS tùy chỉnh trên WordPress, tức là trang bài đăng trên blog của bạn được hiển thị, bạn có thể sử dụng mã sau:Blog page with custom CSS on WordPress, i.e the page your blog posts are displayed on, you could use the following code:

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

Nếu điều này không hoạt động, thì đó có thể là do trang blog của bạn được đặt làm trang bài đăng mặc định trong cài đặt đọc WordPress của bạn.blog page isn’t set as the default post page in your WordPress reading settings.

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 trang-ID của trang blog thực tế của bạn.page-id method to grab the page-id of your actual blog page.

Tạo kiểu một bài cụ thể

Kiểu dáng Một bài viết 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 thức, nhưng thay vì ID trang-ID, bạn sẽ tìm kiếm một bài viết độc đáo cho bài đăng bạn muốn tạo kiểu.exactly the same method, but instead of a page-id, you will be looking for a unique post-id for the post you want to style.

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

.postid-4474 p { font-size: 24px; }

Post-ID-4475 là lớp ID 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ố của bạn.post-id class for my blog post Why Your Website Is Sabotaging Your Sales.

Nếu tôi lưu mã này trong tab CSS tùy chỉnh của mình hoặc trong tệp CSS .Style cho chủ đề WordPress của tôi, nó sẽ được xuất vào lý do 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.custom css tab, or in the .styles css file for my WordPress theme, it would be output onto the Why Your Website Is Sabotating Your sales blog post.

Hy vọng rằng bạn đã tìm 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 thấy được mở rộng khi cho tôi biết hoặc nếu bạn cần trợ giúp với một dự án WordPress, hãy gửi email cho tôi tại -need help with a WordPress project, email me at —

Làm cách nào để thêm mã tùy chỉnh vào một trang trong WordPress?

Làm cách nào để thêm CSS tùy chỉnh vào bảng điều khiển WordPress của tôi?

Làm cách nào để thêm một CSS kiểu vào chủ đề WordPress?