Thêm css vào plugin wordpress

Này có bao giờ xảy ra với bạn? . Nó có chức năng chính xác mà bạn đang tìm kiếm. Nhưng…có vẻ không đúng lắm. Ngay cả sau khi bạn thay đổi tất cả các cài đặt, nó vẫn không phù hợp với kiểu chủ đề của bạn. Vì vậy, mặc dù nó hoạt động tốt như thế nào, bạn vẫn hơi không hài lòng hoặc bạn ném nó sang một bên và sử dụng thứ khác

Nếu có, bạn có thể tận dụng tối đa cả hai thế giới bằng cách sử dụng CSS tùy chỉnh để tạo kiểu cho plugin của mình. Các kiểu CSS tùy chỉnh cho phép bạn thay đổi giao diện của các plugin, ngay cả khi nhà phát triển chưa tích hợp các tùy chọn kiểu vào cài đặt plugin

Bài đăng này hướng đến việc chỉ cho bạn cách thêm các kiểu đó đúng cách để bạn luôn giữ chúng an toàn ngay cả khi bạn cập nhật hoặc thay đổi chủ đề của mình

Kiểu CSS tùy chỉnh = Kiểm soát nhiều hơn đối với giao diện của plugin

Các kiểu CSS tùy chỉnh cho phép bạn điều khiển giao diện của plugin theo những cách khác ngoài những gì nhà phát triển thêm vào tùy chọn plugin. Ngày nay, nhiều plugin cao cấp bao gồm các tùy chọn kiểu dáng chi tiết, nhưng các plugin miễn phí không phải lúc nào cũng toàn diện về mặt này (nếu chúng có bao gồm chúng)

Sử dụng một trong những plugin phổ biến nhất hiện có. Mẫu liên hệ 7. Nó cung cấp rất ít trong cách tạo kiểu. Tuy nhiên, thông qua việc sử dụng CSS tùy chỉnh, bạn hoàn toàn có thể thay đổi mọi khía cạnh về cách hiển thị biểu mẫu

Ngoài ra, ngay cả các plugin có tùy chọn chi tiết không phải lúc nào cũng cung cấp cho bạn khả năng thay đổi mọi thành phần kiểu dáng mà bạn cần sửa đổi

Vì vậy, bằng cách tìm hiểu một chút về CSS và cách thêm CSS đó vào chủ đề của bạn một cách an toàn, bạn sẽ có được một cấp độ sức mạnh hoàn toàn mới đối với cách các plugin của bạn hiển thị với người đọc.

Tại sao việc thêm CSS tùy chỉnh đúng cách lại quan trọng

Bạn không muốn thêm các kiểu CSS của plugin dù muốn hay không. Như Nick nhấn mạnh trong bài đăng của anh ấy về các chủ đề con, có một cách đúng và một cách sai khi thêm CSS vào WordPress

Khi bạn thêm các kiểu CSS đúng cách, chúng sẽ luôn an toàn, ngay cả khi bạn cập nhật chủ đề của mình và bạn sẽ có thể dễ dàng sao chép và dán chúng vào một chủ đề mới nếu bạn quyết định thay đổi thiết kế của mình

Ngược lại, thêm chúng không đúng cách sẽ khiến bạn có nguy cơ mất kiểu khi cập nhật chủ đề hoặc chuyển đổi chủ đề

Bây giờ, tôi sẽ tìm hiểu cách thêm đúng kiểu plugin CSS cho cả Divi và các chủ đề WordPress khác

Nơi thêm các kiểu CSS plugin trong Divi

Để thêm các kiểu CSS của plugin vào Divi một cách an toàn, trước tiên bạn cần chuyển đến tab “Tùy chọn chủ đề” trong menu Divi của mình

Sau đó, trong tab “Chung” (sẽ là tab được tải mặc định), bạn cần cuộn xuống cuối trang. Ở đó, bạn sẽ tìm thấy một hộp có tên “CSS tùy chỉnh”

Về mặt kỹ thuật, tất cả những gì bạn cần làm là nhập CSS plugin tùy chỉnh của mình tại đây và nhấp vào “Lưu thay đổi. ” Nhưng, vì chúng tôi muốn làm cho việc di chuyển hoặc sao chép tất cả các kiểu plugin của chúng tôi thực sự dễ dàng, hãy tiến thêm một bước nữa

Vì bạn có thể đã thêm một số đoạn mã Divi CSS tùy chỉnh, nên việc tổ chức CSS tùy chỉnh trong hộp này sẽ giúp ích cho bạn. Để làm điều đó, bạn có thể thêm một nhận xét có nội dung như “Plugin CSS Styles Start Here”. Sau đó, bạn sẽ chỉ thêm các kiểu CSS plugin của mình bên dưới dòng đó

Để thêm một bình luận như vậy, tất cả những gì bạn cần làm là sao chép và dán mã này

