Cách thêm lớp tùy chỉnh trong WordPress

Menu tiêu chuẩn trong WordPress, mặc dù mạnh mẽ và dễ dàng thêm vào hầu hết mọi chủ đề, nhưng lại để lại một chút mong muốn khi nói đến kiểu dáng

Chưa kể, các lớp menu WordPress tích hợp có thể khá khó hiểu. Có menu-mục-loại-phân loại, menu-cha mẹ hiện tại, menu-tổ tiên hiện tại và một loạt các bộ chọn nhầm lẫn khác mà bạn có thể chọn để tạo kiểu cho menu của mình thú vị như nhổ tóc

Một menu WordPress tiêu chuẩn có thể trông như thế này

Trong trường hợp này, một thanh màu xám có di chuột màu xám đậm hơn. Không quá nhiều để xem xét, phải không?

Chỉ để đặt một di chuột nền đỏ đơn giản sẽ yêu cầu bạn biết một số bộ chọn CSS và tên của chúng khá dài

Nhưng may mắn thay, WordPress cũng cung cấp cho bạn chức năng thêm các lớp tùy chỉnh vào menu của bạn – điều này làm cho quá trình tạo kiểu cho chúng trở nên dễ dàng hơn nhiều

Vì vậy, thay vì sử dụng các công cụ dành cho nhà phát triển trình duyệt của bạn để nhắm mục tiêu một số tên menu gần như vô nghĩa, bạn có thể tạo các lớp menu của riêng mình dễ nhớ hơn và dễ tạo kiểu hơn nhiều

Bật Custom Classs trong WordPress Menu Admin

Để sử dụng các lớp tùy chỉnh, chúng phải được hiển thị. Bạn làm điều này trong khu vực quản trị menu của bạn

Đảm bảo đánh dấu vào hộp kiểm cho mục Lớp CSS trong menu thả xuống Tùy chọn màn hình. Sau đó, mở Trang bạn muốn chỉnh sửa. Bạn sẽ nhận thấy một phần mới đã được thêm vào các mục menu của bạn

Bạn có thể nhập bất kỳ tên nào vào ô này. Bạn không muốn sử dụng bất kỳ bộ chọn nào như # hoặc. (giai đoạn = Stage). Chỉ cần nhập văn bản lớp như trong hình bên dưới

Tôi đã chọn tên lớp redback cho dễ nhớ

Sau khi menu được lưu, bạn có thể nhập CSS tùy chỉnh ở bất kỳ đâu mà bạn thường làm điều đó – theo phong cách của bạn. css hoặc trong plugin css tùy chỉnh

Ở đây, tôi đã chọn quy tắc CSS sau

Đang tải ý chính 35370f71362f7766aafd669da0f30c87

Điều đó nhắm mục tiêu bất kỳ mục nào được gắn thẻ sao lưu lớp tùy chỉnh và thay đổi trạng thái di chuột của nó để sử dụng nền đỏ

Bạn thậm chí có thể sử dụng các lớp tùy chỉnh để thêm logo vào các mục menu của mình như thế này

Các nguyên tắc tương tự tuân theo với các lớp tùy chỉnh. Để biết thêm thông tin về cách thêm logo vào menu của bạn, hãy xem hai bài viết này

Bạn có muốn tùy chỉnh giao diện của các biểu mẫu WordPress của mình không?

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm các lớp CSS tùy chỉnh để tạo kiểu cho các phần tử biểu mẫu cụ thể, cũng như cách thêm bất kỳ CSS tùy chỉnh nào vào trang web WordPress của bạn

Ghi chú. Nếu bạn chưa quen với CSS, thì hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách tạo kiểu cho biểu mẫu bằng CSS là nơi tốt nhất để bắt đầu

Lớp CSS là gì?

Các lớp CSS là một cách nhắm mục tiêu các phần tử mà bạn muốn tạo kiểu trên trang web của mình

Trong WPForms, các trường được tự động gán một số lớp CSS. Chẳng hạn, nếu một trường được đặt thành Kích thước trường lớn, nó sẽ được gán lớp CSS wpforms-field-large

Bằng cách thêm một lớp CSS tùy chỉnh, bạn có thể dễ dàng nhắm mục tiêu một trường biểu mẫu cụ thể hoặc áp dụng cùng một kiểu cho nhiều trường

Thêm các lớp CSS tùy chỉnh trong WPForms

Trong WPForms, bạn có thể thêm các lớp CSS tùy chỉnh của riêng mình vào các trường biểu mẫu riêng lẻ, nút gửi hoặc vùng chứa xung quanh biểu mẫu của bạn

Thêm các lớp CSS vào các trường biểu mẫu riêng lẻ

Để thêm lớp CSS tùy chỉnh vào trường biểu mẫu, bạn cần tạo biểu mẫu mới hoặc chỉnh sửa biểu mẫu hiện có

Trong bảng xem trước của trình tạo biểu mẫu, nhấp vào trường để mở Tùy chọn trường của nó. Sau đó, mở tab Nâng cao và tìm trường có nhãn Lớp CSS

Khi đặt tên cho một lớp CSS, bạn chỉ có thể sử dụng các chữ cái hoặc số và không được phép có khoảng trắng. Tên lớp phân biệt chữ hoa chữ thường, vì vậy bạn nên sử dụng chữ thường. Nếu bạn muốn tên lớp chứa nhiều hơn một từ, hãy bao gồm dấu gạch nối (-) hoặc dấu gạch dưới (_) thay vì khoảng trắng

