Trong wordpress hỗ trợ chúng ta chỉnh sửa css hay còn gọi là giao diện website ngay trong phần quản trị của admin tuy nhiên không phải ai cũng biết và sử dụng nó một cách hiệu quả hãy tưởng tượng xem khi bạn vào một trang website bạn rất thích font chữ của nó mà không biết làm sao có thể copy được và làm thành của mình? Đừng lo bài viết này sẽ hướng dẫn bạn từ a đến z cách chỉnh sửa css trong wordpress.
Hướng dẫn sửa css trong wordpress đơn giản nhất
Để chỉnh sửa css trên wordpress thực ra rất đơn giản bạn chỉ cần chú ý một tý là có thể làm được rồi, cụ thể ở ví dụ sau mình sẽ thay đổi font của website thành một font chữ hoàn toàn khác và chỉnh sửa chính trong phần quản trị admin của bất kỳ trang website wordpress nào.
1. Tìm Font chữ yêu thích
Đầu tin hãy đến một trang nào đó mà bạn cảm thấy muốn lấy ở đây mình sẽ lấy của bác thachpham.com luôn nhé cho mọi người dễ hiểu. Đầu tiên hãy tìm vị trí font cần copy bằng cách dê chuột vào vùng chứa chữ ấn chuột phải và click vào “Kiểm tra”.
Tiếp theo bạn hãy tìm đến thẻ div mà chứa font chữ đó. Ở đây chính nó là div body,
Giờ hãy copy mã đó và ướm vào với thẻ div font của mình. Ở đây mình muốn hiển thị font chữ này vào chữ của bài viết nó sẽ nằm trong thẻ < p>. trong div .entry-content.
Giờ thì bạn đã thấy nó thay đổi rồi đúng không?
2. Chỉnh sửa CSS trong wordpress
Tiếp theo hãy nhớ đến thẻ div này và truy cập vào Dashboard > Appearance > Editor tìm đến file style.css.
Ấn tổ hợp phím tắt Ctrl + F để tìm kiếm thẻ .entry-content lúc nẫy.
Giờ hãy xóa dòng font-family: 'Open Sans', Helvetica, Arial, sans-serif; và thay bằng dòng font-family: 'Roboto', sans-serif; và kéo xuong bên dưới ấn vào “Update File”.
Như vậy là xong, hãy xóa cache và quay lại trang bài viết và ấn F5 để kiểm tra thành quả.
Plugin chỉnh sửa theme wordpress
Nếu như bạn ngại chỉnh sửa css bằng phương pháp thủ công bên trên thì dưới đây là danh sách những plugin chỉnh sửa theme wordpress tốt nhất dành cho bạn.
1. SiteOrigin CSS
SiteOrigin CSS là trình biên tập CSS đơn giản nhưng cực mạnh mẽ cho WordPress. Nó cho phép bạn thao tác chỉnh sửa trực quan theo thời gian thực.Với những tính năng này ngay cả khi bạn không biết đến css cũng có thể chỉnh sửa css nhanh hơn bao giờ hết.
Cài đặt và sử dụng SiteOrigin CSS.
2. Simple CSS
Nếu như bạn đang tim một plugin chuyên dụng để tùy chỉnh CSS cho trang web của bạn thì Simple CSS là một trình biên tập viên tuyệt vời bạn có thể chỉnh sửa trước trực tiếp trong Customizer việc này giúp bạn dễ dàng thêm CSS mới một cách đơn giản.
Tính năng chính của Simple CSS
- Trình chỉnh sửa CSS của quản trị viên với đầy đủ tính năng
- Các chủ đề biên tập giao diện tối và sáng
- Trình chỉnh sửa CSS trong Customizer để bạn có thể xem trước các thay đổi của mình
- Metabox cho CSS trang bài viết cụ thể
Cài đặt và kích hoạt Simple CSS.
3. Advanced CSS Editor
Advanced CSS Editor là một plugin nhỏ cho phép bạn viết mã CSS khác nhau cho từng thiết bị máy tính để bàn, máy tính bảng và điện thoại di động ngay từ Live Customizer với kết quả theo thời gian thực trực tiếp dễ dàng sử dụng cho bất kỳ ai.
Tính năng của Advanced CSS Editor
- Có khả năng thêm CSS tùy chỉnh khác dựa trên các loại thiết bị
- Chỉnh sửa trực tiếp qua Appearance -> Customize
- Giảm thiểu CSS để tối ưu hóa trang web của bạn
- CSS tùy chỉnh cho điện thoại
- CSS tùy chỉnh cho máy tính bảng
- CSS Tuỳ chỉnh cho Máy tính để bàn
Cài đặt và kích hoạt Advanced CSS Editor.
4. Visual CSS Style Editor
Visual CSS Style Editor plugin cho phép bạn tùy chỉnh bất kỳ trang và chủ đề nào mà không cần phải mã hóa. Bạn chỉ cần nhấn vào một phần tử và tùy chỉnh nó một cách trực quan với những tính năng như điều chỉnh màu sắc, phông chữ, kích cỡ, vị trí và nhiều hơn nữa.
Visual CSS Style Editor cung cấp mọi thứ bạn cần để tùy chỉnh thiết kế trang web của mình. Plugin đi kèm với các tính năng tiên tiến như thay đổi kích thước hình ảnh, kéo và thả, công cụ đo lường, mẫu nền, phông chữ google…
Tính năng của Visual CSS Style Editor
- Tùy chỉnh bất kỳ bất kỳ phần tử nào
- Bộ chọn CSS tự động
- 50 thuộc tính CSS
- Kéo và thả trực quan
- Visual margin và sửa padding
- Thay đổi kích thước phần tử trực tiếp
- Chế độ xem trước trực tiếp
- Hoàn tác và làm lại nếu nhỡ tay
Cài đặt và sử dụng Visual CSS Style Editor.
Lời kết
Trên đây là 2 cách chỉnh sửa css trong wordpress bằng phương pháp chỉnh sửa trực tiếp và sử dụng những plugin tuyệt vời để chỉnh sửa css của bạn một cách đơn giản mà hiệu quả nhất, ngoài ra nếu bạn còn cách nào khác hãy cho tôi biết ở khung comment bên duwois nhé.
thank admin đã chia sẻ bài viết hướng dẫn
không có chi bạn!