3 phương pháp dễ dàng tùy chỉnh trang web WordPress bằng CSS – Kách Hay .Com đã tổng hợp thông tin từ nhiều nguồn, giúp bạn có góc nhìn đa chiều hơn. Nào chúng ta bắt đầu thôi
3 cách chỉnh sửa trang web WordPress bằng CSS
Chia sẻ kiến thức 28/02/2022
CSS tùy chỉnh có ích trong trường hợp này vì nó cho phép bạn chỉnh sửa màu sắc, khoảng cách, phông chữ, bố cục và bất kỳ yếu tố trực quan nào khác của trang web WordPress của bạn theo ý muốn. Bạn có muốn kiểm soát trang web WordPress của mình không? Dưới đây là các cách để tùy chỉnh trang web WordPress bằng CSS tùy chỉnh.
Mục lục
- Vì sao phải tùy chỉnh trang web bằng CSS?
- Chi phí bằng không
- phình tối thiểu
- 3 cách đơn giản để tùy chỉnh trang web wordpress với CSS
- Phương pháp 1: Sử dụng WordPress Customizer
- Phương pháp 2: Sử dụng Plugin.
- Phương pháp 3: chỉnh sửa mã gốc
- Kiểm tra giám sát giao diện trang web với CSS tùy chỉnh
WordPress đã phát triển qua nhiều năm và ngày nay nó đã trở thành một nền tảng linh hoạt và có thể tùy chỉnh nhờ trình chỉnh sửa khối Gutenberg (trình soạn thảo văn bản dựa trên khối mới của WordPress, đã trở thành trình chỉnh sửa mặc định kể từ phiên bản trước). Phiên bản WordPress 5.0). Tuy nhiên, sẽ có lúc bạn cần nhiều hơn những gì trình soạn thảo Gutenberg có thể cung cấp. CSS tùy chỉnh có ích trong trường hợp này vì nó cho phép bạn chỉnh sửa màu sắc, khoảng cách, phông chữ, bố cục và bất kỳ yếu tố trực quan nào khác của trang web WordPress của bạn theo ý muốn.
Trong bài viết này, FUNiX sẽ hướng dẫn bạn cách tùy chỉnh trang web WordPress bằng CSS.
Tại sao phải tùy chỉnh trang web của bạn bằng CSS?
CSS tùy chỉnh là một trong những phương pháp bạn có thể sử dụng để tối ưu hóa giao diện trang web của mình. Ngoài ra, các phương pháp khác có thể được sử dụng, ví dụ: B. Mẫu chủ đề WordPress cao cấp hoặc cài đặt trình tạo trang.
Mặc dù cả hai phương pháp này đều dễ sử dụng hơn cho người mới bắt đầu và không yêu cầu nhiều kiến thức về viết mã, nhưng sử dụng CSS tùy chỉnh sẽ có lợi hơn vì hai lý do sau:
chi phí bằng không
Các chủ đề cao cấp và trình tạo trang WordPress có thể rất hữu ích nhưng người dùng phải trả phí. Mặt khác, nếu bạn biết cách viết CSS tùy chỉnh, bạn có thể đạt được các hiệu ứng tương tự mà không phải trả thêm phí.
đầy hơi tối thiểu
Các mẫu chủ đề và trình tạo trang đã chọn được thiết kế để cung cấp cho người dùng tính linh hoạt và nhiều tùy chọn để tùy chỉnh trang web. Chính vì điều này mà chúng làm cho trang web trở nên nặng nề hơn (hay còn gọi là web phình to). Sử dụng CSS tùy chỉnh sẽ thêm chức năng cần thiết và giúp trang web tải nhanh hơn
3 cách dễ dàng để tùy chỉnh trang web WordPress bằng CSS
Khi bạn biết cách viết CSS, bạn có thể sử dụng bất kỳ phương pháp nào sau đây để thêm CSS tùy chỉnh vào trang web WordPress của mình:
Phương pháp 1: Sử dụng WordPress Customizer
Mit Versionen ab WordPress 4.7 können Sie benutzerdefiniertes CSS direkt aus dem Admin-Bereich hinzufügen (Admin-Bereich – der Bereich, der Benutzern hilft, Funktionen zu verwalten, Beiträge zu aktualisieren, Benutzer in WordPress). WordPress). Dies ist die einfachste Methode, mit der Sie alle Änderungen, die Sie in Echtzeit vornehmen, live sehen können (Echtzeit oder wie der Begriff sich darauf bezieht, wenn das System Informationen nahezu schnell an den Benutzer weiterleitet), wie sofort oder mit einer sehr kurzen Verzögerung, wenn eine Ereignis eintritt).
Dies ist auch der am meisten empfohlene Weg, da alle Änderungen, die Sie vornehmen, in WordPress gespeichert werden. Das bedeutet, dass selbst wenn Sie das Design ändern oder aktualisieren, das benutzerdefinierte CSS nicht verloren geht.
Hier sind die Schritte dazu:
Bước 1: Trong phần Giao diện, chọn Tùy chỉnh
Use WordPress Customizer
Thao tác này sẽ mở tùy chọn chỉnh sửa giao diện WordPress, hiển thị trực tiếp bản xem trước (xem trước) trang web ở bên phải cùng với một tùy chọn tùy chọn chỉnh sửa ở bên trái màn hình. Kéo xuống cuối bảng điều khiển bên trái sẽ thấy tab CSS bổ sung (CSS bổ sung).
Bước 2: Kích chuột vào CSS bổ sung
Click chuột vào CSS bổ sung
Thao tác này sẽ mở ra một hộp thoại nhỏ bên trái, nơi bạn có thể thêm tùy chỉnh CSS và nhập dòng lệnh CSS tùy chọn. Trình chỉnh sửa này có khả năng xác thực mã và cảnh báo nếu có lỗi.
Bước 3: Xuất các thay đổi vừa thực hiện
Mọi quy tắc CSS hợp lệ sẽ hiển thị trong khu vực xem trước ở bên phải màn hình. Khi bạn cảm thấy hài lòng và muốn áp dụng các thay đổi cho trang web, hãy nhấp vào nút Publish (Xuất bản) ở đầu ngăn bên trái. Bạn cũng có thể lên lịch xuất bản sau hoặc lưu tác phẩm dưới dạng bản nháp.
Bất kỳ thay đổi nào thực hiện bằng cách sử dụng WordPress Customizer đều gắn liền với mẫu giao diện hiện tại. Nếu bạn muốn chuyển sang giao diện khác mà không làm mất các thay đổi vừa thực hiện, bạn có thể sao chép CSS tùy chỉnh. Một phương pháp hay là lưu tất cả CSS tùy chỉnh vào một giao diện trên notepad. Bằng cách đó, bạn chỉ cần sao chép mã và dán mã vào phần CSS bổ sung (Additional CSS) khi dùng một giao diện khác.
Nếu điều này khá phức tạp để thực hiện, bạn có thể chuyển sang phương pháp tiếp theo để áp dụng CSS tùy chỉnh vào giao diện WordPress bất kỳ.
Phương pháp 2: Sử dụng Plugin.
Các plugin CSS tùy chỉnh lưu trữ CSS tùy chỉnh tách biệt với mẫu giao diện nên bạn có thể linh hoạt áp dụng với bất kỳ giao diện nào. Các plugin này cũng đi kèm với các tính năng bổ sung như auto-completion (tự động hoàn thiện) có thể giúp việc thêm CSS dễ dàng hơn.
Hạn chế duy nhất của Plugin CSS tùy chỉnh là phần mềm của bên thứ ba có thể làm chậm trang web người dùng. Tuy nhiên, hầu hết các plugin này đều nhẹ và thường có ít tác động đến hiệu suất trang web. Dưới đây là một số plugin CSS tùy chỉnh tốt nhất mà bạn có thể sử dụng:
Simple Custom CSS
Simple Custom CSS là một trong những plugin CSS tùy chỉnh phổ biến nhất. Nó nhẹ, dễ sử dụng và cung cấp các tính năng tuyệt vời. Việc thiết lập hoàn toàn dễ dàng, chỉ cần cài đặt và kích hoạt plugin. Sau đó, điều hướng đến phần Giao diện (appearance) trên ngăn bên trái của bảng điều khiển(dashboard).
Bạn sẽ thấy một tùy chọn mới có tên là CSS tùy chỉnh. Nhấp vào nó sẽ mở ra một trình chỉnh sửa nơi bạn có thể thêm CSS tùy chỉnh. Để lưu thay đổi nhấn vào nút Cập nhật CSS tùy chỉnh (Update Custom CSS) và muốn xem lại các thay đổi chỉ cần nhấn refresh trang web.
Simple Custom CSS và JS
Nếu bạn muốn nhiều tính năng hơn nữa, plugin Simple Custom CSS và JS là một lựa chọn tuyệt vời. Ngoài việc thêm CSS, nó cho phép bạn thêm các mục JavaScript.
CSS hero
Nếu bạn không muốn viết mã thì plugin CSS Hero là một sự lựa chọn hoàn hảo. Plugin này cung cấp trình chỉnh sửa CSS trực quan với menu thả xuống và trường nhập cho phép bạn chỉnh sửa hầu hết mọi kiểu CSS trên trang web của mình mà không cần viết bất kỳ mã nào.
Cách 3: Sửa code gốc
Cách 3: Sửa code gốc
Hai phương pháp trên cho phép bạn thêm CSS tùy chỉnh vào trang web của mình mà không cần mở tệp chủ đề. Tuy nhiên, trong một số trường hợp, bạn có thể muốn chỉnh sửa hoặc thêm CSS tùy chỉnh trực tiếp vào mã chủ đề.
Để thực hiện việc này, bạn cần truy cập biểu định kiểu của trang web (một danh mục các quy tắc kiểu có thể được nhúng trong tài liệu HTML). Cách dễ nhất là truy cập nó từ trình chỉnh sửa chủ đề trong bảng điều khiển WordPress.
Tuy nhiên, trước khi tiếp tục, bạn cần thực hiện một số biện pháp phòng ngừa an toàn như: B. Sao lưu trang web của bạn vì bạn có thể mắc lỗi trong khi chỉnh sửa các tệp thiết kế và làm hỏng trang web. Điều này đảm bảo rằng bạn có thể dựa vào một trang web hoạt động tốt. Ngoài ra, cần phải tạo mẫu chủ đề con, vì nếu bạn chỉnh sửa trực tiếp chủ đề gốc, những thay đổi này có thể bị mất khi chủ đề được cập nhật.
Sau khi hoàn thành các bước bảo mật ở trên, hãy đăng nhập vào phụ trợ WordPress. Chuyển đến Giao diện > Trình chỉnh sửa chủ đề ( Giao diện > Trình chỉnh sửa chủ đề ). Khi bạn nhấp vào tùy chọn trình chỉnh sửa chủ đề, một hộp thoại sẽ xuất hiện cảnh báo bạn không thực hiện các thay đổi trực tiếp đối với các tệp chủ đề.
Nhấp vào Tôi hiểu để tiếp tục.
Sau khi nhấp vào, bạn sẽ thấy bảng định kiểu của trang web theo mặc định. Nếu bạn không nhìn thấy nó, chỉ cần tìm trong khung bên phải và nhấp vào style.css bên dưới tùy chọn Style Sheet .
Style.css dưới tùy chọn biểu định kiểu.
Từ đây, bạn có thể trực tiếp thay đổi các tệp thiết kế và đừng quên nhấp vào lưu và cập nhật khi hoàn tất.
Kiểm soát giao diện của trang web bằng CSS tùy chỉnh
Học cách viết CSS tùy chỉnh trong WordPress có thể mất thời gian đối với người mới bắt đầu, nhưng nó mang lại cho bạn quyền kiểm soát thực sự đối với giao diện trang web của mình. Điều này không chỉ miễn phí mà còn tăng hiệu suất của trang web.
Bạn có thể tìm thêm các bài viết về CSS tại đây.
Khánh Huyền (theo Makeuseof)
https://www.makeuseof.com/how-to-customize-wordpress-website-with-css/
- Chỉnh sửa mã gốc
- CSS tùy chỉnh
- bổ sung
- trang web WordPress
- tùy biến WordPress
Bình luận (
0 )