Để tránh gặp phải bất kỳ sự cố nào, hãy luôn bắt đầu tên lớp của bạn bằng một chữ cái

Đối với ví dụ này, chúng tôi sẽ đặt tên cho lớp CSS của chúng tôi là wpf-blue-background

Bằng cách thêm wpf- vào đầu các lớp học của chúng tôi, chúng tôi ít có khả năng thêm tên lớp đã được sử dụng bởi chủ đề trang web của chúng tôi. Điều này sẽ giúp tránh xung đột về kiểu và giúp các kiểu của chúng ta có nhiều khả năng được áp dụng thành công hơn

Khi bạn đã sẵn sàng, hãy thêm lớp CSS wpf-blue-background vào trường Lớp CSS

Nếu muốn, bạn cũng có thể thêm các lớp bổ sung vào trường này. Để làm điều đó, chỉ cần thêm một dấu cách giữa mỗi tên lớp. Ví dụ

wpf-blue-background wpf-bold-font wpf-xl-margin

Ghi chú. Trường Lớp CSS cũng có thể được sử dụng để hiển thị các trường biểu mẫu trong bố cục nhiều cột và dưới dạng bố cục một cột trên thiết bị di động

Thêm các lớp CSS vào Bộ chứa biểu mẫu hoặc Nút gửi

Đối với một số kiểu, có thể hữu ích khi nhắm mục tiêu vùng chứa của biểu mẫu hoặc nút gửi của biểu mẫu

Ví dụ: bạn có thể muốn các nút gửi cho tất cả các biểu mẫu đăng ký trên trang web của mình được tạo kiểu theo một cách và các nút gửi trong bất kỳ biểu mẫu liên hệ chung nào được tạo kiểu theo một cách khác. Một cách dễ dàng để thực hiện điều này là thêm cùng một lớp CSS vào bất kỳ nút gửi nào mà bạn muốn được tạo kiểu theo cùng một cách

Để thêm tên lớp CSS tùy chỉnh cho một trong hai tùy chọn, hãy mở trình tạo biểu mẫu và đi tới Cài đặt »Chung. Từ đây, đi tới phần Nâng cao và bạn sẽ có thể thấy các trường dành cho Lớp CSS biểu mẫu và Lớp CSS nút gửi

Nếu bạn muốn thêm nhiều tên lớp, chỉ cần tách từng tên bằng dấu cách

Ghi chú. Nếu muốn, bạn có thể sử dụng lớp CSS biểu mẫu tích hợp sẵn để hiển thị biểu mẫu của mình trên một dòng

Tạo và thêm các kiểu CSS cho trang web của bạn

Bây giờ bạn đã thêm một lớp CSS tùy chỉnh vào một trường trong biểu mẫu của mình, bạn có thể tạo các kiểu bạn muốn áp dụng

Tạo kiểu CSS

CSS là một công cụ mạnh mẽ với nhiều tùy chọn kiểu dáng có sẵn. Để biết hướng dẫn về cách bắt đầu tạo CSS, vui lòng xem Hướng dẫn CSS cho người mới bắt đầu của chúng tôi

Ví dụ của chúng tôi, chúng tôi chỉ cần thêm nền màu xanh vào bất kỳ trường nào với lớp wpf-blue-background. Khi nhắm mục tiêu tên lớp trong CSS, tên đó phải luôn bắt đầu bằng dấu chấm (. ), ví dụ .wpf-blue-background

Vì nhiều kiểu đã được áp dụng cho biểu mẫu của bạn, bạn cũng nên làm cho CSS của mình cụ thể hơn. Để làm điều đó, chỉ cần thêm .wpforms-form trước tên lớp tùy chỉnh của bạn

Đây là CSS ví dụ của chúng tôi

.wpforms-form .wpf-blue-background {
    background-color: #d1effd;
}

Nếu kiểu tùy chỉnh của bạn không được áp dụng thành công, bạn có thể bao gồm. quan trọng trước dấu chấm phẩy

Ghi chú. sử dụng. quan trọng là chỉ cần thiết nếu phong cách của bạn không được áp dụng khác. Của chúng tôi chứa nhiều chi tiết hơn

Thêm CSS vào trang web WordPress của bạn

Một cách nhanh chóng và dễ dàng để thêm CSS tùy chỉnh vào trang web của bạn là sử dụng Trình tùy chỉnh chủ đề WordPress. Đây là một tùy chọn phổ biến vì nó có sẵn trong hầu hết các chủ đề và có khu vực xem trước trực tiếp

Nếu bạn muốn xem các phương pháp bổ sung, vui lòng xem hướng dẫn của WPBeginner về cách thêm CSS tùy chỉnh vào WordPress

Để truy cập khu vực CSS của Công cụ tùy chỉnh chủ đề, hãy chuyển đến Giao diện » Tùy chỉnh rồi chọn tab có nhãn CSS bổ sung

Tiếp theo, hãy tiếp tục và thêm đoạn mã CSS tùy chỉnh của bạn. Khi bạn đã sẵn sàng, hãy nhấp vào Xuất bản

Đây là cách biểu mẫu ví dụ của chúng ta hiện có với lớp CSS và các kiểu CSS được áp dụng

Ghi chú. Các kiểu tùy chỉnh của bạn không hiển thị?

Đó là nó. Giờ đây, bạn có thể thêm các lớp CSS tùy chỉnh để tạo kiểu cho các khu vực cụ thể trong biểu mẫu của mình

Bạn có muốn xem và sửa đổi các kiểu biểu mẫu tích hợp sẵn của chúng tôi không?