Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?

Biểu định kiểu xếp tầng tùy chỉnh (CSS) cho phép bạn thiết kế trang web của mình với khả năng kiểm soát tốt hơn đối với giao diện của các trang và cách chúng hoạt động. Tập lệnh đi vào CSS có thể chi phối mọi thứ từ hình ảnh đến các loại phông chữ được hiển thị trên các trang của bạn

Những thứ như màu liên kết, hình nền và thậm chí cả âm thanh được nhúng đều có thể đến từ các tệp này. Tuy nhiên, điều này đặt ra câu hỏi, làm cách nào để thêm CSS tùy chỉnh trong WordPress?

Trên thực tế, việc sửa đổi tệp CSS đơn giản hơn bạn tưởng rất nhiều và tôi đã tập hợp 3 phương pháp mà bạn có thể sử dụng để thêm CSS tùy chỉnh

Tôi cần bao nhiêu kiến ​​thức viết mã?

Nếu bạn đã thực hiện tìm kiếm nhanh trên Google về CSS trước đó, thì tôi chắc rằng bạn đã thấy vô số ví dụ về các đoạn mã CSS. Ngày nay, bạn có thể tìm thấy mọi thứ trên internet và mã CSS cũng không khác

Và như bạn sẽ thấy trong các phương pháp sau, việc thêm CSS tùy chỉnh không liên quan gì đến kỹ năng mã hóa. Thay vào đó, tất cả chỉ là tìm vị trí hoặc tệp chính xác để dán mã vào

Do đó, bạn không cần phải là chuyên gia mã hóa để thêm CSS tùy chỉnh

3 phương pháp để thêm CSS tùy chỉnh trong WordPress

1. Những thay đổi về cấp độ mã hóa

Nhiều chủ sở hữu trang web thấy rằng sửa đổi trực tiếp tệp CSS là cách dễ thực hiện nhất. Và thành thật mà nói, đây là phương pháp đơn giản nhất vì nó có thể được thực hiện trực tiếp từ WordPress mà không cần bất kỳ plugin bổ sung nào

Để thực hiện việc này, nhấp vào Giao diện và chọn tùy chọn Trình chỉnh sửa chủ đề

Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?
Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?

Điều này sẽ hiển thị tất cả các tệp được liên kết với chủ đề bạn hiện đang sử dụng. Do đó, bạn chỉ cần đảm bảo rằng mình đang chỉnh sửa đúng tệp CSS. Và file bạn chọn chỉnh sửa tùy thuộc vào yếu tố cụ thể mà bạn muốn tùy chỉnh

Mặc dù nhiều người thấy phần tùy chỉnh này dễ dàng hơn nhưng nó cũng có nhược điểm.

Chẳng hạn, bạn có thể phải mã lại CSS nếu bạn quyết định thay đổi chủ đề. Hầu hết các chủ đề sẽ sử dụng tệp CSS của riêng họ cho thiết kế tổng thể. Do đó, những thay đổi bạn thực hiện đối với tệp của một chủ đề sẽ không ảnh hưởng đến tệp của chủ đề khác

Tuy nhiên, điều đáng chú ý là bạn sẽ không thường xuyên thay đổi chủ đề

Một cách giải quyết tốt cho vấn đề này là lưu tất cả CSS tùy chỉnh mà bạn thêm vào tệp của chủ đề vào sổ tay. Bằng cách đó, bạn có thể sử dụng cùng một mã trên một chủ đề khác nếu bạn chọn

Tuy nhiên, nhiều chủ sở hữu trang web chọn sử dụng chủ đề con. Bằng cách này, mọi thay đổi đối với CSS mà bạn thực hiện sẽ không bị xóa nếu nhà phát triển cập nhật chủ đề chính. Bạn nhận được tất cả các lợi ích mà không mất mã hóa tùy chỉnh

2. Plugin CSS để tùy chỉnh

Như bất kỳ nhà phát triển WordPress nào cũng biết, các plugin cho phép bạn tùy chỉnh bất kỳ phần nào trên trang web của mình mà không cần viết một dòng mã nào trong hầu hết các trường hợp. Vì vậy, không có gì ngạc nhiên khi biết rằng có rất nhiều plugin giúp việc thêm CSS tùy chỉnh trở nên dễ dàng.

Và điều này có một lợi thế lớn so với phương pháp cuối cùng

Thay vì CSS được lưu trực tiếp trong tệp chủ đề, nó được lưu trong tệp plugin. Điều này có nghĩa là bạn có thể tự do sử dụng cùng một CSS trên nhiều chủ đề mà không cần viết lại nó. Đó là một trình tiết kiệm thời gian rất lớn cho những nhà phát triển thường xuyên thay đổi chủ đề

Một lợi thế lớn khác là nhiều plugin có các biện pháp bảo vệ ngăn mã làm hỏng trang web của bạn. Rốt cuộc, không mất nhiều thời gian để hạ gục một trang web khi sửa đổi tệp chủ đề và phương pháp này hoàn toàn tránh được

Vì vậy, nó có lẽ là phương pháp tốt nhất để xem xét khi mới bắt đầu

Dưới đây là một vài plugin tuyệt vời để xem xét sử dụng

Trình chỉnh sửa kiểu CSS trực quan

Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?
Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?

Plugin Visual CSS Style Editor là một lựa chọn tuyệt vời để thêm CSS tùy chỉnh vào WordPress. Nó được xây dựng với trình chỉnh sửa trực quan và cho phép bạn kiểm soát hơn 60 thuộc tính kiểu dáng trên trang web

