CSS tùy chỉnh WPBakery không hoạt động

Đô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

1. 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ý”
2. 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

Tại sao Trình tạo trang WPBakery của tôi không hoạt động?

Tại sao WPBakery không cập nhật?

Tại sao Visual Composer không hoạt động?

Visual Composer có tương thích với WPBakery không?