Đôi khi, bạn có thể thấy rằng khi bạn thêm CSS tùy chỉnh vào trang web của mình, nó dường như không được áp dụng chính xác. Có rất nhiều lý do tại sao điều này có thể xảy ra, nhưng lý do chính là trung tâm của chữ “C” trong tên đầy đủ của CSS [“Cascading Style Sheets”] và cách WordPress liệt kê các biểu định kiểu của bạn vào trang web của bạn
Chúng tôi sẽ hướng dẫn bạn những điều cơ bản đó để bạn hiểu điều gì đang xảy ra, cách chẩn đoán sự cố và cách giải quyết sự cố
chuyện gì đang xảy ra
Đây là một ví dụ. Giả sử bạn có một chủ đề con và bạn có một plugin có biểu định kiểu riêng. Đối với ví dụ này, hãy gọi nó là “Reaction Buttons”. Nếu bạn kích hoạt plugin đó và sau đó thử ghi đè các kiểu trong chủ đề con của mình, bạn sẽ nhận thấy rằng nó không hoạt động
Có giải thích kỹ thuật. Plugin đang xếp hàng biểu định kiểu tương ứng của nó với hành động sai. Nhưng kết quả là biểu định kiểu được thêm vào sau trong trang của bạn, do đó được ưu tiên hơn bất kỳ kiểu nào trước nó
Bạn thấy đấy, đó là phần “Cascading” của “Cascading Style Sheets”, hay còn gọi là CSS. Đây là một ví dụ khác. Giả sử tôi muốn làm cho tất cả các phần tử H2 của tôi có màu đỏ và tất cả các phần tử P của tôi có màu xanh lam. tôi có thể làm điều này
H2 {màu. đỏ;}
p {màu. màu xanh da trời;}
Nhưng nếu sau đó tôi tạo kiểu cho H2 thành màu cam, sau đó trong cùng một biểu định kiểu, thì TẤT CẢ H2 của tôi sẽ có màu cam. Như thế này
h2 {màu. red;} /* ← cái này không được áp dụng /
p {color. xanh da trời;}
h2 {color. màu cam;} / ← vì cái này xuất hiện sau trong tệp */
Do đó, thuật ngữ "xếp tầng". Điều tương tự cũng xảy ra với nhiều biểu định kiểu. Nếu h2 màu cam đó được nhập trong biểu định kiểu được xuất muộn hơn biểu định kiểu màu đỏ, thì biểu định kiểu màu cam sẽ được áp dụng và biểu định màu đỏ hoàn toàn bị bỏ qua
Làm thế nào để chẩn đoán vấn đề
May mắn thay, việc tìm và chẩn đoán sự cố khá dễ dàng. Truy cập bất kỳ trang nào trên trang web của bạn và trong Chrome, nhấp chuột phải và chọn “Kiểm tra”. Điều đó sẽ mở ra một cửa sổ mới với tất cả các loại mã trong đó. Tìm phần tử và mở rộng nó. Ở đó, bạn sẽ thấy một danh sách dài các yếu tố. Đó là nhiều bảng định kiểu của bạn được thu thập từ nhiều nguồn khác nhau. Khi được thực hiện chính xác, mỗi người nên có một ID nhận dạng. Rất có thể, bạn sẽ nhận thấy rằng kiểu plugin của bạn muộn hơn kiểu chủ đề của bạn
Đó chính xác là những gì đang xảy ra với chủ đề đứa trẻ đáng thương của chúng tôi và biểu định kiểu Nút phản ứng. Nhìn thấy
Chú ý. Bạn cũng sẽ biết mình gặp sự cố này nếu bắt đầu thêm CSS và thấy mình phải thêm. quan trọng đối với tất cả các phong cách của bạn. Theo nguyên tắc chung, bạn không cần phải làm điều đó miễn là mọi thứ được xử lý chính xác
Phải làm gì về nó
Bây giờ chúng ta đã hiểu về "xếp tầng" và chúng ta biết rằng thứ tự của các biểu định kiểu là sai, nhưng làm cách nào để sửa nó?
Câu trả lời ngắn gọn là bạn sắp xếp lại các bảng định kiểu. Nhưng làm thế nào để bạn làm điều đó cụ thể trong WordPress? . Nhưng bạn có thể làm gì trong lúc này?
Một phần trong cách WordPress xuất các biểu định kiểu lên trang là hỏi xem biểu định kiểu đó có “phụ thuộc” vào bất kỳ biểu định kiểu nào khác không. Bạn không muốn thay đổi trực tiếp các tệp plugin, nhưng bạn có quyền kiểm soát chủ đề con của mình và cách nó liệt kê biểu định kiểu của nó. Ví dụ: hầu hết các chủ đề con liệt kê các kiểu của chúng như thế này
wp_enqueue_style[ ‘total-child-css’,
get_stylesheet_directory_uri[]. '/Phong cách. css’, mảng[‘total-parent-css’], ‘1. 0’, tất cả ];
Giữa các dấu ngoặc đơn, bạn sẽ nhận thấy rằng có năm đối số được phân tách bằng dấu phẩy. Đối số thứ ba được gọi là "sự phụ thuộc". Trong trường hợp này, người ta nói rằng chủ đề con phụ thuộc vào chủ đề gốc và nó gọi nó theo "xử lý" của chủ đề gốc
Đây là mẹo. Đảm bảo rằng chủ đề con CŨNG phụ thuộc vào biểu định kiểu Nút phản ứng. Tất cả những gì chúng ta cần làm là tìm "xử lý" của biểu định kiểu đó và thêm nó vào mảng phụ thuộc của chúng ta
Thật không may, WordPress không giúp bạn dễ dàng tìm thấy phần xử lý của các biểu định kiểu. Có hai cách bạn có thể làm điều này
- Bạn có thể mở các tệp của plugin Reaction Buttons và tìm kiếm “wp_enqueue_style”. Đối số đầu tiên trong hàm đó là các biểu định kiểu “xử lý”
- Nếu bạn không thích chạm vào mã, hãy cài đặt hai plugin. Thanh gỡ lỗi và Phụ thuộc tập lệnh và kiểu thanh gỡ lỗi. Sau khi chúng được kích hoạt, hãy truy cập bất kỳ trang giao diện người dùng nào và trong thanh quản trị của bạn, bạn sẽ thấy một liên kết có tên là “Gỡ lỗi”. Nhấp vào đó và chọn tab có tên “Script and Style Dependencies”. Xem qua danh sách đó để tìm phần điều khiển của biểu định kiểu Nút phản ứng. Đây là những gì nó trông giống như
Bây giờ chúng ta đã biết tay cầm là gì, hãy thêm nó vào phụ thuộc chủ đề con của chúng ta, như thế này
wp_enqueue_style[ ‘total-child-css’,
get_stylesheet_directory_uri[]. '/Phong cách. css’, mảng[‘total-parent-css’, ‘reaction_buttons_css’], ‘1. 0’, tất cả ];
Đó là nó. Giờ đây, khi bạn viết các kiểu tùy chỉnh trong chủ đề con của mình, chúng sẽ tự động ghi đè bất kỳ kiểu nào trong plugin Nút phản ứng
Xếp tầng có thể trở nên phức tạp
Giống như tất cả mọi thứ trong phát triển web, chủ đề này có thể phức tạp hơn nhiều. Ví dụ: WordPress liệt kê tất cả các plugin theo thứ tự bảng chữ cái. Nếu bạn đang xây dựng plugin có kiểu và bạn muốn nó được áp dụng muộn, thì bạn đang bị mắc kẹt
Ngoài ra còn có vấn đề về tính đặc hiệu của CSS. Các chủ đề đôi khi tạo ra các phong cách cực kỳ cụ thể; . ToTheNew có một bài viết tuyệt vời về tính đặc hiệu, cũng như Smashing Magazine
Cuối cùng, việc hiểu tính đặc hiệu, tính kế thừa và cách WordPress xếp hàng các biểu định kiểu là cực kỳ quan trọng đối với các tác giả plugin, những người có thể đang xếp hàng nhiều biểu định kiểu. Việc đảm bảo các phần phụ thuộc phù hợp có thể làm giảm lượng CSS bạn phải viết – đừng quên rằng, nếu bạn khai báo một phần phụ thuộc và biểu định kiểu đó không được đánh dấu là đầu ra vì một số lý do, thì biểu định kiểu của bạn cũng sẽ không được xuất ra
Tóm lại là
Với tất cả những điều đó, việc khắc phục sự cố xếp hàng và xếp tầng sẽ dễ dàng hơn nhiều đối với bạn. Tự tin và CSS đi nội dung trái tim của bạn