Hệ sinh thái WordPress rất lớn, vì vậy có thể là một thách thức để tìm ra chủ đề hoàn hảo phù hợp với thương hiệu của bạn ở mọi khía cạnh. Một điểm khởi đầu tốt là duyệt qua hàng nghìn chủ đề WordPress chất lượng cao trên ThemeForest Show  Tuy nhiên, thường xảy ra trường hợp bạn tìm thấy một thiết kế gần như hoàn hảo nhưng bạn vẫn muốn chỉnh sửa nó một chút—hoặc rất nhiều. Mặc dù hầu hết các chủ đề WordPress đều có các tùy chọn tích hợp sẵn cho phép bạn sửa đổi những thứ cơ bản như kiểu chữ và màu sắc, nhưng đôi khi bạn muốn thực hiện những thay đổi lớn hơn. Đây là lúc bạn cần thêm CSS tùy chỉnh vào trang web WordPress của mình. Trong hướng dẫn này, chúng ta sẽ xem xét bốn kỹ thuật để thêm CSS tùy chỉnh vào WordPress
Hai kỹ thuật đầu tiên không yêu cầu bạn tạo chủ đề con. Bạn có thể làm mọi thứ từ quản trị viên WordPress của mình mà không cần chạm vào tệp nguồn hoặc kết nối với máy chủ của bạn qua (các) FTP. Cả hai đều là những phương pháp tuyệt vời cho phép bạn nhanh chóng thêm các quy tắc CSS tùy chỉnh vào trang web của mình Tuy nhiên, nếu bạn muốn thực hiện những thay đổi quan trọng, bạn nên tạo một chủ đề con—ngay cả khi phải mất nhiều công sức hơn để thiết lập chủ đề đó. Bên cạnh việc thêm trực tiếp các quy tắc CSS tùy chỉnh vào chủ đề WordPress của bạn, bạn cũng có thể đưa các tệp CSS bên ngoài vào hàng đợi một cách an toàn với sự trợ giúp của một chủ đề con
1. Thêm CSS tùy chỉnh vào WordPress qua Trình tùy chỉnhKhi bạn thêm CSS tùy chỉnh vào trang web WordPress của mình thông qua Trình tùy chỉnh, CSS tùy chỉnh của bạn sẽ được gắn với chủ đề của bạn. Bạn có thể giữ các tùy chỉnh miễn là bạn đang sử dụng cùng một chủ đề. Các sửa đổi của bạn sẽ không bị xóa khi bạn cập nhật chủ đề. Tuy nhiên, khi bạn chuyển sang một chủ đề mới, các quy tắc CSS bổ sung của bạn sẽ bị mất. (Nếu bạn muốn thêm CSS độc lập với chủ đề vào trang web WordPress của mình, bạn sẽ cần sử dụng plugin. ) Bạn có thể mở Trình tùy chỉnh bằng cách nhấp vào menu Giao diện > Tùy chỉnh ở thanh bên trái của khu vực quản trị WordPress của bạn Khi Công cụ tùy chỉnh hiển thị bản xem trước trực tiếp trang web của bạn, bạn có thể thấy ngay những thay đổi mình đang thực hiện. Ví dụ: đây là giao diện của chủ đề Twenty Twenty Bạn có thể thấy thanh bên Customizer bên trái màn hình. Tại đây, điều hướng đến mục menu cuối cùng có tên là CSS bổ sung. Đây là nơi bạn có thể chèn CSS tùy chỉnh mà bạn muốn thêm vào chủ đề của mình. Bạn chỉ cần nhập quy tắc kiểu của mình vào vùng văn bản bên dưới hướng dẫn Giả sử bạn muốn thay đổi thuộc tính 53 của tiêu đề. Theo mặc định, các tùy chọn chủ đề của Twenty Twenty không cho phép bạn làm điều đó. Cách dễ nhất để biết bạn cần ghi đè quy tắc CSS nào là sử dụng các công cụ dành cho nhà phát triển của trình duyệt. Nhấp chuột phải vào tiêu đề và chọn tùy chọn Kiểm tra hoặc Kiểm tra phần tử (tùy thuộc vào trình duyệt của bạn) để mở trình kiểm tra DevTools của bạn ngay tại phần tử tiêu đề. Công cụ kiểm tra sẽ cho bạn thấy rằng chủ đề Twenty Twenty sử dụng quy tắc kiểu sau để kiểm soát 53 của dòng tiêu đề 1_______5 2 h1, 3 .heading-size-1 { 50 51 5 53 @media ( min-width: 700px ) {0 @media ( min-width: 700px ) {1 Vì hầu hết các DevTools cũng hiển thị tên tệp và số dòng của mọi quy tắc kiểu (kiểu. css – dòng 4716 trong hình bên dưới), bạn cũng có thể mở tệp CSS trong trình chỉnh sửa mã của mình và kiểm tra mã chính xác Bây giờ, bạn có thể ghi đè quy tắc 53 bằng cách chèn cùng một quy tắc CSS với một giá trị khác vào trường nhập CSS bổ sung, chẳng hạn 1_______5 2 h1, 3 .heading-size-1 { 50 @media ( min-width: 700px ) {9 5 53 @media ( min-width: 700px ) {0 @media ( min-width: 700px ) {1 Khi Công cụ tùy chỉnh hiển thị bản xem trước trực tiếp, bạn có thể thấy tác dụng của quy tắc mới khi bạn đang nhập quy tắc đó. Lưu ý rằng nếu bạn muốn giữ cho chủ đề của mình phản hồi nhanh, điều quan trọng là phải chú ý đến các truy vấn phương tiện. Bạn có thể kiểm tra chủ đề cho các kích thước màn hình khác nhau bằng cách sử dụng các biểu tượng thiết bị nhỏ (máy tính để bàn, máy tính bảng, thiết bị di động) ở cuối thanh bên Tùy biến Khi bạn đã thêm tất cả các quy tắc CSS tùy chỉnh mà mình muốn, bạn có thể nhấn nút Xuất bản ở đầu thanh bên Tùy biến và các thay đổi của bạn sẽ có hiệu lực ngay lập tức 2. Thêm CSS tùy chỉnh vào WordPress bằng pluginƯu điểm lớn nhất của việc sử dụng plugin CSS tùy chỉnh là nó cho phép bạn thêm CSS độc lập với chủ đề vào trang web của mình mà bạn có thể giữ lại khi chuyển sang chủ đề mới. Kỹ thuật này có thể hữu ích khi bạn muốn sửa đổi giao diện của nội dung không phụ thuộc vào chủ đề được plugin bổ sung, chẳng hạn như trang phụ, loại bài đăng tùy chỉnh hoặc tiện ích con Ngoài ra, nếu bạn muốn thêm nhiều CSS tùy chỉnh vào trang web của mình, bạn cũng có thể thấy rằng trang cài đặt và giao diện người dùng của plugin thân thiện với người dùng hơn trường nhập liệu nhỏ của Trình tùy chỉnh. Mặt khác, lưu ý rằng các plugin này có thể làm chậm trang web của bạn, vì chúng tăng thêm chi phí hoạt động cho thời gian tải trang so với Trình tùy chỉnh, được tích hợp trong WordPress Core trong WordPress. org, bạn có thể tìm thấy một vài plugin miễn phí cho phép bạn thêm CSS tùy chỉnh vào trang web WordPress của mình. Trong hướng dẫn này, chúng ta sẽ sử dụng CSS tùy chỉnh đơn giản, hoạt động mà không cần cấu hình thêm. Bạn có thể cài đặt plugin CSS tùy chỉnh đơn giản từ trình đơn Plugin > Add New của khu vực quản trị WordPress của bạn. Sau khi cài đặt và kích hoạt plugin, hãy nhấp vào menu Giao diện > CSS tùy chỉnh, thao tác này sẽ đưa bạn đến trang quản trị của plugin. Vì CSS tùy chỉnh đơn giản chỉ có một trường nhập liệu nên rất dễ sử dụng. Bạn chỉ cần nhập CSS tùy chỉnh của mình vào vùng văn bản và nhấn nút Cập nhật CSS tùy chỉnh 3. Thêm CSS tùy chỉnh vào kiểu Chủ đề con của bạn. tệp cssNếu bạn muốn sửa đổi đáng kể CSS của chủ đề, bạn nên tạo một chủ đề con và thêm mã tùy chỉnh vào đó. Chủ đề con nằm trên chủ đề gốc. Nó sử dụng cùng các mẫu nhưng cho phép bạn ghi đè lên bất kỳ tệp nào của chủ đề gốc—không chỉ CSS mà cả JavaScript, PHP và các nội dung tĩnh như hình ảnh nữa. Bạn có thể thêm các tùy chỉnh của mình vào chủ đề con trong khi chủ đề gốc vẫn còn nguyên. Khi một bản cập nhật mới cho chủ đề gốc được phát hành, bạn có thể cập nhật nó một cách an toàn vì mã tùy chỉnh của bạn sẽ được giữ bởi chủ đề con. Tuy nhiên, chủ đề con cũng sẽ kế thừa các bản cập nhật từ chủ đề gốc, vì vậy bạn có thể có cả bản cập nhật và CSS tùy chỉnh cùng một lúc Để tạo một chủ đề con, bạn có thể xem hướng dẫn từng bước của chúng tôi bởi Rachel McCollin. Trong bài viết này, tôi sẽ sử dụng một chủ đề con của chủ đề Twenty Twenty mà tôi đã tạo bằng cách làm theo hướng dẫn ở trên
Mỗi chủ đề con được yêu cầu bao gồm hai tệp (mặc dù bạn có thể ghi đè lên bất kỳ tệp nào khác của chủ đề gốc nếu muốn)
Nếu muốn thêm CSS tùy chỉnh trực tiếp vào chủ đề con của mình, thì bạn cần chỉnh sửa kiểu. css. Chỉ sử dụng các chức năng. php nếu bạn muốn thêm tệp CSS bên ngoài vào chủ đề con của mình Bạn có thể chỉnh sửa kiểu. css từ trình chỉnh sửa mã của bạn, chẳng hạn như Atom hoặc Visual Studio Code hoặc menu Giao diện > Trình chỉnh sửa chủ đề trong khu vực quản trị WordPress của bạn (xem ảnh chụp màn hình bên dưới). Bạn cần thêm các quy tắc CSS tùy chỉnh của mình bên dưới phần bình luận hàng đầu, phục vụ mục đích thông báo cho WordPress Core về sự hiện diện của chủ đề con (vì vậy đừng xóa bình luận hàng đầu). Nếu không, bạn có thể chỉnh sửa kiểu. css giống như bất kỳ tệp CSS nào khác. Cho dù bạn đặt quy tắc CSS nào ở đây, nó sẽ ghi đè quy tắc CSS tương ứng của chủ đề gốc 4. Xếp hàng tệp CSS bên ngoài trong Chức năng của chủ đề con của bạn. tệp phpNếu muốn thêm một tệp CSS bên ngoài vào chủ đề con của mình, thì bạn cần phải đưa tệp đó vào hàng đợi bằng cách chỉnh sửa các hàm. php để WordPress Core có thể gọi nó đúng cách. Kỹ thuật này có thể hữu ích khi bạn muốn sử dụng thư viện CSS của bên thứ ba trên trang web của mình hoặc mô đun hóa mã CSS tùy chỉnh của bạn. Giả sử bạn muốn thay đổi kiểu của một tiện ích bằng cách tạo một tiện ích. css nơi bạn có thể lưu trữ tất cả các quy tắc CSS liên quan đến widget. Trong trường hợp này, cấu trúc tệp của chủ đề con của bạn sẽ như sau 1_______65 2 27 3 29 50 h1,1 5 h1,3 Ngoài hai tệp bắt buộc (kiểu. css và chức năng. php), bạn cũng sẽ có một thư mục nội dung chứa tiện ích con. css với mã CSS tùy chỉnh. Bây giờ, bạn cần chỉnh sửa các chức năng. php bằng trình chỉnh sửa mã của bạn hoặc menu Giao diện > Trình chỉnh sửa chủ đề trong khu vực quản trị WordPress của bạn. Bạn cần tạo một chức năng tùy chỉnh (được gọi là 56 trong ví dụ bên dưới) để bạn có thể đăng ký và liệt kê tiện ích con vào hàng đợi. css bằng phương pháp 57 và 58 WordPress. Tôi đã đăng ký biểu định kiểu bằng tay cầm 59, nhưng bạn có thể sử dụng bất kỳ tên nào khác Bạn cũng cần đính kèm hàm 56 tùy chỉnh vào tác vụ WordPress 531 với sự trợ giúp của phương thức 532 1_______75 2 h1,7 3 h1,9 50 31 5 @media ( min-width: 700px ) {0 34 35 36 37 38 @media ( min-width: 700px ) {1 Và thế là xong—tiện ích tùy chỉnh. tệp css đã được thêm vào chủ đề của bạn. Toàn bộ chức năng. tệp php của chủ đề con của bạn sẽ trông như sau 1_______75 2 .heading-size-1 {3 3 .heading-size-1 {5 50 .heading-size-1 {7 5 .heading-size-1 {9 @media ( min-width: 700px ) {0 501 35 503 37 @media ( min-width: 700px ) {1 38 507 h1,7 509 h1,9 511 31 513 514 34 516 36 518_______119________ kết thúcKhi bạn cần thêm CSS tùy chỉnh vào trang web WordPress của mình, bạn có thể sử dụng bốn kỹ thuật khác nhau. Nếu bạn không muốn chạm vào cơ sở mã, bạn có thể thêm các tùy chỉnh của mình bằng Trình tùy chỉnh hoặc plugin CSS tùy chỉnh. Phương pháp thứ hai được khuyến nghị khi bạn muốn thêm CSS độc lập với chủ đề vào trang web của mình hoặc thực hiện nhiều sửa đổi mà không cần chỉnh sửa mã nguồn Bạn cũng có thể chọn tạo chủ đề con cho các tùy chỉnh của mình. Để thêm quy tắc kiểu tùy chỉnh vào chủ đề con của bạn, bạn cần chỉnh sửa kiểu. css, trong khi để xử lý tệp CSS bên ngoài, bạn cần chỉnh sửa các hàm. php. Trước khi bạn bắt đầu thêm CSS tùy chỉnh vào trang web WordPress của mình, hãy nghĩ xem chính xác những gì bạn cần và mục đích mà các tùy chỉnh của bạn sẽ phục vụ và chọn kỹ thuật phù hợp nhất Để có hướng dẫn toàn diện hơn về cách sử dụng hàm wp_enqueue_style(), hãy xem bài đăng của chúng tôi tại đây trên Envato Tuts+
Các chủ đề WordPress tốt nhất trên ThemeForestMặc dù bạn có thể làm được nhiều việc với các chủ đề miễn phí, nhưng nếu bạn đang tạo các trang web WordPress chuyên nghiệp, cuối cùng bạn sẽ muốn khám phá các chủ đề trả phí. Bạn có thể khám phá hàng nghìn chủ đề WordPress tốt nhất từng được tạo trên ThemeForest. Những chủ đề WordPress chất lượng cao này sẽ cải thiện trải nghiệm trang web của bạn cho bạn và khách truy cập của bạn. Dưới đây là một số chủ đề WordPress bán chạy nhất và sắp ra mắt có sẵn trên ThemeForest cho năm 2020 |