/* Plugin CSS Styles Start Here */

Nhận xét sẽ không ảnh hưởng gì nhưng sẽ giúp tổ chức các kiểu CSS tùy chỉnh khác nhau của bạn. Divi cũng sẽ giữ an toàn cho các kiểu CSS tùy chỉnh của bạn trong quá trình cập nhật, vì vậy bạn không cần lo lắng về việc mất chúng

Nơi thêm các kiểu CSS plugin cho các chủ đề khác

Nếu bạn đang sử dụng một chủ đề khác, thông thường bạn sẽ muốn thêm các kiểu tùy chỉnh plugin của mình vào biểu định kiểu của chủ đề con bạn. Nếu bạn không sử dụng chủ đề con hoặc không biết chủ đề con là gì, tôi chắc chắn khuyên bạn nên tạo một chủ đề và bắt đầu sử dụng nó (đây là cách bạn có thể làm điều đó. )

Giả sử bạn đã thiết lập chủ đề con của mình, bạn có thể sửa đổi nó từ bên trong bảng điều khiển WordPress của mình bằng cách đi tới Giao diện > Trình chỉnh sửa

Đảm bảo bạn đang chỉnh sửa đúng chủ đề con. Nó nên đi đến phong cách. css theo mặc định. Nếu không, tất cả những gì bạn cần làm là nhấp vào tùy chọn đó

Sau đó, bạn chỉ cần thêm CSS plugin tùy chỉnh của mình chính xác như tôi đã thảo luận trong hướng dẫn Divi ở trên. Đầu tiên, tạo một nhận xét mã dọc theo dòng

/* Plugin CSS Styles Start Here */

Sau đó, thêm tất cả các kiểu CSS tùy chỉnh của bạn bên dưới dòng đó

Vì bạn đang làm việc trong một chủ đề con nên các kiểu của bạn sẽ luôn an toàn ngay cả khi bạn cập nhật chủ đề của mình. Và bởi vì bạn đã nhận xét rõ ràng về chúng, bạn có thể dễ dàng sao chép chúng sang một chủ đề mới hoặc một bản cài đặt WordPress khác

Ví dụ thế giới thực. Mẫu liên hệ 7

Để thực sự lái mọi thứ về nhà, chúng ta hãy xem một ví dụ trong thế giới thực. Giả sử bạn muốn tạo kiểu cho biểu mẫu cho Biểu mẫu liên hệ 7 đã nói ở trên. Bạn đã cài đặt plugin và có một biểu mẫu trông như thế này

Bây giờ, bạn muốn thêm gia vị cho mọi thứ một chút bằng cách thêm đường viền màu đen vào các trường biểu mẫu. Bạn có thể truy cập biểu định kiểu của chủ đề con và thêm mã này bên dưới nhận xét mã mà bạn đã thực hiện (gợi ý – bài đăng này là một tài nguyên tuyệt vời để tạo kiểu cho Biểu mẫu liên hệ 7)

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    border: 1px solid #000000;
}

CSS của bạn sẽ trông như thế này

Sau khi bạn lưu biểu định kiểu và làm mới trang biểu mẫu liên hệ của mình, bạn sẽ thấy điều này

Chú ý đường viền màu đen mới?

Nếu bạn đang sử dụng Divi, mã của bạn sẽ giống như vậy, chỉ khác ở một vị trí

Tất nhiên, đây là một chút thử nghiệm suy nghĩ vì bạn không thực sự cần plugin biểu mẫu liên hệ với Divi. Tuy nhiên, ý tưởng tương tự sẽ hoạt động với bất kỳ plugin nào bạn cần thêm các kiểu CSS tùy chỉnh vào

kết thúc

Thêm các kiểu CSS plugin tùy chỉnh vào WordPress là một quá trình khá đơn giản. Phần khó nhất là biết bạn cần thêm mã CSS nào. Bạn sẽ không trở thành chuyên gia CSS chỉ sau một đêm, nhưng một nơi tốt để bắt đầu học CSS cơ bản là w3schools. Và một cách hay để tìm phần tử plugin nào bạn cần nhắm mục tiêu là công cụ phần tử kiểm tra của Google

Chỉ cần nhớ – luôn giữ CSS plugin tùy chỉnh của bạn ở một khu vực riêng biệt được đánh dấu bằng nhận xét. Bằng cách đó, bạn luôn có thể tìm thấy nó. Và nếu bạn đang sử dụng chủ đề không phải Divi, hãy đảm bảo giữ tất cả các kiểu tùy chỉnh của bạn trong chủ đề con

Bạn có bất kỳ mẹo phong cách CSS tùy chỉnh plugin nào để chia sẻ không?

Làm cách nào để thêm CSS và JS tùy chỉnh trong WordPress mà không cần plugin?

Plugin nào được sử dụng để thêm CSS vào trang web?