Công cụ đáp ứng của nó cho phép bạn chỉnh sửa bất kỳ trang, bài đăng, trang đăng nhập và thành phần nào. Mặc dù phiên bản pro cung cấp cho bạn rất nhiều tính năng khác, chẳng hạn như hơn 800 phông chữ Google, phiên bản miễn phí rất mạnh mẽ để chỉnh sửa CSS

CSS tùy chỉnh đơn giản

Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?
Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?

CSS tùy chỉnh đơn giản là plugin phổ biến nhất để thêm CSS tùy chỉnh vào trang web của bạn. Plugin cho phép bạn thêm CSS tùy chỉnh ghi đè bất kỳ tệp plugin hoặc chủ đề nào. Do đó, bạn có thể tùy chỉnh toàn bộ trang web của mình chỉ bằng một plugin

Nó cũng bao gồm một số kiểm tra lỗi, rất tốt cho người mới bắt đầu

WP Thêm CSS tùy chỉnh

Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?
Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?

Bất kể bạn cần thêm các thay đổi vào CSS cho toàn bộ trang web hay chỉ một số trang, WP Add Custom CSS đều có thể đáp ứng chúng. Những thay đổi bạn thực hiện trong plugin này sẽ ghi đè biểu định kiểu chính để cung cấp cho bạn giao diện bạn muốn trên trang web của mình. Nó có sẵn bằng tiếng Anh, tiếng Đức và tiếng Tây Ban Nha

3. Sửa đổi chủ đề CSS

Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?
Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?

Hầu hết các chủ đề đều có các phần tích hợp cho phép bạn thêm mã hóa từ khu vực “Tùy chỉnh” trong WordPress. Điều này cho phép bạn thêm trực tiếp CSS vào các tệp của chủ đề và nhiều tệp trong số đó cho phép bạn xem các thay đổi trong thời gian thực

Đây là các tệp CSS con (đừng nhầm với các chủ đề con trong WordPress) và chúng hoạt động cùng với biểu định kiểu chính của bạn

Tương tự như cách đầu tiên, nhược điểm chính của việc sử dụng phương pháp này để sửa đổi CSS là khả năng làm mất các điều chỉnh của bạn nếu bạn chuyển đổi chủ đề. Chúng dành riêng cho thiết kế và sẽ không còn lại sau khi bạn chuyển đổi chủ đề của mình

Tuy nhiên, đây có thể là một cách tuyệt vời để thực hiện các thay đổi cụ thể dựa trên chính chủ đề đó. Ví dụ: các màu hoặc phông chữ cụ thể được sử dụng trong CSS con này có thể không hấp dẫn về mặt hình ảnh trong chủ đề mới

Sau khi bạn nhấp vào “Tùy chỉnh”, tùy biến WordPress sẽ bật lên. Cuộn xuống một số và nhấp vào tùy chọn “CSS bổ sung”

Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?
Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?

Điều này sẽ mở ra một trình soạn thảo CSS. Tại đây, bạn có thể thêm tất cả mã CSS tùy chỉnh của riêng mình

Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?
Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?

Đây là một ví dụ điển hình về cách thêm CSS tùy chỉnh ở đây sẽ phản ánh ngay lập tức trên trang web để bạn có thể thấy các thay đổi và giao diện của chúng trước khi xuất bản

Trong mã này, chúng tôi đang thay đổi màu bóng của tiêu đề 1 trên trang web

Trước khi thêm mã

Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?
Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?

Sau khi thêm mã

Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?
Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?

Mã chúng tôi đã sử dụng để thực hiện giao diện đó được thêm ngay vào tùy biến

Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?
Làm cách nào để thêm tệp css tùy chỉnh vào wordpress?

Bạn có thể thêm tất cả mã CSS tùy chỉnh mà bạn muốn trực tiếp vào khu vực tùy chỉnh này. Nó giúp dễ dàng xem tất cả các thay đổi trong thời gian thực

Sử dụng CSS tùy chỉnh trong WordPress

Sử dụng CSS để sửa đổi trang web của bạn có thể nâng cao hiệu suất của trang web, cho phép bạn kiểm soát tốt hơn và giúp bạn tinh chỉnh thiết kế của mình. Miễn là bạn có hiểu biết cơ bản về cách thức hoạt động của mã hóa hoặc ít nhất là xem những thay đổi thực hiện trong thời gian thực, thì việc thêm CSS vào WordPress có thể tương đối đơn giản

Đây có thể là một trong những cách tốt nhất để mang lại trải nghiệm hoàn toàn độc đáo cho đối tượng mục tiêu của bạn. Và với mức độ phổ biến của WordPress với tư cách là một CMS, việc nổi bật chưa bao giờ quan trọng hơn thế

Bạn đã thay đổi những thứ gì trong tệp CSS?

Tệp CSS tùy chỉnh trong WordPress ở đâu?

Mỗi chủ đề WordPress chứa phong cách của nó. tập tin css. Bạn có thể tìm thấy một trong thư mục /wp-content/themes/themename/ .

Tại sao CSS tùy chỉnh của tôi không hoạt động trên WordPress?

Đang tạo CSS. Điều này có thể dễ dàng được khắc phục bằng cách truy cập WP admin > Elementor > Tools > Regenerate CSS. Sau đó, bạn có thể xóa bộ đệm (bộ đệm WP và bộ đệm của trình duyệt) và làm mới trang . Xóa bộ nhớ cache của trang web. Kiểm tra xem bạn có bất kỳ plugin bộ nhớ đệm nào trên trang web của mình hoặc bất kỳ bộ đệm ẩn cấp máy chủ nào được bật không. Xóa các bộ đệm đó.